/* Layout: app shell with a frosted sticky top bar over one centred column (max 1180px); the group builder splits into a parties grid and a side rail that stacks under 980px.
   Single committed look: semi-dark blue with the logo's gold as the one accent. */
:root{
  color-scheme: dark;
  --bg:#111b2e;
  --bg-deep:#0b1221;
  --surface:#17243c;
  --surface-2:#1f3253;
  --glass:rgba(14,22,38,.78);
  --line:rgba(150,185,240,.12);
  --line-strong:rgba(150,185,240,.28);
  --fg:#edf2fb;
  --muted:#b0bfd9;
  --faint:#8899bb;
  --gold:#e4b95f;
  --gold-soft:rgba(228,185,95,.14);
  --blue:#6fa9ff;
  --blue-soft:rgba(111,169,255,.16);
  --ink:#0a1222;
  --on-accent:#121e34;
  --sunk-rgb:6 11 22;
  --hi-rgb:255 255 255;
  --ok:#74d39c; --warn:#f0c75a; --late:#8cbaff; --bad:#f28b8b;
  --discord:#5865f2;
  --f-display:"Sora", "Segoe UI", system-ui, sans-serif;
  --f-body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --r:16px;
  --shadow:0 1px 0 rgb(var(--hi-rgb) / .05) inset, 0 18px 40px -24px rgba(4,10,24,.8);
}
html{background:var(--bg-deep)}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--f-body);min-height:100vh}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg-deep)}
*{box-sizing:border-box}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:.01em}
h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08}
h2{font-size:1.55rem;line-height:1.2}
h3{font-size:1.15rem}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* prototype bar */
.proto{background:var(--ink);border-bottom:1px solid var(--line);font-size:.8rem}
.proto .wrap{display:flex;gap:6px;align-items:center;padding-block:6px;overflow-x:auto;scrollbar-width:none}
.proto .tag{color:var(--gold);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;margin-right:6px;white-space:nowrap}
.proto a{color:var(--muted);text-decoration:none;padding:3px 9px;border-radius:99px;white-space:nowrap}
.proto a:hover{color:var(--fg)}
.proto a.on{background:var(--gold-soft);color:var(--gold)}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg-deep);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gold);font-family:var(--f-display);font-size:1.3rem}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav a{color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:8px;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--fg);background:var(--surface)}
.nav a.on{color:var(--fg);background:var(--surface-2)}
.me{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.88rem;white-space:nowrap}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--discord);display:grid;place-items:center;color:#fff;font-weight:600;font-size:.8rem;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .9rem/1 var(--f-body);padding:10px 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--on-accent)}
.btn-gold:hover{background:#e6bf6b}
.btn-discord{background:var(--discord);border-color:var(--discord);color:#fff}
.btn-discord:hover{background:#6b76f5}
.btn-sm{padding:7px 11px;font-size:.8rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}

main{padding-block:28px 64px}
.page-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.page-head .sub{color:var(--muted);margin-top:6px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:980px){.split{grid-template-columns:minmax(0,1fr)}}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-accepted{color:var(--ok)} .st-tentative{color:var(--warn)} .st-late{color:var(--late)} .st-bench{color:var(--muted)} .st-absent{color:var(--bad)} .st-pending{color:var(--gold)}
.tag{font-size:.72rem;padding:2px 8px;border-radius:5px;background:var(--surface-2);color:var(--muted);font-weight:500;white-space:nowrap}
.tag.gold{background:var(--gold-soft);color:var(--gold)}

/* role glyph */
.rg{width:18px;height:18px;flex:none;display:inline-grid;place-items:center;border-radius:4px;background:var(--ink)}
.rg svg{width:12px;height:12px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);border:1px solid var(--gold);color:var(--fg);padding:10px 16px;border-radius:8px;z-index:50;font-size:.9rem;max-width:calc(100% - 32px)}

/* landing */
.hero{padding-block:56px 40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero p.lede{font-size:1.12rem;color:var(--muted);max-width:52ch;margin-top:16px}
.hero .row{margin-top:26px}
.date-strip{display:flex;flex-wrap:wrap;gap:22px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.date-strip div{display:flex;flex-direction:column}
.date-strip b{font-family:var(--f-display);font-weight:400;font-size:1.4rem;color:var(--gold)}
.date-strip span{font-size:.8rem;color:var(--muted)}
.mini-board{background:var(--bg-deep);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;transform:rotate(-1.2deg)}
.mini-board .g{background:var(--surface);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px}
.mini-board .g b{font-size:.68rem;color:var(--faint);letter-spacing:.1em;font-weight:600}
.mini-board .m{font-size:.8rem;display:flex;gap:6px;align-items:center}
.mini-board .m i{width:7px;height:7px;border-radius:50%;flex:none}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-block:24px 40px}
@media (max-width:860px){.features{grid-template-columns:minmax(0,1fr)}}
.features h3{margin-bottom:6px;color:var(--fg)}
.features p{color:var(--muted);font-size:.93rem}
.later{border-top:1px solid var(--line);padding-block:26px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.foot{border-top:1px solid var(--line);padding-block:20px;font-size:.8rem;color:var(--faint)}

/* login */
.login{min-height:calc(100vh - 120px);display:grid;place-items:center;padding-block:40px}
.login .card{max-width:420px;width:100%;padding:28px;text-align:center;display:flex;flex-direction:column;gap:16px}
.login ul{text-align:left;margin:0;padding-left:18px;color:var(--muted);font-size:.88rem}
.login .btn{width:100%;padding:13px}

/* dashboard */
.guild-band{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.guild-band .who{display:flex;align-items:center;gap:14px}
.crest{width:52px;height:52px;border-radius:12px;background:var(--ink);display:grid;place-items:center;border:1px solid var(--gold)}
.raid-list{display:flex;flex-direction:column}
.raid-item{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.raid-item:first-child{border-top:0;padding-top:0}
.cal{background:var(--ink);border-radius:8px;text-align:center;padding:6px 0;line-height:1.15}
.cal small{display:block;font-size:.68rem;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.cal b{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
@media (max-width:600px){.raid-item{grid-template-columns:60px minmax(0,1fr)}.raid-item .acts{grid-column:1/-1}}
.meter{height:6px;border-radius:99px;background:var(--ink);overflow:hidden;margin-top:6px;max-width:240px}
.meter i{display:block;height:100%;background:var(--gold)}
.dash{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:20px}
@media (max-width:980px){.dash{grid-template-columns:minmax(0,1fr)}}
.class-bars{display:flex;flex-direction:column;gap:7px}
.class-bars .cb{display:grid;grid-template-columns:110px minmax(0,1fr) 24px;gap:10px;align-items:center;font-size:.84rem}
.class-bars .bar{height:8px;border-radius:99px;background:var(--ink);overflow:hidden}
.class-bars .bar i{display:block;height:100%}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;padding:6px 0;border-top:1px solid var(--line)}
.kv:first-of-type{border-top:0}

/* create raid */
.content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.content-card{position:relative;text-align:left;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;color:var(--fg);font:inherit;display:flex;flex-direction:column;gap:6px}
.content-card:hover{border-color:var(--faint)}
.content-card.on{border-color:var(--gold);background:var(--gold-soft)}
.content-card[disabled]{opacity:.5;cursor:not-allowed}
.content-card .size{font-family:var(--f-display);font-size:2rem;line-height:1;color:var(--gold)}
.content-card .size small{font-family:var(--f-body);font-size:.75rem;color:var(--muted);margin-left:4px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:600px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:.8rem;color:var(--muted);font-weight:500}
input,select,textarea{font:inherit;font-size:.92rem;color:var(--fg);background:var(--bg-deep);border:1px solid var(--line);border-radius:8px;padding:9px 11px;width:100%;min-width:0}
textarea{min-height:84px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--fg)}
.check input{width:auto;margin-top:4px;accent-color:var(--gold);flex-shrink:0}
.section-label{margin:26px 0 12px}

/* signups */
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.count{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.count b{font-family:var(--f-display);font-weight:400;font-size:1.7rem}
.count b span{font-size:1rem;color:var(--faint)}
.count.short b{color:var(--warn)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{font:500 .84rem var(--f-body);color:var(--muted);background:none;border:1px solid transparent;border-radius:99px;padding:5px 12px;cursor:pointer}
.tabs button.on{border-color:var(--line);background:var(--surface);color:var(--fg)}
.table-box{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 14px;border-top:1px solid rgba(62,90,135,.5);white-space:nowrap}
tr:first-child td{border-top:0}
.cname{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.discord-embed{background:#2b2d31;border-radius:8px;padding:12px;font-size:.84rem;color:#dbdee1;display:flex;gap:10px}
.discord-embed .bot{width:34px;height:34px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none}
.discord-embed .body{min-width:0;flex:1}
.discord-embed .name{color:#fff;font-weight:600}
.discord-embed .name em{font-style:normal;background:var(--discord);color:#fff;font-size:.62rem;padding:1px 4px;border-radius:3px;margin-left:4px;vertical-align:2px}
.discord-embed .em{border-left:4px solid var(--gold);background:#232428;border-radius:4px;padding:10px 12px;margin-top:6px;display:flex;flex-direction:column;gap:4px}
.discord-embed .em b{color:#fff}
.discord-embed .dbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.discord-embed .dbtns span{background:#4e5058;color:#fff;border-radius:4px;padding:5px 10px;font-size:.78rem;font-weight:500}
.discord-embed .dbtns span.p{background:#248046}
.pug-req{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.pug-req:first-of-type{border-top:0}

/* builder */
.builder-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.role-targets{display:flex;gap:8px;flex-wrap:wrap}
.rt{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.85rem}
.rt b{font-variant-numeric:tabular-nums}
.rt.off b{color:var(--warn)}
.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:6px}
.group-h{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;letter-spacing:.12em;color:var(--faint);font-weight:600;text-transform:uppercase;padding:0 2px 2px}
.group-h .bf{display:flex;gap:3px}
.group-h .bf i{font-style:normal;font-size:.62rem;letter-spacing:0;padding:1px 4px;border-radius:3px;background:var(--ink);color:var(--muted)}
.group-h .bf i.miss{background:rgba(240,199,90,.18);color:var(--warn)}
.slot{min-height:40px;border-radius:7px;border:1px dashed var(--line);display:flex;align-items:stretch}
.slot.over,.pool.over{border-color:var(--gold);background:var(--gold-soft)}
.slot .empty{flex:1;display:flex;align-items:center;padding:0 10px;font-size:.78rem;color:var(--faint)}
.slot.target .empty{color:var(--gold)}
.chip{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg-deep);border:1px solid transparent;border-radius:7px;padding:6px 8px;cursor:grab;user-select:none;min-width:0}
.chip:hover{border-color:var(--line)}
.chip.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.chip .n{font-weight:600;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .s{font-size:.72rem;color:var(--faint);white-space:nowrap;margin-left:auto}
.chip .st{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.pool{display:flex;flex-direction:column;gap:6px;min-height:60px;border:1px dashed var(--line);border-radius:var(--r);padding:8px}
.pool .chip{flex:none}
.rail{display:flex;flex-direction:column;gap:16px}
.buff-list{display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.buff{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 0}
.buff .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:700;color:var(--on-accent)}
.ic.y{background:var(--ok)} .ic.n{background:var(--bad)} .ic.p{background:var(--warn)}
.buff small{color:var(--faint);font-size:.74rem}
.matrix{overflow-x:auto}
.matrix table{font-size:.78rem}
.matrix th,.matrix td{padding:5px 6px;text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:left;white-space:nowrap}
.mx-y{color:var(--ok);font-weight:700}
.mx-n{color:var(--warn);font-weight:700}
.mx-o{color:var(--faint)}
.prefs{display:flex;flex-direction:column;gap:8px}
.hint{font-size:.8rem;color:var(--faint)}

/* pug */
.pug-top{border-bottom:1px solid var(--line);background:var(--bg-deep)}
.pug-top .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:12px;flex-wrap:wrap}
.pug{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
@media (max-width:900px){.pug{grid-template-columns:minmax(0,1fr)}}
.expiry{display:flex;align-items:center;gap:10px;background:var(--gold-soft);border:1px solid var(--gold);border-radius:8px;padding:8px 12px;color:var(--gold);font-size:.88rem}
.expiry b{font-family:var(--f-mono);font-weight:500}
.done{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;padding:12px 0}
@media (prefers-reduced-motion:no-preference){.chip{transition:border-color .12s,box-shadow .12s}.mini-board{transition:transform .4s}.mini-board:hover{transform:rotate(0)}}

/* ---------- modern layer: soft glass surfaces, rounder shapes, geometric type ---------- */
body{background:radial-gradient(1100px 560px at 85% -8%, rgba(90,150,255,.20), transparent 62%),radial-gradient(800px 480px at -8% 18%, rgba(228,185,95,.07), transparent 60%),var(--bg);background-attachment:fixed;font-size:15px;letter-spacing:-.003em}
h1,h2,h3{font-weight:600;letter-spacing:-.025em}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.04}
h2{font-size:1.45rem}
h3{font-size:1.06rem;letter-spacing:-.015em}
.eyebrow{color:var(--blue);letter-spacing:.12em;font-size:.7rem;font-weight:700}
:focus-visible{outline:2px solid var(--blue)}
.proto{background:rgb(var(--sunk-rgb) / .7)}
.proto a.on{background:var(--blue-soft);color:var(--blue)}
.proto .tag{color:var(--blue);background:none}
.top{background:var(--glass);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line)}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--fg)}
.nav{flex:0 1 auto;margin-inline:auto;background:rgb(var(--hi-rgb) / .04);border:1px solid var(--line);border-radius:12px;padding:4px}
.nav a{border-radius:9px;padding:6px 14px;font-size:.88rem;font-weight:600}
.nav a.on{background:var(--surface-2);box-shadow:0 1px 0 rgb(var(--hi-rgb) / .08) inset,0 4px 12px -6px rgba(0,0,0,.6)}
.avatar{box-shadow:0 0 0 2px var(--bg-deep),0 0 0 3px var(--line-strong)}
.btn{border-radius:11px;border-color:var(--line-strong);background:rgb(var(--hi-rgb) / .05);font-weight:700;font-size:.88rem;transition:transform .12s, background .12s, box-shadow .12s}
.btn:hover{background:rgb(var(--hi-rgb) / .1)}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,#efc676,#d9a84a);border-color:transparent;color:var(--on-accent);box-shadow:0 6px 18px -8px rgba(228,185,95,.7)}
.btn-gold:hover{background:linear-gradient(180deg,#f4d088,#e0b257)}
.btn-discord{background:linear-gradient(180deg,#6a75f7,#5865f2);border-color:transparent;box-shadow:0 6px 18px -8px rgba(88,101,242,.8)}
.btn-discord:hover{background:linear-gradient(180deg,#7882f8,#626ef3)}
.card,.count,.group,.table-box{background:linear-gradient(180deg,rgb(var(--hi-rgb) / .035),rgb(var(--hi-rgb) / 0)),var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card{padding:20px}
.pill{border:0;background:color-mix(in srgb,currentColor 15%,transparent);padding:4px 10px}
.tag{border-radius:7px;background:rgb(var(--hi-rgb) / .06);font-weight:600}
.tag.gold{background:var(--gold-soft)}
input,select,textarea{border-radius:11px;background:rgb(var(--sunk-rgb) / .45);border-color:var(--line-strong);transition:border-color .12s, box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.content-card{border-radius:14px;background:rgb(var(--sunk-rgb) / .35)}
.content-card.on{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.content-card .size{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em}
.cal{border-radius:12px;background:rgb(var(--sunk-rgb) / .5);border:1px solid var(--line)}
.cal b{font-family:var(--f-display);font-weight:700}
.meter,.class-bars .bar{background:rgb(var(--sunk-rgb) / .55)}
.meter i{background:linear-gradient(90deg,var(--blue),var(--gold))}
.count b,.date-strip b{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em}
.date-strip b{color:var(--fg)}
.date-strip{border-top-color:var(--line)}
.tabs{background:rgb(var(--hi-rgb) / .04);border:1px solid var(--line);border-radius:12px;padding:4px;display:inline-flex}
.tabs button{border-radius:9px;font-weight:600}
.tabs button.on{background:var(--surface-2);border-color:transparent}
th{background:rgb(var(--sunk-rgb) / .25)}
td{border-top-color:var(--line)}
tbody tr:hover td{background:rgb(var(--hi-rgb) / .025)}
.group{padding:12px;gap:7px}
.slot{border-radius:11px;border-color:var(--line)}
.chip{border-radius:10px;background:rgb(var(--sunk-rgb) / .5)}
.chip:hover{border-color:var(--line-strong)}
.chip.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.slot.over,.pool.over{border-color:var(--blue);background:var(--blue-soft)}
.slot.target .empty{color:var(--blue)}
.pool{border-radius:14px}
.rt{border-radius:11px;background:rgb(var(--hi-rgb) / .04);border-color:var(--line)}
.group-h .bf i{border-radius:5px;background:rgb(var(--sunk-rgb) / .6)}
.mini-board{transform:none;border-radius:22px;background:linear-gradient(160deg,rgba(111,169,255,.12),rgb(var(--hi-rgb) / .02) 50%),var(--bg-deep);box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px var(--line)}
.mini-board .g{border-radius:12px;background:rgb(var(--hi-rgb) / .04)}
.crest{border-radius:14px;border-color:var(--line-strong);background:rgb(var(--sunk-rgb) / .5)}
.expiry{border-radius:12px}
.discord-embed{border-radius:12px}
.toast{border-radius:12px;border-color:var(--line-strong);background:var(--glass);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.buff .bn{display:flex;flex-direction:column;min-width:0}
.buff .bn em{font-style:normal;color:var(--gold);font-size:.72rem;font-weight:600}
.buff small{text-align:right}
.buff.na{opacity:.6}
.ic.o{background:var(--faint)}
.unv{color:var(--warn);font-weight:700;font-size:.7rem}
.sources{display:flex;flex-direction:column;gap:5px;font-size:.8rem;border-top:1px solid var(--line);padding-top:12px}
.sources a{color:var(--blue);text-decoration:none}
.sources a:hover{text-decoration:underline}
@media (prefers-reduced-motion:no-preference){.card,.group{transition:border-color .15s}.mini-board:hover{transform:translateY(-2px)}}
.totem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:.85rem}
.totem:first-child{border-top:0}
.totem .tt{grid-column:1/-1;color:var(--muted);font-size:.8rem}
.totem .tt b{color:var(--fg);font-weight:700}
@media (max-width:760px){.nav{margin-inline:0}}
.nav:empty{visibility:hidden}

/* ---------- v0.1 app additions ---------- */
:root{--tester:#c99bff;--tester-soft:rgba(201,155,255,.12)}
.nav{flex:1 1 auto}
.page-title{font-size:2.1rem}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:700px){.grid2{grid-template-columns:minmax(0,1fr)}}
.counts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.counts.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.count small{display:block;font-size:.76rem;color:var(--faint)}
.banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--line-strong);background:rgba(240,199,90,.08);color:var(--warn);border-radius:12px;padding:10px 14px;font-size:.9rem;margin-bottom:16px}
.banner.info{background:var(--blue-soft);color:var(--fg);border-color:var(--line)}
.banner.bad{background:rgba(242,139,139,.1);color:var(--bad)}
.empty-state{text-align:center;padding:34px 20px;display:flex;flex-direction:column;gap:12px;align-items:center}
.empty-state p{max-width:52ch;color:var(--muted)}
.st-waitlist{color:var(--tester)}
td select,td input{padding:5px 8px;font-size:.84rem;width:auto;border-radius:8px}
td .x{background:none;border:0;color:var(--faint);cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:6px}
td .x:hover{color:var(--bad);background:rgba(242,139,139,.1)}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:.88rem;flex-wrap:wrap}
.list-row:first-child{border-top:0}
.chips-inline{display:flex;flex-wrap:wrap;gap:6px}
.mini{font-size:.78rem}
.copybox{font-family:var(--f-mono);font-size:.78rem;background:rgb(var(--sunk-rgb) / .5);border:1px solid var(--line);border-radius:10px;padding:10px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;color:var(--muted)}
.saved{font-size:.78rem;color:var(--faint)}
a.rowlink{color:inherit;text-decoration:none}
a.rowlink:hover .cname span:last-child{text-decoration:underline}
.pct{display:grid;grid-template-columns:44px 90px;gap:8px;align-items:center}
.pct .bar{height:6px;border-radius:99px;background:rgb(var(--sunk-rgb) / .55);overflow:hidden}
.pct .bar i{display:block;height:100%}
.ann{padding:10px 0;border-top:1px solid var(--line)}
.ann:first-child{border-top:0;padding-top:0}
.ann h4{margin:0 0 3px;font:700 .95rem var(--f-display)}
.ann p{font-size:.88rem;color:var(--muted);white-space:pre-wrap}
details.more summary{cursor:pointer;color:var(--blue);font-size:.86rem;font-weight:600}
details.more[open] summary{margin-bottom:10px}
textarea.code{font-family:var(--f-mono);font-size:.78rem;min-height:340px}
.loading{padding:60px 0;text-align:center;color:var(--faint)}

/* Tester panel: temporary. Marks the space where member self sign-up and the Discord embed go later. */

/* ---------- v0.2: fantasy layer ---------- */
:root{--f-fantasy:"Cinzel", "Trajan Pro", Georgia, serif;--epic:#b06bff;--ember:#e0773a}
body{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath d='M0 260V170l90-60 70 40 110-90 90 70 70-30 120 95 80-55 100 60 120-120 90 85 80-35 110 75 90-50 130 80 90-40V260z' fill='%230d1628' fill-opacity='.55'/%3E%3Cpath d='M0 260v-50l120-40 90 30 140-70 110 60 90-20 150 55 110-45 140 50 120-60 110 40 120-25 140 45V260z' fill='%23080e1c' fill-opacity='.8'/%3E%3C/svg%3E") bottom center/100% 220px no-repeat fixed,
  radial-gradient(1100px 560px at 85% -8%, rgba(90,150,255,.20), transparent 62%),
  radial-gradient(800px 480px at -8% 18%, rgba(228,185,95,.08), transparent 60%), var(--bg)}
h1,h2,.page-title{font-family:var(--f-fantasy);font-weight:700;letter-spacing:.015em}
h1.page-title{font-size:2.15rem;background:linear-gradient(180deg,#fff7e2,#e8c47a 140%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.brand{font-family:var(--f-fantasy);font-weight:700;font-size:1.22rem;letter-spacing:.04em;background:linear-gradient(180deg,#ffe7ad,#d6a548);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand svg{filter:drop-shadow(0 2px 6px rgba(228,185,95,.35))}
.i .f{fill:currentColor}
.i{flex:none;vertical-align:-.15em}
.nav a{display:inline-flex;align-items:center;gap:7px}
.nav a .i{opacity:.75}
.nav a.on .i{opacity:1;color:var(--gold)}
.card{border-top-color:rgba(228,185,95,.22)}
h3.hi{display:flex;align-items:center;gap:8px}
h3.hi .i{color:var(--gold)}
.frame{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23e4b95f' stroke-width='1.4'%3E%3Cpath d='M1.5 23V8L8 1.5h15' stroke-opacity='.8'/%3E%3Cpath d='M5 23V9.5L9.5 5H23' stroke-opacity='.3'/%3E%3C/g%3E%3Cpath d='M6.5 4.4l2.1 2.1-2.1 2.1-2.1-2.1z' fill='%23e4b95f'/%3E%3C/svg%3E") top 6px left 6px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg transform='matrix(-1 0 0 1 24 0)'%3E%3Cg fill='none' stroke='%23e4b95f' stroke-width='1.4'%3E%3Cpath d='M1.5 23V8L8 1.5h15' stroke-opacity='.8'/%3E%3Cpath d='M5 23V9.5L9.5 5H23' stroke-opacity='.3'/%3E%3C/g%3E%3Cpath d='M6.5 4.4l2.1 2.1-2.1 2.1-2.1-2.1z' fill='%23e4b95f'/%3E%3C/g%3E%3C/svg%3E") top 6px right 6px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg transform='matrix(1 0 0 -1 0 24)'%3E%3Cg fill='none' stroke='%23e4b95f' stroke-width='1.4'%3E%3Cpath d='M1.5 23V8L8 1.5h15' stroke-opacity='.8'/%3E%3Cpath d='M5 23V9.5L9.5 5H23' stroke-opacity='.3'/%3E%3C/g%3E%3Cpath d='M6.5 4.4l2.1 2.1-2.1 2.1-2.1-2.1z' fill='%23e4b95f'/%3E%3C/g%3E%3C/svg%3E") bottom 6px left 6px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg transform='matrix(-1 0 0 -1 24 24)'%3E%3Cg fill='none' stroke='%23e4b95f' stroke-width='1.4'%3E%3Cpath d='M1.5 23V8L8 1.5h15' stroke-opacity='.8'/%3E%3Cpath d='M5 23V9.5L9.5 5H23' stroke-opacity='.3'/%3E%3C/g%3E%3Cpath d='M6.5 4.4l2.1 2.1-2.1 2.1-2.1-2.1z' fill='%23e4b95f'/%3E%3C/g%3E%3C/svg%3E") bottom 6px right 6px no-repeat,
  linear-gradient(180deg,rgb(var(--hi-rgb) / .04),rgb(var(--hi-rgb) / 0)),var(--surface);
  border-color:rgba(228,185,95,.32)}
.orn{display:flex;align-items:center;gap:10px;color:var(--gold);margin:4px 0}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(228,185,95,.5),transparent)}
.orn i{width:7px;height:7px;transform:rotate(45deg);background:var(--gold);display:block}

/* class badge */
.cbadge{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,#0e1626);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);color:var(--c);flex:none}
.cbadge.lg{width:34px;height:34px;border-radius:9px}
.cname{gap:7px}
.cname .rg{width:16px;height:16px;background:none}
.plus{font:700 .66rem var(--f-mono);color:var(--muted);background:rgb(var(--hi-rgb) / .06);border-radius:5px;padding:1px 5px}

/* status pills with icons */
.pill.ic::before{display:none}
.pill.ic{gap:5px}

/* raid hero */
.raid-hero{position:relative;overflow:hidden;border-radius:22px;padding:22px 24px 0;margin-bottom:20px;border:1px solid color-mix(in srgb,var(--tint) 45%,transparent);
  background:radial-gradient(640px 240px at 88% 20%,color-mix(in srgb,var(--tint) 34%,transparent),transparent 70%),linear-gradient(120deg,color-mix(in srgb,var(--tint) 20%,var(--bg-deep)),var(--bg-deep) 72%);box-shadow:var(--shadow)}
.raid-hero .wm{position:absolute;right:-26px;top:-36px;color:var(--tint);opacity:.16;pointer-events:none}
.raid-hero .top-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;position:relative}
.raid-hero .who{display:flex;gap:16px;align-items:center;min-width:0}
.medal{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--tint) 75%,#fff 10%),#0e1626 85%);border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(228,185,95,.14),0 12px 30px -10px var(--tint)}
.medal.sm{width:44px;height:44px;border-width:1.5px;box-shadow:0 0 0 3px rgba(228,185,95,.12)}
.raid-hero h1{font-size:clamp(1.7rem,3.4vw,2.4rem);background:linear-gradient(180deg,#fff7e2,#e8c47a 150%);-webkit-background-clip:text;background-clip:text;color:transparent}
.raid-hero .sub{color:var(--muted);margin-top:4px;max-width:70ch}
.raid-hero .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.subnav{display:flex;gap:2px;margin-top:18px;overflow-x:auto;scrollbar-width:none;position:relative}
.subnav a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--muted);text-decoration:none;font-weight:700;font-size:.88rem;border-bottom:2px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--fg)}
.subnav a.on{color:var(--gold);border-bottom-color:var(--gold)}
.subnav a .n{font:600 .7rem var(--f-mono);color:var(--faint)}
.t-onyxia{--tint:#d0552c}.t-hyjal{--tint:#3aa57c}.t-barrow{--tint:#6b8fb0}

/* guild hero */
.guild-hero{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:22px 24px}
.crest{width:64px;height:64px;border-radius:16px}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
@media (max-width:760px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{display:flex;gap:12px;align-items:center;background:rgb(var(--sunk-rgb) / .35);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stat .si{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);flex:none}
.stat b{display:block;font:700 1.35rem var(--f-display);letter-spacing:-.02em}
.stat span{font-size:.76rem;color:var(--muted)}
.stat-btn{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.stat-btn:hover{border-color:var(--gold)}.stat b .money{font-size:inherit;color:inherit}.stat-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.raid-item .medal{display:none}
@media (min-width:601px){.raid-item{grid-template-columns:76px 50px minmax(0,1fr) auto}.raid-item .medal{display:grid}}

/* by-class view */
.classgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.classcol{background:rgb(var(--sunk-rgb) / .35);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.classcol .ch{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--c);margin-bottom:4px}
.classcol .ch .faint{margin-left:auto;font:600 .78rem var(--f-mono)}
.classcol .m{display:flex;align-items:center;gap:6px;font-size:.84rem;min-width:0}
.classcol .m span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classcol .m .sp{margin-left:auto;color:var(--faint);font-size:.72rem;white-space:nowrap}
.sti{display:inline-grid;place-items:center;width:16px;height:16px;flex:none}
.sti.st-accepted{color:var(--ok)}.sti.st-late{color:var(--late)}.sti.st-tentative{color:var(--warn)}.sti.st-bench{color:var(--muted)}.sti.st-absent{color:var(--bad)}.sti.st-waitlist{color:var(--tester)}
.seg{display:inline-flex;background:rgb(var(--hi-rgb) / .04);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{font:600 .8rem var(--f-body);color:var(--muted);background:none;border:0;border-radius:8px;padding:5px 10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.seg button.on{background:var(--surface-2);color:var(--fg)}

/* items and loot */
.item{display:inline-flex;align-items:center;gap:7px;font-weight:700;min-width:0}
.item .nm{overflow:hidden;text-overflow:ellipsis}
.slot-tag{font-size:.72rem;color:var(--faint);font-weight:500}
.contest{background:rgba(240,199,90,.06)}
.who-list{display:flex;flex-wrap:wrap;gap:6px}
.who-list .w{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:600;background:rgb(var(--sunk-rgb) / .45);border:1px solid var(--line);border-radius:8px;padding:2px 7px 2px 3px}
.points{font:700 .95rem var(--f-mono);color:var(--gold)}
.neg{color:var(--bad)}
.plan input{min-width:110px}
td.cellwrap{white-space:normal}
.tag .i{vertical-align:-.2em}
.ann h4{font-family:var(--f-fantasy)}

/* ---------- v0.3: game icons ---------- */
:root{--wow:none} /* set by js/icons.js to the current sprite file */
.wi{display:inline-block;flex:none;width:var(--s);height:var(--s);background-image:var(--wow);background-repeat:no-repeat;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 0 2px rgba(228,185,95,.22);vertical-align:middle}
.wi.round{border-radius:50%;box-shadow:none}
.nav a .wi{opacity:.8;box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.nav a.on .wi{opacity:1;box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 0 2px var(--gold)}
.subnav a .wi{opacity:.85}.subnav a.on .wi{opacity:1}
.cbadge,.cbadge.lg{width:auto;height:auto;background:none;border:0;padding:0;border-radius:5px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 75%,transparent)}
.cbadge.lg{border-radius:7px;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 75%,transparent)}
.cbadge .wi{box-shadow:none;display:block}
.rg,.cname .rg{background:none;width:auto;height:auto}
.medal .wi{border-radius:50%;box-shadow:none}
.stat .si{background:none;width:auto;height:auto}
.stat .si .wi{width:42px;height:42px;border-radius:8px}
.sti{width:auto;height:auto}
.item .qi{display:inline-flex}
.item .qi .wi{box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 0 2px currentColor}
.group-h .bf{gap:4px}
.group-h .bf i{padding:0;background:none;display:inline-flex}
.group-h .bf i.miss .wi{filter:grayscale(1);opacity:.45;box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 0 2px var(--warn)}
.buff{grid-template-columns:24px minmax(0,1fr) auto 18px;padding:3px 0}
.buff .bn{display:block;font-weight:600}
.buff .bn .unv{margin-left:4px}
.buff.miss .wi{filter:grayscale(1);opacity:.5}
.buff.part .wi{filter:saturate(.5)}
.matrix td .wi{box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.profs{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.74rem;color:var(--faint);margin-top:4px}
.profs span{display:inline-flex;gap:5px;align-items:center}
.profs .wi{box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.linkish{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font:inherit;text-decoration:underline}
.me .btn{margin-left:4px}
.btn .wi,.tag .wi{box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.tag{display:inline-flex;align-items:center;gap:5px}
.empty-state>.wi{margin:0 auto 6px;display:block}

/* loot format picker on the raid form */
.loot-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:10px}
.lp{position:relative;display:flex;gap:11px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:rgb(var(--sunk-rgb) / .35);transition:border-color .15s,background .15s}
.lp input{position:absolute;opacity:0;pointer-events:none}
.lp:hover{border-color:rgba(228,185,95,.45)}
.lp.on{border-color:var(--gold);background:var(--gold-soft)}
.lp:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.lp b{display:block;font-size:.92rem}
.lp small{display:block;color:var(--muted);font-size:.74rem;line-height:1.35}

/* landing page */
.land-h{margin-top:12px;font-family:var(--f-fantasy);font-weight:700;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.12;background:linear-gradient(180deg,#fff3d6,#e4b95f);-webkit-background-clip:text;background-clip:text;color:transparent}
.mini-board .m{gap:7px}
.mini-board .m .wi{box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.raid-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:6px}
@media (max-width:760px){.raid-strip{grid-template-columns:minmax(0,1fr)}}
.rs{display:flex;gap:14px;align-items:center;padding:14px 16px}
.rs b{display:block;font:700 1.05rem var(--f-fantasy);color:var(--gold)}
.rs span{color:var(--muted);font-size:.84rem}
.features h3{margin:0;font-size:1.02rem}
.loot-row{flex-wrap:nowrap}
.loot-row>span:first-child{min-width:0;overflow:hidden;flex:1}
.loot-row .item{max-width:100%}
.loot-row .item .nm{white-space:nowrap}
.loot-row .cname span:last-child{white-space:nowrap}
@media (max-width:640px){.me-name,.me-guild{max-width:34vw}.me{flex:none}}
[hidden]{display:none!important}
label.check.field{flex-direction:row;align-items:center;gap:10px}
td .profs{display:inline-flex;margin:0 0 0 6px;vertical-align:middle}

/* ---------- v0.4: themes ---------- */
:root{--c-Warrior:#C69B6D;--c-Paladin:#F48CBA;--c-Hunter:#AAD372;--c-Rogue:#FFF468;--c-Priest:#FFFFFF;--c-Mage:#3FC7EB;--c-Warlock:#9C9DF2;--c-Druid:#FF7C0A;--c-Shaman:#3D9BFF;
  --q-poor:#9d9d9d;--q-common:#ffffff;--q-uncommon:#1eff00;--q-rare:#2b8cff;--q-legendary:#ff8000}

/* account menu */
.me{position:relative}
.me-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:99px;padding:3px 10px 3px 3px;color:var(--fg);font:600 .88rem var(--f-body);cursor:pointer}
.me-btn:hover,.me-btn[aria-expanded="true"]{border-color:var(--line-strong);background:var(--surface)}
.me-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);padding:6px;z-index:40;display:flex;flex-direction:column}
.me-menu button,.me-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--fg);font:500 .9rem var(--f-body);padding:9px 10px;border-radius:9px;cursor:pointer;text-decoration:none}
.me-menu button:hover,.me-menu a:hover{background:var(--surface-2)}
.me-menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:.8rem;color:var(--faint)}
.me-menu .who b{display:block;color:var(--fg);font-size:.92rem}
.switch{width:34px;height:20px;border-radius:99px;background:var(--line-strong);position:relative;flex:none;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.switch.on{background:var(--gold)}.switch.on::after{transform:translateX(14px)}

/* ---------- v0.4 ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabs a{display:inline-flex;align-items:center;gap:6px;font:500 .84rem var(--f-body);color:var(--muted);border:1px solid transparent;border-radius:99px;padding:5px 12px;text-decoration:none}
.tabs a.on{border-color:var(--line);background:var(--surface);color:var(--fg)}
.tabs a:hover{color:var(--fg)}
/* the addon import is the main way in, so it gets the gold frame; the manual form is quieter */
.import-hero{margin-bottom:18px;border-color:rgba(228,185,95,.45)}
.import-hero h3{margin-bottom:4px}
.import-hero textarea{min-height:84px}
.card.manual{background:transparent;border-style:dashed}
.card.manual .hi{color:var(--muted)}
.tag.hard{background:rgba(255,128,0,.14);color:#ffae5c;display:inline-flex;align-items:center;gap:5px}
.tag.dim{opacity:.45}
.who-list .w.away{opacity:.45}
tr.skip td{opacity:.55}
tr.tot td{font-weight:600;color:var(--muted);background:rgb(var(--sunk-rgb) / .25)}
.winner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;background:var(--gold-soft);border:1px solid rgba(228,185,95,.4);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-weight:600}
.vote-row{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.vote-row:first-of-type{border-top:0}
.auction{border:1px solid rgba(228,185,95,.35);background:rgb(var(--sunk-rgb) / .3);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.auction form select,.auction form input{padding:6px 8px}
.days{display:inline-flex;gap:2px}
.days i{font:600 .62rem var(--f-mono);font-style:normal;width:15px;height:17px;display:grid;place-items:center;border-radius:4px;background:rgb(var(--hi-rgb) / .05);color:var(--faint)}
.days i.on{background:var(--gold-soft);color:var(--gold)}
fieldset.field{border:0;padding:0;margin:0}
fieldset.field legend{font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.day-pick{display:flex;flex-wrap:wrap;gap:6px}
.day-pick label{cursor:pointer}
.day-pick input{position:absolute;opacity:0;width:1px;height:1px}
.day-pick span{display:inline-block;padding:6px 10px;border-radius:8px;border:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.day-pick input:checked + span{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.day-pick input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.check.mini{font-size:.76rem;color:var(--muted);gap:5px;margin-top:4px}
.check.mini input{margin-top:2px}
table.ready td,table.ready th{text-align:center}
table.ready td:first-child,table.ready th:first-child,table.ready td:nth-child(3){text-align:left}
.tick{display:inline-grid;place-items:center;cursor:pointer}
.tick input{width:18px;height:18px;accent-color:var(--ok);margin:0}
.money{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.money i{font-style:normal;font-size:.75em;margin-left:1px}
.money .g{color:#ffd24a}.money .s{color:#c7d0dc}.money .c{color:#d68c4c}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding-block:8px 28px}
@media (max-width:760px){.paths{grid-template-columns:minmax(0,1fr)}}
.path{display:flex;flex-direction:column;gap:12px}
.path p{color:var(--muted);font-size:.95rem}
.steps{display:flex;flex-wrap:wrap;gap:10px}
.steps div{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.88rem}
.steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--on-accent);font-size:.78rem}
.content-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.content-grid.compact .content-card{padding:10px;gap:4px;font-size:.84rem}
.content-grid.compact .size{font-size:1.1rem}
@media (max-width:420px){.content-grid.compact{grid-template-columns:minmax(0,1fr)}}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.code.paste{min-height:90px;height:auto}

/* Roster: add-character tools sit above the table, which spans the page */
.roster-tools{margin-bottom:12px}
.roster-tools .btn{display:inline-flex;align-items:center;gap:6px}
.roster-tools + form{margin-bottom:16px;max-width:820px}
.roster-table td{vertical-align:middle}
@media (max-width:760px){.roster-table th:nth-child(2),.roster-table td:nth-child(2),.roster-table th:nth-child(4),.roster-table td:nth-child(4){display:none}}

/* v0.5: Create raid, accounts, pug pages */
.create-btn{flex:none;margin-left:auto}
.top .create-btn + .me{margin-left:0}
@media (max-width:640px){.create-btn span{display:none}.create-btn{padding-inline:9px}}
.create-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:820px}
.create-card{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.create-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.create-card .si{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold)}
.acc-list{display:flex;flex-direction:column}
.acc-row{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.acc-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.acc-chars{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.acc-char{display:inline-flex;align-items:center;gap:2px;margin:2px 8px 2px 0}
.acc-link{max-width:170px;margin-top:4px;font-size:.82rem;padding:4px 8px}
.pug-log{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto;font-size:.88rem}
.pug-log li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.pug-log li:last-child{border-bottom:0}
.pug-log time{flex:none;width:96px;color:var(--faint);font-family:var(--f-mono);font-size:.78rem;padding-top:2px}
.pug-page .expiry{justify-content:center;font-size:.95rem}
.pug-page .expiry b{font-size:1.05rem}
/* Phones: the nav gets its own scrolling row under the brand, Create raid and the account menu. */
@media (max-width:640px){.top .wrap{flex-wrap:wrap;row-gap:8px}.top .nav{order:3;flex:1 1 100%}}
.pug-page td{white-space:normal}
@media (max-width:980px){.pug-page .split > .rail{order:-1}}

/* v0.5.1: reserve picker, hard reserve banner, item tooltips */
.srp{display:flex;flex-direction:column;gap:8px}
.srp-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.srp-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:3px 4px 3px 8px;font-size:.88rem;max-width:100%}
.srp-search{position:relative}
.srp-sug{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);max-height:300px;overflow:auto;padding:4px}
.srp-sug button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:7px 8px;cursor:pointer;color:var(--fg);font:inherit}
.srp-sug button:hover,.srp-sug button:focus{background:var(--surface-2)}
.srp-sug button[disabled]{opacity:.45;cursor:not-allowed}
.srp-browse summary{cursor:pointer;font-size:.88rem;color:var(--muted);padding:4px 0}
.srp-list{display:flex;flex-direction:column;gap:10px;margin-top:6px;max-height:420px;overflow:auto;padding-right:4px}
.srp-boss > b{display:block;font-size:.78rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.srp-items{display:flex;flex-direction:column;gap:4px}
.srp-it{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 8px;cursor:pointer;font:inherit;font-size:.88rem}
.srp-it:hover{border-color:var(--gold)}
.srp-it.on{border-color:var(--gold);background:var(--gold-soft)}
.srp-it[disabled]{opacity:.5;cursor:not-allowed}
.hr-banner{display:flex;flex-direction:column;gap:6px;background:var(--gold-soft);border:1px solid var(--gold);border-radius:12px;padding:10px 14px}
.hr-banner p{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap}
.hr-banner p > span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}
.manage-link summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600}
.manage-link[open]{display:flex;flex-direction:column;gap:10px}
.item-tip{position:fixed;z-index:100;max-width:280px;display:flex;flex-direction:column;gap:2px;background:rgba(8,10,22,.96);border:1px solid #7b88a8;border-radius:6px;padding:8px 10px;font-size:.84rem;color:#fff;pointer-events:none;box-shadow:0 10px 30px -8px rgba(0,0,0,.7)}
.item-tip .faint{color:#a5adbf}
[data-tip-item]{cursor:help}
.item-tip{max-width:320px;line-height:1.35}
.tip-row{display:flex;justify-content:space-between;gap:16px}
.tip-row.ind{padding-left:10px}
.pug-parties{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.pug-parties > div{display:flex;flex-direction:column;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.tag.main{color:var(--gold)}
.tag.alt{color:var(--muted);border-style:dashed}
/* Guild bank: one big bank, tabs as a wrapping segment, last-updated line under the title. */
.bank-tabs{flex-wrap:wrap;align-self:flex-start;max-width:100%}
.bank-tabs button .faint{font-weight:500}
.bank-when{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.bank-when b{color:var(--fg)}
.bslot[hidden]{display:none}
.item-tip .tip-act{font-style:normal;color:#ffd100;margin-top:4px}
/* Header in two rows (v0.5.3): brand and account on top, every page in a full-width bar below, so the
   pages never run out of room. On narrow screens the bar wraps onto a second line instead of scrolling. */
.top .wrap.navrow{padding-block:0 10px;gap:0}
.top .navrow .nav{flex:1 1 100%;margin:0;flex-wrap:wrap;overflow:visible;justify-content:center;row-gap:4px}
.top .navrow .nav a{flex:1 1 auto;justify-content:center}
.top .navrow:has(.nav:empty){display:none}
@media (max-width:640px){.top .navrow .nav a{padding:6px 9px;font-size:.84rem;gap:5px}.top .navrow .nav a .wi{--s:14px!important}}
/* Phones: the pages sit in a compact 4-column grid, and the header scrolls away instead of covering the page. */
@media (max-width:640px){
  .top{position:static}
  .top .navrow .nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
  .top .navrow .nav a{flex-direction:column;gap:2px;padding:5px 2px;font-size:.7rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
.crown{display:inline-flex;flex:none}
.crown.gm{color:#f2c14e;filter:drop-shadow(0 0 4px rgba(242,193,78,.45))}
.crown.off{color:#c9d1dc}
.crown .f{fill:currentColor}
/* Account menu (v0.6): account name on top, then Switch character and Suggest a feature. */
.me-btn .cbadge{flex:none}
.me-menu .who .mini{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;color:var(--faint)}
.char-list{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px 8px;border-left:2px solid var(--line);margin:0 0 4px 14px}
.char-list button{padding:6px 8px}
.char-list button.on{background:var(--surface-2)}
.suggest-dlg{width:min(520px,calc(100vw - 32px));border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--fg);padding:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.suggest-dlg::backdrop{background:rgba(0,0,0,.55)}
.suggest-dlg h3{display:flex;align-items:center;gap:8px}

/* v0.6: tables fit their column. Long first + last names and item names wrap instead of pushing the table wide. */
td:has(.cname),td:has(.item){white-space:normal}
td .cname{min-width:0}
td .cname>span:not(.rg){overflow-wrap:break-word;line-height:1.25}
td .item .nm{white-space:normal}
.signups td.who{min-width:150px}
.signups .sub{display:flex;flex-wrap:wrap;gap:2px 10px;margin:3px 0 0 30px;font-size:.76rem}
.signups .sub .note{color:var(--muted);white-space:normal}
.signups td.del{width:1%;padding-left:4px}
@media (max-width:1100px){td,th{padding-left:10px;padding-right:10px}td select{max-width:140px}}
@media (max-width:640px){
  .signups thead{display:none}
  .signups,.signups tbody{display:block}
  .signups tr{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:10px 12px;border-top:1px solid var(--line)}
  .signups tr:first-child{border-top:0}
  .signups td{display:block;padding:0;border:0}
  .signups td.who{grid-column:1/-1;min-width:0}
  .signups td.del{grid-column:2;grid-row:1;justify-self:end}
  .signups td.who{grid-column:1}
}
.plan td input{width:100%;min-width:70px}
.plan td:last-child{width:1%}
td[colspan]{white-space:normal}
@media (max-width:640px){
  .signups td .row{flex-wrap:wrap!important}
  .signups td select{max-width:100%}
  .res td.slot-tag,.res th:nth-child(2){display:none}
  td.cellwrap{white-space:normal}
}
@media (max-width:640px){
  .signups tr{position:relative;grid-template-columns:1fr 1fr}
  .signups td.who{grid-column:1/-1;padding-right:30px}
  .signups td.del{position:absolute;top:8px;right:6px;width:auto}
  .signups td select{width:100%}
  .res thead tr th:first-child{white-space:normal}
  .res tbody tr{display:grid;grid-template-columns:1fr;gap:4px;padding:9px 10px;border-top:1px solid var(--line)}
  .res tbody tr:first-child{border-top:0}
  .res tbody td{display:block;padding:0;border:0}
  .res tbody,.res{display:block}.res thead{display:block}.res thead tr{display:flex}.res thead th{flex:1}
  .res .who-list{min-width:0}
}
/* v0.7: the account button names the character and its guild; the switcher lists characters by guild. */
.me-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0;text-align:left}
.me-name,.me-guild{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-guild{font-size:.7rem;font-weight:500;color:var(--faint);letter-spacing:.02em}
.char-list .g-head{display:flex;align-items:center;gap:6px;padding:8px 8px 2px;font-size:.78rem;color:var(--muted)}
.char-list .g-head b{color:var(--fg);font-weight:600}
.char-list .g-head.here b{color:var(--gold)}
.char-list .g-head .mini{margin-left:auto}
.char-list .g-new{margin-top:6px;border-top:1px solid var(--line);border-radius:0;padding-top:9px;color:var(--gold)}
@media (max-width:640px){.me-name,.me-guild{max-width:38vw}}
/* On phones the account button wraps under the logo, so its menu spans the header instead of hanging off its right edge. */
@media (max-width:640px){.top .wrap:first-child{position:relative}.top .me{position:static}.me-menu{left:16px;right:16px;top:calc(100% - 2px);min-width:0}}
/* v0.7.1: loot history pages and the high rollers board */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:10px 12px;border-top:1px solid var(--line)}
.pager button{min-width:32px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:none;color:var(--muted);font:600 .8rem var(--f-body);cursor:pointer}
.pager button.on{background:var(--gold);border-color:var(--gold);color:var(--bg-deep)}
.pager .mini{margin-left:auto}
.rollers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rollers li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.rollers li:first-child{border-top:0}
.rollers .rk{width:22px;text-align:right;color:var(--faint);font-weight:700}
.rollers li:nth-child(-n+3) .rk{color:var(--gold)}
.rollers .cname{flex:1;min-width:0}
.rollers li>.mini{white-space:nowrap}
.rollers b{min-width:26px;text-align:right}
/* v0.7.2: "and X others" on busy reserve rows; bank pages; last updated under the bank. */
.more-names{white-space:nowrap;font-size:.85rem}
.more-rest:not([hidden]){display:contents}
.bank-pager{margin-top:12px}
.bank-bag .bank-when,.empty-state .bank-when{display:flex;align-items:center;gap:6px;margin-top:6px}
.bank-when b{color:var(--fg)}
/* v0.8: drop the addon's saved file on the bank import card. */
.file-pick{cursor:pointer}

/* Clearing the guild (Settings, guild master only) */
.card.danger{border-color:var(--bad)}
.btn.btn-danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.btn-danger:hover{background:var(--bad);color:#fff}
.my-chars{margin-bottom:14px}

/* v1.1: your account page */
.acct-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.acct-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-fact b{overflow-wrap:anywhere}
.acct-danger{margin-top:28px;border-color:var(--line)}
.acct-danger summary{cursor:pointer;color:var(--muted);font-size:.88rem}
.acct-danger[open]{border-color:var(--bad)}
.acct-danger[open] summary{color:var(--bad)}
/* v1.2: loot rules grouped by loot system */
.rule-group{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 14px;margin:0;min-width:0}
.rule-group legend{padding:0 6px;font-weight:700;color:var(--gold)}
.rule-group .hint{margin:0 0 8px}
.buff-more summary{display:flex;align-items:center;gap:8px}

/* v1.2: status tabs keep their icon, name and count apart in every theme */
.tabs button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tabs button .sti{width:16px;height:16px}

/* ---------- v1.3 UX ---------- */
/* Phones and small tablets: your own sign-up and the leader's add form come before the long list. */
@media (max-width:980px){
  .raid-split{display:flex;flex-direction:column;gap:16px}
  .raid-split > section{order:1}
  .raid-split > .rail{display:contents}
  .raid-split > .rail > *{order:2}
  .raid-split > .rail > .su-first{order:0}
}
/* Where you stand on each raid, with one-tap answers. */
.my-su{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;font-size:.85rem}
.my-su .my-who{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.my-su .my-who b{font-weight:600}
.my-su .my-who b.none{color:var(--warn)}
.my-su b.st-pending{color:var(--gold)}
.quick{display:inline-flex;gap:4px;flex-wrap:wrap}
.quick button{font:inherit;font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.quick button:hover{color:var(--fg);border-color:var(--line-strong)}
.quick button.on{background:var(--gold);border-color:var(--gold);color:var(--on-accent,#111)}
.quick button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
p.my-su{margin-top:8px}
/* The sign-up list, grouped by status. */
.signups.grouped .su-group th{background:rgb(var(--hi-rgb,255 255 255) / .04);font-size:.8rem;text-transform:none;letter-spacing:0;padding-top:10px;padding-bottom:10px}
.signups tr.editing td{background:rgb(var(--hi-rgb,255 255 255) / .03)}
.btn-icon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.btn-icon:hover{color:var(--fg);border-color:var(--line-strong)}
/* Armed confirm buttons turn red, so the second click is a clear choice. */
.btn[data-armed],.x[data-armed]{background:var(--bad)!important;border-color:var(--bad)!important;color:#fff!important}
/* Phone navigation: a bar at the bottom with More for the rest. */
.bottom-nav{display:none}
@media (max-width:640px){
  .top .navrow{display:none}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg-deep,#111);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .bottom-nav > a,.bottom-nav > button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font:inherit;font-size:.7rem;font-weight:600;color:var(--muted);text-decoration:none;background:none;border:0;border-radius:10px;cursor:pointer;min-width:0}
  .bottom-nav > a span,.bottom-nav > button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bottom-nav > a.on,.bottom-nav > button.on{color:var(--fg);background:var(--surface-2)}
  .more-sheet{position:absolute;right:8px;bottom:calc(100% + 6px);min-width:200px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface,#222);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
  .more-sheet[hidden]{display:none}
  .more-sheet a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--fg);text-decoration:none;font-weight:600}
  .more-sheet a.on{background:var(--surface-2)}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}
/* Grug words legend. */
.words-dlg{max-width:460px}
.words{width:100%;border-collapse:collapse;font-size:.9rem}
.words th,.words td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.words th{color:var(--gold);white-space:nowrap;width:40%}
.words-dlg .stack{max-height:min(80vh,640px);overflow:auto}
/* Roster: find my character, free days spelled out. */
.find-mine{margin-bottom:14px}
.find-mine.small{padding-block:14px}
.days-free{display:inline-flex;gap:4px;flex-wrap:wrap}
.days-free b{font-size:.72rem;font-weight:600;padding:1px 6px;border-radius:6px;background:var(--gold-soft,rgba(212,166,74,.18));color:var(--fg)}
/* Settings: a menu of sections, and the danger zone at the bottom. */
.sec-menu{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0;margin-bottom:12px;background:var(--bg);border-bottom:1px solid var(--line)}
.sec-menu a{font-size:.82rem;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none}
.sec-menu a:hover{color:var(--fg);border-color:var(--line-strong)}
.sec-menu a[href$="danger"]{color:var(--bad);border-color:rgb(242 139 139 / .4)}
main [id]{scroll-margin-top:140px}
@media (max-width:640px){main [id]{scroll-margin-top:16px}}
.danger-zone{border:2px dashed var(--bad);border-radius:14px;padding:18px}
.danger-zone > h2{font-size:1.15rem;color:var(--bad)}
/* Loot standings: you, highlighted. */
tr.me-row td{background:var(--gold-soft,rgba(212,166,74,.12))}
/* Party chips: full names, and a letter in each status mark. */
.group .chip .n{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
.chip .st{width:16px;height:16px;display:inline-grid;place-items:center;font-size:.62rem;font-weight:800;line-height:1;color:#111}
.chip .st.st-late{background:var(--late)}.chip .st.st-tentative{background:var(--warn)}.chip .st.st-bench{background:var(--muted)}.chip .st.st-waitlist{background:var(--gold)}.chip .st.st-pending{background:var(--gold)}.chip .st.st-absent{background:var(--bad)}
/* Raid header: actions fold into one menu on phones. */
.hero-more{display:none}
@media (max-width:640px){
  .raid-hero .hero-acts{display:none}
  .hero-more{display:block;position:relative}
  .hero-more > summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;padding:7px 12px;border:1px solid var(--line-strong);border-radius:10px;list-style:none}
  .hero-more > summary::-webkit-details-marker{display:none}
  .hero-more > .stack{margin-top:8px;gap:6px}
  .hero-more > .stack > .btn{justify-content:flex-start}
}
/* Pug create: what the page gives you. */
.gets{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gets li{display:flex;gap:12px;align-items:flex-start}
.gets li > span{display:flex;flex-direction:column;gap:2px}
.expiry .faint{font-size:.85rem;margin-left:6px}
/* Bank tabs: the count stays readable on the selected tab. */
.seg button.on .faint{color:inherit;opacity:.8}
.ann-new > summary{cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.raid-item > .my-su{grid-column:3/-1;margin-top:0}
@media (max-width:600px){.raid-item > .my-su{grid-column:1/-1}}
/* v1.5: brainrot mode, the header button that switches to Neanderthal and back. */
.brainrot-btn{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.top .brainrot-btn + .create-btn,.top .brainrot-btn + .me{margin-left:0}
.brainrot-btn svg{flex:none}
.brainrot-btn:hover svg{transform:rotate(-8deg) scale(1.08)}
.brainrot-btn svg{transition:transform .15s}
@media (max-width:640px){.brainrot-btn span{display:none}.brainrot-btn{padding-inline:8px}}
/* Log: filter chips and a search box above the table. */
.log-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.log-tools .seg{flex-wrap:wrap}
.log-q{flex:1 1 260px;max-width:420px;flex-wrap:nowrap;gap:6px}
.log-q input{flex:1;min-width:0}
.unv-note{margin:0 0 4px}
/* Long tables keep their header row in view: the table scrolls inside its box. */
.table-box.sticky-head{max-height:min(78vh,1000px);overflow:auto}
.sticky-head thead th{position:sticky;top:0;z-index:2;background:var(--surface)}
.th-sort{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;white-space:nowrap}
.th-sort.on,.th-sort:hover{color:var(--fg)}
.att-tools{gap:8px;flex-wrap:wrap;margin-bottom:12px}
/* Party builder on phones: Not placed above the parties, and a Move to sheet for the tapped player. */
.pool-top,.move-sheet{display:none}
@media (max-width:980px){.pool-top{display:flex;margin-bottom:14px}.pool-side{display:none}}
@media (max-width:640px){
  .move-sheet{display:flex;flex-direction:column;gap:10px;position:fixed;left:8px;right:8px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:14px;box-shadow:0 -10px 40px -10px rgba(0,0,0,.5)}
  .ms-h{margin:0;font-weight:600}
  .ms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .ms-grid .btn{flex-direction:column;gap:0;padding:6px 4px;justify-content:center}
  .ms-grid .btn.on{opacity:.5}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Bank: how the bank gets here, in three numbered steps. */
.up-steps{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:12px}
.up-steps li{counter-increment:st;display:flex;gap:10px;align-items:flex-start}
.up-steps li > div{min-width:0}
.up-steps li .hint{display:block}
.up-steps li::before{content:counter(st);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--gold-soft,rgba(212,166,74,.15));color:var(--gold)}
:root[data-shape="square"] .up-steps li::before{border-radius:0}
.up-steps li .hint{margin:2px 0 0}
/* Settings on phones: a list of sections, each opening on its own. */
@media (max-width:640px){
  .set-list .settings-split{display:none}
  .set-list .sec-menu{flex-direction:column;gap:6px;border:0}
  .set-list .sec-menu a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:.95rem;border-radius:12px;color:var(--fg);background:var(--surface)}
  .set-one .settings-split > * > *:not(.sec-on){display:none}
  .set-one .sec-menu{border:0;padding-top:0}
  .set-one .sec-back{display:inline-flex;align-items:center;gap:6px}
}
/* Folded forms on the raid Loot tab. */
details.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{content:"+";font-weight:700;color:var(--muted);font-size:1.2rem}
details.fold[open] > summary::after{content:"\2212"}
details.fold > summary .hi{margin:0}
details.fold[open] > form{margin-top:12px}
details.fold-in{border-top:1px solid var(--line);padding-top:10px}
details.fold-in > summary{cursor:pointer;font-weight:600}
/* Phones: the create button keeps a short label. */
.create-btn .sm{display:none}
@media (max-width:640px){.top .create-btn span.sm{display:inline}.top .create-btn span.lg{display:none}.top .create-btn{padding-inline:10px}}
/* Create raid: start from a template or the latest raid. */
.start-from{margin-bottom:20px;display:flex;flex-direction:column;gap:8px}
.start-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.start-card{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer}
.start-card > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.start-card:hover,.start-card.on{border-color:var(--gold)}
.start-card.on{box-shadow:inset 0 0 0 1px var(--gold)}
:root[data-shape="square"] .start-card{border-radius:0}
.plan-start{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.char-stats{margin-bottom:16px}
:root[data-theme^="command"] .brainrot-btn svg{color:var(--fg)}