/* FFXIV BIS Gear Searcher - responsiv, dunkles Theme. */
:root {
  --bg: #14161b;
  --bg-card: #1d2027;
  --bg-soft: #23262f;
  --fg: #e6e8ec;
  --fg-dim: #9aa0ac;
  --accent: #6ea8fe;
  --border: #2a2e37;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 15px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--fg-dim); }

/* Header + Filterleiste: zusammen oben fixiert */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.app-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.app-header h1 { font-size: 1.1rem; margin: 0; white-space: nowrap; }
.tabs { display: flex; gap: .4rem; flex: 1; }
.tabs button, .lang-toggle button {
  background: var(--bg-soft); color: var(--fg-dim);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .3rem .7rem; cursor: pointer; font-size: .9rem;
}
.tabs button.active { color: var(--fg); border-color: var(--accent); background: #25304a; }
.lang-toggle { display: flex; gap: .3rem; }
.lang-toggle button.active { color: var(--fg); border-color: var(--accent); }

/* Account-Control (Login/Logout) */
.account { display: flex; gap: .4rem; align-items: center; }
.account .acct-name { color: var(--fg); font-size: .9rem; font-weight: 500; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.account .acct-discord { color: #5865F2; flex: 0 0 auto; }
.account .acct-icon { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .4rem; }
.account .acct-btn {
  background: var(--bg-soft); color: var(--fg-dim); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px;
  padding: .3rem .7rem; cursor: pointer; font-size: .9rem; line-height: 1.4;
}
.account .acct-btn:hover { color: var(--fg); border-color: var(--accent); }

/* ===== Dashboard shell (left sidebar + content) ===== */
.app-shell { display: flex; width: 100%; min-height: 100vh; }
.sidebar {
  width: 220px; flex: 0 0 220px; background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { padding: 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.brand-logo { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; display: block; }
.sidebar-brand h1 { font-size: 1.1rem; margin: 0; white-space: nowrap; flex: 1; }
.pin-btn {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; font-size: 1rem; padding: .2rem .35rem; opacity: .55; filter: grayscale(1);
}
.pin-btn:hover { background: var(--bg-soft); }
.pin-btn[aria-pressed="true"] { opacity: 1; filter: none; border-color: var(--accent); }
.nav { display: flex; flex-direction: column; gap: .2rem; padding: .6rem; flex: 1; overflow-y: auto; }
/* Ein <a>, kein <button>: Navigation muss Strg/⌘-Klick und Mittelklick koennen. */
.nav-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  background: transparent; color: var(--fg-dim); border: 1px solid transparent;
  border-radius: 8px; padding: .5rem .7rem; cursor: pointer; font-size: .95rem;
  text-decoration: none; box-sizing: border-box;
}
.nav-item:hover { background: var(--bg-soft); color: var(--fg); }
.nav-item.active { background: #25304a; color: var(--fg); border-color: var(--accent); }
.nav-ico { width: 1.3rem; text-align: center; }
/* Section header inside the nav: small muted caption with a hairline above. */
.nav-sec {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: .7rem .55rem .2rem; margin-top: .25rem; border-top: 1px solid var(--border);
}
.nav-sec:first-child { border-top: 0; margin-top: 0; }
.sidebar-foot { padding: .6rem; border-top: 1px solid var(--border); }

/* Global active-character switcher (shell, top-right). Shared app-wide. */
.char-switcher { max-width: 13rem; }
.char-switcher[hidden] { display: none; }
.cs-inner { display: flex; align-items: center; gap: .4rem; }
.cs-ico { flex: 0 0 auto; font-size: 1rem; opacity: .8; }
.cs-name { color: var(--fg); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The "Active character" caption is for screen readers; the select shows the names. */
.cs-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-select {
  flex: 1; min-width: 0; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; font-size: .88rem; cursor: pointer;
}
.cs-select:hover, .cs-select:focus { border-color: var(--accent); outline: none; }

.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content-head {
  display: flex; align-items: center; gap: .6rem; position: sticky; top: 0; z-index: 20;
  padding: .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg); flex-wrap: wrap;
}
.content-head .spacer { flex: 1; }
.content-head .account, .content-head .notif { flex: 0 0 auto; }
/* The sidebar (burger) copy of the character switcher is desktop-hidden; it only
   appears on small screens where the header switcher is dropped (see below). */
.char-switcher-nav { display: none; max-width: none; }
/* Tight screens: keep the bell + logout + language, drop the wordier bits. The
   character switcher moves into the burger menu so it stays reachable. */
@media (max-width: 680px) {
  .content-head .char-switcher { display: none; }
  .content-head .acct-name { max-width: 7rem; }
  .char-switcher-nav { display: block; margin: .2rem .6rem .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
  .char-switcher-nav[hidden] { display: none; }
}
.view-title { font-size: 1.05rem; font-weight: 600; }
#sidebar-toggle { display: none; }
.scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; }
.filter-bar[hidden] { display: none; }

/* Unpinned (desktop): sidebar becomes a collapsible overlay driven by the burger. */
.app-shell.nav-unpinned .sidebar {
  position: fixed; left: 0; top: 0; height: 100vh; z-index: 40;
  transform: translateX(-100%); transition: transform .2s ease;
}
.app-shell.nav-unpinned.nav-open .sidebar { transform: translateX(0); }
.app-shell.nav-unpinned #sidebar-toggle { display: inline-flex; }
.app-shell.nav-unpinned.nav-open .scrim { display: block; }

/* ===== Dashboard widgets ===== */
.dash { padding: 1rem; }
.dash-bar { display: flex; justify-content: flex-end; gap: .4rem; margin-bottom: .8rem; }
/* Weekly checklist. */
/* Weekly checklist — card-based layout. */
.wk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wk-head h2 { margin: 0; }
.wk-sub { margin: .15rem 0 0; }
.wk-progress { text-align: right; flex: 0 0 auto; line-height: 1.1; }
.wk-progress-n { font-size: 1.6rem; font-weight: 700; }
.wk-progress-n .muted { font-size: 1rem; font-weight: 400; }
.wk-progress > span:last-child { display: block; }

/* Config: pill toggles (the native checkbox is visually hidden). */
.wk-hint { margin: .5rem 0 0; }
.wk-config { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 1rem; }
.wk-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--border);
  border-radius: 999px; font-size: .82rem; cursor: pointer; color: var(--fg-dim); background: var(--bg); user-select: none; transition: all .12s ease; }
.wk-pill:hover { border-color: var(--fg-dim); }
.wk-pill.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--fg); }
.wk-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.wk-pill-ico { font-size: .95rem; }

/* Card grid. */
.wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; align-items: start; }
.wk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.wk-card-off { opacity: .6; }
.wk-savage { grid-column: span 2; }
@media (max-width: 720px) { .wk-savage { grid-column: auto; } }
.wk-card-h { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border-bottom: 1px solid var(--border); }
.wk-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; flex: 0 0 auto;
  border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 1.05rem; }
.wk-card-title { font-weight: 600; }
.wk-card-meta { margin-left: auto; }
.wk-badge { font-size: .8rem; font-weight: 600; color: var(--fg-dim); background: var(--bg-soft); border-radius: 999px; padding: .12rem .55rem; }
.wk-badge.done { color: #1b1e24; background: var(--accent); }
.wk-card-b { padding: .7rem .85rem; }

/* Tomestone card. */
.wk-tome { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.wk-tome input { width: 5rem; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: 1rem; }
.wk-bar { display: block; height: .55rem; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.wk-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .2s ease; }
.wk-foot { margin: .5rem 0 0; }

/* Savage floors — aligned grid rows: checkbox · floor · chips. */
.wk-floors { display: flex; flex-direction: column; gap: .2rem; }
.wk-floor { display: grid; grid-template-columns: 1.2rem 4.6rem 1fr; align-items: start; gap: .5rem; padding: .4rem .3rem; border-radius: 8px; cursor: pointer; }
.wk-floor:hover { background: var(--bg-soft); }
.wk-floor input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.wk-floor-n { font-weight: 600; white-space: nowrap; }
.wk-floor-needs { display: flex; flex-wrap: wrap; gap: .3rem; }
.wk-chip { display: inline-flex; gap: .25rem; align-items: baseline; font-size: .76rem; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 999px; padding: .08rem .5rem; white-space: nowrap; }

/* Simple item rows (alliance / normal / unreal / custom / wondrous). */
.wk-item { display: flex; align-items: center; gap: .55rem; padding: .45rem .3rem; border-radius: 8px; cursor: pointer; }
.wk-item:hover { background: var(--bg-soft); }
.wk-item + .wk-item { border-top: 1px solid var(--border); }
.wk-item input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.wk-item-ico { font-size: 1rem; }
.wk-item-name { font-weight: 500; }
.wk-item-hint { margin-left: auto; text-align: right; }
.wk-row-done { opacity: .5; }
/* First-run onboarding card (new accounts, dismissible). */
.onboard { position: relative; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.onboard-title { margin: 0 0 .3rem; font-size: 1.15rem; }
.onboard-body { margin: 0 0 .7rem; color: var(--fg-dim); line-height: 1.5; max-width: 60ch; }
.onboard-cta { display: flex; gap: .5rem; flex-wrap: wrap; }
.onboard-x { position: absolute; top: .4rem; right: .5rem; background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: .2rem; }
.onboard-x:hover { color: var(--fg); }
/* Logged-out landing page (guide / pitch). */
.landing { max-width: 900px; margin: 0 auto; padding: 1rem 1rem 2.5rem; }
.landing-hero { text-align: center; padding: 1.5rem 0 .5rem; }
.landing-name { font-size: 2rem; margin: 0 0 .3rem; }
.landing-pitch { font-size: 1.15rem; font-weight: 600; margin: 0 0 .5rem; }
.landing-sub { color: var(--fg-dim); max-width: 640px; margin: 0 auto 1rem; line-height: 1.55; }
.landing-cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.landing-trust { color: var(--fg-dim); font-size: .85rem; margin: .4rem 0 0; }
.landing-browse-wrap { margin: .6rem 0 0; }
.landing-browse { font-size: .9rem; }
.landing-section { margin: 1.8rem 0; }
.landing-section > h2 { font-size: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: .3rem; margin-bottom: .8rem; }
.landing-what { line-height: 1.6; max-width: 760px; }
.landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.feature-card { display: flex; gap: .7rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: .8rem .9rem; }
.feature-ico { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.feature-card h3 { margin: 0 0 .25rem; font-size: 1rem; }
.feature-card p { margin: 0; color: var(--fg-dim); font-size: .88rem; line-height: 1.45; }
.landing-why, .landing-steps { line-height: 1.7; padding-left: 1.3rem; margin: 0; }
/* Screenshot gallery: framed tiles via background-image. A missing image just shows the muted
   frame + caption (no broken-image icon); drop PNGs in assets/img/screens/ to fill them. */
.landing-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.shot { position: relative; aspect-ratio: 16 / 10; margin: 0; background: var(--bg-soft) center/cover no-repeat; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; cursor: zoom-in; }
.shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shot-cap { width: 100%; padding: .45rem .55rem; font-size: .8rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events: none; }
/* Full-size screenshot overlay (lightbox). */
.shot-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
.shot-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 96vw; max-height: 96vh; cursor: default; }
.shot-lb-fig img { max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 50px rgba(0,0,0,.6); }
.shot-lb-fig figcaption { color: #ddd; font-size: .9rem; text-align: center; }
.shot-lb-close { position: fixed; top: .8rem; right: 1.1rem; background: none; border: none; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.shot-lb-close:hover { color: var(--accent); }
.shot-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 2rem; line-height: 1; width: 2.6rem; height: 3.2rem; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.shot-lb-nav:hover { background: rgba(0,0,0,.7); border-color: var(--accent); }
.shot-lb-prev { left: 1rem; }
.shot-lb-next { right: 1rem; }
.btn-ghost { background: transparent; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; align-items: stretch; }
/* Each cell stretches to its row height (grid default); the widget fills the cell so
   all widgets in a row are the same height even when one needs more space. */
.dash-cell { position: relative; display: flex; flex-direction: column; min-width: 0; }
.dash-cell > .widget { flex: 1 1 auto; }
.dash-grid.editing .widget { border-style: dashed; }
/* Edit mode: the whole cell is draggable to reorder (no more up/down buttons). */
.dash-cell-edit { cursor: grab; }
.dash-cell-edit:active { cursor: grabbing; }
.dash-cell.dash-dragging { opacity: .45; }
.dash-cell.dash-drop-target > .widget { outline: 2px dashed var(--accent); outline-offset: 3px; }
.dash-grip { font-size: 1rem; line-height: 1; opacity: .6; cursor: grab; user-select: none; padding: 0 .1rem; }
.dash-edit { position: absolute; top: .4rem; right: .4rem; display: flex; align-items: center; gap: .2rem; z-index: 2; }
.dash-edit-btn {
  width: 1.6rem; height: 1.6rem; line-height: 1; padding: 0; cursor: pointer;
  background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; font-size: .9rem;
}
.dash-edit-btn:hover:not(:disabled) { border-color: var(--accent); }
.dash-edit-btn:disabled { opacity: .35; cursor: default; }
.dash-edit-hide:hover { border-color: #c0506a; color: #e07a90; }
.dash-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem;
  padding-top: .8rem; border-top: 1px dashed var(--border); }
.widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.widget-title { margin: 0 0 .6rem; font-size: 1rem; }
.widget-body { color: var(--fg); font-size: .92rem; }
.widget-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.btn {
  display: inline-block; background: var(--bg-soft); color: var(--fg); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px; padding: .4rem .8rem; cursor: pointer; font-size: .9rem;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn-accent { border-color: var(--accent); background: #25304a; }
.badge-soon { display: inline-block; margin-top: .4rem; font-size: .75rem; color: var(--fg-dim);
  border: 1px dashed var(--border); border-radius: 6px; padding: .1rem .5rem; }
.dash-gear-head { margin: 0 0 .4rem; }
.dash-gear-head strong { font-size: 1.3rem; color: var(--accent); }
.dash-gap-label { margin: .3rem 0 .2rem; font-size: .8rem; }
.dash-gaps { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.dash-gaps li { display: flex; justify-content: space-between; gap: .5rem; font-size: .88rem; }
.dash-gap-job { cursor: pointer; }
.dash-gap-job:hover { color: var(--accent); text-decoration: underline; }
.dash-gap-score { color: #e0a44a; font-variant-numeric: tabular-nums; }
/* Upcoming-events widget: one row per event, clickable into the team's schedule. */
.dash-evs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.dash-ev { display: flex; flex-direction: column; gap: .05rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: inherit; background: var(--bg-soft); }
.dash-ev:hover { border-color: var(--accent); }
.dash-ev-date { color: var(--accent); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-ev-title { font-size: .92rem; }
.dash-ev-team { color: var(--muted); font-size: .78rem; }
.stat-row { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; }
.stat-num { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.stat-lbl { color: var(--fg-dim); font-size: .85rem; }

/* ===== My Gear vs BiS ===== */
.gi-char { margin: 0 0 .8rem; font-weight: 600; }
.gi-char .muted { font-weight: 400; }
.gi-charhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.gi-charhead .gi-char { margin: 0; }
.gi-charpick { display: inline-flex; align-items: center; gap: .5rem; }
.gi-charactions { display: inline-flex; gap: .4rem; }
.gi-ed-melds { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; flex: 1 1 100%; margin: .15rem 0 .2rem 6.6rem; }
.gi-ed-meld { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--fg-dim);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: .05rem .35rem; }
.gi-ed-meldx { background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: .7rem; padding: 0; }
.gi-ed-meldx:hover { color: #e07a90; }
.gi-ed-mat { background: var(--bg-soft); color: var(--fg-dim); border: 1px dashed var(--border); border-radius: 4px; font-size: .75rem; padding: .05rem .3rem; }
.gi-ed-matbtn { cursor: pointer; }
.gi-ed-matwrap { position: relative; display: inline-block; }
.gi-ed-matpanel { min-width: 16rem; }
.gi-ed-tplwrap { display: flex; flex-direction: column; gap: .15rem; }
.gi-ed-tplcombo { position: relative; display: block; min-width: 16rem; }
.gi-ed-row { flex-wrap: wrap; }
.gi-iconbtn { background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: .9rem; padding: 0 .15rem; }
.gi-iconbtn:hover { color: var(--accent); }

/* Manual gearset editor + character create */
.gi-editor { max-width: 640px; }
.gi-ed-title { margin: 0 0 .5rem; font-size: 1.1rem; }
.gi-ed-warn { background: #3a2e1a; border: 1px solid #5a4f2a; color: #e0c878; border-radius: 6px; padding: .4rem .6rem; font-size: .85rem; margin: 0 0 .6rem; }
.gi-ed-form { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: .8rem; }
.gi-ed-form label, .gi-cc-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--fg-dim); }
.gi-ed-form input, .gi-ed-form select, .gi-cc-form input,
.gi-ed-pick { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; font-size: .9rem; }
.gi-ed-slots { display: flex; flex-direction: column; gap: .3rem; }
.gi-ed-row { display: flex; align-items: center; gap: .6rem; }
.gi-ed-slot { flex: 0 0 6rem; color: var(--fg-dim); font-size: .85rem; }
.gi-ed-pick { flex: 1 1 auto; min-width: 0; }
.gi-ed-actions { display: flex; gap: .5rem; margin-top: .9rem; }

/* Searchable per-slot item picker (mirrors the comparison-target combo picker). */
.gi-ed-pickwrap { position: relative; flex: 1 1 auto; min-width: 0; }
.gi-ed-pickbtn { width: 100%; }
.gi-ed-pickbtn.empty .gi-combo-label { color: var(--fg-dim); }
.gi-cat-chip.on { border-color: var(--accent); color: var(--fg); opacity: 1; text-decoration: none; }
.gi-ed-filters { display: flex; flex-direction: column; gap: .3rem; margin: .1rem 0 .4rem; }
.gi-ed-frow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gi-ed-frow-num { gap: .8rem; }
.gi-ed-flabel { color: var(--fg-dim); font-size: .78rem; flex: 0 0 auto; }
.gi-ed-ilvlmin { width: 4.5rem; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .15rem .35rem; font-size: .82rem; }
.gi-ed-lvlsel { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .15rem .35rem; font-size: .82rem; }
.gi-ed-lvlsel:hover, .gi-ed-lvlsel:focus { border-color: var(--accent); outline: none; }
.gi-charcreate { max-width: 460px; }
.gi-cc-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; align-items: flex-start; }
.gi-filter { display: inline-flex; gap: 0; margin: 0 0 .9rem; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.gi-fbtn { background: var(--bg-soft); color: var(--fg-dim); border: none; border-left: 1px solid var(--border);
  padding: .3rem .7rem; font-size: .85rem; cursor: pointer; }
.gi-fbtn:first-child { border-left: none; }
.gi-fbtn:hover { color: var(--fg); }
.gi-fbtn.active { background: #25304a; color: var(--fg); }
.gi-fcount { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.gi-fbtn.active .gi-fcount { color: var(--accent); }
/* Two cards per row on wide screens; collapses to one when narrow (responsive). */
.gi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 1rem; align-items: start; }
.gearset-card { padding: 0; overflow: hidden; }

/* Header row: collapse · title · avg-ilvl · score · hide */
.gi-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem;
  border-bottom: 1px solid var(--border); }
.gi-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-collapse, .gi-hide { background: none; border: 0; color: var(--fg-dim); cursor: pointer;
  font-size: .9rem; line-height: 1; padding: .2rem; border-radius: 4px; flex: 0 0 auto; }
.gi-collapse:hover, .gi-hide:hover { color: var(--fg); background: var(--bg-soft); }
.gi-avg { font-size: .72rem; color: var(--fg-dim); border: 1px solid var(--border);
  border-radius: 6px; padding: .1rem .4rem; white-space: nowrap; flex: 0 0 auto; }
.gi-score { font-size: .75rem; font-weight: 600; color: var(--fg-dim);
  border: 1px solid var(--border); border-radius: 6px; padding: .1rem .45rem; white-space: nowrap; flex: 0 0 auto; }
.gi-score-full { color: #5bd66e; border-color: #2f6b38; }
.gi-score-warn { color: #e0a44a; border-color: #6b5224; cursor: help; }
.gi-score-none { font-weight: 400; }
.gearset-card.is-collapsed .gi-body { display: none; }

.gi-body { padding: .5rem .7rem .7rem; }

/* Comparison-target picker (searchable combobox) */
.gi-targetrow { display: flex; align-items: center; gap: .4rem; font-size: .8rem;
  color: var(--fg-dim); margin-bottom: .55rem; position: relative; }
.gi-target-lbl { flex: 0 0 auto; }
.gi-combo-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: .3rem;
  background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .25rem .5rem; cursor: pointer; font-size: .82rem; }
.gi-combo-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.gi-caret { color: var(--fg-dim); flex: 0 0 auto; }
.gi-combo-btn .gi-opt-dps { flex: 0 0 auto; }
.gi-target-link { flex: 0 0 auto; color: var(--fg-dim); text-decoration: none; font-size: .85rem; padding: 0 .15rem; }
.gi-target-link:hover { color: var(--accent); }
.gi-combo-searchwrap { position: relative; margin-bottom: .25rem; }
.gi-combo-clear { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--fg-dim); cursor: pointer; font-size: .8rem; line-height: 1; padding: .15rem; }
.gi-combo-clear:hover { color: var(--fg); }
.gi-opt-meta { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.gi-opt-dps { font-size: .7rem; color: var(--accent); white-space: nowrap; }
.gi-combo-panel { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: .25rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: .4rem; }
.gi-combo-search { width: 100%; box-sizing: border-box; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .3rem 1.7rem .3rem .5rem; font-size: .82rem; }
.gi-combo-help { margin: 0 0 .35rem; font-size: .7rem; color: var(--fg-dim); line-height: 1.3; }
.gi-cat-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.gi-cat-chip { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; cursor: pointer; }
.gi-cat-chip:hover { border-color: var(--accent); }
.gi-cat-chip.off { color: var(--fg-dim); opacity: .5; text-decoration: line-through; }
.gi-combo-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.gi-opt { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: none; border: 0; color: var(--fg); cursor: pointer; text-align: left;
  padding: .3rem .45rem; border-radius: 5px; font-size: .82rem; }
.gi-opt:hover { background: var(--bg-soft); }
.gi-opt.is-sel { background: var(--bg-soft); border-left: 2px solid var(--accent); }
.gi-opt.hidden { display: none; }
.gi-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-opt-tag { flex: 0 0 auto; font-size: .7rem; color: var(--fg-dim); }

/* Slot rows: [slot] [item name (truncates)] [ilvl+link — fixed right]; melds/suggest span below. */
.gi-rows { display: flex; flex-direction: column; gap: .15rem; }
.gi-row { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr) max-content;
  align-items: center; column-gap: .5rem; row-gap: .12rem; padding: .25rem .35rem; border-radius: 5px; }
.gi-row.gi-bad { background: rgba(214, 69, 69, .12); }
.gi-slot { color: var(--fg-dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-cur { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.gi-bad > .gi-cur .gi-name { color: #e07a7a; }
.gi-icon { width: 22px; height: 22px; border-radius: 4px; flex: 0 0 auto; }
.gi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-cur .src-tag { flex: 0 0 auto; }
.gi-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem;
  min-width: 4.2rem; flex: 0 0 auto; }
.gi-ilvl { font-size: .7rem; color: var(--fg-dim); white-space: nowrap; }
.gi-link { color: var(--fg-dim); text-decoration: none; font-size: .8rem; line-height: 1; }
.gi-link:hover { color: var(--accent); }
.gi-suggest { grid-column: 2 / -1; display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: #6fcf7d; min-width: 0; }
.gi-suggest .gi-name { color: #6fcf7d; }
.gi-arrow { flex: 0 0 auto; }
/* Materia melds (informational, order-independent) */
.gi-melds { grid-column: 2 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.gi-melds-cur, .gi-melds-bis { display: inline-flex; align-items: center; gap: .15rem; }
.gi-melds-bis { color: #d8b24a; font-size: .72rem; }
.gi-meld { display: inline-flex; }
.gi-meld img { width: 14px; height: 14px; border-radius: 3px; }
.gi-empty { color: var(--fg-dim); }
.gi-error { color: #e07a7a; }

/* Hidden-sets drawer */
.gi-hidden-wrap { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.gi-hidden-wrap summary { cursor: pointer; color: var(--fg-dim); font-size: .85rem; }
.gi-hidden-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.gi-hidden-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; max-width: 100%;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: .2rem .5rem; }
.gi-hidden-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-show { background: var(--bg-soft); border: 1px solid var(--border); color: var(--fg-dim);
  border-radius: 5px; padding: .05rem .4rem; cursor: pointer; font-size: .78rem; flex: 0 0 auto; }
.gi-show:hover { color: var(--fg); border-color: var(--accent); }

/* ===== API keys (/me/keys) + Device approval (/device) ===== */
.keys-view, .device-view { display: flex; flex-direction: column; gap: 1rem; max-width: 920px; }
.keys-title { margin: 0; font-size: 1.15rem; }
.key-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.key-table th { text-align: left; color: var(--fg-dim); font-weight: 600; padding: .3rem .5rem; border-bottom: 1px solid var(--border); }
.key-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.key-table .key-scopes { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); }
.key-revoked { color: #e07a7a; }
.key-table .key-client { color: var(--fg-dim); font-size: .78rem; margin-top: .15rem; }
.key-created { border: 1px solid var(--accent); }
.key-plain { display: block; margin: .5rem 0; padding: .5rem .7rem; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 6px; font-family: monospace; word-break: break-all; user-select: all; }
.key-create .key-form { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.key-create #k-name { width: 100%; max-width: 22rem; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; }
.key-scopes-grid { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.key-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.key-edit-row td { background: var(--bg-soft, rgba(255,255,255,.03)); }
.key-edit-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.key-expiry select { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .2rem .4rem; }
.btn-danger { border-color: #6b2f2f; color: #e07a7a; }
.btn-danger:hover { border-color: #d64545; color: #fff; background: #6b2f2f; }

.device-form { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; flex-wrap: wrap; }
.device-code { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .4rem .6rem; font-family: monospace; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.device-ok { color: #5bd66e; font-weight: 600; font-size: 1.05rem; }
.btn-icon { padding: .4rem .55rem; line-height: 1; }

/* ===== My sets (custom imported targets) ===== */
.targets-view { display: flex; flex-direction: column; gap: 1rem; max-width: 920px; }
.tg-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.tg-form #tg-url { flex: 1; min-width: 16rem; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .4rem .6rem; }
.tg-ok { color: #5bd66e; }
.tg-group-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tg-title { font-size: 1rem; }
.tg-rename { margin-left: auto; }
.tg-note { margin: -.2rem 0 .5rem; white-space: pre-wrap; }
.tg-link { color: var(--fg-dim); text-decoration: none; font-size: .82rem; }
.tg-link:hover { color: var(--accent); }
/* Inline name + description editor for an imported group. */
.tg-edit { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.tg-label-in, .tg-note-in {
  width: 100%; max-width: 32rem; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .4rem .55rem; font: inherit;
}
.tg-label-in:focus, .tg-note-in:focus { border-color: var(--accent); outline: none; }
.tg-note-in { resize: vertical; }
.tg-edit-actions { display: flex; gap: .4rem; }
.tg-sim { font-size: .72rem; border: 1px solid var(--border); border-radius: 999px; padding: .08rem .5rem; }
.tg-sim-pending, .tg-sim-running { color: #d8b24a; border-color: #5a4f2a; }
.tg-sim-done { color: #5bd66e; border-color: #2f6b38; }
.tg-sim-error { color: #e07a7a; border-color: #5a2e33; }

/* ===== Responsive: collapsible sidebar ===== */
/* Mobile: always an overlay (docking is not useful on small screens). */
@media (max-width: 820px) {
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; z-index: 40;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  #sidebar-toggle { display: inline-flex; }
  .app-shell.nav-open .scrim { display: block; }
  #nav-pin { display: none; }
}

/* Filterleiste */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.filter-bar .filter > summary,
.filter-bar .slot-sel { cursor: pointer; font-size: .9rem; color: var(--fg-dim); }
details.filter {
  position: relative; border: 1px solid var(--border); border-radius: 6px;
  padding: .3rem .6rem; background: var(--bg-card);
}
details.filter[open] { z-index: 5; }
.fpanel {
  position: absolute; top: 110%; left: 0; min-width: 230px; max-width: 92vw;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: .6rem; display: flex; flex-direction: column; gap: .3rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); max-height: 60vh; overflow: auto;
}
.fpanel.jobs { min-width: 300px; }
.frole { display: flex; flex-wrap: wrap; gap: .1rem .8rem; padding: .2rem 0; border-top: 1px solid var(--border); }
.frole:first-child { border-top: 0; }
.frole strong { width: 100%; font-size: .8rem; }
.chk { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--fg); }
.slot-sel select, #q {
  background: var(--bg-card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .3rem .5rem;
}
#q { flex: 1; min-width: 180px; }

/* Main */
.app-main { flex: 1; padding: 1rem; max-width: 1200px; width: 100%; margin: 0 auto; }
.loading { color: var(--accent); font-family: ui-monospace, monospace; }

/* Uebersicht */
.role-head { font-size: 1rem; margin: 1.2rem 0 .5rem; padding-left: .5rem; border-left: 4px solid var(--rc, var(--accent)); }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .8rem;
}
/* Stacked cards that are direct children of a dashboard column get breathing room
   (grids use .dash-grid/.dash-cell, so they are unaffected). */
.dash > .card + .card { margin-top: 1rem; }
.job-card-head { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--rc, var(--border)); padding-bottom: .4rem; margin-bottom: .5rem; }
.job-card-head h3 { margin: 0; font-size: 1rem; }
.role-chip { font-size: .75rem; color: var(--fg-dim); }
.sheet { margin-bottom: .5rem; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: .3rem 0; }
.cat-chip { font-size: .75rem; color: var(--fg-dim); }
.sync-chip { font-size: .72rem; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 5px; padding: .02rem .35rem; margin-left: .4rem; white-space: nowrap; }
.sync-note { margin: .1rem 0 .3rem; }
.xg-link { font-size: .8rem; white-space: nowrap; }
details.set { border: 1px solid var(--border); border-radius: 6px; margin: .3rem 0; }
details.set > summary { cursor: pointer; padding: .35rem .5rem; font-size: .9rem; }
.set-link { background: none; border: none; cursor: pointer; opacity: .45; font-size: .85em;
  margin-left: .4rem; padding: 0 .2rem; line-height: 1; }
.set-link:hover { opacity: 1; }

/* Klassen untereinander (volle Breite) */
.job-list { display: flex; flex-direction: column; gap: .8rem; }
.job-list .job-card { width: 100%; }

/* Gear als EIN gekoppeltes 2-Spalten-Grid (Zeilen links/rechts ausgerichtet).
   grid-auto-rows mit fester Mindesthoehe -> nichts verschiebt sich. */
.gear-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.6rem;
  grid-auto-rows: minmax(4.3rem, auto); align-items: stretch; padding: .2rem .6rem .4rem; }
/* Das Koerper-Gear: DOM-Reihenfolge ist die Lesereihenfolge (erst Ruestung, dann Schmuck),
   die zwei Spalten entstehen erst hier durch spaltenweisen Fluss. Faellt das Grid unten auf
   eine Spalte, stimmt die Reihenfolge dadurch von selbst - ohne zweite Regel, die abdriften
   kann. Gilt ueberall, wo Gear nebeneinander steht. */
.gear-grid-body { grid-auto-flow: column; grid-template-rows: repeat(var(--gear-rows, 5), minmax(4.3rem, auto)); }
.gear-cell { display: flex; gap: .55rem; align-items: flex-start; padding: .32rem 0; border-top: 1px dotted var(--border); }
.gear-cell.empty { border-top: 0; }
.gear-cell.owned { background: color-mix(in srgb, var(--ok, #3fb950) 9%, transparent); border-radius: 6px; }

/* "Hab ich?"-Schalter: dezent, grün wenn im Besitz */
.own-toggle { flex: none; width: 1.3rem; height: 1.3rem; line-height: 1; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elev, transparent); color: var(--fg-dim);
  font-size: .8rem; transition: background .12s, border-color .12s, color .12s; }
.own-toggle:hover { border-color: var(--accent); color: var(--fg); }
.own-toggle.have { background: var(--ok, #3fb950); border-color: var(--ok, #3fb950); color: #06210d; }

/* "Besitze ich, nur nicht angelegt" — Marker in Farm + Mein-Gear */
.own-have, .farm-miss-owned { color: var(--ok, #3fb950); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.gi-bestup { color: #e8c84a; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.gi-patch-info { color: var(--fg-dim); cursor: help; font-size: .85rem; margin-left: .35rem; }
.gi-patch-info:hover { color: var(--fg); }
/* Loot fairness bars (team loot view). */
.loot-fair { margin: 0 0 1rem; }
.fair-row { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; }
.fair-n { flex: 0 0 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.fair-bar { flex: 1 1 auto; height: .7rem; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.fair-fill { display: block; height: 100%; background: var(--accent); }
.fair-c { flex: 0 0 auto; font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: right; }
/* Floor loot priority (farm view). */
.floor-row { display: flex; align-items: baseline; gap: .5rem; padding: .35rem 0; border-top: 1px solid var(--border); }
.floor-row:first-of-type { border-top: 0; }
.floor-tag { flex: 0 0 auto; font-weight: 600; }
.floor-count { flex: 0 0 auto; background: var(--accent); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-variant-numeric: tabular-nums; }
.floor-needs { display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
/* Materia shopping list (farm view). */
.meld-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .3rem .8rem; margin-top: .4rem; }
.meld-row { display: flex; align-items: center; gap: .4rem; }
.meld-row .gi-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meld-n { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.farm-miss.owned { opacity: .85; }
.farm-owned-note { margin: .15rem 0 .35rem; }
.gi-row.gi-owned .gi-arrow { color: var(--ok, #3fb950); }

/* Schreibgeschützter Besitz-Marker (SetDiff & Co.) */
.owned-mark { color: var(--ok, #3fb950); font-weight: 700; font-size: .8em; }

/* Auth-Modal: Login/Registrieren/Reset */
.au-modal { width: min(400px, 96vw); }
.au-form { display: flex; flex-direction: column; gap: .6rem; }
.au-field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.au-field input { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .4rem .55rem; font-size: .9rem; }
.au-field input:focus { outline: none; border-color: var(--accent); }
.au-field input.au-err { border-color: #e5534b; box-shadow: 0 0 0 1px #e5534b33; }
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { flex: 1; min-width: 0; padding-right: 2.1rem; }
.pw-eye { position: absolute; right: .35rem; background: transparent; border: 0; padding: 0; line-height: 1;
  cursor: pointer; color: var(--fg-dim); font-size: .95rem; opacity: .8; user-select: none; touch-action: none; }
.pw-eye:hover { opacity: 1; }
.pw-eye.on { opacity: 1; color: var(--accent); }
.au-choice { display: flex; flex-direction: column; gap: .5rem; }
.btn-block { width: 100%; }
.au-links { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; align-items: flex-start; }
.au-msg { margin: 0 0 .6rem; }
.au-ok { color: var(--ok, #3fb950); }
.auth-land .card { max-width: 30rem; }

/* "Alternativen"-Button (gesyncte Sets) + Popup */
.alt-btn { font-size: .68rem; color: var(--accent); background: transparent; border: 1px solid var(--accent);
  border-radius: 5px; padding: .02rem .35rem; cursor: pointer; white-space: nowrap; }
.alt-btn:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center;
  justify-content: center; z-index: 1000; padding: 1rem; }
.modal { background: var(--bg-elev, #1b1f27); border: 1px solid var(--border); border-radius: 10px;
  width: min(560px, 96vw); max-height: 86vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: inherit; }
.modal-head h3 { margin: 0; font-size: 1rem; }
.modal-x { background: transparent; border: 0; color: var(--fg-dim); font-size: 1.1rem; cursor: pointer; }
.modal-x:hover { color: var(--fg); }
.modal-body { padding: .8rem .9rem; }
.alt-list { display: flex; flex-direction: column; gap: .25rem; margin: .4rem 0; }
.alt-row { display: flex; align-items: center; gap: .55rem; padding: .25rem .3rem; border-top: 1px dotted var(--border); }
.alt-ilvl { color: var(--accent); font-weight: 600; font-size: .8rem; min-width: 2.6em; }
.alt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alt-note { margin-top: .5rem; }

/* Besitz-Filter der Teile-Suche */
.owned-filter { display: flex; align-items: center; gap: .3rem; margin-bottom: .6rem; flex-wrap: wrap; }
.seg-btn { cursor: pointer; padding: .15rem .55rem; font-size: .8rem; border: 1px solid var(--border);
  background: var(--bg-elev, transparent); color: var(--fg-dim); border-radius: 6px; }
.seg-btn:hover { border-color: var(--accent); color: var(--fg); }
.seg-btn.active { background: var(--accent); border-color: var(--accent); color: #06210d; font-weight: 600; }

/* Sammlung: Frische pro Bereich */
.fresh-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .2rem 0 .5rem; }
.fresh-chip { font-size: .72rem; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 5px; padding: .02rem .35rem; }

/* Sammlung: kompaktes Besitz-Raster */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem; margin-top: .4rem; }
.coll-cell { display: flex; align-items: center; gap: .5rem; padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-elev, transparent); }
.coll-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.coll-cell .item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-sub { font-size: .7rem; }
.coll-for { font-size: .66rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-search { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .2rem .5rem; font-size: .82rem; min-width: 12rem; }
#coll-job { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .15rem .4rem; }
.coll-ilvl { width: 4.5rem; background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .15rem .4rem; }
.coll-current { cursor: pointer; }
.coll-roles { gap: .3rem; }
.coll-roles .seg-btn.active { border-color: var(--rc, var(--accent)); color: var(--rc, var(--accent)); background: transparent; }
.coll-controls { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin: .5rem 0; }
.coll-chips { gap: .3rem; }
.coll-group { margin-top: 1rem; }
.coll-group-head { margin: 0 0 .2rem; font-size: .95rem; border-bottom: 1px solid var(--border); padding-bottom: .2rem; }

/* Waffe allein (kein Schild) - mittig ueber volle Breite */
.gear-solo { display: flex; justify-content: center; padding: .25rem .6rem .35rem; }
.gear-solo .gear-cell { border-top: 0; width: min(460px, 92%); }
.gear-info { flex: 1; min-width: 0; line-height: 1.25; }
.gear-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 1.1em; }
.slot-mini { font-size: .64rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .03em; }
.item-ilvl { color: var(--accent); font-weight: 600; }
.item-name { display: inline-block; font-size: .88rem; }
.item-name.custom { color: var(--fg); }
.src-tag.synced { color: #9a8cc0; border-color: #463a5e; }

/* Essen: gleiche zentrierte Box wie die Waffe, mit Trennlinie darueber */
.food-solo { border-top: 1px solid var(--border); margin-top: .15rem; padding-top: .45rem; }
.gear-cell.food { border-top: 0; }
.gear-cell.food .item-name { color: #d2b25a; }

/* Item-/Materia-Symbole */
.item-icon { width: 36px; height: 36px; border-radius: 5px; flex: 0 0 auto;
  background: var(--bg-soft); border: 1px solid var(--border); object-fit: contain; }
.item-icon.ph { display: inline-block; }
.melds { font-size: .72rem; color: var(--fg-dim); padding: .12rem 0 0; line-height: 1.25; }
.melds:empty { padding: 0; }
.melds-icons { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.meld { display: inline-flex; align-items: center; gap: .2rem; }
.meld-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* Quelle-Tag - immer gleich: rechts in der Kopfzeile */
.src-tag { flex: 0 0 auto; font-size: .62rem; padding: .04rem .34rem; border-radius: 3px;
  border: 1px solid var(--border); color: var(--fg-dim); white-space: nowrap; }
.src-tag.empty { border: 0; padding: 0; }
.src-tag[data-src="Tome"], .src-tag[data-src="AugTome"] { color: #d2b25a; border-color: #5a4f2a; }
.src-tag[data-src="SavageRaid"], .src-tag[data-src="Ultimate"] { color: #d98088; border-color: #5a2e33; }
.src-tag[data-src="Crafted"], .src-tag[data-src="AugCrafted"] { color: #7fc99a; border-color: #2e5a3f; }

/* Filter-Aktionen + Modus-Umschalter */
.fpanel-actions { display: flex; gap: .3rem; padding-bottom: .35rem; margin-bottom: .35rem; border-bottom: 1px solid var(--border); }
.fpanel-actions button { font-size: .75rem; background: var(--bg-soft); color: var(--fg-dim);
  border: 1px solid var(--border); border-radius: 5px; padding: .15rem .5rem; cursor: pointer; }
.fpanel-actions button:hover { color: var(--fg); border-color: var(--accent); }
.role-toggle { cursor: pointer; }
.role-toggle:hover { text-decoration: underline; }
.reset-btn { margin-left: auto; font-size: .8rem; background: var(--bg-card); color: var(--fg-dim);
  border: 1px solid var(--border); border-radius: 6px; padding: .3rem .7rem; cursor: pointer; white-space: nowrap; }
.reset-btn:hover { color: var(--fg); border-color: var(--accent); }
.mini-btn { font-size: .8rem; background: var(--bg-card); color: var(--fg-dim); border: 1px solid var(--border);
  border-radius: 6px; padding: .3rem .55rem; cursor: pointer; white-space: nowrap; }
.mini-btn:hover { color: var(--fg); border-color: var(--accent); }
.card-head-right { display: flex; align-items: center; gap: .5rem; }
.card-toggle { background: var(--bg-soft); color: var(--fg-dim); border: 1px solid var(--border);
  border-radius: 5px; padding: .05rem .45rem; cursor: pointer; font-size: .85rem; line-height: 1.3; }
.card-toggle:hover { color: var(--fg); border-color: var(--accent); }

/* Vergleichstabelle */
.compare-note { font-size: .78rem; margin: 0 0 .5rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
/* Borderless horizontal-scroll wrapper for wide tables so they never push the page
   (group farm, API keys, admin user/team/audit tables on narrow screens). */
.tbl-scroll { overflow-x: auto; max-width: 100%; }
table.compare { border-collapse: collapse; width: 100%; font-size: .85rem; white-space: nowrap; }
table.compare th, table.compare td { padding: .35rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }
table.compare thead th { position: sticky; top: 0; background: var(--bg-soft); z-index: 1; }
table.compare td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.compare td.gcd { font-weight: 600; color: var(--accent); }
table.compare tbody tr:hover { background: var(--bg-soft); }
table.compare th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.compare th.sortable:hover { color: var(--fg); }
table.compare th.active { color: var(--accent); }
tr.cmp-row { cursor: pointer; }
details.set.flash { animation: flashbg 1.6s ease-out; }
@keyframes flashbg { 0% { background: rgba(110, 168, 254, .35); } 100% { background: transparent; } }
table.compare small { color: var(--fg-dim); }
table.compare td.dps { color: #6fd08a; font-weight: 600; }
table.compare td.dps.proxy { color: var(--fg-dim); font-weight: 400; }
.set-dps { font-size: .72rem; color: #6fd08a; font-weight: 600; margin-left: .4rem; }
.set-dps.proxy { color: var(--fg-dim); font-weight: 400; }
.set-ilvl { font-size: .72rem; color: var(--accent); font-weight: 600; margin-left: .35rem; }

/* Set-Diff */
.sd-controls { margin: 0 0 .6rem; }
.sd-controls select { background: var(--bg-card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .3rem .5rem; }
.sd-sets { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .8rem;
  padding: .5rem .6rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }
.sd-summary { margin: .2rem 0 .5rem; font-size: .85rem; }
.sd-dps { font-weight: 400; font-size: .82rem; color: var(--accent); white-space: nowrap; }
.sd-dps.proxy { color: var(--fg-dim); font-style: italic; }
table.sd-table td.slot { color: var(--fg-dim); white-space: nowrap; }
table.sd-table td.same { color: var(--fg-dim); }
table.sd-table td.diff { background: rgba(210, 178, 90, .14); }
table.sd-table td.mark { text-align: center; color: var(--fg-dim); }

/* Suche */
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; }
.item-result-head { margin: 0 0 .5rem; font-size: 1rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.item-result-head .item-name { font-size: 1rem; }
.use-count { font-size: .75rem; color: var(--fg-dim); font-weight: normal; }
.use-list { list-style: none; margin: 0; padding: 0; }
.use-list li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .85rem; border-top: 1px dotted var(--border); flex-wrap: wrap; }
.job-badge { padding: .05rem .4rem; border-radius: 4px; border: 1px solid var(--rc, #888); color: var(--fg); font-size: .8rem; }
.use-slot { color: var(--fg-dim); }
.use-set { flex: 1; min-width: 80px; }
.use-cat { font-size: .75rem; color: var(--fg-dim); }

/* Icon-Button (Refresh) */
.icon-btn {
  background: var(--bg-soft); color: var(--fg-dim); border: 1px solid var(--border);
  border-radius: 6px; padding: .25rem .5rem; cursor: pointer; font-size: 1rem; line-height: 1;
}
.icon-btn:hover { color: var(--fg); border-color: var(--accent); }

/* Farmen */
.small { font-size: .78rem; }
.farm-total { margin-bottom: .9rem; border-color: var(--accent); }
.farm-total h3 { margin: 0 0 .4rem; font-size: 1rem; }
.farm-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .9rem; }
.farm-summary b { color: var(--accent); font-size: 1.05rem; }
.src-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; }
.src-chip { font-size: .75rem; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 4px; padding: .1rem .4rem; color: var(--fg-dim); }
.src-chip[data-src="Tome"], .src-chip[data-src="AugTome"] { color: #d2b25a; border-color: #5a4f2a; }
.src-chip[data-src="SavageRaid"], .src-chip[data-src="Ultimate"] { color: #d98088; border-color: #5a2e33; }
.src-chip[data-src="Crafted"], .src-chip[data-src="AugCrafted"] { color: #7fc99a; border-color: #2e5a3f; }
/* Missing-piece rows — flex (not a table) so long item names truncate cleanly */
.farm-miss-list { display: flex; flex-direction: column; gap: .15rem; padding: .3rem .1rem; }
.farm-miss { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.farm-miss-slot { flex: 0 0 5.5rem; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.farm-miss-item { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .4rem; overflow: hidden; }
.farm-miss-item .gi-icon { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 3px; }
.farm-miss-item .gi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.farm-miss-src { flex: 0 0 auto; font-size: .78rem; color: var(--fg-dim); white-space: nowrap; }
.farm-miss-src[data-src="Tome"], .farm-miss-src[data-src="AugTome"] { color: #d2b25a; }
.farm-miss-src[data-src="SavageRaid"], .farm-miss-src[data-src="Ultimate"] { color: #d98088; }
.farm-miss-src[data-src="Crafted"], .farm-miss-src[data-src="AugCrafted"] { color: #7fc99a; }

/* Farm plan: job selection + per-job target line */
.farm-select { margin-bottom: .9rem; }
.farm-select h3 { margin: 0 0 .3rem; font-size: 1rem; }
.farm-picks { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.farm-pick { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; cursor: pointer;
  background: var(--bg-soft); color: var(--fg-dim); border: 1px solid var(--border); border-radius: 6px; padding: .25rem .6rem; }
.farm-pick:hover { border-color: var(--accent); color: var(--fg); }
.farm-pick.on { color: var(--fg); border-color: var(--accent); background: #25304a; }
.farm-pick-ico { font-weight: 700; color: var(--accent); }
.farm-pick { max-width: 100%; }
/* Finished sets: a divider + a separate, non-interactive chip group below */
.farm-done-divider { margin-top: .8rem; padding-top: .5rem; border-top: 1px dashed var(--border);
  font-size: .8rem; color: var(--fg-dim); }
.farm-picks-done { margin-top: .4rem; opacity: .85; }
.farm-pick.static { cursor: default; }
.farm-pick.static:hover { border-color: var(--border); color: var(--fg-dim); }
.farm-pick.static .farm-pick-ico { color: #7fc99a; }

/* Plan card header: job name (truncates) · score (right) · remove */
.farm-head { gap: .5rem; }
.farm-job { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1rem; font-weight: 500; }
.farm-score { flex: 0 0 auto; color: var(--fg-dim); font-size: .85rem; font-variant-numeric: tabular-nums; }
.farm-card-x { flex: 0 0 auto; background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: .9rem; }
.farm-card-x:hover { color: #e07a90; }
.farm-target { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .5rem; }
.farm-target-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-dim); font-size: .85rem; }
.farm-target .link-btn { flex: 0 0 auto; white-space: nowrap; }
.link-btn { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font-size: .82rem; }
.link-btn:hover { text-decoration: underline; }

.gearset-card.flash { animation: flashbg 1.6s ease-out; }

/* Teams */
.tm-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.tm-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; }
.tm-row:hover { border-color: var(--accent); }
.tm-row-main { display: flex; flex-direction: column; gap: .15rem; text-align: left; cursor: pointer;
  flex: 1 1 12rem; min-width: 0; background: none; border: none; color: inherit; padding: 0; }
.tm-row-actions { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.tm-row-name { font-weight: 500; }
.tm-row-meta { font-size: .8rem; color: var(--fg-dim); }

/* Open-team header: team switcher + tabs. */
.tm-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tm-switch { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 7px; padding: .35rem .6rem; font-size: 1rem; font-weight: 500; max-width: 18rem; }
.tm-switch:hover, .tm-switch:focus { border-color: var(--accent); outline: none; }
.tm-all { white-space: nowrap; }
.tm-name { font-size: 1.1rem; }
.tm-tabbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tm-tabs { margin-bottom: .9rem; flex-wrap: wrap; }
.tm-tab-help { display: inline-flex; align-items: center; margin-bottom: .9rem; }
.tm-overview-char { margin: .4rem 0 .8rem; }
.tm-forms { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .9rem; }
.tm-form { display: flex; flex-direction: column; gap: .4rem; min-width: 240px; }
.tm-form h3 { margin: 0; font-size: .95rem; }
.tm-form input, .tm-form select { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .4rem .5rem; }
.tm-detail-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.tm-detail-head h2 { margin: 0; font-size: 1.1rem; flex: 1; }
.btn-sm { font-size: .8rem; padding: .2rem .5rem; }
.tm-members { list-style: none; margin: .4rem 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.tm-member { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border: 1px solid var(--border); border-radius: 6px; padding: .3rem .6rem; font-size: .9rem; }
.tm-member-act { display: inline-flex; gap: .3rem; }
.tm-member-info { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; min-width: 0; }
.tm-member-char { display: inline-flex; align-items: center; gap: .3rem; }
.tm-charsel { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .15rem .4rem; font-size: .82rem; max-width: 12rem; }
.tm-charsel:hover, .tm-charsel:focus { border-color: var(--accent); outline: none; }

/* Team overview: header, your-character row, members panel. */
.tm-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tm-head h2 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.tm-yourrow { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  margin: .6rem 0; padding: .5rem .6rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }
.tm-yourchar { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--fg-dim); }
/* Weg A: a player's own characters in a team (add/status/remove). */
.tm-yourchars { flex: 1 1 100%; }
.tm-yc-label { font-size: .82rem; color: var(--fg-dim); margin-bottom: .35rem; }
.tm-yc-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.tm-yc-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tm-yc-name { font-size: .9rem; }
.tm-yc-row .tm-cstatus { font-size: .8rem; padding: .1rem .3rem; }
.tm-yc-del { margin-left: auto; padding: .1rem .45rem; line-height: 1; }
.tm-yc-add { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tm-badge { font-size: .68rem; padding: .05rem .4rem; border-radius: 5px; background: #25304a; color: var(--accent);
  border: 1px solid var(--border); vertical-align: middle; }
.tm-badge-owner { background: #2a2410; color: #f0d98b; border-color: #4a3f1a; }
.tm-badge-sub { background: #2a2018; color: #d9a066; border-color: #4a3320; }
.tm-badge-paused { background: #23262e; color: #9aa4b2; border-color: #3a4150; }
.tm-badge-blocked { background: #2e1a1a; color: #e08a8a; border-color: #4a2a2a; }
.tm-member-chars { list-style: none; margin: .35rem 0 0; padding: 0 0 0 .2rem; display: flex; flex-direction: column; gap: .25rem; }
.tm-member-chars li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.tm-member-chars .tm-mc-name { flex: 1; }
.tm-mp-subs, .bis-subs { margin-top: .5rem; }
.tm-mp-subs > summary, .bis-subs > summary, .tmf-team-subs > summary {
  cursor: pointer; font-size: .82rem; color: var(--fg-dim); padding: .3rem 0; }
.tm-mp-nochar { opacity: .75; }
.tm-yc-pause { padding: .1rem .45rem; }
.bis-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.mit-archive { margin-left: .4rem; }
.mit-archive > summary { cursor: pointer; font-size: .82rem; color: var(--fg-dim); }
.mit-arch-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.mit-arch-list li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* Substitute (Ersatz) grouping across farm / BiS / loot: de-emphasised + collapsible. */
.tmf-set-sub, .bis-row-sub td, .loot-row-sub td { opacity: .82; }
.tmf-subs { margin-top: .5rem; }
.tmf-subs > summary { cursor: pointer; font-size: .82rem; color: var(--fg-dim); padding: .2rem 0; }
.loot-subs-toggle td { cursor: pointer; color: var(--fg-dim); font-size: .82rem; background: var(--bg-soft);
  padding: .3rem .5rem; user-select: none; }
.loot-subs-toggle:hover td { color: var(--fg); }
.loot-subs-caret { display: inline-block; width: 1em; }
/* BiS matrix: Ersatz group toggle row (same table, column-aligned). */
.bis-subs-toggle td { cursor: pointer; color: var(--fg-dim); font-size: .82rem; background: var(--bg-soft);
  padding: .3rem .5rem; user-select: none; text-align: left; }
.bis-subs-toggle:hover td { color: var(--fg); }
.bis-subs-caret { display: inline-block; width: 1em; }
.bis-row-sub td { opacity: .82; }
.tm-badge-pending { background: transparent; color: var(--fg-dim); }
.tm-badge-type { background: var(--bg-soft); color: var(--fg-dim); font-size: .72rem; }
.tm-mp { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.tm-mp-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem;
  border: 1px solid var(--border); border-radius: 8px; }
.tm-ava { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .72rem; font-weight: 600; background: var(--bg-soft); color: var(--fg); }
.tm-ava.role-tank { background: #1e2b40; color: #8fb6ed; }
.tm-ava.role-heal { background: #16301f; color: #7fd1a3; }
.tm-ava.role-dps { background: #2f1822; color: #e58aa6; }
.tm-mp-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.tm-mp-name { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-weight: 500; }
.tm-mp-char { font-size: .8rem; color: var(--fg-dim); }
.tm-mp-gap { font-size: .8rem; color: #d2b25a; font-style: italic; }
.tm-mp-prog { flex: 0 0 auto; }
.tm-bis { display: inline-flex; align-items: center; gap: .4rem; }
.tm-bis-track { display: inline-block; width: 64px; height: 6px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
.tm-bis-fill { display: block; height: 6px; border-radius: 6px; background: var(--ok, #3fb950); }
.tm-rolesel { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .15rem .4rem; font-size: .8rem; }
.tm-rolesel:hover, .tm-rolesel:focus { border-color: var(--accent); outline: none; }

/* Team settings: general form, roles editor, danger zone. */
.tm-set-field { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; font-size: .9rem; }
.tm-discord-status { margin: .2rem 0 .5rem; font-size: .85rem; }
.tm-discord-ok { color: #5fb36a; }
.tm-discord-error, .tm-discord-denied, .tm-discord-cancelled { color: #e0a44a; }
.tm-discord-manual { margin-top: .6rem; }
.tm-discord-manual > summary { cursor: pointer; margin: .3rem 0; }
/* Discord connect: one bordered block per part (channel webhook / server) with a state badge. */
.tm-dc-part { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; margin: .5rem 0; background: var(--bg-soft); }
.tm-dc-head { display: flex; align-items: center; gap: .5rem; }
.tm-dc-part p { margin: .2rem 0; }
.tm-dc-where code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 .3rem; }
.tm-dc-badge { font-size: .72rem; border-radius: 10px; padding: .05rem .5rem; white-space: nowrap; }
.tm-dc-on { background: #1c3a24; color: #5fb36a; border: 1px solid #5fb36a; }
.tm-dc-offb { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); }
.tm-set-field input, .tm-set-field select { background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; }
.tm-danger { border-color: #4a2530; }
.tm-role { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; margin: .5rem 0; }
.tm-role-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.tm-role-name { flex: 1 1 auto; min-width: 0; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .3rem .5rem; font-weight: 500; }
.tm-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .2rem .8rem; }
.tm-cap { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--fg-dim); }
.tm-role-new { display: flex; gap: .4rem; margin-top: .6rem; }
.tm-role-new input { flex: 1 1 auto; min-width: 0; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; }

/* Farm: scope toggle (active character vs. all-characters overview) + per-char group. */
.farm-scope { margin-bottom: .9rem; }
.farm-char { margin-top: .9rem; }
.farm-char > h3 { margin: 0 0 .6rem; }

/* Admin area: stat tiles + user search. */
.adm-bar { display: flex; align-items: center; justify-content: space-between; }
.adm-tabs { margin: .2rem 0 .9rem; flex-wrap: wrap; }
.adm-tiles { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 1rem; }
.adm-tile { flex: 1 1 6rem; min-width: 5.5rem; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .15rem; }
.adm-num { font-size: 1.4rem; font-weight: 700; }
.adm-lbl { font-size: .78rem; color: var(--fg-dim); }
.adm-data { max-width: 30rem; }
.adm-search { display: flex; gap: .4rem; margin: .4rem 0 .7rem; }
.adm-search input { flex: 1 1 auto; min-width: 0; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .4rem .55rem; }
.adm-badge { background: #25304a; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 5px; font-size: .68rem; padding: .02rem .35rem; vertical-align: middle; }
.adm-badge-off { background: transparent; color: var(--fg-dim); border-color: var(--border); }
.adm-badge-warn { background: #3a2a12; color: #e0a44a; border-color: #e0a44a; }
.adm-badge-ok { background: #143020; color: #57c98a; border-color: #57c98a; }
.adm-badge-muted { background: transparent; color: var(--fg-dim); border-color: var(--border); }
.adm-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; margin-top: .8rem; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.adm-table th, .adm-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.adm-table tr.adm-sel { background: var(--bg-soft); }
.src-cand { display: flex; gap: .4rem; align-items: center; margin: .15rem 0; }
/* Aktions-Spalte einer Tabelle. Die ZELLE muss eine Tabellenzelle bleiben: mit display:flex
   faellt sie aus dem Zeilenraster, waechst nicht auf Zeilenhoehe mit und ihre Trennlinie wird
   dann auf Inhaltshoehe gezeichnet - sichtbar als versetzte Linie, sobald eine Nachbarzelle
   hoeher ist (z. B. durch die Plan-Chips). Das Flex-Layout gehoert deshalb in den Wrapper. */
td.adm-acts-cell { white-space: nowrap; }
.adm-row-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.adm-reload { margin-top: .8rem; }
/* What just happened, said where you are. The admin page is several screens tall, so a message
   pinned to the top of the DOM was invisible to anyone who had scrolled — a refused write read as
   "the button does nothing". Sticky keeps it in view wherever the click happened. */
.adm-msg { color: var(--accent); margin: .2rem 0 .6rem; position: sticky; top: .4rem; z-index: 5;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  padding: .4rem .6rem; }
.btn-danger { border-color: #7a2a38; color: #e07a90; }
.btn-danger:hover { border-color: #e07a90; background: #2a1820; }
.adm-tt { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .15rem .35rem; font-size: .82rem; max-width: 10rem; }
.adm-pager { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.adm-content-new, .adm-boss-add { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.adm-content-new input, .adm-content-new select, .adm-boss-add input { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; }
.adm-boss-add input:nth-child(3) { flex: 1 1 14rem; min-width: 0; }
.adm-content { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; margin: .5rem 0; }
.adm-content-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.adm-content-act { margin-left: auto; display: inline-flex; gap: .3rem; }
.cd-add { background: var(--bg-soft); border-radius: 8px; padding: .5rem .6rem; margin: .4rem 0 .8rem; }
.cd-add-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; margin: .25rem 0; }
/* Ability editor: labelled sections so the many fields read as grouped, not scattered. */
.cd-section { margin: .4rem 0 .7rem; }
.cd-sec-h { margin: .5rem 0 .3rem; font-size: .9rem; font-weight: 600; color: var(--accent); }
.cd-sec-list { border-top: 1px solid var(--border); padding-top: .5rem; }
.cd-section-job { border: 1px solid var(--border); border-radius: 8px; padding: .3rem .55rem; background: var(--bg-soft); }
.cd-section-job > summary { cursor: pointer; color: var(--fg-dim); list-style-position: inside; }
.cd-section-job[open] > summary { color: var(--accent); margin-bottom: .3rem; }
.cd-add-values { border-top: 1px dashed var(--border); padding-top: .5rem; margin-top: .4rem; }
.cd-f-grow { display: inline-flex; flex: 1 1 11rem; }
.cd-f-grow input { flex: 1 1 auto; min-width: 0; }
.cd-add input, .cd-add select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; }
.cd-jobchip { display: inline-block; background: var(--bg-soft); color: var(--fg-dim); border: 1px solid var(--border); border-radius: 4px; padding: 0 .3rem; font-size: .62rem; margin-left: .15rem; vertical-align: middle; }
.cd-f { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--fg-dim); }
.cd-f[hidden] { display: none; } /* the class's display would otherwise override [hidden] */
.cd-results { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
.cd-result { display: inline-flex; align-items: center; gap: .3rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .15rem .4rem; cursor: pointer; font-size: .82rem; color: var(--fg); }
.cd-result:hover { border-color: var(--accent); }
.cd-pick { display: inline-flex; align-items: center; gap: .3rem; color: #7fd1a3; font-size: .85rem; }
.cd-group { margin: .5rem 0; }
.cd-group img, .cd-result img, .cd-pick img { vertical-align: middle; border-radius: 3px; }
.adm-cname { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .25rem .5rem; font-weight: 600; min-width: 12rem; }
.boss-editor { margin: .4rem 0; padding: .5rem .6rem; background: var(--bg-soft); border-radius: 8px; }
.drop-palette { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; }
.drop-row { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.drop-chip { font-size: .75rem; padding: .1rem .4rem; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--fg-dim); cursor: pointer; opacity: .7; }
.drop-chip.on { opacity: 1; color: var(--fg); border-color: var(--accent); background: #25304a; }
.drop-mat.on { border-color: #b07a3b; background: #2a2410; color: #f0d98b; }
.drop-cosmetic.on { border-color: #7a52b0; background: #2b1e34; color: #c7a3e6; }
.cd-de-cell { display: flex; gap: .25rem; align-items: center; }
.cd-de { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: .15rem .35rem; font-size: .8rem; max-width: 11rem; }
.cd-edit { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; background: var(--bg-soft); border-radius: 6px; padding: .4rem .5rem; }
.cd-edit-name { min-width: 8rem; display: inline-flex; align-items: center; gap: .3rem; }
.cd-edit input, .cd-edit select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; }
.cd-icorow { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; flex-basis: 100%; border-top: 1px dashed var(--border); padding-top: .4rem; }
.cd-icoprev { border-radius: 4px; background: var(--bg); }
.cd-icourl { flex: 1 1 16rem; }
.cd-icourl input { width: 100%; }
.mech-ed { margin-top: .5rem; border-top: 1px dashed var(--border); padding-top: .4rem; }
.mech-fflogs { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; background: var(--bg-soft); border-radius: 6px; padding: .35rem .5rem; margin: .3rem 0; }
.mech-fflogs input { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; }
.enc-sel-label { font-size: .85rem; }
.mech-fflogs-saved { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .1rem .5rem .3rem; }
.enc-chip { font-size: .8rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .5rem; }
/* Structured encounter picker (grouped by zone, filterable). */
.enc-pick { flex-basis: 100%; margin-top: .4rem; border: 1px solid var(--border); border-radius: 8px; padding: .4rem; background: var(--bg); }
.enc-pick #enc-filter { width: 100%; box-sizing: border-box; margin-bottom: .4rem; }
.enc-list { max-height: 16rem; overflow-y: auto; }
.enc-zone { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--fg-dim); padding: .35rem .3rem .15rem; position: sticky; top: 0; background: var(--bg); }
.enc-row { display: flex; align-items: center; gap: .45rem; padding: .2rem .35rem; border-radius: 5px; cursor: pointer; font-size: .82rem; }
.enc-row:hover { background: var(--bg-soft); }

/* Site-wide announcement banner (admin-set). */
.site-banner { background: #2a2410; color: #f0d98b; border-bottom: 1px solid #4a3f1a;
  padding: .5rem 1rem; font-size: .9rem; text-align: center; }
.site-banner[hidden] { display: none; }
.tm-invite { margin-top: .8rem; }
.tm-code { margin-top: .5rem; display: flex; flex-direction: column; gap: .2rem; }
.tm-code code { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; padding: .4rem .6rem; font-size: 1rem; user-select: all; }
.tm-hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0 .6rem; }
.tm-share-char { margin: .5rem 0; }
.tm-share-char > strong { font-size: .9rem; }
.tm-share-sets { display: flex; flex-direction: column; gap: .2rem; margin: .3rem 0 .3rem .5rem; }
.tm-share-set { display: flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; }
.tmf-member { margin-bottom: .8rem; }
.tmf-member h3 { margin: 0 0 .4rem; font-size: 1rem; }
.tmf-set { padding: .3rem 0; border-top: 1px dotted var(--border); }
.tmf-set:first-of-type { border-top: none; }
.tmf-set-head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tmf-set-name { font-weight: 500; }
.tmf-done { color: #7fc99a; font-size: .85rem; }
.tmf-miss { margin-top: .15rem; }
.tmf-filter { flex-wrap: wrap; }
/* The Group-Farm filter sits on its own row below the tab bar (clearer than tucked beside it). */
.tmf-filterbar { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; flex-wrap: wrap; }
.tmf-info { margin: 0 0 .6rem; }
.tmf-member-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tmf-member-head h3 { margin: 0 0 .4rem; font-size: 1rem; }
.tmf-member-done h3 { display: flex; align-items: center; gap: .5rem; }
.tmf-table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .25rem; }
.tmf-table td { padding: .2rem .35rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tmf-slot { color: var(--fg-dim); white-space: nowrap; width: 5rem; }
.tmf-ist, .tmf-soll { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.tmf-ist .gi-name, .tmf-soll .gi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 13rem; }
.tmf-arrow { color: var(--fg-dim); text-align: center; width: 1.2rem; }
.tmf-mk { text-align: center; width: 1.5rem; }
.tmf-need-row .tmf-soll .gi-name { color: var(--fg); }
.tmf-ok-row { opacity: .72; }
.tmf-gaps { border-color: #4a3f1a; }
.tm-gap-list { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }

/* BiS / Tome tracker: matrix + expandable detail. */
.bis-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--fg-dim); margin: .4rem 0 .7rem; }
.bis-legend b { display: inline-block; min-width: 1.1rem; text-align: center; border-radius: 4px; padding: 0 .2rem; }
.bis-wrap { overflow-x: auto; }
.bis-matrix { border-collapse: collapse; width: 100%; font-size: .82rem; }
.bis-matrix th { text-align: center; color: var(--fg-dim); font-weight: 400; padding: .25rem .3rem; }
.bis-matrix th.bis-name { text-align: left; }
.bis-cell { text-align: center; padding: .2rem .25rem; }
.bis-row { cursor: pointer; border-top: 1px solid var(--border); }
.bis-row:hover { background: var(--bg-soft); }
.bis-row.open { background: var(--bg-soft); }
.bis-row td { padding: .3rem .35rem; text-align: center; font-variant-numeric: tabular-nums; }
.bis-name { text-align: left !important; white-space: nowrap; }
.bis-dot { display: inline-block; min-width: 1.2rem; border-radius: 5px; padding: 0 .25rem; font-weight: 600; }
.st-ok { background: #16301f; color: #7fd1a3; }
.st-tome { background: #2a2410; color: #f0d98b; }
.st-bag { background: #1e2b40; color: #8fb6ed; }
.st-miss { background: #2f1822; color: #e58aa6; }
.st-na { color: var(--fg-dim); }
.bis-detail td { padding: 0; }
.bis-detail-box { padding: .5rem .6rem; background: var(--bg); border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .2rem; }
.bis-d-row { display: grid; grid-template-columns: 6rem 1fr auto auto auto; align-items: center; gap: .5rem; font-size: .84rem; }
.bis-d-slot { color: var(--fg-dim); }
.bis-d-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bis-tier { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; font-size: .78rem; padding: .1rem .25rem; }

/* Loot tracker. */
.loot-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.loot-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.loot-newc { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.loot-content, .loot-newc input, .loot-newc select, .loot-form input, .loot-form select {
  background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; }
.loot-form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 .9rem;
  padding: .5rem .6rem; background: var(--bg-soft); border-radius: 8px; }
.loot-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; }
@media (max-width: 720px) { .loot-cols { grid-template-columns: 1fr; } }
.loot-cols h3 { margin: 0 0 .3rem; font-size: .95rem; }
.loot-prios { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.loot-prio { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 6px; font-size: .85rem; }
.loot-top { border-color: var(--accent); background: #25304a; }
.loot-never { color: #d2b25a; }
.loot-hist { width: 100%; border-collapse: collapse; font-size: .82rem; }
.loot-hist th { text-align: left; color: var(--fg-dim); font-weight: 400; padding: .2rem .35rem; }
.loot-hist td { padding: .25rem .35rem; border-top: 1px solid var(--border); }
.loot-del { padding: .05rem .4rem; }
.loot-manage { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .4rem 0 .8rem; padding: .5rem .6rem; background: var(--bg-soft); border-radius: 8px; }
.loot-manage input, .loot-manage select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; }
.loot-prio { align-items: center; }
.loot-give { margin-left: .5rem; padding: .1rem .5rem; }
.loot-matrix { border-collapse: collapse; width: 100%; font-size: .85rem; }
.loot-matrix th { text-align: center; color: var(--fg-dim); font-weight: 400; padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
.loot-matrix th.loot-mx-name { text-align: left; }
.loot-mx-cell { text-align: center; padding: .25rem .4rem; border-bottom: 1px solid var(--border); }
.loot-mx-name { text-align: left; white-space: nowrap; padding: .25rem .4rem; border-bottom: 1px solid var(--border); }
.loot-cell { padding: .05rem .5rem; }
/* "+" for a recipient the BiS doesn't flag as needing it: still awardable, de-emphasized. */
.loot-cell-na { opacity: .35; }
.loot-cell-na:hover { opacity: .8; }
/* Priority rank badge among needy members (#1 = biggest DPS/iLvl gain). */
.loot-prio-badge { font-size: .62rem; font-weight: 700; margin-left: .25rem; vertical-align: super; opacity: .9; }
.loot-prio-1 { box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }
.loot-prio-n { opacity: .8; }
.loot-has { color: #7fd1a3; font-weight: 600; }
.loot-had-bis { color: #e0a050; font-size: .72rem; font-weight: 600; cursor: help; white-space: nowrap; }
.loot-hist-wrap { margin-top: 1rem; }

/* Scheduler. */
.sch-head { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sch-create { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 .9rem; padding: .5rem .6rem; background: var(--bg-soft); border-radius: 8px; }
.sch-create select, .sch-create input { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; }
.sch-wds { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.sch-wd { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; color: var(--fg-dim); }
.sch-list { display: flex; flex-direction: column; gap: .4rem; }
/* Expired/archived events: a toggled-open, dimmed section below the active list. */
.sch-exp-toggle { margin-top: .6rem; }
.sch-exp-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.sch-event.sch-expired { opacity: .6; }
.sch-event.sch-expired .sch-head { cursor: default; }
.sch-event { border: 1px solid var(--border); border-radius: 8px; }
.sch-event.open { border-color: var(--accent); }
.sch-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .6rem; cursor: pointer; }
.sch-title { font-weight: 500; }
.sch-when { flex: 1 1 auto; }
.sch-badge { font-size: .72rem; padding: .05rem .4rem; border-radius: 5px; }
.sch-green { background: #16301f; color: #7fd1a3; }
.sch-red { background: #2f1822; color: #e58aa6; }
.sch-yes { background: #16301f; color: #7fd1a3; }
.sch-no { background: #2f1822; color: #e58aa6; }
.sch-maybe { background: #2a2410; color: #f0d98b; }
.sch-occ { padding: .4rem .6rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .25rem; }
.sch-occ-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .3rem; }
.sch-occ-chip { font-size: .72rem; padding: .12rem .4rem; border-radius: 5px; border: 1px solid var(--border); cursor: pointer; background: var(--bg-soft); color: var(--fg-dim); }
.sch-occ-chip.sch-green { border-color: #2f6b47; color: #7fd1a3; }
.sch-occ-chip.sch-red { border-color: #6b2f3a; color: #e58aa6; }
.sch-occ-chip.sch-maybe { border-color: #6b5f2f; color: #f0d98b; }
/* The occurrence currently open in the attendance grid — make it unmistakable. */
.sch-occ-chip.on {
  background: var(--accent); color: #10131a; border-color: var(--accent); font-weight: 700;
  box-shadow: 0 0 0 2px var(--accent), 0 1px 6px rgba(0,0,0,.35); transform: translateY(-1px);
}
.sch-occ-head {
  font-size: .9rem; color: var(--fg); padding: .1rem 0 .2rem;
  border-left: 3px solid var(--accent); padding-left: .5rem;
}
.sch-occ-head strong { color: var(--accent); }
.sch-editing { background: var(--bg-soft); border: 1px dashed var(--accent); border-radius: 8px; }
.sch-prow { display: flex; align-items: center; gap: .5rem; font-size: .85rem; flex-wrap: wrap; }
.sch-pn { min-width: 8rem; }
.sch-status { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .15rem .35rem; font-size: .8rem; }
.sch-sub { color: #7fc99a; font-size: .8rem; }
.sch-more { margin-top: .2rem; }
/* Click-toggle attendance: three state buttons (in / maybe / out). */
.sch-stbtns { display: inline-flex; gap: .15rem; }
.sch-stbtn { width: 1.7rem; height: 1.5rem; border: 1px solid var(--border); background: var(--bg-soft); color: var(--fg-dim); border-radius: 6px; cursor: pointer; font-size: .85rem; line-height: 1; }
.sch-stbtn:hover { color: var(--fg); }
.sch-st-yes.on { background: #16301f; color: #7fd1a3; border-color: #2c6b46; }
.sch-st-maybe.on { background: #2a2410; color: #f0d98b; border-color: #6b5a1f; }
.sch-st-no.on { background: #2f1822; color: #e58aa6; border-color: #6b2c3e; }
.sch-absences { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.sch-absences h3 { margin: 0 0 .4rem; font-size: .95rem; }

/* Mitigation planner. */
.mit-grid { border-collapse: collapse; width: 100%; font-size: .82rem; }
.mit-grid th { text-align: left; color: var(--fg-dim); font-weight: 400; padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
.mit-grid td { padding: .3rem .4rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.mit-mech { min-width: 11rem; }
.mit-cell { min-width: 7rem; }
.mit-dr { font-weight: 500; color: #7fd1a3; font-variant-numeric: tabular-nums; }
.mit-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; padding: .05rem .3rem; border-radius: 5px; margin: .1rem .1rem 0 0; }
.mit-party { background: #1e2b40; color: #8fb6ed; }
/* Personal/self cooldowns: amber + a dashed left edge so it's clear at a glance they
   protect one player and are excluded from the group % (the ◆ marker says the same). */
.mit-personal { background: #2a2410; color: #f0d98b; border-left: 3px dashed #b89a3a; }
.mit-self { font-size: .6rem; opacity: .8; margin-right: .15rem; vertical-align: middle; }
.mit-heal { background: #16301f; color: #7fd1a3; }
.mit-utility { background: #2b1e34; color: #c7a3e6; }
.mit-x { background: none; border: none; color: inherit; cursor: pointer; font-size: .7rem; opacity: .6; padding: 0; }
.mit-x:hover { opacity: 1; }
.mit-add { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; font-size: .75rem; padding: .05rem .2rem; margin-top: .15rem; }
.mit-tag { font-size: .62rem; padding: .02rem .25rem; border-radius: 4px; vertical-align: middle; }
.mit-rw { background: var(--bg-soft); color: #8fb6ed; }
.mit-tb { background: var(--bg-soft); color: #f0c674; }
.mit-mag { background: var(--bg-soft); color: #b18be0; }
.mit-phys { background: var(--bg-soft); color: #e0945f; }

/* Proxy (team-managed character) create + gear editor. */
.tm-proxy-new { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.px-editor { margin-top: .75rem; border: 1px solid var(--border); border-radius: 8px; padding: .6rem; background: var(--bg-soft); }
.px-ed-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.px-ed-slots { display: flex; flex-direction: column; gap: .25rem; }
.px-ed-row { display: grid; grid-template-columns: 5.5rem 1fr 1fr; align-items: center; gap: .4rem; }
.px-ed-slot { font-size: .8rem; color: var(--muted); }
.px-ed-cell { display: flex; flex-direction: column; gap: .1rem; min-width: 0; position: relative; }
.px-ed-tpl { position: relative; display: inline-flex; flex-direction: column; gap: .1rem; min-width: 12rem; }
.px-combo-btn { width: 100%; }
.px-combo-btn.empty .gi-combo-label { color: var(--fg-dim); }
/* Proxy editor + create form: match the app's dark fields (browser default was white). */
.px-editor input, .px-editor select,
.tm-proxy-new input, .tm-proxy-new select { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .35rem .45rem; font-size: .9rem; }
.px-ed-actions { display: flex; gap: .4rem; margin-top: .6rem; }
@media (max-width: 640px) { .px-ed-row { grid-template-columns: 1fr; } }
.mit-cheats { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; }

/* Mitigation timeline (Outlook-style): label gutter + job lanes with draggable blocks. */
/* The page is the single vertical scroller; only the lanes scroll horizontally (.mit-tl-main).
   The job headers + gutter corner are pinned to the viewport top in JS (pinMitHeads) — pure CSS
   sticky can't, because the horizontal-overflow ancestor traps sticky-top. One scrollbar. */
.mit-tl { display: flex; gap: .25rem; align-items: flex-start; min-width: 0; position: relative; }
.mit-gutter { flex: 0 0 13rem; }
.mit-gutter-body { position: relative; border-right: 1px solid var(--border); }
.mit-tl-main { position: relative; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.mit-tick { position: absolute; left: 0; font-size: .68rem; color: var(--fg-dim); border-top: 1px dashed var(--border); width: 2.6rem; padding-left: .1rem; }
.mit-glabel { position: absolute; left: 2.8rem; right: .2rem; font-size: .74rem; line-height: 1; display: flex; align-items: center; gap: .2rem; transform: translateY(-0.5em); }
.mit-glabel.mit-gl-tb { font-weight: 700; }
.mit-gl-t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; }
.mit-markers { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.mit-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--accent); z-index: 0; pointer-events: none; }
.mit-line.mit-line-tb { border-top-width: 3px; border-top-style: double; }
/* Translucent band over a mechanic's duration, behind the cooldown blocks. */
.mit-band { position: absolute; left: 0; right: 0; opacity: .20; border-radius: 3px; z-index: 0; pointer-events: none; }
.mit-mk-dr { color: #7fd1a3; }
.mit-mk-btn { pointer-events: auto; background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: .72rem; }
.mit-mk-btn:hover { color: var(--fg); }
/* Add/edit-mechanic bar: sticky fields + time stepper + colour palette. */
.mit-addbar { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin: .4rem 0; }
.mit-addbar input, .mit-addbar select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .4rem; font-size: .85rem; }
.mit-timestep { display: inline-flex; align-items: center; gap: .15rem; }
.mit-timestep input { width: 3.6rem; text-align: center; }
.mit-colorsel { display: inline-flex; gap: .2rem; align-items: center; }
.mit-cchip { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.mit-cchip.on { border-color: var(--fg); }
.mit-cnone { background: var(--bg-soft); color: var(--fg-dim); font-size: .7rem; line-height: 1; }
/* Phase tabs. */
/* Mechanic-tag filter chips (show/hide raidwide / tankbuster / other). */
/* Ansichts-Steuerung: "was zeigen" und "fuer wen" in einer Zeile, als zwei erkennbare Gruppen.
   Der column-gap trennt die Gruppen deutlicher als der Abstand innerhalb einer Gruppe. */
.mit-filterbar { display: flex; align-items: center; gap: .35rem 1.4rem; flex-wrap: wrap; margin: .3rem 0; }
.mit-filtergroup { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
/* Der Fokus ist eine Entweder-oder-Wahl (genau einer aktiv), die Tag-Chips sind Schalter -
   deshalb hier eine gefuellte statt nur kraeftigere Darstellung. */
.mit-focuschip.on { background: #25304a; color: var(--fg); border-color: var(--accent); opacity: 1; }
.mit-warnings { border: 1px solid #e0a050; border-radius: 6px; background: var(--bg-card); }
.mit-warnings > summary { cursor: pointer; padding: .35rem .55rem; color: #e0a050; font-size: .85rem; font-weight: 600; }
.mit-warnings ul { list-style: none; margin: 0; padding: 0 .55rem .45rem 1.6rem; display: flex; flex-direction: column; gap: .15rem; }
.mit-warnings li { font-size: .82rem; color: var(--fg-dim); list-style: disc; cursor: pointer; }
.mit-warnings li:hover { color: var(--fg); text-decoration: underline; }
/* Warnings stay pinned above the timeline while scrolling (JS sets `top`); solid bg + z so
   the timeline never shows through. */
.mit-warnbar { position: sticky; top: 0; z-index: 6; margin: 0 0 .35rem; background: var(--bg); }

/* Redesigned planner header: plan switcher on the left, "⋯ Manage" menu on the right. */
.mit-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mit-header-l { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mit-menu { position: relative; }
.mit-menu > summary { list-style: none; cursor: pointer; }
.mit-menu > summary::-webkit-details-marker { display: none; }
.mit-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: .25rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: .4rem; min-width: 12rem; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.mit-menu-pop .btn { justify-content: flex-start; text-align: left; }
.mit-empty { padding: .5rem 0 1rem; }
.mit-empty h3 { margin: 0 0 .2rem; }
.mit-addwrap { margin: .5rem 0; }
.mit-hint { margin-top: .4rem; }
.mech-clear-btn { margin-left: auto; color: var(--danger, #e0524f); border-color: var(--danger, #e0524f); }
/* Keep the editing controls (phase row, drag palette, add/edit bar, filter) in view while the
   tall mechanic timeline scrolls beneath — sticks just below the page's sticky content header. */
.mech-controls { position: sticky; top: 3.2rem; z-index: 6; background: var(--bg); padding: .35rem 0; border-bottom: 1px solid var(--border); }
.mit-tagchip { background: var(--bg-soft); color: var(--fg-dim); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; cursor: pointer; opacity: .6; }
.mit-tagchip.on { opacity: 1; }
.mit-tagchip.mit-tag-raidwide.on { color: #8fb6ed; border-color: #3a567f; }
.mit-tagchip.mit-tag-tankbuster.on { color: #f0c674; border-color: #8a6e2f; }
.mit-tagchip.mit-tag-other.on { color: var(--fg); border-color: var(--fg-dim); }
.mit-phases { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }
.mit-phase-tab { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px 6px 0 0; padding: .25rem .6rem; font-size: .82rem; cursor: pointer; }
.mit-phase-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.mit-phase-add { border-style: dashed; }
.mit-lanes { display: flex; gap: .25rem; width: max-content; }
/* One lane per job (width set inline = sub-columns × width, or a client-only drag override). */
.mit-lane { min-width: 0; position: relative; }
/* Drag the right edge to resize a column (stored per browser); double-click resets. */
.mit-lane-rsz { position: absolute; top: 0; right: -3px; bottom: 0; width: 8px; cursor: col-resize; z-index: 6; touch-action: none; }
.mit-lane-rsz::after { content: ''; position: absolute; right: 3px; top: 0; bottom: 0; width: 2px; border-radius: 2px; }
.mit-lane-rsz:hover::after { background: var(--accent); }
/* Split lanes faintly tint the right ("Eigene") half so group vs own reads at a glance. */
.mit-lane-split .mit-lane-body { background: linear-gradient(to right, var(--bg-soft) 0 50%, color-mix(in srgb, #2a2410 12%, var(--bg-soft)) 50% 100%); }
.mit-subdiv { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); z-index: 0; }
.mit-ico { width: 16px; height: 16px; border-radius: 3px; flex: 0 0 auto; }
/* Head stacks: job title, the add-select, then the sub-column captions. All heads (and the
   empty gutter head) share the same min-height so the lane bodies line up across jobs. */
/* Pinned to the viewport top in JS via transform (see pinMitHeads); needs an opaque background
   and a z-index so it floats over the lane blocks while scrolling. */
.mit-lane-head { min-height: 4.2rem; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: .2rem; font-size: .78rem; font-weight: 500; position: relative; z-index: 3; background: var(--bg); will-change: transform; }
.mit-lane-title { display: flex; align-items: center; gap: .2rem; min-width: 0; padding-right: 6px; }
.mit-lane-jn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Reset-to-auto sits at the far right of the header (proximity to the whole column). */
.mit-lane-auto { flex: 0 0 auto; margin-left: auto; background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: .8rem; line-height: 1; padding: 0 .1rem; border-radius: 4px; }
.mit-lane-auto:hover { color: var(--accent); background: var(--bg-soft); }
.mit-lane-head select { width: 100%; box-sizing: border-box; background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; font-size: .75rem; padding: .1rem .15rem; }
.mit-subhead { display: flex; gap: 1px; font-size: .58rem; font-weight: 600; line-height: 1; }
.mit-subhead span { flex: 1 1 0; text-align: center; overflow: hidden; white-space: nowrap; }
.mit-sh-g { color: #8fb6ed; }
.mit-sh-o { color: #caa86a; }
/* Custom ＋ dropdown (native <select> can't show icons): a <details> popup with icon+name rows. */
.mit-addd { position: relative; }
.mit-addd-sum { list-style: none; cursor: pointer; text-align: center; background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; font-size: .8rem; padding: .05rem; user-select: none; }
.mit-addd-sum::-webkit-details-marker { display: none; }
.mit-addd[open] .mit-addd-sum { border-color: var(--accent); }
.mit-addd-pop { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 2px; min-width: 15rem; max-height: 17rem; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.45); padding: .2rem; }
.mit-pick-grp { font-size: .6rem; font-weight: 700; color: var(--fg-dim); text-transform: uppercase; padding: .25rem .3rem .1rem; }
.mit-pick-item { display: flex; align-items: center; gap: .4rem; width: 100%; text-align: left; background: none; border: none; color: var(--fg); border-radius: 5px; padding: .22rem .3rem; cursor: pointer; font-size: .78rem; }
.mit-pick-item:hover { background: var(--bg-soft); }
.mit-pick-n { font-weight: 500; white-space: nowrap; }
.mit-pick-d { color: var(--fg-dim); font-size: .68rem; margin-left: auto; white-space: nowrap; padding-left: .5rem; }
.mit-ico-blank { background: transparent; }
/* Reorderable lane columns (edit mode): grip handle + drag/drop states. */
.mit-lane-drag { cursor: grab; }
.mit-lane-drag:active { cursor: grabbing; }
.mit-lane-grip { opacity: .55; cursor: grab; user-select: none; font-size: .8rem; }
.mit-lane-head.mit-lane-dragging { opacity: .45; }
.mit-lane-head.mit-lane-drop { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 4px; }
.mit-lane-body { position: relative; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; }
.mit-block { position: absolute; left: 1px; width: calc(100% - 2px); border-radius: 4px; padding: .1rem .25rem; font-size: .72rem; overflow: hidden; cursor: default; box-shadow: 0 1px 2px rgba(0,0,0,.3); box-sizing: border-box; z-index: 1; }
.mit-block.mit-draggable { cursor: grab; }
.mit-block.mit-block-bad { outline: 2px solid #e0524f; outline-offset: -2px; }
.mit-block.mit-block-bad::after { content: '⚠'; position: absolute; top: 0; left: 2px; font-size: .7rem; }
/* Same spell as another job, overlapping (doesn't stack): orange dashed warning. */
.mit-block.mit-block-dup { outline: 2px dashed #e0a050; outline-offset: -2px; }
.mit-block.mit-block-dup::before { content: '⧉'; position: absolute; top: 0; right: 2px; font-size: .7rem; color: #e0a050; }
.mit-focus-wrap { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.mit-focus-wrap .mit-cheat { flex: 0 0 17rem; }
.mit-focus-wrap .bis-wrap, .mit-focus-wrap .mit-wrap { flex: 1 1 18rem; }
/* The lanes manage their own horizontal scroll (.mit-tl-main); the wrapper must NOT add overflow,
   else it gets a spurious vertical scrollbar (the page is the single vertical scroller). */
.mit-wrap { min-width: 0; }
.mit-block.mit-dragging { cursor: grabbing; opacity: .85; z-index: 5; }
/* While dragging a block: a dashed time-line across the lane + the exact second on the left. */
.mit-drag-ind { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--accent); z-index: 7; pointer-events: none; }
.mit-drag-time { position: absolute; left: 0; top: -0.85rem; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 600; padding: 0 .3rem; border-radius: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Block content stacks: icon + badges + % on top, the (clamped) name beneath. */
.mit-block-top { display: flex; align-items: center; gap: 2px; line-height: 1; padding-right: .7rem; }
.mit-block-pct { font-size: .58rem; opacity: .85; margin-left: auto; font-variant-numeric: tabular-nums; }
.mit-block-n { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.05; font-size: .66rem; word-break: break-word; margin-top: 1px; }
.mit-share { margin-top: .6rem; }
.mit-share-code { width: 100%; box-sizing: border-box; background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .4rem .5rem; font-family: monospace; font-size: .78rem; resize: vertical; }
.mit-block .mit-x { position: absolute; top: 0; right: 1px; }
.mit-create { margin: .4rem 0 .8rem; padding: .5rem .6rem; background: var(--bg-soft); border-radius: 8px; border: 1px dashed var(--border); }
.mit-create-title { font-weight: 600; font-size: .9rem; margin-bottom: .45rem; }
.mit-create-row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.mit-create select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; }
.mit-jobedit { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }

/* Admin mechanic timeline: phases as columns, mechanics as coloured blocks. */
.mech-palette { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .3rem 0; }
.mech-pchip { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 5px; cursor: grab; color: #fff; user-select: none; }
.mech-pchip:active { cursor: grabbing; }
.mech-pchip-rw { background: #6ea8fe; }
.mech-pchip-tb { background: #e0a050; }
.mech-pchip-other { background: #9aa0a6; }
/* Gutter is a fixed sibling; only the phase columns scroll left/right, vertical is the page
   (overflow-y:hidden, no inner second scrollbar). */
.mech-wrap { min-width: 0; }
.mech-tl { display: flex; gap: .25rem; align-items: flex-start; min-width: 0; }
.mech-gutter { flex: 0 0 auto; width: 2.8rem; }
.mech-gutter-body { position: relative; }
.mech-tick { position: absolute; left: 0; font-size: .68rem; color: var(--fg-dim); border-top: 1px dashed var(--border); width: 2.6rem; padding-left: .1rem; }
.mech-cols { display: flex; gap: .35rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; }
/* Phases share the full width (one phase = ~100%); only when many phases exceed the min do they
   scroll horizontally. */
.mech-col { flex: 1 1 13rem; min-width: 13rem; }
.mech-col-head { height: 28px; display: flex; align-items: center; font-size: .8rem; font-weight: 600; color: var(--fg); border-bottom: 1px solid var(--border); }
.mech-col-body { position: relative; background: var(--bg-soft); border-radius: 6px; }
.mech-blk { position: absolute; border-radius: 4px; padding: .12rem .3rem; min-height: 1.35rem; font-size: .74rem; color: #11151c; overflow: hidden;
  cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.3); box-sizing: border-box; }
.mech-blk:active { cursor: grabbing; }
.mech-col-body.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* Live indicator showing where a dragged block/type will land (its start time).
   The label text is set in JS (textContent) and renders just under the line. */
.mech-drop-ind { position: absolute; left: 0; right: 0; border-top: 2px solid var(--accent); pointer-events: none;
  z-index: 6; color: var(--accent); font-size: .65rem; font-weight: 700; line-height: 1.1; padding-left: 2px; }
.mech-blk-tb { outline: 2px solid #fff; outline-offset: -2px; }
.mech-blk-sel { box-shadow: 0 0 0 2px var(--accent); }
.mech-blk-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mech-blk .mit-x { position: absolute; top: 0; right: 1px; color: #11151c; }
.job-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.job-chip { font-size: .72rem; font-weight: 600; padding: .1rem .4rem; border-radius: 5px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--fg-dim); cursor: pointer; opacity: .55; }
.job-chip.on { opacity: 1; color: var(--fg); }
.job-chip.role-tank.on { border-color: #3b6fb0; background: #1e2b40; color: #8fb6ed; }
.job-chip.role-healer.on { border-color: #3f9b6b; background: #16301f; color: #7fd1a3; }
.job-chip.role-melee.on { border-color: #a8434a; background: #2f1822; color: #e58aa6; }
.job-chip.role-ranged.on { border-color: #b07a3b; background: #2a2410; color: #f0d98b; }
.job-chip.role-caster.on { border-color: #7a52b0; background: #2b1e34; color: #c7a3e6; }

/* Plugin page (logged-in): install instructions + repo URL + stats. */
.plugin-page { max-width: 720px; }
.plugin-feats { margin: .4rem 0 .6rem 1.1rem; }
.plugin-feats li { margin: .15rem 0; }
.plugin-tos { background: var(--bg-soft); border-radius: 6px; padding: .5rem .6rem; }
.plugin-urlbox { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.plugin-url { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; font-family: monospace; font-size: .9rem; user-select: all; }
.plugin-steps { margin: .2rem 0 .6rem 1.2rem; }
.plugin-steps li { margin: .2rem 0; }
.plugin-links { display: flex; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.plugin-stats { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Connect options: two cards side by side; the recommended (auto) one is accented. */
.plugin-connect { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .3rem 0 .6rem; }
@media (max-width: 560px) { .plugin-connect { grid-template-columns: 1fr; } }
.plugin-conn-card { border: 1px solid var(--border); border-radius: 8px; padding: .7rem .8rem; background: var(--bg-soft); display: flex; flex-direction: column; gap: .4rem; }
.plugin-conn-primary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--bg); }
.plugin-conn-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.plugin-conn-card p { margin: 0; flex: 1; font-size: .9rem; }
.plugin-conn-card .btn { align-self: flex-start; }
.plugin-badge { font-size: .72rem; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; }

/* Notification bell (sidebar foot) + dropdown panel. */
.notif { position: relative; }
.notif-bell { position: relative; background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--fg-dim); padding: .2rem .3rem; }
.notif-bell:hover { color: var(--fg); }
.notif-badge { position: absolute; top: -2px; right: -4px; background: #e0524f; color: #fff; font-size: .6rem; font-weight: 700; line-height: 1; padding: .1rem .25rem; border-radius: 8px; }
.notif-panel { position: absolute; top: 2.2rem; right: 0; width: 18rem; max-width: 80vw; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.5); z-index: 900; overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: .4rem .6rem; border-bottom: 1px solid var(--border); }
.notif-head-actions { display: flex; align-items: center; gap: .4rem; }
.notif-gear { background: none; border: none; cursor: pointer; color: var(--fg-dim); font-size: 1rem; padding: .1rem .2rem; line-height: 1; }
.notif-gear:hover, .notif-gear.on { color: var(--accent); }
.notif-prefs { padding: .5rem .6rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .35rem; }
.notif-prefs .muted { margin: 0 0 .15rem; }
.notif-pref { display: flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }
.notif-list { max-height: 22rem; overflow-y: auto; }
.notif-item { display: flex; flex-direction: column; gap: .1rem; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border);
  padding: .45rem .6rem; cursor: pointer; color: var(--fg); }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { border-left: 3px solid var(--accent); }
.notif-it-title { font-size: .85rem; font-weight: 600; }
.notif-it-body { font-size: .78rem; color: var(--fg-dim); }
.notif-empty { padding: .8rem .6rem; }

/* Right-click context menu (admin timeline etc.). */
.ctx-menu { position: fixed; z-index: 1000; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); padding: .25rem; min-width: 9rem; display: flex; flex-direction: column; }
.ctx-item { background: none; border: none; color: var(--fg); text-align: left; padding: .4rem .6rem; border-radius: 5px;
  cursor: pointer; font-size: .85rem; }
.ctx-item:hover { background: var(--bg); }
.ctx-item.ctx-danger { color: #e0524f; }

/* Footer */
.app-footer { border-top: 1px solid var(--border); padding: .6rem 1rem; font-size: .78rem; color: var(--fg-dim);
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; }
.footer-legal a { color: var(--fg-dim); }
.footer-legal a:hover { color: var(--accent); }
/* Legal pages (operator-supplied HTML). */
/* "Was ist neu" (Changelog). Gleiche Textbreite wie die Rechtstexte - es ist Fliesstext. */
/* Mitigation: Plaene als Chips statt Dropdown - alle sichtbar, einer aktiv, gleiche Sprache wie
   die Job-Chips direkt darunter. */
.mit-plan-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mit-plan-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.mit-plan-chip { display: inline-flex; align-items: baseline; gap: .35rem; cursor: pointer;
  background: var(--bg-soft); color: var(--fg-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; font-weight: 600; }
.mit-plan-chip:hover { color: var(--fg); border-color: var(--fg-dim); }
.mit-plan-chip.on { background: #25304a; color: var(--fg); border-color: var(--accent); }
.mit-plan-boss { font-size: .72rem; font-weight: 400; color: var(--fg-dim); }
/* "+" am Ende der Planzeile: gehoert zu dieser Liste, bleibt aber leise. */
.mit-plan-add { padding: .25rem .6rem; font-weight: 700; color: var(--fg-dim); border-style: dashed; }
.mit-plan-add:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
.mit-plan-chip.on .mit-plan-boss { color: var(--accent); }

/* Umsortieren: Griff zum Ziehen + Pfeile. Beides gleichzeitig - die Pfeile funktionieren immer
   (Tastatur, Touch, Screenreader), der Griff ist der schnelle Weg mit der Maus. */
/* Der Griff bringt seinen Flex-Wrapper selbst mit (ro-group). Die Wirtszelle bleibt damit eine
   normale Tabellenzelle - ein <td> mit display:flex faellt aus dem Zeilenraster und zeichnet
   seine Trennlinie auf Inhalts- statt Zeilenhoehe. */
.ro-group { display: inline-flex; align-items: center; gap: .1rem; vertical-align: middle; }
.ro-cell { white-space: nowrap; vertical-align: middle; }
td.ro-cell { width: 1%; }
.ro-handle { cursor: grab; color: var(--fg-dim); padding: .1rem .25rem; user-select: none;
  touch-action: none; /* sonst scrollt das Handy statt zu ziehen */ font-size: .95rem; line-height: 1; }
.ro-handle:hover { color: var(--fg); }
.ro-arrow { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer;
  font-size: .6rem; line-height: 1; padding: .05rem .15rem; }
.ro-arrow:hover:not(:disabled) { color: var(--accent); }
.ro-arrow:disabled { opacity: .25; cursor: default; }
.ro-dragging { opacity: .5; }
/* Die Zielzeile beim Ziehen: eine Kante zeigt, wo es landet. */
.ro-over > td:first-child, .ro-over > .adm-content-head { box-shadow: inset 0 2px 0 var(--accent); }
tr.ro-over > td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.adm-content.ro-over { border-color: var(--accent); }

/* Vorhandene Mitigationsplaene unter ihrem Boss (Inhalte-Tab) - anklickbar, dezent. */
.tc-plans { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.tc-plan { font-size: .75rem; padding: .1rem .4rem; color: var(--fg-dim); }
.tc-plan:hover { color: var(--fg); }

.news { max-width: 820px; }
/* Akkordeon je Release-Datum: nur das neueste ist offen (open im Markup). */
.news-group { margin-top: 1.4rem; }
/* Die Zeile ist der Schalter fuer die ganze Gruppe, also braucht sie eine Tap-Flaeche, die man
   auf dem Handy auch trifft - reiner Text waere nur ~26px hoch. */
.news-date { font-size: 1rem; color: var(--fg-dim); font-weight: 600; margin: 0 0 .5rem;
  border-bottom: 1px solid var(--border); padding: .45rem 0 .4rem; min-height: 2.6rem;
  display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.news-date::-webkit-details-marker { display: none; }
/* Eigener Pfeil statt des Browser-Dreiecks - dreht beim Aufklappen. */
.news-date::before { content: '▸'; font-size: .8em; transition: transform .15s ease; }
.news-group[open] > .news-date::before { transform: rotate(90deg); }
.news-date:hover { color: var(--fg); }
.news-group[open] > .news-date { color: var(--fg); }
/* Anzahl der Eintraege, damit ein zugeklappter Tag zeigt, wie viel darin steckt. */
.news-count { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--fg-dim);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .45rem; }
.news-entry { margin: 0 0 .9rem; }
.news-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.news-title { font-size: .98rem; margin: 0; }
.news-body { line-height: 1.6; margin: .3rem 0 0 .2rem; color: var(--fg-dim); }
.news-body p { margin: .3rem 0; }
.news-body ul, .news-body ol { margin: .3rem 0 .3rem 1.1rem; }
.news-body a { color: var(--accent); }
/* Die Art faerbt den Eintrag: Fixes lesen sich ruhiger als neue Funktionen, ohne zu verschwinden. */
.news-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  border: 1px solid; border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; }
.news-kind-feature { color: #57c98a; border-color: #57c98a; background: #143020; }
.news-kind-fix { color: #e0a44a; border-color: #e0a44a; background: #3a2a12; }
.news-kind-change { color: var(--fg-dim); border-color: var(--border); background: transparent; }
/* Source badge: only the plugin carries one — "the website" is the default and needs no label. */
.news-src { flex: 0 0 auto; font-size: .72rem; line-height: 1.6; border: 1px solid var(--border);
  border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; color: var(--fg-dim); }

/* Admin: contact page settings (direct details + the channels behind the form). */
.adm-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem 1rem; margin: .4rem 0 .8rem; }
.adm-contact-grid .wk-row { display: flex; align-items: center; gap: .5rem; }
.adm-contact-grid input { flex: 1 1 8rem; min-width: 0; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .3rem .5rem; }
.adm-contact-hooks input { width: 100%; min-width: 12rem; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .3rem .5rem; }
.adm-contact-acts { display: flex; gap: .4rem; white-space: nowrap; }
.adm-contact-acts .btn[disabled] { opacity: .45; cursor: not-allowed; }
.adm-contact-msg { margin-top: .6rem; }
/* Announcement preview: one block per Discord message, so it reads like the channel will. */
.upv { margin-top: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.upv-msg { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; background: var(--bg); }
.upv-head { font-weight: 600; margin-bottom: .35rem; }
.upv-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .15rem; }
.upv-list li { font-size: .88rem; color: var(--fg-dim); }

/* --- Contact page --------------------------------------------------------- */
.contact { max-width: 720px; }
.contact-intro { margin: 0 0 1rem; color: var(--fg-dim); }
.contact-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; flex-wrap: wrap; }
.contact-row-l { min-width: 5.5rem; color: var(--fg-dim); font-size: .85rem; }
.contact-row-v { font-weight: 600; }
.contact-copy { padding: .1rem .45rem; line-height: 1.4; }
.contact-invite { margin: .8rem 0 0; }
.contact-kinds { margin: .2rem 0 .4rem; }
.contact-kind-hint { margin: 0 0 1rem; }
.contact-lbl { display: block; margin: .8rem 0 .25rem; font-size: .85rem; color: var(--fg-dim); }
.contact-in { width: 100%; background: var(--bg-card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem .7rem; font: inherit; }
.contact-in:focus { outline: none; border-color: var(--accent); }
.contact-area { resize: vertical; min-height: 8rem; line-height: 1.5; }
.contact-count { margin: .25rem 0 0; text-align: right; font-variant-numeric: tabular-nums; }
/* Off-screen rather than display:none — a bot that only skips hidden fields still fills this one. */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.contact-ok { color: #57c98a; margin: .8rem 0 0; }
.contact-privacy { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--border); }

.legal { max-width: 820px; }
.legal-body { line-height: 1.6; }
.legal-body h1 { font-size: 1.5rem; margin: 0 0 .8rem; }
.legal-body h2 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.legal-body a { color: var(--accent); }

/* --- In-app help ---------------------------------------------------------- */
.help { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 720px) { .help { grid-template-columns: 1fr; } }
.help-nav { position: sticky; top: .5rem; }
.help-search { width: 100%; background: var(--bg-card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem .7rem; margin-bottom: .8rem; }
.help-topics { display: flex; flex-direction: column; gap: .9rem; }
.help-cat h4 { margin: 0 0 .35rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-dim); }
.help-topic { display: block; padding: .35rem .55rem; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: .9rem; }
.help-topic:hover { background: var(--bg-soft); }
.help-topic.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); }
.help-results { display: flex; flex-direction: column; gap: .1rem; }
.help-empty { padding: .3rem .55rem; }
.help-main { min-height: 40vh; }
.help-article h1, .help-welcome h1 { margin: 0 0 .6rem; font-size: 1.5rem; }
.help-content { line-height: 1.65; }
.help-content h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
.help-content h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.help-content p { margin: .5rem 0; }
.help-content a { color: var(--accent); }
.help-content ul, .help-content ol { padding-left: 1.3rem; }
/* Scope reference: no bullets, each right on its own line with the code highlighted. */
.help-content ul.help-scopes { list-style: none; padding-left: 0; }
.help-content ul.help-scopes li { margin: .35rem 0; padding-left: .1rem; }
.help-content ul.help-scopes code { background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 5px; padding: .05rem .4rem; color: var(--accent); font-weight: 600; margin-right: .2rem; }
.help-content code { background: var(--bg-soft); border-radius: 4px; padding: .05rem .35rem; font-size: .88em; }
.help-content img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
/* Locked topic: "log in / admin only" panel + the small marker after login-gated links. */
.help-lock { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--bg-soft); margin-top: .8rem; }
.help-lock-ico { font-size: 1.4rem; }
.help-lock p { margin: 0; max-width: 46ch; }
.help-lock-tag { color: var(--fg-dim); font-size: .82em; font-style: italic; white-space: nowrap; }

/* Auto-linked glossary terms: subtle dotted underline + definition tooltip. */
.help-term { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: help; }
.help-term:hover { border-bottom-style: solid; }
.help-content dt { scroll-margin-top: 4.5rem; border-radius: 4px; }
.help-content dt.flash { animation: flashbg 1.6s ease-out; }

/* Component kit for authored articles. */
.help-note, .help-tip, .help-warn { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px;
  padding: .6rem .8rem; margin: .8rem 0; background: var(--bg-soft); }
.help-tip { border-left-color: #6bcB77; }
.help-note { border-left-color: var(--accent); }
.help-warn { border-left-color: #e0b34a; }
.help-steps { counter-reset: hs; list-style: none; padding-left: 0; }
.help-steps > li { counter-increment: hs; position: relative; padding: .3rem 0 .3rem 2.1rem; }
.help-steps > li::before { content: counter(hs); position: absolute; left: 0; top: .25rem; width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent);
  color: #1b1e24; font-size: .8rem; font-weight: 700; }
.help-figure { margin: .9rem 0; }
.help-figure figcaption { color: var(--fg-dim); font-size: .82rem; margin-top: .3rem; }
.help-kbd { display: inline-block; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
  padding: 0 .4rem; background: var(--bg-soft); font-size: .82em; }
.help-content table { border-collapse: collapse; width: 100%; margin: .7rem 0; }
.help-content th, .help-content td { border: 1px solid var(--border); padding: .35rem .55rem; text-align: left; }

/* The ⓘ contextual info button + popover. */
.info-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .95rem;
  padding: 0 .15rem; line-height: 1; vertical-align: middle; opacity: .8; }
.info-link:hover { opacity: 1; }
.info-pop { position: absolute; z-index: 60; width: 300px; max-width: calc(100vw - 16px); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; padding: .7rem .85rem; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.info-pop-title { font-weight: 600; margin-bottom: .25rem; }
.info-pop-body { line-height: 1.5; }
.info-pop-more { display: inline-block; margin-top: .5rem; color: var(--accent); text-decoration: none; font-size: .88rem; }
.info-pop-more:hover { text-decoration: underline; }

/* The public item page (views/item.js): a piece and everything we know about getting it. */
.item-page { max-width: 720px; }
.item-hero { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.item-hero-ic { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 8px; }
.item-hero-name { margin: 0; font-size: 1.4rem; }
.item-hero-meta { display: flex; align-items: center; gap: .7rem; margin-top: .25rem; flex-wrap: wrap; }
.item-hero-ilvl { color: var(--fg-dim); font-weight: 600; }
.item-hero-db { color: var(--accent); text-decoration: none; font-size: .88rem; }
.item-hero-db:hover { text-decoration: underline; }
.item-sec { margin-top: 1.1rem; }
.item-sec > h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-dim); margin: 0 0 .5rem; }
.item-npcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.item-npcs li { font-size: .9rem; }
/* The paths reuse the hover card's rows; give them room to breathe on a full page. */
.item-sec .obtain-pop-body { display: flex; flex-direction: column; gap: .4rem; }
.item-sec .obtain-row { padding-left: calc(var(--d, 0) * 1rem); }

/* "Who needs this" boxes on the item page (own BiS + teams). */
.item-demand { background: var(--panel, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .08)); border-radius: 8px; padding: .7rem .8rem; }
.need-list { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.need-list li { font-size: .9rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem; }
.need-job { font-weight: 600; }
.need-have { color: var(--good, #4caf7d); font-size: .82rem; margin-left: auto; }
.need-miss { color: var(--warn, #e0a34a); font-size: .82rem; margin-left: auto; }
.need-team { margin-top: .55rem; }
.need-team h3 { font-size: .88rem; margin: 0 0 .25rem; }
/* The held count IS the input — one number, editable in place (same rule as the advisor's stock list).
   Centred so the digits clear the spinner arrows instead of sitting flush against them. */
.coffer-own { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.coffer-own input { width: 6rem; padding: .35rem .55rem; border-radius: 6px; border: 1px solid var(--border, #333b4d);
  background: var(--bg); color: var(--fg); font-variant-numeric: tabular-nums; text-align: center; }
.coffer-own input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The farm plan on a gearset card (util/farm-plan.js): buy + fight, lazily loaded on open. */
.gi-farmplan { margin-top: .5rem; border-top: 1px solid var(--border); padding-top: .4rem; }
.gi-farmplan > summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
.gi-farmplan > summary:hover { color: var(--accent); }
.fp-body { margin-top: .4rem; }
.fp-weeks { font-weight: 600; color: var(--accent); margin-bottom: .35rem; }
.fp-sec { margin: .3rem 0; }
.fp-h { font-weight: 600; font-size: .8rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .03em; }
.fp-list { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.fp-list li { display: flex; align-items: center; gap: .35rem; font-size: .86rem; flex-wrap: wrap; }
.fp-ic { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; }
.fp-item { color: var(--accent); text-decoration: none; cursor: pointer; }
.fp-item:hover { text-decoration: underline; }
.fp-note { margin-top: .35rem; }

/* The "where do I get this" card (util/obtain-pop.js). Mirrors .info-pop, a touch wider for routes. */
.obtain-pop { position: absolute; z-index: 60; width: 340px; max-width: calc(100vw - 16px); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem; box-shadow: 0 8px 28px rgba(0,0,0,.45);
  font-size: .84rem; line-height: 1.45; }
.obtain-pop-title { font-weight: 600; margin-bottom: .35rem; }
.obtain-pop-body { display: flex; flex-direction: column; gap: .3rem; }
/* One route per line; a chain step is indented by its depth so "and the base comes from…" reads as nested. */
.obtain-row { padding-left: calc(var(--d, 0) * .9rem); }
.obtain-row + .obtain-row { border-top: 1px solid var(--border); padding-top: .3rem; }
.obtain-what { display: block; }
.obtain-cost { color: var(--fg); }
.obtain-plus { color: var(--fg-dim); margin: 0 .3rem; }
.obtain-handin { opacity: .75; font-style: italic; }
.obtain-where { display: block; color: var(--fg-dim); font-size: .8rem; margin-top: .1rem; }
.obtain-covers { display: block; color: var(--fg-dim); font-size: .8rem; font-style: italic; margin-top: .1rem; }
.obtain-retired { color: var(--fg-dim); font-style: italic; }
.obtain-more { display: inline-block; margin-top: .5rem; color: var(--accent); text-decoration: none; font-size: .82rem; }
.obtain-more:hover { text-decoration: underline; }
/* The name reads as reachable: a dotted underline that a player can hover or tap. */
.gi-obtainable { cursor: help; text-decoration: underline dotted var(--border); text-underline-offset: 2px; }

@media (max-width: 520px) {
  .gear-grid { grid-template-columns: 1fr; }
  /* Eine Spalte: zurueck auf zeilenweisen Fluss, damit die DOM-Reihenfolge gilt. */
  .gear-grid-body { grid-auto-flow: row; grid-template-rows: none; grid-auto-rows: minmax(4.3rem, auto); }
  .gear-cell.empty { display: none; }
  /* Chips sind auf dem Handy Tap-Ziele, keine Klickpunkte - als reiner Text waeren sie ~21px. */
  .mit-tagchip, .mit-plan-chip { min-height: 2.2rem; display: inline-flex; align-items: center; }
}
@media (max-width: 600px) {
  .app-header { gap: .5rem; }
  .app-header h1 { font-size: .95rem; }
  .tabs { order: 3; flex-basis: 100%; }
  .job-grid, .search-results { grid-template-columns: 1fr; }
}

/* ---- Calendar (B3): personal cross-team view + per-team tab ---- */
.cal-view { padding: .25rem 0; }
.cal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.cal-topbar h2, .cal-topbar h3 { margin: 0; }
.cal-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-mlabel { min-width: 9rem; text-align: center; font-weight: 600; }
.cal-modes { display: flex; gap: .25rem; }
.cal-modes .btn.on { background: var(--accent); color: #10131a; border-color: var(--accent); }

.cal-month .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { margin-bottom: 4px; }
.cal-wd { text-align: center; font-size: .8rem; color: var(--fg-dim); padding: 2px 0; }
.cal-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; min-height: 84px; padding: 3px; display: flex; flex-direction: column; gap: 2px; }
.cal-cell.cal-empty { background: transparent; border: none; }
.cal-cell.cal-today { border-color: var(--accent); }
/* Sourcing pre-fill: a tickable summary instead of a field-by-field accept list. */
.src-actions { display: flex; gap: .4rem; align-items: center; margin: .5rem 0; flex-wrap: wrap; }
.src-list { display: grid; gap: .3rem; }
.src-item { display: flex; align-items: flex-start; gap: .55rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); cursor: pointer; }
.src-item:hover { border-color: var(--accent); }
.src-item-warn { border-color: var(--danger, #c0392b); }
.src-item-body { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.src-item-title { font-weight: 600; font-size: .9rem; }
.src-item-name { font-size: .85rem; color: var(--fg); }
.src-item-detail { font-size: .82rem; color: var(--fg-dim); display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.src-cost-part { display: inline-flex; align-items: center; gap: .25rem; }
/* Wo der Tausch angeboten wird - deutlich vom Preis abgesetzt, nicht in Klammern dahinter. */
.src-shop { color: var(--fg-dim); font-size: .78rem; margin-left: .5rem; }
/* A job-specific route (the paladin's cheaper weapon buy), set apart so it does not read as the slot's price for everyone. */
.src-scoped { font-style: italic; }
/* The raid an item drops in — the normal way to get it, so it reads a shade stronger than a shop. */
.src-drop { color: var(--fg); font-size: .78rem; }
/* A source run takes the better part of a minute; say so where the button is, not at the page top. */
.src-busy { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; color: var(--accent); font-size: .85rem; }
.src-spinner {
  width: .85rem; height: .85rem; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent);
  animation: src-spin .8s linear infinite;
}
@keyframes src-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .src-spinner { animation-duration: 2.4s; } }
/* Handed-in gear you already own reads differently from something you still have to farm. */
.src-cost-piece { opacity: .7; font-style: italic; }
/* A route that no longer exists in the game — muted and italic, so it reads as an absence, not a price. */
.src-retired { color: var(--fg-dim); font-style: italic; }

/* The stored origin data, folded by kind. Three hundred rows of `obtain.item.49762` told nobody
   anything; the address stays because the delete button acts on it, but it is no longer alone. */
.src-group { border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); margin: .35rem 0; }
.src-group > summary { padding: .45rem .7rem; cursor: pointer; font-weight: 600; }
.src-group > summary:hover { background: var(--bg-hover, rgba(127, 127, 127, .08)); }
.src-group > table { margin: 0; }
/* Icon and address on one line: the picture never wraps away from the thing it pictures, and the text
   beside it breaks within its own column instead of pushing the table past the right edge.
   `anywhere` rather than `break-word` on purpose — only the former lets the cell shrink below its
   longest word, which is what keeps a forty-id list inside the table. */
.src-key-cell { display: flex; align-items: flex-start; gap: .4rem; flex-wrap: nowrap; }
.src-key-cell > .src-ic { margin-top: .1rem; }
.src-key-text { min-width: 0; overflow-wrap: anywhere; }
.src-val { overflow-wrap: anywhere; }
/* A saved route drawn in words, the same sentence the preview shows — stacked one route per line in
   the cell, with the raw JSON one fold away (the address is what the ✕ acts on, so it never hides). */
.src-val-words { display: flex; flex-direction: column; gap: .25rem; }
.src-val-words .src-item-detail { align-items: flex-start; }
.src-val-raw { margin-top: .3rem; }
.src-val-raw > summary { cursor: pointer; }
.src-val-raw[open] { white-space: pre-wrap; word-break: break-all; }

/* A floor that comes from the global catalogue: the pencil sits where the working one would, struck
   through, so the row reads the same as an editable one and the reason lives in the tooltip. */
.tc-locked {
  display: inline-block; padding: 0 .35rem; color: var(--fg-dim); opacity: .55;
  text-decoration: line-through; cursor: help; user-select: none;
}

/* The archive: expansions as an accordion, newest on top. "Archived" is a state on a row, never a
   place of its own — the expansion IS the place (docs/features/2026-07-archive-and-contents.md). */
.src-ex { border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); margin-bottom: .4rem; overflow: hidden; }
.src-ex-head {
  display: flex; align-items: center; gap: .45rem; width: 100%; padding: .55rem .7rem;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.src-ex-head:hover { background: var(--bg-hover, rgba(127, 127, 127, .08)); }
.src-ex-open > .src-ex-head { font-weight: 600; }
.src-ex-body { padding: .2rem .7rem .7rem; border-top: 1px solid var(--border); }
.src-ex-tier { padding: .55rem 0; border-bottom: 1px dashed var(--border); }
.src-ex-tier:last-child { border-bottom: 0; }
.src-ex-title { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.src-fights { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0; font-size: .82rem; }
.src-fight { white-space: nowrap; }
.src-ic { width: 20px; height: 20px; flex: 0 0 auto; image-rendering: auto; vertical-align: middle; }
.src-ic-lg { width: 34px; height: 34px; margin-top: .1rem; }

/* Deep-link highlight: the element a ?plan=/?date=/?report= link pointed at. */
.tm-focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
tr.tm-focus > td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cal-dn { font-size: .78rem; color: var(--fg-dim); align-self: flex-end; }

/* Group-completeness colours (green=all in, amber=tentative, red=someone out, neutral=none). */
.cal-st-green { --st: #3fb950; }
.cal-st-amber { --st: #d29922; }
.cal-st-red   { --st: #f85149; }
.cal-st-none  { --st: var(--fg-dim); }

.cal-chip {
  display: flex; align-items: center; gap: 4px;
  font-size: .76rem; line-height: 1.2; padding: 2px 5px; border-radius: 4px;
  background: hsl(var(--tc-h, 210) 45% 30%); color: #eef1f6;
  border-left: 3px solid var(--st, hsl(var(--tc-h, 210) 70% 60%));
  overflow: hidden; white-space: nowrap;
}
.cal-chip:hover { text-decoration: none; filter: brightness(1.15); }
.cal-chip.cal-no { text-decoration: line-through; } /* the caller's own RSVP is "out" */
.cal-chip.cal-past { opacity: .4; } /* past occurrences are done — fade, don't strike */
.cal-chip.cal-past:hover { opacity: .7; }
.cal-chip .cal-t { font-variant-numeric: tabular-nums; opacity: .85; flex: none; }
.cal-chip .cal-team { font-weight: 600; }
.cal-chip .cal-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-chip .cal-cnt { margin-left: auto; padding-left: 6px; font-variant-numeric: tabular-nums; opacity: .9; flex: none; }
/* Status pip: a solid dot in the completeness colour, so it reads even on the team-hue bg. */
.cal-pip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--fg-dim)); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

.cal-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin: -.25rem 0 .5rem; }
.cal-legend .cal-lg { display: inline-flex; align-items: center; gap: 5px; }

/* ---- FFLogs Logs tab: guided connect + connected state ---- */
.logs-steps { margin: .5rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.logs-steps li { line-height: 1.4; }
.logs-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .35rem 0 .15rem; }
.logs-connected { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 600; }
.logs-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #2f6b47; color: #eafff2;
  font-size: .8rem; line-height: 1; flex: none;
}
/* Per-report boss chips: which encounters were fought, killed (green) or only wiped. */
.log-bosses { display: flex; flex-wrap: wrap; gap: .3rem; }
.log-boss {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem;
  padding: .1rem .4rem; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--fg);
}
.log-boss.on { border-color: #2f6b47; }
.log-boss .log-b-k { color: #7fd1a3; font-weight: 700; font-variant-numeric: tabular-nums; }
.log-boss .log-b-w { color: #e58aa6; font-variant-numeric: tabular-nums; }

.cal-agenda { display: flex; flex-direction: column; gap: .5rem; }
.cal-ag-day { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; align-items: start; }
.cal-ag-date { color: var(--fg-dim); font-weight: 600; padding-top: 2px; }
.cal-ag-items { display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 640px) {
  .cal-cell { min-height: 60px; }
  .cal-chip { font-size: .68rem; }
  .cal-ag-day { grid-template-columns: 4.5rem 1fr; }
}

/* --- Tome purchase advisor (Kaufberater) ------------------------------------------------------ */
.adv-head h2 { margin: 0 0 .25rem; }
.adv-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; margin-top: .75rem; }
.adv-set, .adv-bal { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--fg-dim); }
.adv-set select, .adv-bal input { height: 38px; box-sizing: border-box; padding: .4rem .55rem; border-radius: 6px; border: 1px solid var(--border, #333b4d); background: var(--bg-soft); color: var(--fg); }
.adv-set { flex: 1 1 16rem; min-width: 0; }
.adv-set-row { display: flex; align-items: center; gap: .45rem; }
.adv-set-row select { flex: 1 1 auto; min-width: 0; }
.adv-set select { width: 100%; }
.adv-bal input { width: 8rem; }
.adv-cap { font-size: .72rem; color: var(--fg-dim); }
.adv-set-one { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--fg); }

/* Job label: icon + name, one reusable chip used wherever a class is shown. */
.job-chip { display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; }
.job-ic { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.job-chip-n { line-height: 1.1; }
.adv-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1rem; }
.adv-count { font-size: .75rem; color: var(--fg-dim); background: var(--bg-soft); border-radius: 999px; padding: .05rem .5rem; }
.adv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.adv-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: 8px; background: var(--bg-soft); }
.adv-ico { width: 32px; height: 32px; border-radius: 5px; flex: 0 0 auto; }
.adv-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.adv-name { font-weight: 600; }
.adv-sub { font-size: .76rem; color: var(--fg-dim); }
.adv-need { font-size: .74rem; color: var(--fg-dim); margin-top: .15rem; display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
.adv-mats { color: var(--fg); }
.adv-vendor { color: var(--fg-dim); }
.adv-cost { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.adv-cost-u { font-size: .72rem; color: var(--fg-dim); font-weight: 400; }
.adv-when { font-size: .76rem; color: var(--accent); white-space: nowrap; }
.adv-sum { margin-top: .6rem; }
.adv-variants { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.adv-var { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border, #333b4d); background: var(--bg-soft); color: var(--fg-dim); font-size: .8rem; cursor: pointer; }
.adv-var:hover { color: var(--fg); }
.adv-var.on { color: var(--fg); border-color: var(--accent); background: #25304a; }

/* Set-progress summary + the in-game two-column grid */
.adv-summary { display: flex; flex-direction: column; gap: .7rem; }
.adv-progress { height: 6px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.adv-progress-bar { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.adv-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.adv-metric { background: var(--bg-soft); border-radius: 8px; padding: .55rem .7rem; }
.adv-metric-l { display: block; font-size: .74rem; color: var(--fg-dim); }
.adv-metric-v { display: block; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.adv-metric-u { font-size: .8rem; color: var(--fg-dim); font-weight: 400; }
.adv-substats { margin: 0; font-size: .82rem; font-variant-numeric: tabular-nums; }
.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.adv-col { display: flex; flex-direction: column; gap: 6px; }
.adv-cell { display: flex; align-items: center; gap: 12px; padding: .55rem .7rem; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid transparent; border-left-width: 4px; cursor: pointer;
  text-align: left; color: inherit; font: inherit; width: 100%; }
.adv-cell:hover { border-color: var(--accent); }
.adv-cell.adv-ok { border-left-color: #3fb37f; }
.adv-cell.adv-owned { border-left-color: #4a90d9; }
.adv-cell.adv-miss { border-left-color: #e0a53a; }
.adv-cell.adv-even { border-left-color: #6b7280; }
.adv-even .adv-badge { background: #6b7280; }
.adv-cell-empty { background: transparent; border: none; cursor: default; min-height: 54px; }
.adv-cell-ico { position: relative; flex: 0 0 auto; width: 42px; height: 42px; }
.adv-cell-ico img { width: 42px; height: 42px; border-radius: 6px; }
.adv-cell-none { display: block; width: 42px; height: 42px; border-radius: 6px; background: var(--bg); }
.adv-cell .adv-badge { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%;
  font-size: 11px; line-height: 16px; text-align: center; color: #fff; }
.adv-cell-il { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: .58rem; line-height: 1.5;
  background: rgba(0,0,0,.6); color: #fff; border-radius: 0 0 6px 6px; letter-spacing: .02em; }
.adv-cell-note { font-size: .68rem; color: #9aa4b5; font-style: italic; }
.adv-ok .adv-badge { background: #3fb37f; }
.adv-owned .adv-badge { background: #4a90d9; }
.adv-miss .adv-badge { background: #e0a53a; }
.adv-cell-slot { font-size: .88rem; color: var(--fg); font-weight: 500; }
.adv-gridhint { margin: .7rem 0 0; }
@media (max-width: 560px) { .adv-grid { grid-template-columns: 1fr; } }

/* Simulator */
.adv-gridhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: .7rem; }
.adv-gridhead .adv-h { margin: 0; }
.adv-simtoggle { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--border, #333b4d);
  background: var(--bg-soft); color: var(--fg-dim); font-size: .82rem; cursor: pointer; }
.adv-simtoggle:hover { color: var(--fg); }
.adv-simtoggle.on { color: #fff; border-color: #7a6ff0; background: #4b3fb0; }
.adv-cell.adv-sim { border-left-color: #8a7ff0; }
.adv-sim .adv-badge { background: #8a7ff0; }
.adv-cell.open { border-color: var(--accent); }
.adv-simbar { display: flex; align-items: center; gap: 12px; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border, #2a3142); }
.adv-simstat { font-size: .84rem; color: var(--fg-dim); }
.adv-simstat b { color: var(--fg); font-variant-numeric: tabular-nums; }
.adv-simspacer { flex: 1 1 auto; }
.adv-simbtn { padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--border, #333b4d);
  background: var(--bg-soft); color: var(--fg); font-size: .82rem; cursor: pointer; }
.adv-simbtn.primary { border-color: var(--accent); background: #25304a; }
.adv-simbtn:disabled { opacity: .5; cursor: default; }

/* Set-panel top controls: a Recommendation⇄My-layout segmented toggle + the action buttons. */
.adv-ctrls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.adv-seg { display: inline-flex; border: 1px solid var(--border, #333b4d); border-radius: 8px; overflow: hidden; }
.adv-seg-b { padding: .35rem .85rem; border: none; background: var(--bg-soft); color: var(--fg-dim); font-size: .82rem; cursor: pointer; }
.adv-seg-b + .adv-seg-b { border-left: 1px solid var(--border, #333b4d); }
.adv-seg-b.on { background: var(--accent); color: #fff; }
.adv-seg-b:disabled { opacity: .45; cursor: default; }

/* Compare modal: current vs my sim vs BiS, side by side. */
.adv-cmp-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.adv-cmp-card { background: var(--bg-soft); border: 1px solid var(--border, #333b4d); border-radius: 10px; max-width: 520px; width: 100%; max-height: 85vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.adv-cmp-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--border, #333b4d); position: sticky; top: 0; background: var(--bg-soft); }
.adv-cmp-head .adv-h { margin: 0; }
.adv-cmp-x { background: none; border: none; color: var(--fg); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.adv-cmp-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.adv-cmp-tbl th, .adv-cmp-tbl td { padding: .4rem .8rem; text-align: right; font-variant-numeric: tabular-nums; }
.adv-cmp-tbl thead th { color: var(--fg-dim); font-weight: 600; border-bottom: 1px solid var(--border, #333b4d); }
.adv-cmp-tbl tbody th { text-align: left; color: var(--fg-dim); font-weight: 500; }
.adv-cmp-tbl th:first-child, .adv-cmp-tbl td:first-child { text-align: left; }
.adv-cmp-tbl tbody tr:nth-child(odd) td, .adv-cmp-tbl tbody tr:nth-child(odd) th { background: rgba(127,127,127,.06); }
.adv-cmp-tbl thead th:nth-child(3), .adv-cmp-tbl td:nth-child(3) { color: var(--accent); }
.adv-swap { margin-top: .8rem; border: 1px solid var(--border, #2a3142); border-radius: 8px; padding: .6rem; background: var(--bg); }
.adv-swap-head { font-weight: 600; font-size: .85rem; margin-bottom: .5rem; }
.adv-swap-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.adv-pick { display: flex; flex-direction: column; gap: .12rem; padding: .4rem .5rem;
  border-radius: 6px; border: 1px solid transparent; background: var(--bg-soft); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.adv-pick:hover { border-color: var(--accent); }
.adv-pick.on { border-color: #3fb37f; }
.adv-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-pick-tag { font-size: .7rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0 5px; }
.adv-pick-meta { font-size: .74rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.adv-bridge { display: block; margin-top: .15rem; font-size: .74rem; color: var(--accent); cursor: help; }
.adv-cost-raid { font-size: .8rem; color: var(--fg-dim); font-weight: 400; }

/* Verdict banner — the one best next step */
.adv-verdict { display: flex; align-items: center; gap: 14px; border: 1px solid var(--accent); background: #202a40; }
.adv-verdict-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px; }
.adv-verdict-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.adv-verdict-l { font-size: .74rem; color: var(--fg-dim); }
.adv-verdict-t { font-size: 1.05rem; font-weight: 600; }
.adv-verdict-s { font-size: .8rem; color: var(--fg-dim); }
.adv-verdict-gain { flex: 0 0 auto; text-align: right; }
.adv-verdict-gain b { display: block; font-size: 1.5rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.adv-verdict-gain span { font-size: .7rem; color: var(--fg-dim); }
.adv-verdict-soft { border-color: #3fb37f; background: var(--bg-soft); }
.adv-verdict-soft .adv-verdict-ico { background: #3fb37f; }

/* The ranked order */
.adv-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: .6rem; }
.adv-plan-head .adv-h { margin: 0; }
.adv-plan-head .adv-variants { margin: 0; }
.adv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adv-step { display: flex; align-items: center; gap: 10px; padding: .5rem .55rem; border-radius: 8px; background: var(--bg-soft); }
.adv-rank { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); color: var(--fg-dim);
  font-size: .82rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.adv-step:first-child .adv-rank { background: var(--accent); color: #fff; }
.adv-step .adv-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: .2rem; }
.adv-slot-tag { font-size: .72rem; color: var(--fg-dim); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.adv-how { font-size: .78rem; color: var(--fg-dim); }
.adv-how-i { font-style: normal; margin-right: 3px; }
.adv-then { color: var(--accent); }
.adv-mat { white-space: nowrap; }
.adv-mat.ok { color: var(--ok, #3f9b6b); }

/* Material & books: what the open slots need, what you hold, and a box to correct it by hand. */
.adv-matlist { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.adv-matrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .35rem .5rem; border-radius: 6px; background: var(--bg-soft); }
.adv-mat-ic { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.adv-mat-n { flex: 1 1 12rem; min-width: 0; font-size: .85rem; cursor: help; }
/* The have/need column is right-aligned at a fixed width so the numbers line up down the list
   instead of drifting with the label. */
.adv-mat-have { flex: 0 0 auto; min-width: 4.5rem; text-align: right; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adv-mat-have.ok { color: var(--ok, #3f9b6b); }
/* The number sits CENTRED, not hard against the spinner. Styling the spinner's own margin is a
   shadow-DOM detail browsers honour inconsistently, so the separation comes from the text alignment
   instead — it holds everywhere, and a stepper box reads well centred. */
.adv-mat-in { width: 6rem; padding: .35rem .55rem; border-radius: 6px; border: 1px solid var(--border, #333b4d); background: var(--bg); color: var(--fg); font-variant-numeric: tabular-nums; text-align: center; }
.adv-mat-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.adv-when.now { color: #3fb37f; }
.adv-when.raid { color: #e0a53a; }
.adv-plan-note { margin: .7rem 0 0; }
.adv-done { text-align: center; font-size: 1.05rem; }

/* from → to */
.adv-fromto { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.adv-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.adv-chip img { width: 26px; height: 26px; border-radius: 4px; flex: 0 0 auto; }
.adv-chip-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.adv-chip-from .adv-chip-n { color: var(--fg-dim); }
.adv-chip-il { flex: 0 0 auto; font-size: .72rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.adv-chip-empty { color: var(--fg-dim); font-style: italic; font-size: .82rem; }
.adv-arrow { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.adv-arrow-pct { font-size: .72rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.adv-arrow-i { color: var(--accent); font-size: .8rem; }

/* grid cell: worn → next step */
.adv-cell-pair { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.adv-cell-arrow { color: var(--accent); font-size: 1rem; }
.adv-cell-main { display: flex; flex-direction: column; min-width: 0; gap: .12rem; }
.adv-cell-top { display: flex; align-items: baseline; gap: 8px; }
.adv-cell-subs { font-size: .74rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; line-height: 1.35; }
.adv-cell-gain { font-size: .82rem; color: var(--accent); font-weight: 600; }
.adv-verdict-il { font-size: .8rem; color: var(--fg-dim); font-weight: 400; }

/* substat bars: worn vs BiS per stat */
.adv-subs { display: flex; flex-direction: column; gap: 5px; }
.adv-subs-h { font-size: .74rem; }
.adv-subrow { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; font-size: .78rem; }
.adv-sublabel { color: var(--fg-dim); }
.adv-subbar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.adv-subbar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.adv-subbar-fill.full { background: #3fb37f; }
.adv-subval { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* simulator swap dropdown — directly under the clicked slot */
.adv-cellwrap { position: relative; }
.adv-cellwrap .adv-swap { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--bg); border: 1px solid var(--accent); border-radius: 8px; padding: .6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* hover compare header: worn → target */
.obtain-cmp { display: flex; flex-direction: column; gap: 3px; padding: 0 0 .5rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--border, #2a3142); min-width: 260px; }
.obtain-cmp-p { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .82rem; }
.obtain-cmp-p img { width: 28px; height: 28px; border-radius: 4px; flex: 0 0 auto; }
.obtain-cmp-t { display: flex; flex-direction: column; min-width: 0; }
.obtain-cmp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obtain-cmp-subs { font-size: .72rem; color: var(--fg-dim); white-space: normal; font-variant-numeric: tabular-nums; }
.obtain-cmp-p em { font-style: normal; color: var(--fg-dim); font-size: .74rem; }
.obtain-cmp-cur .obtain-cmp-n { color: var(--fg-dim); }
.obtain-cmp-arrow { color: var(--accent); font-size: .8rem; padding-left: 8px; }