/* MHFU game font (falls back to sans-serif for glyphs it lacks) */
@font-face{
  font-family:'MHFU';
  src:url('fonts/mhfu_font.ttf') format('truetype');
  font-display:swap;
}

/* Theme variables set at runtime from the chosen colour (see app.js). */
:root{
  --bg:#3e3e3e; --bg1:#000; --grid-bg:#141018; --content-bg:#0e0d11; --panel-bg:#141418;
  --bg2:#333; --nav-bg:#2b2b2b; --accent:#7a7a7a; --accent-hover:#9a9a9a;
  /* Toolbar controls — set per theme in app.js, at a pinned darkness so --text
     reads on them everywhere. These are the pre-theme defaults. */
  --control-bg:#141414; --control-bg-hover:#181818; --control-active:#0e0e0e;
  --text:#f3f3f3; --text-dim:#fff; --line:#ffffff1f;
  --positive:#7fdc7f; --negative:#f07070;
}

*{box-sizing:border-box;scrollbar-color:var(--accent) var(--bg2);scrollbar-width:thin}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}

html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:'MHFU',"Segoe UI",system-ui,sans-serif;font-size:14px;color:var(--text);
  background:var(--bg);-webkit-user-select:none;user-select:none;
}
input,select,button,textarea{font-family:inherit}
#app{display:flex;flex-direction:column;height:100vh}
.hidden{display:none !important}
kbd{
  background:#ffffff1a;border:1px solid var(--line);border-radius:3px;
  padding:0 4px;font-size:.85em;font-family:inherit
}

/* ── Title bar ───────────────────────────────────────────────────────── */
.titlebar{display:flex;align-items:center;gap:8px;padding:8px 14px;flex-shrink:0}
.titlebar-header{
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 90%,transparent),color-mix(in srgb,var(--accent) 90%,transparent)),
    url('assets/titlebar-background.png');
  background-size:auto 100%;background-position:left center;background-repeat:repeat;
}
.title-icon{width:30px;height:30px;object-fit:contain}
.titlebar h1{font-size:15px;font-weight:600;margin:0}
.progress-pill{
  margin-left:auto;background:rgba(0,0,0,.35);border:1px solid var(--line);
  border-radius:10px;padding:5px 12px;font-size:13px;white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.dirty-dot{color:#ffd24a;font-size:11px;vertical-align:middle}
.icon-btn{
  background:transparent;border:none;color:var(--text);font-size:18px;cursor:pointer;
  padding:6px 9px;border-radius:6px;line-height:1
}
.icon-btn:hover{background:#ffffff1a}

.btn{
  background:#ffffff14;color:var(--text);border:1px solid var(--line);border-radius:7px;
  padding:8px 14px;cursor:pointer;font-size:14px
}
.btn:hover{background:#ffffff24}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.danger{background:#6a2020;border-color:#8a3030}
.btn.danger:hover{background:#833030}
/* Save / Save As… / Open. Same --control-bg as the toolbar buttons, not --bg2:
   --bg2 is the lightest value in the scheme, so these came out lighter than the
   titlebar they sit on. */
.btn.tiny{
  padding:5px 10px;font-size:12px;
  background-image:
    linear-gradient(color-mix(in srgb,var(--control-bg) 88%,transparent),color-mix(in srgb,var(--control-bg) 88%,transparent)),
    url('assets/banner-background.png');
  background-position:right
}
.btn.tiny:hover{
  background-image:
    linear-gradient(color-mix(in srgb,var(--control-bg-hover) 88%,transparent),color-mix(in srgb,var(--control-bg-hover) 88%,transparent)),
    url('assets/banner-background.png')
}

/* ── Box toolbar ─────────────────────────────────────────────────────── */
/* Not banner-background.png: that texture carries a dark vertical band in its
   first ~20px, which lands right at the left edge of the toolbar. Offsetting it
   only moves the problem — the tile is 1316px wide once scaled to this height,
   so the band reappears mid-bar on a wide window. The sidebar texture is flat
   across its width instead. Left at natural size, too: scaling it to the bar's
   height would make a 306px tile into a 37px one and read as stripes. */
.box-nav{
  display:flex;flex-direction:column;gap:6px;padding:7px 14px;flex-shrink:0;
  border-bottom:1px solid var(--line);font-size:12px;
  /* --nav-bg is a step darker than --bg2, set per theme in app.js — see the note
     there. :root carries the pre-theme default. */
  background-color:var(--nav-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--nav-bg) 82%,transparent),color-mix(in srgb,var(--nav-bg) 82%,transparent)),
    url('assets/sidebar-background-texture1.png');
  background-size:auto;background-position:left center;background-repeat:repeat;
}
.box-nav-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.box-nav-sort{display:flex;align-items:center;gap:6px;margin-left:auto}
/* One row, never wrapping — Select Mode can add six buttons to it, so let it
   scroll sideways rather than push the grid down a line. */
.box-nav-actions{
  display:flex;gap:6px;flex-wrap:nowrap;align-items:center;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  margin:0 -14px -7px;padding:7px 14px;
  border-top:1px solid var(--line);
  background-color:var(--bg1);
  background-image:
    linear-gradient(color-mix(in srgb,var(--bg1) 55%,transparent),color-mix(in srgb,var(--bg1) 55%,transparent)),
    url('assets/panel-body-bg.png');
  background-size:auto,contain 100%;background-position:left center;background-repeat:repeat
}
.box-nav-actions > *{flex-shrink:0}
.box-nav-actions .move-hint{flex-wrap:nowrap;white-space:nowrap}
/* The standing buttons stay right-aligned whether or not Select Mode's hint is
   showing, so they never move under the pointer. margin-left:auto rather than
   justify-content:flex-end on the row: an auto margin collapses to zero once
   the content overflows, so the row still scrolls from its left edge instead of
   pushing the start of it out of reach. */
.box-nav-group{display:flex;gap:6px;align-items:center;margin-left:auto}

/* Fixed line-height: the MHFU font lacks some glyphs, and letting a fallback
   font set the line box made buttons containing one taller than their
   neighbours — an ellipsis was enough to push a button 3px out of line. */
/* --control-bg, not a white wash over the bar: these need to separate from
   --nav-bg on every theme while keeping one label colour, so they hold a fixed
   darkness and take only the theme's hue — see the note in app.js. The select
   and the box switch share it; the three used to be styled unrelatedly, the
   button on #ffffff14, the switch on #ffffff10 and the select on --bg2. */
.nav-btn{
  font-size:11px;line-height:16px;padding:3px 10px;background:var(--control-bg);
  border:1px solid var(--line);border-radius:4px;color:var(--text);cursor:pointer
}
.nav-btn:not(:disabled):hover{background:var(--control-bg-hover)}
.nav-btn:disabled{opacity:.4;cursor:default}
/* Selected reads by the underline, not by its fill. On the near black themes
   every fill lands within ~1.05:1 of the idle one, so a darker fill alone is
   invisible there; --accent-hover is light on every theme, so the bar always
   shows. */
.nav-btn.active{
  background:var(--control-active);border-color:var(--control-active);color:#fff;
  box-shadow:inset 0 -2px 0 var(--accent-hover)
}
.mini-select{
  background:var(--control-bg);color:var(--text);border:1px solid var(--line);border-radius:4px;
  padding:3px 6px;font-size:11px
}
.page-indicator{font-variant-numeric:tabular-nums;min-width:96px;text-align:center}

.box-switch{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.box-switch button{
  background:var(--control-bg);border:none;color:var(--text);font-size:12px;padding:4px 14px;cursor:pointer
}
.box-switch button.active{
  background:var(--control-active);color:#fff;font-weight:600;
  box-shadow:inset 0 -2px 0 var(--accent-hover)
}
.box-switch button:not(.active):hover{background:var(--control-bg-hover)}

.move-hint{display:flex;align-items:center;gap:6px;color:#8fd0ff;font-size:12px;flex-wrap:wrap}
.move-hint strong{color:#c8e8ff}

/* ── Box layout ──────────────────────────────────────────────────────── */
.box-layout{
  display:flex;flex:1;min-height:0;overflow:hidden;
  background-color:var(--content-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--content-bg) 84%,transparent),color-mix(in srgb,var(--content-bg) 84%,transparent)),
    url('assets/rockyTextureDark.png');
  background-repeat:repeat;background-size:auto,200px 200px;
}
/* `container-type:size` lets the grid below size itself against this box in
   both axes, so the largest square that fits falls out of one min() — no JS
   measuring of the chrome, and nothing to feed back on itself. */
.box-grid-area{
  flex:1 1 auto;min-width:0;min-height:0;container-type:size;
  display:flex;align-items:center;justify-content:center;
  padding:10px 12px;overflow:auto
}
/* Ten square cells across, so the grid is square overall: take the smaller of
   the container's width and its height, and the cells grow to fill it. */
.box-grid{
  display:grid;grid-template-columns:repeat(10,1fr);gap:3px;
  width:min(100%,100cqh);aspect-ratio:1;flex-shrink:0;
  align-content:start;user-select:none
}

/* ── Cells ───────────────────────────────────────────────────────────── */
/* The collection tracker's look: the cell body is the theme colour, and rarity
   is a translucent wash over it. Two overlays are needed rather than the
   editor's one, because there the transmog gradient replaces the rarity wash —
   here rarity has to survive underneath it. ::after is rarity, ::before is
   transmog, and both sit behind the icon (which carries z-index 1). */
.box-cell{
  position:relative;aspect-ratio:1;min-width:0;padding:4px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:5px;background:var(--grid-bg);
  cursor:pointer;overflow:hidden;
  /* Hover feedback only. Transitioning `background` would also animate the
     theme swatch across all 100 cells, which should be instant. */
  transition:border-color .12s,filter .12s
}
.box-cell::after,.box-cell::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0
}
.box-cell.filled::after{opacity:1}
.box-cell.empty{
  background:color-mix(in srgb,var(--grid-bg) 55%,#000);
  border-style:dashed;border-color:#ffffff14
}
.box-cell.empty:hover{border-color:var(--accent-hover);background:color-mix(in srgb,var(--grid-bg) 75%,#000)}
.box-cell.filled:hover{border-color:var(--accent-hover);filter:brightness(1.18)}
.box-cell.talisman{border-color:#6a5a30}
.box-cell.unknown{border-color:#a05050}

.box-cell .cell-icon{
  width:85%;height:85%;object-fit:contain;display:block;pointer-events:none;
  position:relative;z-index:1
}
.box-cell.empty .cell-slot{
  font-size:9px;color:#ffffff26;pointer-events:none;font-variant-numeric:tabular-nums
}

/* Rarity wash — the game's own box-cell tinting. */
.box-cell.rarity-1::after  { background:rgba(224,224,224,.42) }
.box-cell.rarity-2::after  { background:rgba(192,160,220,.42) }
.box-cell.rarity-3::after  { background:rgba(212,204,  0,.42) }
.box-cell.rarity-4::after  { background:rgba(216,112,144,.42) }
.box-cell.rarity-5::after  { background:rgba( 72,180, 72,.42) }
.box-cell.rarity-6::after  { background:rgba( 56,136,232,.42) }
.box-cell.rarity-7::after  { background:rgba(212, 56, 56,.42) }
.box-cell.rarity-8::after  { background:rgba( 32,184,184,.42) }
.box-cell.rarity-9::after  { background:rgba(232,128, 48,.42) }
.box-cell.rarity-10::after { background:rgba(255, 80,160,.42) }
.box-cell.rarity-11::after { background:rgba(204,  0,255,.42) }

.box-cell.filled.transmog{border-color:#0088ff}
.box-cell.transmog::before{
  opacity:1;
  background:linear-gradient(to bottom,rgba(0,60,200,.3) 0%,rgba(255,220,0,.3) 100%)
}

.box-cell[draggable="true"]{cursor:grab}
.box-cell.drag-source{opacity:.35;cursor:grabbing}
.box-cell.drag-over{
  border-color:#80c0ff !important;
  box-shadow:inset 0 0 0 2px #4a8acc;
  filter:brightness(1.3)
}

.box-cell.selected{border-color:#fff !important;box-shadow:inset 0 0 0 1px #fff}
.box-cell.cursor{outline:2px solid #aaaaff;outline-offset:-2px}
.box-cell.multi-selected{outline:2px solid #4c4;outline-offset:-2px}
.box-cell.cursor-selected{outline:2px solid #44dd44;outline-offset:-2px}
.box-cell.anchor{outline:2px solid #f80;outline-offset:-2px}
.box-cell.op-source{outline:2px dashed #6af;outline-offset:-2px}

/* Level moves to the top-right so the bottom edge belongs to the deco strip
   alone — they were overlapping when both wanted the bottom-right corner. */
.cell-lv{
  position:absolute;top:0;right:2px;z-index:2;font-size:9px;line-height:1.25;
  color:#e8e8f8;text-shadow:0 0 2px #000,0 0 3px #000;pointer-events:none;
  font-variant-numeric:tabular-nums
}
.cell-lv.max{color:#ffd24a;font-weight:700}

/* Decoration slots as a strip along the bottom edge: one segment per slot the
   piece has, lit for each one filled. A corner glyph can only count what is
   fitted — this shows capacity too, so an empty three-slot piece reads
   differently from one with no slots at all.
   Segment width is constant regardless of slot count (the bar grows instead),
   so bar length reads as capacity and one segment always means one slot. */
.cell-deco{
  position:absolute;left:4px;bottom:4px;height:4px;z-index:2;
  display:flex;gap:2px;pointer-events:none;
  width:calc((100% - 12px) / 3 * var(--slots,3) + (var(--slots,3) - 1) * 2px)
}
.cell-deco span{
  flex:1;border-radius:1px;background:rgba(255,255,255,.17);
  box-shadow:0 0 0 1px rgba(0,0,0,.45)
}
.cell-deco span.on{background:#7fd0ff}

/* ── Detail panel ────────────────────────────────────────────────────── */
.box-detail-panel{
  flex:0 0 350px;width:350px;overflow-y:auto;border-left:1px solid var(--line);
  background-color:var(--panel-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--panel-bg) 90%,transparent),color-mix(in srgb,var(--panel-bg) 90%,transparent)),
    url('assets/rockyTextureDark2.png');
  background-repeat:repeat;background-size:auto,200px 200px;
  padding:16px 16px 24px
}
.detail-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;opacity:.5;text-align:center;margin-top:60px;font-size:12px
}
.detail-hint{font-size:11px;opacity:.7}
.detail-icon-wrap{
  width:64px;height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:#1c1c24;border:1px solid #3a3a50;margin:0 auto 8px;overflow:hidden
}
.detail-icon-wrap img{width:80%;height:80%;object-fit:contain}
.detail-type{
  font-size:11px;color:#8a8a9a;text-transform:uppercase;letter-spacing:.06em;text-align:center
}
.detail-name{
  font-size:19px;font-weight:700;text-align:center;line-height:1.25;
  word-break:break-word;margin:2px 0 4px
}
/* Gender restriction, matching the collection tracker. Unrestricted armor gets
   nothing — a pill on most of the catalogue would be noise. */
.gender-pill{
  display:inline-block;vertical-align:middle;margin-left:6px;
  padding:1px 7px;border-radius:9px;
  font-size:10px;line-height:1.5;font-weight:600;letter-spacing:.02em;white-space:nowrap
}
.gender-pill.g0{background:#12365e;color:#8fc6ff;border:1px solid #2b6096}
.gender-pill.g1{background:#5a1830;color:#ff9ec0;border:1px solid #94304f}
.detail-name-card .gender-pill{font-size:9px;padding:0 6px;margin-left:4px}

.detail-names-row{display:flex;align-items:stretch;gap:6px;margin:4px 0}
.detail-name-card{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
  background:#1a1a24;border:1px solid #2e2e42;border-radius:6px;padding:7px 6px
}
.detail-name-card-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#6a6a7a}
.detail-name-card .detail-name{font-size:14px;margin:0}
.detail-name-card.transmog-card{border-color:#0055aa}
.detail-name-card.transmog-card .detail-name-card-label{color:#44aaff}
.detail-name-card.transmog-card .detail-name{color:#8fd0ff}
.detail-name-card-arrow{align-self:center;color:#555;font-size:16px;flex-shrink:0}

.detail-actions{display:flex;gap:6px;margin:12px 0 4px}
.detail-actions .btn{flex:1;padding:7px 8px;font-size:13px;text-align:center}
.detail-section-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin:14px 0 6px
}
.stat-row{
  display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13px;
  border-bottom:1px solid #ffffff0d
}
.stat-row .k{opacity:.7;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-row .v{font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0}
.stat-row .v.pos{color:var(--positive)}
.stat-row .v.neg{color:var(--negative)}
.deco-from{color:#8a8a9a;font-size:.85em}
.detail-note{opacity:.55;font-size:12px;font-style:italic}
.rarity-badge{padding:2px 8px;border-radius:3px;font-weight:700}
.rarity-badge.rarity-1 {background:#2a2a2e;color:#e0e0e0}
.rarity-badge.rarity-2 {background:#221e30;color:#c0a0dc}
.rarity-badge.rarity-3 {background:#282600;color:#d4cc00}
.rarity-badge.rarity-4 {background:#281018;color:#d87090}
.rarity-badge.rarity-5 {background:#101e10;color:#48b448}
.rarity-badge.rarity-6 {background:#0c1630;color:#3888e8}
.rarity-badge.rarity-7 {background:#260808;color:#d43838}
.rarity-badge.rarity-8 {background:#041e1e;color:#20b8b8}
.rarity-badge.rarity-9 {background:#281408;color:#e88030}
.rarity-badge.rarity-10{background:#280a1c;color:#ff50a0}
.rarity-badge.rarity-11{background:#160030;color:#cc00ff}

/* ── Modals ──────────────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;background:#000000a8;display:flex;align-items:center;
  justify-content:center;z-index:20;padding:20px
}
.modal-card{
  position:relative;border:1px solid var(--line);border-radius:12px;padding:22px;
  width:min(460px,92vw);max-height:88vh;overflow-y:auto;
  background-color:var(--bg2);
  background-image:
    linear-gradient(color-mix(in srgb,var(--bg2) 84%,transparent),color-mix(in srgb,var(--bg2) 84%,transparent)),
    url('assets/rockyTextureDark2.png');
  background-repeat:repeat;background-size:auto,200px 200px
}
.modal-card.wide{width:min(600px,92vw)}
.modal-card h2{margin:0 0 14px;font-size:18px}
.modal-card p{margin:0 0 10px;line-height:1.45}
.modal-card a{color:color-mix(in srgb, hsl(from var(--accent) calc(h + 180) 75% 60%) 50%, var(--text))}
.modal-card .muted{color:var(--text-dim);font-size:13px;opacity:.75}
.row{display:flex;align-items:center}
.row.gap{gap:8px}
.row.end{justify-content:flex-end}
.modal-actions{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.modal-leave-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.9);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;border-radius:12px;z-index:10;
  padding:24px;text-align:center
}
.modal-leave-overlay p{margin:0;font-size:.95em}
.modal-lost-list{
  margin:0;padding:0;list-style:none;font-size:.9em;color:#e8b888;text-align:left
}

/* Slot editor */
.edit-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.edit-field > label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.7}
.edit-field select,.edit-field input[type=number],.edit-field input[type=text]{
  background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:6px;
  padding:6px 8px;font-size:13px;width:100%
}
.edit-field input:disabled{opacity:.45}
fieldset.edit-group{
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 12px;
  background:#00000024
}
fieldset.edit-group legend{
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.75;padding:0 5px
}
fieldset.edit-group.transmog{border-color:#0055aa}
fieldset.edit-group.transmog legend{color:#44aaff;opacity:1}
.edit-hint{font-size:11px;opacity:.6;line-height:1.5;margin:2px 0 8px}
.slots-used{font-size:11px;opacity:.75;margin-top:2px;font-variant-numeric:tabular-nums}
.slots-used.over{color:var(--negative);opacity:1}

/* Kinsects */
.ks-locked{
  font-size:13px;color:#c8c8e0;background:#00000030;border:1px solid var(--line);
  border-radius:6px;padding:6px 9px
}
.ks-level-row{
  display:flex;justify-content:space-between;align-items:baseline;font-size:12px;
  opacity:.85;margin-bottom:2px
}
.ks-level-row strong{font-size:15px;font-variant-numeric:tabular-nums}
.kinsect-radar{display:block;width:170px;max-width:100%;margin:0 auto}
.ks-stat-grid{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.ks-stat-row{display:grid;grid-template-columns:1fr 68px 44px;gap:8px;align-items:center}
.ks-stat-name{font-size:12px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ks-stat-row input{
  background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:5px;
  padding:3px 6px;font-size:12px;width:100%;font-variant-numeric:tabular-nums
}
.ks-stat-val{
  font-size:12px;opacity:.7;text-align:right;font-variant-numeric:tabular-nums
}
.ks-name{font-size:15px;font-weight:600;text-align:center;margin:2px 0}
.ks-type{opacity:.6;font-weight:400;font-size:12px}
.ks-elements{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:2px 0 6px}
.ks-el{font-size:12px;font-weight:600}

/* Typeahead */
.name-search{position:relative}
.name-search input{
  background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:6px;
  padding:6px 8px;font-size:13px;width:100%
}
.name-search-list{
  position:absolute;top:100%;left:0;right:0;z-index:5;margin:2px 0 0;padding:0;
  list-style:none;max-height:210px;overflow-y:auto;
  background:#1b1b22;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.55)
}
.name-search-list li{padding:5px 9px;font-size:12.5px;cursor:pointer}
.name-search-list li:hover,.name-search-list li.active{background:var(--accent-hover);color:#fff}
.name-search-list li.ns-overflow{opacity:.55;font-style:italic;cursor:default}
.name-search-list li.ns-overflow:hover{background:transparent;color:inherit}

/* Controls */
.help-list{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 16px;
  align-items:baseline;font-size:13px
}
.help-list dt{white-space:nowrap;opacity:.9}
.help-list dd{margin:0;opacity:.75;line-height:1.4}

/* Settings */
.set-section{margin-bottom:18px}
.set-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin-bottom:8px}
.set-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.set-label{flex:1;font-size:13px;display:flex;flex-direction:column;gap:2px}
.set-hint{font-size:11px;opacity:.6;line-height:1.4}
.toggle{
  flex-shrink:0;width:38px;height:21px;padding:0;margin-top:1px;position:relative;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;background:#ffffff14;
  transition:background .18s,border-color .18s
}
.toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#b9b9b9;transition:transform .18s,background .18s
}
.toggle[aria-checked="true"]{background:var(--accent-hover);border-color:var(--accent-hover)}
.toggle[aria-checked="true"]::after{transform:translateX(17px);background:#fff}
.toggle:hover{filter:brightness(1.15)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px}
.swatch{aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden}
.swatch.sel{border-color:#fff}
.swatch-icon{position:absolute;top:7%;left:50%;transform:translateX(-50%);width:60%;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.swatch span{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;line-height:1.6;color:#fff;background:rgba(0,0,0,.45)}


/* ── Banners ─────────────────────────────────────────────────────────── */
.restore-banner,.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:13px;box-shadow:0 4px 20px rgba(0,0,0,.5)
}
.restore-banner{z-index:30;display:flex;align-items:center;gap:10px}
.toast{z-index:40;background:#222}

@media (max-width:900px){
  .box-layout{flex-direction:column;overflow-y:auto}
  .box-grid-area{overflow:visible;padding:10px}
  .box-grid{max-width:100%}
  .box-detail-panel{flex:none;width:auto;border-left:none;border-top:1px solid var(--line)}
  .box-nav-sort{margin-left:0}
}

/* Other MHGU apps modal */
.app-links{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.app-links li{border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:#ffffff08}
.app-links li.current{opacity:.72}
.app-links a,.app-name{font-weight:600;font-size:14px}
.app-here{font-weight:400;font-size:11px;opacity:.7;border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-left:7px}
.app-desc{display:block;margin-top:3px;font-size:12px;opacity:.8;line-height:1.4}