.character-level-panel{position:fixed;z-index:6;display:flex;flex-direction:column;padding:9px;background:#19231e;box-shadow:0 12px 35px #0008;overflow:hidden;box-sizing:border-box;color:#e2cda5;font-family:var(--ng-body)}
.character-level-panel[hidden]{display:none}
.level-panel-head{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;margin-bottom:9px;padding:8px 5px;background:#412719}
.level-panel-head>.ng-art{width:20px;height:20px;flex:none}
.level-panel-head h3{margin:0;font:400 19px/1 var(--ng-title);color:#f0d4a3}
.level-panel-paper{padding:13px 11px;min-height:0;overflow-y:auto;color:#44311c;background:#d8b783}
.level-eyebrow{display:block;font:500 9px/1.3 var(--ng-body);letter-spacing:.6px;color:#765a38}
.level-summary{text-align:center}
.level-number{display:flex;justify-content:center;align-items:baseline;gap:5px;margin:7px 0 9px;color:#3c513d}
.level-number strong{font:400 55px/.95 var(--ng-title)}
.level-number>span{font-size:15px;color:#7e623f}
.level-next{margin:0 0 8px;font-size:12px;line-height:1.35}
.level-next>b{white-space:nowrap}
.level-progress{height:9px;background:#765d3933;border:1px solid #8c73474d;overflow:hidden}
.level-progress i{display:block;height:100%;background:#53775d}
.level-total{margin:7px 0 14px;font-size:11px;line-height:1.4;color:#765a38}
.level-total>b{display:block;color:#44311c}
.level-ladder ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:0;margin:8px 0 0;list-style:none}
.level-ladder li{display:flex;align-items:baseline;justify-content:space-between;gap:4px;padding:5px;background:#74532310;border:1px solid #977a4433;color:#8a704c;font-size:11px}
.level-ladder li>b{font-size:13px;color:#76562e}
.level-ladder li.reached{background:#53775d14;color:#4a6347}
.level-ladder li.current{background:#375b47;border-color:#375b47;color:#f4e4bf}
.level-ladder li.current>b{color:#fff0cb}
.level-note{font-size:11px;line-height:1.4;margin:12px 0 0;color:#765a38}
.character-level-panel.level-inline{position:relative;inset:auto;width:100%;max-height:none;margin:0 0 12px;padding:8px;box-shadow:none;flex:none}
.level-inline .level-panel-paper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;padding:12px}
.level-inline .level-note{grid-column:1/-1;margin:0}
.level-inline .level-total{margin-bottom:0}
.level-inline .level-ladder ol{margin-top:6px;gap:3px}
.level-inline .level-ladder li{padding:3px 5px}
@media(max-height:650px){.character-level-panel:not(.level-inline) .level-panel-paper{padding:10px}.character-level-panel:not(.level-inline) .level-number strong{font-size:46px}.character-level-panel:not(.level-inline) .level-ladder li{padding:3px 5px}}

/* Narrow layouts keep the level visible without displacing the gear viewport. */
.character-level-panel.level-inline{grid-column:1/-1}
.character-level-panel .level-panel-paper .level-next{color:#44311c}
.character-level-panel .level-panel-paper .level-total,.character-level-panel .level-panel-paper .level-note{color:#765a38}
.level-inline .level-panel-head,.level-inline .level-ladder,.level-inline .level-note{display:none}
.level-inline .level-panel-paper{display:block;padding:10px 12px}
.level-inline .level-summary{display:grid;grid-template-columns:64px minmax(0,1fr);gap:3px 10px;text-align:left;align-items:center}
.level-inline .level-eyebrow{grid-column:1/-1}
.level-inline .level-number{grid-column:1;grid-row:2/5;margin:0;justify-content:start}
.level-inline .level-number strong{font-size:42px}
.level-inline .level-next{grid-column:2;grid-row:2;margin:0;font-size:13px!important;line-height:1.3!important}
.level-inline .level-progress{grid-column:2;grid-row:3}
.level-inline .level-total{grid-column:2;grid-row:4;margin:0;font-size:11px!important;line-height:1.3!important}
.level-inline .level-total>b{display:inline}