/* Bonkr Vault - Bonkr Bedrock Core (in older notes "Wraithwave"), the portal app's look from the Bonkr Bedrock brand
   standards (marketing/BONKR-BEDROCK-GUIDE.md, tokens in marketing/Bonkr-Bedrock.zip › tokens.css). Same family as
   Smuggz's Spellcraft / Rotation'ola (UI/Theme.lua). Colours come from the Smuggz logo: turquoise outline, mint-to-jade lettering, deep teal-black
   ground, red of the eyes for warnings. Two weights only (400 / 500). No animations: hover is an instant tint.
   Type: Inter (SIL Open Font License, bundled in static/fonts). Light, Dark or System theme: the tokens below are
   the dark set; the light set further down swaps them. The side menu and top bar always use the dark set. */
@font-face { font-family: "Inter Vault"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter Vault"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter Vault"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
/* Wraithwave Nitro: the marketing display faces, used only on the public front pages (SIL OFL, static/fonts).
   Until the font files are dropped in, the stacks below fall back to Impact / Arial Black, which look close. */
@font-face { font-family: "Anton Vault"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Anton-Regular.ttf") format("truetype"); }
@font-face { font-family: "Bungee Vault"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Bungee-Regular.ttf") format("truetype"); }

/* Dark tokens: the page in dark mode, and the side menu and top bar in every mode. */
:root, .appnav, .topbar, .chrome, .nitro-page {
  /* Bonkr Bedrock names (tokens.css): Tar, Pit, Pit Rim, Chalk. Inside the app use the role names below. */
  --tar: #07161a; --pit: #0d2226; --pit-rim: #163a40; --chalk: #e4f3ec; --chalk-muted: #9fb8b2; --chalk-soft: #c6dad3;
  --ground: #07161a;      /* page / content pane */
  --surface: #0d2226;     /* cards, menus */
  --window-top: #10292e;
  --text: #e4f3ec;
  --accent: #12d3bf;      /* the logo's turquoise outline: fills, rings */
  --accent-ink: #12d3bf;  /* accent used as text */
  --accent-fill: #12d3bf; /* solid buttons */
  --on-accent: #07161a;   /* text on an accent fill */
  --mint: #ceeba7;        /* headings */
  --jade: #11be96;
  --a100: #e2fffa; --a200: #bff7ee; --a300: #8eeedf; --a400: #55e2cf; --a500: #22d3bf;
  --a600: #12b3a2; --a700: #0e8c80; --a800: #0b5e57; --a900: #0a3936;
  --n100: #eaf4f2; --n200: #d3e3e0; --n300: #b3c9c5; --n400: #8fa9a5; --n500: #7f9b97;
  --n600: #55706c; --n700: #3e5753; --n800: #2a3e3b; --n900: #182927;
  --good: #59d0a8; --warn: #e8c46a; --bad: #f0788b; --info: #5cb8e6; --bad-hover: #ff8a9a;
  --ink: 228 243 236; --acc: 18 211 191; --shade: 0 0 0;
  --good-rgb: 89 208 168; --bad-rgb: 226 71 95; --warn-rgb: 232 196 106;
  --panel-2: #112c31;
  --line: var(--pit-rim);  /* card borders and dividers: Pit Rim */
  --line-strong: var(--n800);
  --shadow: 0 6px 18px rgb(0 0 0 / .55);
  --stage-top: #10292e; --stage-bottom: #07161a;   /* character pictures always sit on a dark stage */
  color-scheme: dark;
}
:root {
  --bg: var(--ground);
  --panel: var(--surface);
  --muted: var(--chalk-muted);  /* Muted Chalk: secondary text */
  --gold: var(--accent);
  --gold-dim: var(--a800);
  --radius: 10px;
  --radius-win: 14px;
  --radius-ctl: 8px;
  --font: "Inter Vault", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--font);
  --side-w: 248px;
}
/* Light tokens (Wraithwave on a pale mint-grey ground). */
:root[data-theme="light"] {
  --ground: #eef4f2; --surface: #ffffff; --window-top: #f6faf9; --text: #10292e;
  --accent: #12bfac; --accent-ink: #0b7f74; --accent-fill: #0b7f74; --on-accent: #ffffff; --mint: #0b5e55; --jade: #0e8c80;
  --a100: #063b36; --a200: #08504a; --a300: #0a675f; --a400: #0b7f74; --a500: #0d8f83;
  --a600: #12b3a2; --a700: #8fdcd2; --a800: #c9eee8; --a900: #e6f7f4;
  --n100: #10292e; --n200: #1e3a3e; --n300: #33504f; --n400: #45625f; --n500: #536f6c;
  --n600: #8fa9a5; --n700: #b3c9c5; --n800: #d3e2dd; --n900: #eaf2f0;
  --good: #1e7558; --warn: #7f5c0a; --bad: #b42340; --info: #1f6fa8; --bad-hover: #8e1830;
  --ink: 16 41 46; --acc: 11 127 116; --shade: 16 41 46;
  --good-rgb: 30 140 100; --bad-rgb: 180 35 64; --warn-rgb: 190 140 20;
  --panel-2: #f2f7f5;
  --shadow: 0 6px 20px rgb(16 41 46 / .12);
  --line: rgb(var(--ink) / .1); --chalk-muted: #536f6c;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #eef4f2; --surface: #ffffff; --window-top: #f6faf9; --text: #10292e;
    --accent: #12bfac; --accent-ink: #0b7f74; --accent-fill: #0b7f74; --on-accent: #ffffff; --mint: #0b5e55; --jade: #0e8c80;
    --a100: #063b36; --a200: #08504a; --a300: #0a675f; --a400: #0b7f74; --a500: #0d8f83;
    --a600: #12b3a2; --a700: #8fdcd2; --a800: #c9eee8; --a900: #e6f7f4;
    --n100: #10292e; --n200: #1e3a3e; --n300: #33504f; --n400: #45625f; --n500: #536f6c;
    --n600: #8fa9a5; --n700: #b3c9c5; --n800: #d3e2dd; --n900: #eaf2f0;
    --good: #1e7558; --warn: #7f5c0a; --bad: #b42340; --info: #1f6fa8; --bad-hover: #8e1830;
    --ink: 16 41 46; --acc: 11 127 116; --shade: 16 41 46;
    --good-rgb: 30 140 100; --bad-rgb: 180 35 64; --warn-rgb: 190 140 20;
    --panel-2: #f2f7f5;
    --shadow: 0 6px 20px rgb(16 41 46 / .12);
    --line: rgb(var(--ink) / .1); --chalk-muted: #536f6c;
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--text); font: 14px/1.5 var(--font); font-feature-settings: "cv11", "ss01"; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; min-height: 100vh; }
td.num, th.num, .stat, .parse-big, .num, input[inputmode=decimal] { font-variant-numeric: tabular-nums; }
::selection { background: rgb(var(--acc) / .32); color: var(--a100); }
a { color: var(--a400); text-decoration: none; }
a:hover { color: var(--a200); text-decoration: underline; text-decoration-color: rgb(var(--acc) / .45); text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 .6rem; line-height: 1.25; color: var(--text); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.05rem; } h3 { font-size: .95rem; color: var(--mint); }
p { margin: 0 0 .8rem; }
small, .muted { color: var(--muted); }
strong { font-weight: 500; color: var(--n100); }
code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }
code { color: var(--a300); }
pre { background: var(--ground); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .8rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; color: var(--n200); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* layout */
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
main.wrap { padding-top: 1.4rem; padding-bottom: 3rem; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.side { grid-template-columns: 2fr 1fr; }
@media (max-width: 860px) { .grid.two, .grid.side { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.card > h2:first-child, .card > .head h2 { color: var(--mint); font-size: .98rem; }
.card + .card { margin-top: 1rem; }
.grid > .card + .card { margin-top: 0; }
.head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.head h1, .head h2 { margin: 0; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: .6rem; }
hr { border: 0; height: 1px; margin: 1rem 0; background: linear-gradient(90deg, transparent, rgb(var(--ink) / .12) 48px, rgb(var(--ink) / .12) calc(100% - 48px), transparent); }

/* tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .55rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--n500); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; border-bottom-color: var(--line-strong); }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text); }
th[data-dir] { color: var(--accent-ink); }
tbody tr:hover { background: rgb(var(--ink) / .035); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.dim td { opacity: .5; }
.pos { color: var(--good); } .neg { color: var(--bad); }

/* forms */
input, select, textarea, button { font: inherit; color: var(--text); }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], input[type=search], input[type=date], input[type=email], input[type=url], select, textarea {
  background: var(--ground); border: 1px solid var(--n800); border-radius: var(--radius-ctl); padding: .42rem .6rem; min-width: 0; max-width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: var(--n700); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input::placeholder, textarea::placeholder { color: var(--n600); }
select { appearance: none; -webkit-appearance: none; padding-right: 1.9rem; background-color: var(--surface); border-color: rgb(var(--ink) / .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%238fa9a5' stroke-width='24' stroke-linecap='round' stroke-linejoin='round' d='M208 96l-80 80-80-80'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
textarea { width: 100%; min-height: 10rem; }
input.short { width: 6.5rem; }
label { display: block; font-size: .82rem; font-weight: 500; color: var(--n400); margin-bottom: .25rem; }
.field { margin-bottom: .8rem; }
.field input:not([type=checkbox]), .field select { width: 100%; }
.check { display: inline-flex; align-items: center; gap: .45rem; color: var(--text); font-size: .92rem; font-weight: 400; margin: 0; }
/* buttons (Bonkr Bedrock): secondary = transparent with a 2px teal border; primary = solid Turbo Teal with Tar
   text, weight 600; corners 10px (inputs keep 8px) */
.btn, button { background: transparent; border: 2px solid rgb(var(--acc) / .55); border-radius: var(--radius); padding: .36rem .85rem;
  cursor: pointer; display: inline-block; color: var(--text); font-weight: 500; font-size: .88rem; line-height: 1.3; }
.btn:hover, button:hover { background: rgb(var(--acc) / .1); border-color: var(--accent); color: var(--text); text-decoration: none; }
.btn:active, button:active { background: rgb(var(--acc) / .18); }
.btn.primary, button.primary { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); font-weight: 600; }
.btn.primary:hover, button.primary:hover { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); filter: brightness(1.08); }
.btn.danger, button.danger { color: var(--bad); border-color: rgb(var(--bad-rgb) / .45); }
.btn.danger:hover, button.danger:hover { border-color: rgb(var(--bad-rgb) / .6); background: rgb(var(--bad-rgb) / .1); color: var(--bad-hover); }
.btn.small, button.small { padding: .16rem .55rem; font-size: .8rem; border-width: 1.5px; }
button:disabled, .btn[aria-disabled=true] { color: var(--muted); background: rgb(var(--ink) / .02); border-color: rgb(var(--ink) / .08); cursor: default; }
form.inline { display: inline; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 1rem; }
legend { color: var(--mint); padding: 0 .4rem; font-weight: 500; }

/* flashes, chips */
.flash { padding: .6rem .9rem .6rem 1rem; border-radius: var(--radius); margin-bottom: .6rem; border: 1px solid var(--line); background: var(--surface); position: relative; }
.flash::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--n600); }
.flash.success { border-color: rgb(var(--good-rgb) / .3); background: rgb(var(--good-rgb) / .07); } .flash.success::before { background: var(--good); }
.flash.error { border-color: rgb(var(--bad-rgb) / .35); background: rgb(var(--bad-rgb) / .08); } .flash.error::before { background: var(--bad); }
.flash.info { border-color: rgb(var(--acc) / .25); background: rgb(var(--acc) / .06); } .flash.info::before { background: var(--accent); }
.chip { display: inline-block; font-size: .72rem; font-weight: 500; padding: .06rem .5rem; border-radius: 999px; background: rgb(var(--ink) / .04); border: 1px solid rgb(var(--ink) / .12); color: var(--n400); white-space: nowrap; }
.chip.warn { color: var(--warn); border-color: rgb(var(--warn-rgb) / .4); background: rgb(var(--warn-rgb) / .07); }
.chip.bad { color: var(--bad); border-color: rgb(var(--bad-rgb) / .45); background: rgb(var(--bad-rgb) / .07); }
.chip.ok { color: var(--good); border-color: rgb(var(--good-rgb) / .4); background: rgb(var(--good-rgb) / .07); }
.chip.gold, .chip.accent { color: var(--accent-ink); border-color: rgb(var(--acc) / .45); background: rgb(var(--acc) / .08); }
a.chip:hover { text-decoration: none; border-color: var(--accent); }
.stat { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; font-family: var(--display); line-height: 1.15;
  color: var(--accent-ink); background: linear-gradient(135deg, var(--mint) 0%, var(--accent) 55%, var(--jade) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.empty { color: var(--muted); padding: 1rem 0; text-align: center; }

/* class colours (WoW Forever / vanilla classes) - game colours, not theme colours */
.c-Druid { color: #ff7c0a; } .c-Hunter { color: #aad372; } .c-Mage { color: #3fc7eb; }
.c-Paladin { color: #f48cba; } .c-Priest { color: #ffffff; } .c-Rogue { color: #fff468; }
.c-Shaman { color: #0070dd; } .c-Warlock { color: #8788ee; } .c-Warrior { color: #c69b6d; }
/* WoW Retail classes (Blizzard's class colours) */
.c-DeathKnight { color: #c41e3a; } .c-DemonHunter { color: #a330c9; } .c-Evoker { color: #33937f; } .c-Monk { color: #00ff98; }
/* EverQuest has no official class colours: a readable set on the dark background */
.game-eq .c-Bard { color: #e8a6d6; } .game-eq .c-Beastlord { color: #d2a36c; } .game-eq .c-Berserker { color: #e2675f; }
.game-eq .c-Cleric { color: #f2f2f2; } .game-eq .c-Druid { color: #8fd16a; } .game-eq .c-Enchanter { color: #b58cff; }
.game-eq .c-Magician { color: #ff9a3c; } .game-eq .c-Monk { color: #6fd3b8; } .game-eq .c-Necromancer { color: #9d8fd8; }
.game-eq .c-Paladin { color: #f5d76e; } .game-eq .c-Ranger { color: #a8cf5a; } .game-eq .c-Rogue { color: #fff07a; }
.game-eq .c-ShadowKnight { color: #c45b7a; } .game-eq .c-Shaman { color: #4fa3ff; } .game-eq .c-Warrior { color: #c69b6d; }
.game-eq .c-Wizard { color: #5fd0f0; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; background: currentColor; }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dow { font-size: .72rem; font-weight: 500; color: var(--n500); text-transform: uppercase; letter-spacing: .07em; text-align: center; padding: .2rem 0; }
.cal .day { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-height: 92px; padding: .3rem; font-size: .8rem; position: relative; }
.cal .day.out { opacity: .4; }
.cal .day.today { border-color: rgb(var(--acc) / .7); box-shadow: inset 0 0 0 1px rgb(var(--acc) / .25); }
.cal .day .n { color: var(--n500); font-size: .75rem; display: flex; justify-content: space-between; }
.cal .day.today .n { color: var(--accent-ink); }
.cal .day .n a { color: var(--n500); visibility: hidden; }
.cal .day:hover .n a { visibility: visible; }
.cal .ev { display: block; margin-top: .2rem; padding: .15rem .35rem; border-radius: 5px; background: rgb(var(--acc) / .1); border-left: 2px solid var(--accent); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal .ev:hover { background: rgb(var(--acc) / .18); text-decoration: none; color: var(--a100); }
.cal .ev.completed { border-left-color: var(--good); background: rgb(var(--good-rgb) / .08); }
.cal .ev.cancelled { border-left-color: var(--bad); background: rgb(var(--bad-rgb) / .08); text-decoration: line-through; }
.cal .ev.mine { box-shadow: inset 0 0 0 1px rgb(var(--acc) / .45); }
@media (max-width: 700px) {
  .cal { grid-template-columns: 1fr; }
  .cal .dow, .cal .day.empty-day { display: none; }
  .cal .day { min-height: 0; }
}

/* roster composition */
.comp { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .88rem; }
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 860px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.roles h3 { font-size: .88rem; border-bottom: 1px solid var(--line-strong); padding-bottom: .3rem; }
.roles ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.roles li { padding: .12rem 0; display: flex; justify-content: space-between; gap: .4rem; }

.member-pick { columns: 3 180px; column-gap: 1rem; }
.member-pick label { break-inside: avoid; padding: .1rem 0; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
.auth-box { max-width: 420px; margin: 1.2rem auto 3rem; }
.auth-box .card { border-radius: var(--radius-win); border-color: var(--n700); background: linear-gradient(180deg, var(--window-top), var(--surface) 120px); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
.auth-logo { text-align: center; margin-top: 2.5rem; font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--text); }
.auth-logo img { display: block; margin: 0 auto .7rem; border-radius: 22px; box-shadow: 0 0 40px rgb(var(--acc) / .28), 0 8px 30px rgb(var(--shade) / .5); }
footer { color: var(--n600); font-size: .78rem; text-align: center; padding: 2rem 0; }

/* spacing between stacked grids and cards */
.grid + .card, .card + .grid, .grid + .grid, .grid + form.card, form.card + .grid { margin-top: 1rem; }
.chip { flex-shrink: 0; }
.roles li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 700px) { .stat { font-size: 1.5rem; } }

/* item quality colours (game colours) */
.q0 { color: #9d9d9d; } .q1 { color: #ffffff; } .q2 { color: #1eff00; } .q3 { color: #0070dd; }
.q4 { color: #a335ee; } .q5 { color: #ff8000; } .q6 { color: #e6cc80; } .q7 { color: #00ccff; }
a.q0, a.q1, a.q2, a.q3, a.q4, a.q5, a.q6, a.q7 { text-decoration: none; }
a.q0:hover { color: #9d9d9d; } a.q1:hover { color: #ffffff; } a.q2:hover { color: #1eff00; } a.q3:hover { color: #0070dd; }
a.q4:hover { color: #a335ee; } a.q5:hover { color: #ff8000; } a.q6:hover { color: #e6cc80; } a.q7:hover { color: #00ccff; }
a.q2:hover, a.q3:hover, a.q4:hover, a.q5:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* item autocomplete */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--surface); border: 1px solid var(--n700);
  border-radius: 8px; margin-top: 4px; max-height: 320px; overflow-y: auto; box-shadow: var(--shadow); padding: .25rem; }
.ac-list button { display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; background: transparent; padding: .45rem .6rem; font-weight: 400; }
.ac-list button:hover, .ac-list button.on { background: rgb(var(--acc) / .12); }
.ac-list small { display: block; color: var(--muted); }
.ac-pick { margin-top: .35rem; font-size: .85rem; }

/* officer dropdown in the nav */
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu[open] summary { background: rgb(var(--ink) / .06); color: var(--text); }
details.menu .menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: var(--surface);
  border: 1px solid var(--n700); border-radius: 10px; padding: .3rem; z-index: 30; box-shadow: var(--shadow); }
details.menu .menu-list a { display: block; padding: .42rem .65rem; border-radius: 6px; color: var(--n300); }
details.menu .menu-list a:hover { background: rgb(var(--ink) / .06); color: var(--text); text-decoration: none; }
details.menu .menu-list form { margin: 0; }
details.menu .menu-list .menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: .42rem .65rem; border-radius: 6px; color: var(--n300); }
details.menu .menu-list .menu-item:hover { background: rgb(var(--ink) / .06); color: var(--text); }
details.menu .menu-list .menu-item.on { color: var(--a200); }
details.menu .menu-list .menu-item small { display: block; color: var(--muted); font-size: .75rem; }
.guild-switch summary { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }


/* Warcraft Logs parse colours (their colours) */
.p-gray { color: #8a8a8a; } .p-green { color: #1eff00; } .p-blue { color: #0070ff; } .p-purple { color: #a335ee; }
.p-orange { color: #ff8000; } .p-pink { color: #e268a8; } .p-gold { color: #e5cc80; } .p-none { color: var(--muted); }
.parse-big { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; font-size: 1.7rem; line-height: 1.15; }

/* demo mode switch and banner */
.demo-toggle { display: inline-flex; align-items: center; padding-right: .5rem; margin-right: .1rem; border-right: 1px solid var(--line-strong); }
button.switch { background: transparent; border: 0; padding: .3rem .3rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; color: var(--n300); font-size: .9rem; font-weight: 400; }
button.switch:hover { border: 0; background: transparent; color: var(--text); }
.switch .track { width: 32px; height: 18px; border-radius: 999px; background: var(--n800); border: 1px solid var(--n700); position: relative; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--n400); }
.switch.on .track { background: rgb(var(--acc) / .25); border-color: var(--accent); }
.switch.on .knob { left: 16px; background: var(--accent); box-shadow: 0 0 8px rgb(var(--acc) / .6); }
.switch.on .switch-label { color: var(--accent-ink); font-weight: 500; }
.demo-bar { background: repeating-linear-gradient(135deg, rgb(var(--acc) / .07), rgb(var(--acc) / .07) 12px, rgb(var(--acc) / .035) 12px, rgb(var(--acc) / .035) 24px), var(--ground);
  border-bottom: 1px solid rgb(var(--acc) / .35); font-size: .86rem; color: var(--n200); }
.demo-bar .wrap { padding-top: .45rem; padding-bottom: .45rem; gap: .8rem; }
.demo-bar strong { color: var(--accent-ink); }
.demo-bar span { flex: 1; min-width: 200px; }

/* scrollbars: thin rounded thumb, like the in-game skin */
* { scrollbar-width: thin; scrollbar-color: var(--n700) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--n700); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* news */
.news-card + .news-card { margin-top: 1rem; }
.news-card.pinned { border-color: rgb(var(--acc) / .35); }
.news-card.draft { border-style: dashed; }
.news-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .2rem; }
.news-head h2 { font-size: 1.15rem; margin: 0; }
.news-head h2 a { color: var(--text); }
.news-head h2 a:hover { color: var(--a200); }
.news-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.news-title { font-size: 1.15rem; }
.news-body { line-height: 1.65; overflow-wrap: anywhere; }
.news-body > :last-child { margin-bottom: 0; }
.news-body p { margin: 0 0 .8rem; }
.news-body h2, .news-body h3, .news-body h4 { color: var(--mint); margin: 1rem 0 .4rem; }
.news-body h2 { font-size: 1.1rem; } .news-body h3 { font-size: 1rem; } .news-body h4 { font-size: .95rem; }
.news-body ul, .news-body ol { margin: .3rem 0 .8rem; padding-left: 1.4rem; }
.news-body li { margin: .15rem 0; }
.news-body li::marker { color: var(--accent-ink); }
.news-body blockquote { margin: .6rem 0; padding: .5rem .9rem; border-left: 2px solid var(--accent); background: rgb(var(--acc) / .05); border-radius: 0 6px 6px 0; color: var(--n200); }
.news-body img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.news-body hr { margin: 1rem 0; }
.news-body table { margin: .6rem 0; }
.news-body pre { margin: .6rem 0; }
.news-body details { margin: .6rem 0; padding: .45rem .8rem; border: 1px solid var(--line-strong); border-radius: 8px; background: rgb(var(--ink) / .02); }
.news-body summary { cursor: pointer; color: var(--a300); font-weight: 500; }
.news-body mark { background: rgb(var(--acc) / .16); color: var(--a100); padding: 0 .2em; border-radius: 3px; }
.news-center { text-align: center; } .news-right { text-align: right; }
.news-big { font-size: 1.25em; } .news-small { font-size: .85em; }
.news-strip { margin-bottom: 1rem; }
.news-item + .news-item { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.news-item h3 { font-size: 1rem; margin: 0 0 .1rem; color: var(--text); }
.news-item h3 a { color: var(--text); }
.news-item .news-body { margin-top: .35rem; font-size: .92rem; }
.news-item .news-body h2, .news-item .news-body h3, .news-item .news-body h4 { font-size: .92rem; margin: 0 0 .2rem; }
.clamp { max-height: 4.9em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.pager { justify-content: center; margin-top: 1rem; }
.news-format { margin-bottom: .6rem; }
.news-editor textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86rem; line-height: 1.5; }
.bb-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem; margin-bottom: .4rem; border: 1px solid var(--line); border-radius: 8px; background: rgb(var(--ink) / .02); }
.bb-toolbar button { min-width: 2rem; }
.help-bb pre { font-size: .78rem; }

/* integrations */
.howto { margin-top: .9rem; }
.howto summary, .secret summary { cursor: pointer; color: var(--a400); }
.howto ol, .howto ul { padding-left: 1.3rem; margin: .5rem 0; }
.howto li { margin: .3rem 0; }
.secret { display: inline-block; }
code.copy { display: block; padding: .45rem .6rem; background: var(--ground); border: 1px solid var(--n800); border-radius: 6px; user-select: all; overflow-wrap: anywhere; }
.cmd-list { list-style: none; padding: 0; }
.cmd-list li { padding: .2rem 0; }
#site, #webhooks, #incoming, #wowfeed, #discord { scroll-margin-top: 80px; }
.events-form { display: flex; flex-direction: column; gap: .15rem; }
.events-form .check { font-size: .82rem; white-space: nowrap; }

/* WoW news */
.section-note { margin-top: -.3rem; }
.news-card.feed { border-left: 2px solid rgb(var(--acc) / .45); }
.news-image { display: block; max-width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin: .2rem 0 .8rem; border: 1px solid var(--line); }
.news-source { margin: .8rem 0 0; font-size: .9rem; }
.wow-strip { margin-bottom: 1rem; }
.headlines { list-style: none; padding: 0; margin: 0; }
.headlines li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.headlines li:last-child { border-bottom: 0; }
.headlines a { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.headlines a:hover { color: var(--a200); }
.headlines small { flex-shrink: 0; }
@media (max-width: 700px) { .headlines li { flex-direction: column; gap: 0; } .headlines a { white-space: normal; } }

/* addons catalog */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.addon-grid > .card + .card { margin-top: 0; }
.addon-card { display: flex; flex-direction: column; }
.addon-card > p { flex: 1; color: var(--n200); }
.addon-top { display: flex; gap: .9rem; align-items: center; margin-bottom: .7rem; }
.addon-top h2 { margin: 0 0 .3rem; font-size: 1.08rem; }
.addon-top h2 a { color: var(--text); }
.addon-icon { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 0 22px rgb(var(--acc) / .28); }
.addon-icon.small { width: 36px; height: 36px; border-radius: 8px; box-shadow: none; }
.addon-icon.blank { background: var(--ground); border: 1px solid var(--line-strong); box-shadow: none; }
.addon-tags { gap: .3rem; }
.addon-actions { margin-top: .4rem; }
table.kv th { width: 7rem; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--n400); }
.addon-readme h2 { font-size: 1.05rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.addon-readme h2:first-child { border-top: 0; padding-top: 0; }
.addon-readme table { font-size: .88rem; }
@media (max-width: 700px) { .addon-grid { grid-template-columns: 1fr; } }
.stack code, .news-body code { overflow-wrap: anywhere; }
.news-body table, .addon-readme table { display: block; overflow-x: auto; max-width: 100%; }
.news-body pre { max-width: 100%; }

/* automatic decay */
input.tiny { width: 4.5rem; }
.decay-box { margin: .8rem 0 .6rem; }
.decay-box .row + .row { margin-top: .5rem; }
.decay-pct { gap: .4rem; }
.decay-status { margin: .7rem 0 0; font-size: .9rem; }
.decay-line { margin: .2rem 0 .8rem; }

/* in-portal guide */
.guide-grid { align-items: start; }
.guide h2 { scroll-margin-top: 4.5rem; }
.guide { scroll-margin-top: 4.5rem; }
.guide ol, .guide ul { margin: 0 0 .6rem; padding-left: 1.3rem; }
.guide li { margin: .25rem 0; }
.guide p:last-child, .guide ul:last-child, .guide ol:last-child { margin-bottom: 0; }
.guide-toc { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.guide-toc h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .6rem 0 .3rem; }
.guide-toc h3:first-child { margin-top: 0; }
.guide-toc ul { list-style: none; margin: 0; padding: 0; }
.guide-toc li { padding: .12rem 0; font-size: .9rem; }
@media (max-width: 860px) { .guide-grid > nav { order: -1; position: static; max-height: none; } }

@media (max-width: 700px) {
  
  h1 { font-size: 1.3rem; }
  .card { padding: .85rem .8rem; }
  .card .card { padding: .75rem .7rem; }
  /* 16px text in form boxes stops iPhones zooming in when you tap them */
  input[type=text], input[type=password], input[type=number], input[type=datetime-local], input[type=search], input[type=date], input[type=email], input[type=url], select, textarea { font-size: 16px; }
  .btn, button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
  button.small, .btn.small { min-height: 32px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .row > input[type=text], .row > input[type=search], .row > select { flex: 1 1 160px; }
  [style*="width:14rem"], [style*="width:11rem"] { width: 100% !important; }
  [style*="min-width:220px"], [style*="min-width:240px"] { min-width: 0 !important; }
  .demo-bar .wrap { gap: .4rem .6rem; font-size: .85rem; }
  .demo-bar span { flex-basis: 100%; order: 3; }
  .member-pick { columns: 2 130px; }
  .addon-grid { grid-template-columns: 1fr; }
  pre { font-size: .8rem; }
  code.copy { word-break: break-all; }
  footer { line-height: 1.6; }
}
/* wide tables scroll sideways inside their card; the shadow on the edge shows there's more */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(90deg, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
              linear-gradient(270deg, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, rgb(var(--shade) / .55), transparent) left / 12px 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, rgb(var(--shade) / .55), transparent) right / 12px 100% no-repeat scroll; }
.table-wrap > table { background: transparent; }
@media (max-width: 700px) {
  .table-wrap { margin-left: -.8rem; margin-right: -.8rem; padding: 0 .8rem; }
  .table-wrap th, .table-wrap td { padding: .5rem .45rem; }
}

/* character pictures (Blizzard renders) on raider and account pages */
.member-top { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: 1rem; align-items: start; }
.member-top .grid.two { grid-template-columns: 1fr; }
.member-top + .card { margin-top: 1rem; }
.portrait-card { padding: 0; overflow: hidden; }
.portrait-card.is-loading { opacity: .6; }
.portrait { margin: 0; color: var(--n500); text-align: left; }
.portrait-stage { position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 45%, rgb(18 211 191 / .16), transparent 70%), linear-gradient(180deg, var(--stage-top), var(--stage-bottom)); }
.portrait-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(7, 22, 26, .85)); pointer-events: none; }
.portrait-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portrait[data-kind="inset"] .portrait-stage img, .portrait[data-kind="avatar"] .portrait-stage img { object-fit: contain; object-position: 50% 40%; }
.portrait .silhouette { position: absolute; left: 50%; bottom: 0; height: 78%; transform: translateX(-50%); opacity: .35; }
.portrait.has-img:not(.broken) .silhouette { display: none; }
.portrait.broken img { display: none; }
.portrait.loading .portrait-stage { background: linear-gradient(180deg, var(--stage-top), var(--stage-bottom)); }
.portrait figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; padding: .7rem .9rem .8rem; }
.portrait figcaption strong { font-size: 1.05rem; }
.portrait figcaption .credit { flex-basis: 100%; font-size: .72rem; }
.portrait figcaption small.muted:not(.credit) { flex-basis: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: var(--a400); font-weight: 400; min-height: 0 !important; }
.link-btn:hover { background: none; color: var(--a200); text-decoration: underline; }
a.char-pick:hover { text-decoration: none; }
a.char-pick:hover span { text-decoration: underline; }
.account-hero .portrait-card { margin: 0 -1.1rem -1rem; border-top: 1px solid var(--line); }
.account-hero .head { margin-bottom: .6rem; }
.short-realm { width: 9rem; }
.small-steps { padding-left: 1.2rem; font-size: .88rem; }
@media (max-width: 860px) {
  .member-top { grid-template-columns: 1fr; }
  .member-top .portrait-stage { aspect-ratio: 4 / 3.4; }
}
@media (max-width: 700px) {
  .account-hero .portrait-card { margin: 0 -.8rem -.85rem; }
  .short-realm { width: 100%; }
}

/* Log in with Battle.net */
.or-line { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .8rem; color: var(--n600); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.bnet-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .55rem .9rem;
  background: #148eff1f; border-color: #148effaa; color: #8cc8ff; }
.bnet-btn:hover { background: #148eff33; border-color: #148eff; color: #d6ecff; }
.bnet-chars { list-style: none; padding: 0; margin: .5rem 0; columns: 2 150px; }
.bnet-chars li { padding: .12rem 0; break-inside: avoid; }

/* paper doll: equipped gear around the character picture (Armory style) */
.member-top:has(.with-gear) { grid-template-columns: minmax(0, 700px) 1fr; }
.portrait.with-gear .doll-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem .9rem .2rem; }
.portrait.with-gear .doll-head strong { font-size: 1.05rem; margin-right: .3rem; }
.portrait.with-gear .doll-head .chip { margin-left: .4rem; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; color: var(--n400); }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button.on { background: rgb(var(--acc) / .14); color: var(--a200); }
.doll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 1fr) minmax(0, 1fr); gap: .5rem; padding: .6rem .7rem .2rem; }
.doll .portrait-stage { aspect-ratio: auto; min-height: 380px; border-radius: 8px; grid-column: 2; grid-row: 1; }
.doll .gcol.left { grid-column: 1; grid-row: 1; }
.doll .gcol.right { grid-column: 3; grid-row: 1; }
.doll .gcol.weapons { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: row; justify-content: center; gap: .5rem 1.2rem; flex-wrap: wrap; }
.gcol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: .3rem; min-width: 0; }
.gslot { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 42px; }
.gslot.right { flex-direction: row-reverse; text-align: right; }
.gcol.weapons .gslot { width: 210px; }
.gicon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 6px; border: 1px solid currentColor; background: var(--ground); overflow: hidden; color: var(--n700); position: relative; }
.gicon img { width: 100%; height: 100%; display: block; }
.gslot.empty .gicon { border-style: dashed; opacity: .6; }
.gtext { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gname { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gname a { color: var(--a300); }
.gmeta { display: block; font-size: .7rem; color: var(--n500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmeta b { color: var(--n200); font-weight: 500; }
.genchant { color: var(--good); }
.ggem { color: var(--info); }
.portrait .as-mog { display: none; }
.portrait.show-mog .as-gear { display: none; }
.portrait.show-mog span.as-mog, .portrait.show-mog small.as-mog { display: block; }
.portrait.show-mog img.as-mog { display: block; }
/* narrow places (Account page, phones, small tablets): picture on top, slots in two columns underneath */
.portrait.compact .doll { grid-template-columns: 1fr 1fr; }
.portrait.compact .doll .portrait-stage { grid-column: 1 / -1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3.6; }
.portrait.compact .doll .gcol.left { grid-row: 2; } .portrait.compact .doll .gcol.right { grid-row: 2; grid-column: 2; }
.portrait.compact .doll .gcol.weapons { grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; }
.portrait.compact .gslot.right { flex-direction: row; text-align: left; }
.portrait.compact .gcol.weapons .gslot { width: auto; }
@media (max-width: 1150px) { .member-top:has(.with-gear) { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .doll { grid-template-columns: 1fr 1fr; }
  .doll .portrait-stage { grid-column: 1 / -1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3.6; }
  .doll .gcol.left { grid-row: 2; } .doll .gcol.right { grid-row: 2; grid-column: 2; }
  .doll .gcol.weapons { grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; }
  .gslot.right { flex-direction: row; text-align: left; }
  .gcol.weapons .gslot { width: auto; }
}
.sync-table td:first-child, .sync-table td:last-child, .sync-table th:first-child, .sync-table th:last-child { width: 3.2rem; text-align: center; }
.account-hero ~ #battlenet h2, #battlenet h2 { font-size: .95rem; color: var(--mint); }


/* ===== App shell: dark side menu + top bar, content on the theme's ground ======================== */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); color: var(--text); padding: .5rem .8rem; border-radius: 8px; }
.skip:focus { left: 8px; }
.ico { flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.shell { display: flex; min-height: 100vh; }
.appnav { position: sticky; top: 0; height: 100vh; width: var(--side-w); flex: 0 0 var(--side-w); background: #0a1c20; color: var(--text);
  display: flex; flex-direction: column; border-right: 1px solid #12292d; z-index: 40; }
.side-brand { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 16px 14px 10px 18px; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--text); text-decoration: none; }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 16px rgb(18 211 191 / .25); }
.side-close { display: none; }
.side-nav { flex: 1; overflow-y: auto; padding: 6px 12px 16px; display: flex; flex-direction: column; gap: 18px; overscroll-behavior: contain; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: .7rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: #8fb0a8; padding: 0 10px 6px; }
/* section headings fold their section away (base.html remembers which, per browser) */
button.side-label { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; border-radius: 6px; min-height: 0; margin: 0; padding: 2px 10px 6px; font-family: inherit; text-align: left; cursor: pointer; box-shadow: none; }
button.side-label:hover { color: #cfe6df; background: none; }
button.side-label:focus-visible { outline: 2px solid rgb(var(--acc) / .6); outline-offset: 1px; }
button.side-label svg { width: 14px; height: 14px; opacity: .7; transition: transform .15s ease; }
.side-group.shut button.side-label svg { transform: rotate(-90deg); }
.side-items { display: flex; flex-direction: column; gap: 2px; }
.side-group.shut .side-items { display: none; }
.side-link { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; color: #c9ddd7; font-size: .92rem; position: relative; }
.side-link:hover { background: rgb(228 243 236 / .06); color: #fff; text-decoration: none; }
.side-link.on { background: rgb(18 211 191 / .14); color: #6ff0e0; font-weight: 500; }
.side-link.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #12d3bf; }
.side-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-tag { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: #ceeba7; border: 1px solid #2c5148; border-radius: 4px; padding: 0 5px; line-height: 1.5; }
.side-plan { display: flex; align-items: center; gap: 8px; margin: 0 12px 14px; padding: 10px 12px; border-radius: 10px; background: #0f262a; border: 1px solid #1d3b3f; color: #ceeba7; font-size: .86rem; font-weight: 500; }
.side-plan small { margin-left: auto; color: #8fb0a8; font-weight: 400; font-size: .76rem; }
.side-plan:hover { text-decoration: none; border-color: #2c5148; color: #e4f3ec; }
.side-api { margin: -6px 12px 14px; }
/* version number and What's new, at the very bottom of the menu (guild admins and site admins) */
.side-version { display: flex; align-items: center; gap: 8px; margin: -6px 12px 14px; padding: 6px 12px; border-radius: 8px; color: #9fb8b2; font-size: .8rem; }
.side-version small { margin-left: auto; color: #12d3bf; font-size: .76rem; display: inline-flex; align-items: center; gap: 6px; }
.side-version:hover, .side-version.on { background: rgb(228 243 236 / .06); color: #e4f3ec; text-decoration: none; }
.new-dot { width: 7px; height: 7px; border-radius: 50%; background: #12d3bf; display: inline-block; }
.new-dot[hidden] { display: none; }
.changelog-rel h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ipr { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem 1rem; margin: 1rem 0; }
.ipr legend { color: var(--mint); font-weight: 600; padding: 0 .3rem; }
.ipr select { min-width: 9rem; }
.changelog-list { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.side-scrim { display: none; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 60px; padding: 8px 20px 8px 24px;
  background: #10292e; color: var(--text); border-bottom: 1px solid #1a3a3f; }
.crumbs { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 1rem; white-space: nowrap; overflow: hidden; }
.crumb-guild, .crumb-group { color: #9dbab3; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.crumbs a { border-radius: 4px; }
.crumbs a:hover { color: #e4f3ec; text-decoration: underline; text-underline-offset: 3px; }
.crumb-page { text-decoration: none; }
.crumb-sep { color: #6e8f88; }
.crumb-page { color: #e4f3ec; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.top-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; color: var(--text); padding: 0; }
.icon-btn:hover, .icon-btn.on { background: rgb(228 243 236 / .08); color: #fff; text-decoration: none; border: 0; }
.nav-open { display: none; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--ground); border: 1px solid var(--line-strong); }
.seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--n400); font-size: .82rem; font-weight: 500; }
.seg button:hover { background: rgb(var(--ink) / .06); color: var(--text); border: 0; }
.seg button[aria-pressed="true"], .seg button.on { background: var(--accent-fill); color: var(--on-accent); }
.topbar .seg { background: #07161a; border-color: #1a3a3f; }
.guild-chip, details.guild-switch summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid #2c5148; background: #0d2226; color: #e4f3ec; font-size: .88rem; max-width: 18rem; }
.guild-chip small, details.guild-switch summary small { color: #8fb0a8; font-size: .76rem; white-space: nowrap; }
.gs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; }
details.menu summary::-webkit-details-marker { display: none; }
details.user-menu summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: 8px; color: #e4f3ec; font-size: .9rem; }
details.user-menu summary:hover, details.user-menu[open] summary { background: rgb(228 243 236 / .08); }
.avatar-dot { width: 28px; height: 28px; border-radius: 50%; background: #12d3bf; color: #07161a; font-weight: 600; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; }
details.menu .menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface); border: 1px solid var(--n700); border-radius: 10px; padding: .3rem; z-index: 50; box-shadow: var(--shadow); }
details.menu .menu-list a, details.menu .menu-list .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: .5rem .65rem; border-radius: 6px; color: var(--n300); font-weight: 400; font-size: .9rem; }
details.menu .menu-list .menu-item { flex-direction: column; align-items: flex-start; gap: 0; }
details.user-menu .menu-list .menu-item { flex-direction: row; align-items: center; gap: 8px; }
details.menu .menu-list a:hover, details.menu .menu-list .menu-item:hover { background: rgb(var(--ink) / .07); color: var(--text); text-decoration: none; }
details.menu .menu-list .menu-item.on { color: var(--a200); }
details.menu .menu-list .menu-item small { color: var(--muted); font-size: .75rem; }
details.menu .menu-list form { margin: 0; }
.content { padding: 28px 32px 48px; width: 100%; max-width: 1320px; box-sizing: border-box; }
.foot { color: var(--n500); font-size: .78rem; padding: 0 32px 28px; }
.demo-bar { background: repeating-linear-gradient(135deg, rgb(var(--acc) / .08), rgb(var(--acc) / .08) 12px, rgb(var(--acc) / .04) 12px, rgb(var(--acc) / .04) 24px), var(--ground);
  border-bottom: 1px solid rgb(var(--acc) / .35); font-size: .86rem; color: var(--n200); padding: .5rem 24px; }
.demo-bar .row { gap: .8rem; }
.demo-toggle { display: inline-flex; align-items: center; }
button.switch { background: transparent; border: 0; padding: .3rem .3rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; color: var(--n300); font-size: .88rem; font-weight: 400; }
button.switch:hover { border: 0; background: transparent; color: var(--text); }
.topbar .switch .track { background: #2a3e3b; border-color: #3e5753; }
.wrap { max-width: none; margin: 0; padding: 0; }

/* cards and headings get a little more room in the new layout */
.card { border-radius: var(--radius); padding: 1.15rem 1.3rem; }
.card > h2:first-child, .card > .head h2 { font-size: 1.02rem; font-weight: 600; }
h1 { font-size: 1.65rem; font-weight: 600; color: var(--mint); letter-spacing: -0.02em; }
h2 { font-weight: 600; } h3 { font-weight: 600; }
strong { font-weight: 600; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 1.4rem; }
.page-head h1 { margin: 0 0 .3rem; }
.page-head p { margin: 0; color: var(--n400); font-size: .95rem; }
.btn, button { border-radius: var(--radius-ctl); }
.btn.big, button.big { padding: .6rem 1.1rem; font-size: .92rem; }

/* phones and tablets: the side menu slides in over the page */
@media (max-width: 1024px) {
  .appnav { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-102%); visibility: hidden; box-shadow: 0 0 40px rgb(0 0 0 / .5); }
  body.side-open .appnav { transform: none; visibility: visible; }
  body.side-open .side-scrim { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .5); z-index: 35; }
  .side-close, .nav-open { display: inline-flex; }
  .topbar { padding: 8px 12px; }
  .content { padding: 20px 16px 40px; }
  .foot { padding: 0 16px 24px; }
}
@media (max-width: 760px) {
  .theme-seg span, .um-name, .guild-chip small, details.guild-switch summary small { display: none; }
  .theme-seg button { padding: 0 8px; }
  .crumb-guild, .crumb-group, .crumb-sep { display: none; }
  .top-tools { gap: 4px; }
  .guild-chip, details.guild-switch summary { max-width: 9rem; }
  details.menu .menu-list { position: fixed; left: 12px; right: 12px; top: 64px; }
}
@media (max-width: 420px) { .theme-seg { display: none; } }

/* login, setup and register pages */
body.no-shell { background-color: var(--ground);
  background-image: linear-gradient(rgb(var(--acc) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--acc) / .05) 1px, transparent 1px); background-size: 48px 48px; }
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 16px; box-sizing: border-box; }
.auth-page > .card, .auth-box { width: 100%; max-width: 420px; margin: 0; }
.auth-box.card, .auth-page > .card { border-radius: var(--radius-win); background: var(--surface); border-color: var(--n800); box-shadow: var(--shadow); padding: 1.6rem 1.7rem; }
.auth-logo { margin: 0; text-align: center; font-weight: 600; font-size: 1.25rem; color: var(--text); }
.auth-logo img { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto .6rem; display: block; box-shadow: 0 0 30px rgb(18 211 191 / .25); }
.auth-flash { width: 100%; max-width: 420px; }
.auth-box .primary, .auth-page .card button.primary { width: 100%; min-height: 44px; }
.auth-theme { background: var(--surface); }

/* ===== Dashboard welcome card with the main character's portrait ================================ */
.welcome { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 1.4rem 1.6rem; margin-bottom: 1.2rem; }
.welcome-text { flex: 1 1 340px; display: flex; flex-direction: column; gap: 14px; }
.welcome-text h1 { margin: 0 0 .25rem; }
.welcome-text p { margin: 0; color: var(--n400); }
.hero-char { flex: 0 1 400px; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-strong); }
.hero-ring { position: relative; flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; padding: 3px; box-sizing: border-box; border: 3px solid currentColor; background: var(--surface); }
.hero-ring .face { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, rgb(18 211 191 / .22), transparent 70%), linear-gradient(180deg, var(--stage-top), var(--stage-bottom));
  display: flex; align-items: flex-end; justify-content: center; }
.hero-ring .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.hero-ring .face svg { width: 74%; height: 74%; opacity: .55; }
.hero-ring .lvl { position: absolute; right: -6px; bottom: -4px; min-width: 26px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--surface);
  border: 1.5px solid currentColor; color: var(--text); font-size: .7rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hero-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.08rem; font-weight: 600; color: var(--text); }
.hero-meta { font-size: .84rem; color: var(--text); display: flex; align-items: center; gap: 7px; }
.hero-meta .dot { margin: 0; }
.hero-sub { font-size: .78rem; color: var(--n500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-char > a { align-self: flex-start; font-size: .84rem; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 1.2rem; }
.stat-row > .card { margin: 0; }
.stat-label { font-size: .82rem; color: var(--n400); }
.stat-sub { font-size: .82rem; color: var(--n500); margin-top: .2rem; }

/* ===== App Store ================================================================================ */
.plan-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 1.4rem; }
.plan-mark { width: 46px; height: 46px; border-radius: 12px; background: rgb(var(--acc) / .14); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: 0 0 46px; }
.plan-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.plan-text strong { font-size: 1.02rem; }
.slot-meter { display: flex; gap: 6px; }
.slot-meter span { width: 48px; height: 6px; border-radius: 3px; background: var(--line-strong); }
.slot-meter span.used { background: var(--accent); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line-strong); margin-bottom: 1.4rem; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--n400); font-weight: 500; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.count { font-size: .74rem; padding: 0 7px; border-radius: 999px; background: rgb(var(--acc) / .14); color: var(--accent-ink); }
.store-section { margin-bottom: 2rem; }
.store-section > h2 { font-size: 1.15rem; color: var(--mint); margin: 0 0 .2rem; }
.store-section > p { color: var(--n400); margin: 0 0 1rem; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.app-card { display: flex; flex-direction: column; gap: 14px; margin: 0 !important; }
.app-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.app-tile { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgb(var(--acc) / .14); color: var(--accent-ink); flex: 0 0 46px; }
.app-tile.dim { background: rgb(var(--ink) / .06); color: var(--n400); }
/* App pictures (Bonkr Bedrock): the voxel object on a dark Window Top tile with a Turbo Teal rim, like the logo.
   Dark in both themes so the art always sits on its own ground. Locked apps fade a little. */
.app-tile.art { background: #10292e; border: 2px solid var(--accent); padding: 2px; overflow: hidden; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 14px; }
.app-hero .app-tile.art, .locked .app-tile.art { width: 84px; height: 84px; flex-basis: 84px; border-radius: 18px; }
.game-opt .app-tile.art { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; padding: 1px; }
.app-tile.art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-tile.art.dim { border-color: rgb(var(--acc) / .35); }
.app-tile.art.dim img { opacity: .55; filter: saturate(.6); }
.app-card h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--text); }
.app-card p { margin: 0; color: var(--n400); font-size: .9rem; line-height: 1.5; }
.app-works { font-size: .78rem; color: var(--n500); margin-top: .35rem !important; }
.app-note { font-size: .8rem; color: var(--warn); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--n500); }
.steps li { display: flex; align-items: center; gap: 7px; }
.steps li + li::before { content: ""; width: 22px; height: 1px; background: var(--line-strong); }
.steps .pip { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); }
.steps li.done .pip { background: var(--accent-fill); border-color: var(--accent-fill); }
.steps li.current .pip { border-color: var(--accent); }
.steps li.done, .steps li.current { color: var(--text); }
.app-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.app-actions > *, .app-actions form button { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.app-actions form { margin: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.plan-card { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.plan-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-card h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.plan-card p { color: var(--n400); margin: 0; flex: 1; }
.plan-card form { margin: 0; }
.app-hero { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.app-hero .app-tile { width: 60px; height: 60px; flex-basis: 60px; border-radius: 16px; }
.app-hero-text { flex: 1 1 300px; }
.app-hero-text h1 { margin-bottom: .3rem; }
.adds { margin: .3rem 0 0; padding-left: 1.2rem; }
.adds li { margin: .25rem 0; }
.locked { max-width: 560px; margin: 4vh auto; text-align: center; }
.locked .app-tile { margin: 0 auto 1rem; width: 60px; height: 60px; border-radius: 16px; }

/* ===== Guild addons ============================================================================= */
.addon-list { padding: 0; overflow: hidden; }
.addon-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; }
.addon-row + .addon-row { border-top: 1px solid var(--line); }
.addon-row .addon-icon { width: 46px; height: 46px; border-radius: 10px; box-shadow: none; }
.addon-row .app-tile { width: 46px; height: 46px; }
.addon-main { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.addon-main .name { font-weight: 600; font-size: .98rem; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.addon-main .ver { font-size: .74rem; color: var(--n500); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 6px; font-weight: 400; }
.addon-main .desc { color: var(--n400); font-size: .9rem; }
.addon-main .src { color: var(--n500); font-size: .78rem; display: flex; align-items: center; gap: 6px; }
.addon-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.addon-btns form { margin: 0; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 1.6rem 0 .7rem; }
.section-title h2 { margin: 0; font-size: 1.1rem; color: var(--mint); }
.source-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: .8rem; }
.source-pick label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: .9rem; font-weight: 500; color: var(--text); cursor: pointer; margin: 0; }
.source-pick label:has(input:checked) { border-color: var(--accent); background: rgb(var(--acc) / .1); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 110px; border: 1.5px dashed var(--n700); border-radius: 10px; background: var(--panel-2); text-align: center; padding: 16px; color: var(--text); font-weight: 400; }
.drop small { color: var(--n500); }
.js .src-panel[hidden] { display: none; }

/* ===== light theme: game colours that need more contrast on white ================================ */
:root[data-theme="light"] .c-Priest, :root[data-theme="light"] .game-eq .c-Cleric { color: #5c6b69; }
:root[data-theme="light"] .c-Rogue, :root[data-theme="light"] .game-eq .c-Rogue { color: #9a8a00; }
:root[data-theme="light"] .c-Hunter { color: #5c8a2a; } :root[data-theme="light"] .c-Mage { color: #1f8fb0; }
:root[data-theme="light"] .c-Monk { color: #00a36a; } :root[data-theme="light"] .c-Druid { color: #d4610a; }
:root[data-theme="light"] .c-Paladin { color: #c24f8a; } :root[data-theme="light"] .c-Warrior { color: #9a6b3a; }
:root[data-theme="light"] .c-Shaman { color: #0062c4; } :root[data-theme="light"] .c-Warlock { color: #5a5bd0; }
:root[data-theme="light"] .q1, :root[data-theme="light"] a.q1:hover { color: #33504f; }
:root[data-theme="light"] .q2, :root[data-theme="light"] a.q2:hover { color: #178a00; }
:root[data-theme="light"] .q0, :root[data-theme="light"] a.q0:hover { color: #6f6f6f; }
:root[data-theme="light"] .q5, :root[data-theme="light"] a.q5:hover { color: #c85f00; }
:root[data-theme="light"] .q6, :root[data-theme="light"] a.q6:hover { color: #9a7c2a; }
:root[data-theme="light"] .p-green { color: #178a00; } :root[data-theme="light"] .p-gold { color: #9a7c2a; }
:root[data-theme="light"] .bnet-btn { background: #148eff14; border-color: #148eff88; color: #0b5fae; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .c-Priest, :root:not([data-theme="dark"]) .game-eq .c-Cleric { color: #5c6b69; }
  :root:not([data-theme="dark"]) .c-Rogue, :root:not([data-theme="dark"]) .game-eq .c-Rogue { color: #9a8a00; }
  :root:not([data-theme="dark"]) .c-Hunter { color: #5c8a2a; } :root:not([data-theme="dark"]) .c-Mage { color: #1f8fb0; }
  :root:not([data-theme="dark"]) .c-Monk { color: #00a36a; } :root:not([data-theme="dark"]) .c-Druid { color: #d4610a; }
  :root:not([data-theme="dark"]) .c-Paladin { color: #c24f8a; } :root:not([data-theme="dark"]) .c-Warrior { color: #9a6b3a; }
  :root:not([data-theme="dark"]) .c-Shaman { color: #0062c4; } :root:not([data-theme="dark"]) .c-Warlock { color: #5a5bd0; }
  :root:not([data-theme="dark"]) .q1, :root:not([data-theme="dark"]) a.q1:hover { color: #33504f; }
  :root:not([data-theme="dark"]) .q2, :root:not([data-theme="dark"]) a.q2:hover { color: #178a00; }
  :root:not([data-theme="dark"]) .q0, :root:not([data-theme="dark"]) a.q0:hover { color: #6f6f6f; }
  :root:not([data-theme="dark"]) .q5, :root:not([data-theme="dark"]) a.q5:hover { color: #c85f00; }
  :root:not([data-theme="dark"]) .q6, :root:not([data-theme="dark"]) a.q6:hover { color: #9a7c2a; }
  :root:not([data-theme="dark"]) .p-green { color: #178a00; } :root:not([data-theme="dark"]) .p-gold { color: #9a7c2a; }
  :root:not([data-theme="dark"]) .bnet-btn { background: #148eff14; border-color: #148eff88; color: #0b5fae; }
}
/* the side menu and top bar keep the game's own (dark-background) colours */
.appnav .c-Priest, .topbar .c-Priest { color: #ffffff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
details.add-addon { margin-bottom: 1.2rem; }
details.add-addon > summary { list-style: none; cursor: pointer; }
details.add-addon > summary::-webkit-details-marker { display: none; }
details.add-addon > summary h2 { display: inline; }
details.add-addon[open] > summary { margin-bottom: .8rem; }
fieldset.plain { border: 0; padding: 0; margin: 0 0 .8rem; }
fieldset.plain legend { color: var(--n400); font-size: .82rem; padding: 0 0 .5rem; }
.drop + input[type=file] { margin-top: .5rem; }
.small-icon { width: 34px; height: 34px; color: var(--n400); font-size: 1rem; }
.small-icon:hover { color: var(--text); background: rgb(var(--ink) / .07); }
details.addon-edit summary.btn { list-style: none; }
details.menu .menu-list.wide { width: 320px; padding: .9rem; }
details.menu .menu-list.wide input:not([type=file]), details.menu .menu-list.wide select { width: 100%; }
.addon-tile { position: relative; overflow: hidden; }
.addon-tile img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; background: var(--surface); }

.stack-cards { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.stack-cards > .card + .card { margin-top: 0; }
.grid.side { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.2rem; }
@media (max-width: 1100px) { .grid.side { grid-template-columns: 1fr; } }
.stat-text { font-size: 1.25rem !important; line-height: 1.6; }
.raid-list, .loot-list { list-style: none; margin: 0; padding: 0; }
.raid-list li, .loot-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.raid-list li:first-child, .loot-list li:first-child { border-top: 0; padding-top: 2px; }
.date-tile { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.date-tile small { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--n500); }
.date-tile strong { font-size: 1.1rem; color: var(--text); }
.raid-main, .loot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.raid-main a { color: var(--text); font-weight: 600; }
.loot-main small { color: var(--n500); }
.loot-list .num { font-variant-numeric: tabular-nums; color: var(--text); }
.news-item .chip { margin-bottom: .3rem; }

.appnav .side-close { display: none; }
@media (max-width: 1024px) { .appnav .side-close { display: inline-flex; } }
.side-link { min-height: 36px; }
.side-nav { gap: 14px; }
@media (max-width: 600px) { .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; } .stat-row .stat { font-size: 1.3rem; } .stat-row .card { padding: .8rem .9rem; } }

/* ===== guild registration and invites ============================================================ */
.wizard { width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.wizard.in-shell { margin: 0; }
.wizard-card { padding: 1.6rem 1.8rem; border-radius: var(--radius-win); }
.wizard-card h1 { margin-bottom: .8rem; }
.wiz-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--n500); }
.wiz-steps li { display: flex; align-items: center; gap: 8px; }
.wiz-num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; box-sizing: border-box; }
.wiz-steps li.current { color: var(--text); font-weight: 600; }
.wiz-steps li.current .wiz-num { border-color: var(--accent); color: var(--accent-ink); }
.wiz-steps li.done .wiz-num { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.game-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.game-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--text); margin: 0; }
.game-opt .app-tile { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
.game-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.game-opt:has(input:checked) { border-color: var(--accent); background: rgb(var(--acc) / .1); box-shadow: inset 0 0 0 1px var(--accent); }
.game-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.name-hint { display: block; margin-top: .3rem; color: var(--n500); }
.name-hint.ok { color: var(--good); } .name-hint.bad { color: var(--bad); }
.invite-rows { display: flex; flex-direction: column; gap: 8px; }
.invite-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.invite-made { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1rem; }
.invite-line { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.invite-line .row code, .addon-row code.copy { flex: 1; min-width: 0; font-size: .8rem; }
.grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .grid.three-col { grid-template-columns: 1fr; } .invite-row { grid-template-columns: 1fr 110px; } .wizard-card { padding: 1.2rem 1rem; } }
.auth-links { text-align: center; font-size: .88rem; color: var(--n400); }

tr.dim-row td:not(.guild-actions) { opacity: .75; }
.guild-actions { white-space: nowrap; }
.guild-actions form.inline, .guild-actions details { display: inline-block; vertical-align: middle; }
.purge-menu .menu-list p { font-size: .88rem; white-space: normal; }
.disabled-bar { margin: 12px 32px 0; }
@media (max-width: 1024px) { .disabled-bar { margin: 12px 16px 0; } }
/* disable / purge panels on the Guilds page: centred pop-up, so the table's scroll box can't clip them */
.purge-menu[open] > .menu-list { position: fixed; left: 50%; top: 18vh; right: auto; transform: translateX(-50%); width: min(440px, calc(100vw - 32px)); z-index: 60; }
.purge-menu[open]::before { content: ""; position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 55; }

.game-opt.soon { opacity: .55; cursor: not-allowed; }
.soon-tag { display: block; font-size: .7rem; font-weight: 500; color: var(--warn); }

/* Two-step login */
.mfa-method { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .75rem 0; border-top: 1px solid var(--line); }
.mfa-method-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mfa-method-main > svg { flex-shrink: 0; color: var(--accent); }
.mfa-method-main div { display: flex; flex-direction: column; }
.mfa-method form { margin: 0; }
.mfa-keys { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 30px; }
.mfa-keys li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .35rem 0; }
.mfa-keys form { margin: 0; }
.mfa-msg { min-height: 1.2em; margin: .3rem 0 0; font-size: .85rem; color: var(--n400); }
.mfa-msg.bad { color: var(--bad); }
.mfa-codes { border: 1px solid rgb(var(--warn-rgb) / .45); background: rgb(var(--warn-rgb) / .07); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; }
.mfa-codes p { margin-top: 0; }
.mfa-codes pre { columns: 2; column-gap: 1.5rem; font-size: 1rem; letter-spacing: .04em; margin: .4rem 0 .7rem; background: transparent; border: 0; padding: 0; }
.mfa-verify #passkey-login { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mfa-verify .mfa-cancel { margin-top: 1rem; text-align: center; }
.code-input { font-size: 1.25rem; letter-spacing: .18em; font-variant-numeric: tabular-nums; max-width: 14ch; }
.mfa-setup { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.mfa-qr { background: #fff; border-radius: 12px; padding: 10px; line-height: 0; flex-shrink: 0; }
.mfa-qr svg { width: 220px; height: 220px; max-width: 100%; }
.mfa-steps { flex: 1; min-width: 260px; margin: 0; padding-left: 1.3rem; }
.mfa-steps li { margin: 0 0 1rem; }
.mfa-steps .row { margin: .4rem 0; }
.mfa-secret { font-size: .95rem; letter-spacing: .06em; word-break: break-all; }
.mfa-confirm { margin-top: .5rem; }
.auth-box .mfa-method .primary, .auth-box .mfa-method button { width: auto; min-height: 32px; flex-shrink: 0; }

/* Guild registration: actions and undo */
.wiz-actions { gap: 10px; flex-wrap: wrap; }
.wiz-actions .big { min-height: 44px; }
.undo-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: .6rem .8rem; margin-bottom: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--n400); font-size: .9rem; }
.undo-box form { margin: 0; }

/* Portal back end (site admins) */
.portal-badge { cursor: default; }
.portal-badge:hover { border-color: #1d3b3f; color: #ceeba7; }
.stat-link { color: inherit; display: block; }
.stat-link:hover { text-decoration: none; border-color: var(--accent); }
.plan-split { display: flex; gap: 14px; flex-wrap: wrap; margin: .35rem 0 .2rem; font-size: .95rem; }
.plan-split a { color: var(--text); }
.plan-split strong { font-size: 1.5rem; font-weight: 600; margin-right: 2px; }
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.filter-pills a { font-size: .8rem; padding: .18rem .65rem; border-radius: 999px; border: 1px solid var(--line); color: var(--n400); }
.filter-pills a.on, .filter-pills a:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
.portal-table td { vertical-align: top; }
.split-notice { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.split-notice p { margin: 0; flex: 1; min-width: 240px; }
.site-grid { align-items: start; }
.site-grid h3 { margin: 1.1rem 0 .4rem; font-size: .95rem; }
.plain-list { list-style: none; padding: 0; margin: 0 0 .8rem; }
.plain-list li { padding: .3rem 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.back-link { margin: 0 0 .4rem; font-size: .88rem; }
.danger-zone summary { color: var(--bad); }
.acct-actions { gap: 6px; }
.search-row { margin-bottom: 1rem; }
.setup-box { max-width: 480px; }
.setup-box fieldset { margin-bottom: .6rem; }
.wiz-actions .btn.big { width: 100%; text-align: center; justify-content: center; }

/* Raid videos app */
.video-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.video-group { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--n400); padding: .7rem 0 .25rem; }
.video-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .45rem 0; border-top: 1px solid var(--line); }
.video-row form { margin: 0; }
.video-link { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.video-link:hover { text-decoration: none; }
.video-link:hover strong { color: var(--accent-ink); }
.video-link span:last-child { display: flex; flex-direction: column; min-width: 0; }
.app-tile.small-tile { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 32px; }
.video-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; align-items: end; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.video-form .field { margin: 0; }
.video-form .row { grid-column: 1 / -1; }
@media (max-width: 760px) { .video-form { grid-template-columns: 1fr; } }
.video-filter { margin: 0 0 1rem; }

/* Reason dialog (audit log) */
.reason-dialog { border: 1px solid var(--line); border-radius: var(--radius-win, 14px); background: var(--surface); color: var(--text); padding: 1.3rem 1.4rem; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.reason-dialog::backdrop { background: rgb(0 0 0 / .55); }
.reason-dialog h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.reason-dialog textarea { width: 100%; box-sizing: border-box; margin: .4rem 0 .3rem; }
.reason-dialog .row { margin-top: .8rem; gap: 8px; }

/* Audit log */
.audit-filter { margin-bottom: 1rem; flex-wrap: wrap; gap: 8px; }
.audit-table td { vertical-align: top; }
.audit-changes { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.audit-changes li { padding: .1rem 0; word-break: break-word; }
.audit-changes del { color: var(--bad); text-decoration: line-through; opacity: .85; }
.audit-changes ins { color: var(--good); text-decoration: none; }
.audit-detail summary { cursor: pointer; color: var(--a400); font-size: .85rem; }
.sub-actions { margin: .6rem 0 .2rem; }
.sub-history { width: 100%; }
.sub-history td { padding: .25rem .4rem .25rem 0; vertical-align: top; }
.price-row label { display: inline-flex; align-items: center; gap: 4px; }

/* Money dashboard */
.money-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.money-table { width: 100%; }
.money-table td, .money-table th { padding: .35rem .5rem; }
.money-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.money-90 { display: flex; gap: 18px; flex-wrap: wrap; }
.mrr-chart { position: relative; margin: 0; }
.mrr-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.mrr-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.mrr-chart .axis-label { fill: var(--n400); font-size: 13px; }
.mrr-chart .mrr-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mrr-chart .mrr-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.mrr-chart .crosshair { stroke: var(--n400); stroke-width: 1; stroke-dasharray: 3 3; }
.mrr-chart .hit { fill: transparent; cursor: crosshair; }
.chart-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .25rem .55rem; font-size: .82rem; color: var(--text); box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; }
.meter { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: rgb(var(--ink) / .08); vertical-align: middle; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.sync-run { border-top: 1px solid var(--line); padding: .45rem 0; }
.sync-run:first-child { border-top: 0; }
.sync-run summary { cursor: pointer; }

/* Legal pages */
.legal-doc { max-width: 780px; margin: 0 auto 3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-win, 14px); padding: 2rem 2.2rem; line-height: 1.6; text-align: left; }
.legal-doc h1 { margin: 0 0 .2rem; }
.legal-doc h2 { font-size: 1.12rem; margin: 1.8rem 0 .5rem; }
.legal-doc section { scroll-margin-top: 80px; }
.legal-doc ul { padding-left: 1.3rem; }
.legal-doc li { margin: .3rem 0; }
.legal-toc { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; margin: 1rem 0; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; font-size: .92rem; }
@media (max-width: 600px) { .legal-doc { padding: 1.2rem 1rem; } .legal-toc ol { columns: 1; } }
.legal-foot { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.auth-page .legal-doc { width: 100%; }
.agree-check { align-items: flex-start; margin: .4rem 0 .9rem; font-size: .88rem; }
.agree-check input { margin-top: .2rem; }
.auth-links .sep { opacity: .5; margin: 0 .35rem; }
.legal-toc li { margin: 0 0 .3rem; break-inside: avoid; }
.legal-accept { margin: 1.5rem auto; }
.legal-accept .mfa-cancel { text-align: center; margin-top: .8rem; }
.accounts-filter { margin: 0 0 .8rem; justify-content: flex-start; }
.trial-offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-color: rgb(var(--acc) / .45); }
.trial-offer form { margin: 0; }
.trial-box { margin: .5rem 0; }
.trial-box form { margin: .3rem 0; }

/* Site admin command centre */
.snapshot .snap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: .4rem; }
.snap { display: flex; flex-direction: column; gap: 2px; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); }
a.snap:hover { text-decoration: none; border-color: var(--accent); }
.snap span { font-size: .78rem; color: var(--n400); }
.snap strong { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.snap small { font-size: .72rem; color: var(--n400); }
.pos { color: var(--good); } .neg { color: var(--bad); }
.alerts { display: flex; flex-direction: column; gap: 8px; margin: 1rem 0; }
.alert-row { display: flex; align-items: center; gap: 10px; padding: .6rem .8rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.alert-row.bad { border-color: rgb(var(--bad-rgb) / .45); background: rgb(var(--bad-rgb) / .06); }
.alert-row.warn { border-color: rgb(var(--warn-rgb) / .45); background: rgb(var(--warn-rgb) / .06); }
.alert-row.ok { border-color: rgb(var(--good-rgb) / .4); background: rgb(var(--good-rgb) / .06); }
.alert-row > div { flex: 1; }
.alert-row.bad .alert-icon { color: var(--bad); } .alert-row.warn .alert-icon { color: var(--warn); } .alert-row.ok .alert-icon { color: var(--good); }
.widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 1rem 0; }
.widget-grid.two-up { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.widget h2 { margin-top: 0; font-size: 1.02rem; }
.widget h3 { font-size: .85rem; margin: .9rem 0 .3rem; color: var(--n400); font-weight: 500; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; margin: 0; }
.kv dt { color: var(--n400); font-size: .88rem; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 44px; margin: .9rem 0 .2rem; }
.spark-bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 4px; }
.rank-list { margin: 0; padding-left: 1.2rem; font-size: .88rem; }
.rank-list li { margin: .15rem 0; }
.upcoming li { display: block; }
.attention-line { margin: -.3rem 0 .4rem; }
.snapshot .snap-grid { grid-template-columns: repeat(3, 1fr); }
.widget-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1700px) { .widget-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .widget-grid, .widget-grid.two-up { grid-template-columns: 1fr; } .snapshot .snap-grid { grid-template-columns: repeat(2, 1fr); } }
.widget-grid > .card, .snapshot { margin: 0; }
.snapshot { margin-bottom: 1rem; }

/* Back end › Accounts: filters, tick boxes and the bulk bar; portal messages */
.acct-filters { padding: 14px 16px; }
.acct-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin-bottom: 10px; align-items: end; }
.acct-filter-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--n400); }
.acct-filter-grid label.check { flex-direction: row; align-items: center; gap: 6px; color: inherit; }
.acct-filter-grid input, .acct-filter-grid select { width: 100%; }
.multi-pick { display: flex; flex-direction: column; gap: 4px; position: relative; }
.multi-pick .lbl { font-size: .8rem; color: var(--n400); }
.multi-pick details > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: .42rem .6rem; background: var(--surface, transparent); }
.multi-pick details > summary::-webkit-details-marker { display: none; }
.multi-pick-list { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 240px; max-height: 280px; overflow: auto; margin-top: 4px;
  background: var(--card, var(--bg)); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 4px; }
.multi-pick-list label { flex-direction: row !important; align-items: center; gap: 6px; color: inherit !important; font-size: .88rem !important; }
.bulk-bar { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; position: sticky; top: 8px; z-index: 20; }
.bulk-bar .row { gap: 8px; flex-wrap: wrap; align-items: center; }
.bulk-bar p { margin: 0; }
.bulk-message { display: flex; flex-direction: column; gap: 6px; }
.bulk-message[hidden], .bulk-bar [hidden] { display: none; }
th.tick, td.tick { width: 32px; text-align: center; }
.portal-msg h2 { margin: 0; font-size: 1.05rem; }
.portal-msg.unread { border-left: 3px solid var(--accent); }
.pre-line { white-space: pre-line; }
.msg-banner a { font-weight: 600; margin-left: 6px; }
.acct-filter-grid input[type=checkbox], .multi-pick-list input[type=checkbox] { width: auto; flex: 0 0 auto; margin: 0; }
.acct-filter-grid label.check, .multi-pick-list label { justify-content: flex-start; align-self: center; }
.multi-pick details > summary { font-size: .85rem; min-height: 34px; display: flex; align-items: center; }

/* Free trials: progress meter, the guild's trial prompt */
.trial-meter { height: 6px; border-radius: 999px; background: rgb(var(--acc) / .15); overflow: hidden; margin: 6px 0 2px; max-width: 420px; }
.trial-meter > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.trial-prompt { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-color: rgb(var(--acc) / .45); }
.trial-prompt .tp-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 240px; }
.trial-prompt form { margin: 0; }
.trial-prompt.over { border-color: var(--line); }
.perm-pick { position: relative; display: inline-block; }
.perm-pick > summary { list-style: none; }
.perm-pick > summary::-webkit-details-marker { display: none; }
.perm-form { position: absolute; z-index: 25; right: 0; top: 110%; min-width: 280px; display: flex; flex-direction: column; gap: 6px;
  background: var(--card, var(--bg)); border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.perm-form label.check { display: flex; gap: 6px; align-items: center; }

/* Back end › Database */
.db-crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .85rem; margin-bottom: 6px; color: var(--n400); }
.db-crumbs .db-sql-link { margin-left: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.tabs a { padding: .45rem .8rem; border-bottom: 2px solid transparent; color: var(--n400); }
.tabs a.on, .tabs a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); text-decoration: none; }
.db-grid-wrap { overflow-x: auto; }
.db-grid { border-collapse: collapse; font-size: .8rem; width: max-content; min-width: 100%; }
.db-grid th, .db-grid td { padding: 5px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; max-width: 320px; overflow-wrap: anywhere; }
.db-grid th { position: sticky; top: 0; background: var(--card, var(--bg)); white-space: nowrap; }
.db-grid .null { font-style: italic; font-size: .75rem; }
.db-row-form { display: flex; flex-direction: column; gap: 12px; }
.db-field { display: flex; flex-direction: column; gap: 4px; }
.db-field input[type=text], .db-field textarea { width: 100%; font-family: var(--mono, ui-monospace, monospace); font-size: .85rem; }
.db-field label.check { flex-direction: row; display: flex; gap: 6px; align-items: center; font-size: .8rem; }
.db-index-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.db-index-form .row.wrap { flex-wrap: wrap; gap: 6px 14px; }
.sql-form { display: flex; flex-direction: column; gap: 8px; }
.sql-box { width: 100%; font-family: var(--mono, ui-monospace, monospace); font-size: .9rem; }
.sql-snippet { font-size: .78rem; white-space: pre-wrap; word-break: break-word; }
.link-btn { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.bad-text { color: var(--bad, #e5484d); }
.pager { gap: 10px; align-items: center; justify-content: center; margin: 10px 0; }

/* Database warning popup */
dialog.db-warning { max-width: 620px; width: calc(100% - 32px); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
  background: var(--card, var(--bg)); color: inherit; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
dialog.db-warning::backdrop { background: rgba(0,0,0,.6); }
dialog.db-warning:not([open]) { display: none; }
.dbw-head { display: flex; align-items: center; gap: 10px; color: var(--warn, #f5a524); }
.dbw-head h2 { margin: 0; font-size: 1.15rem; color: inherit; }
.dbw-list { margin: 12px 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.dbw-check { display: flex; gap: 8px; align-items: center; font-weight: 600; margin-top: 6px; }
.dbw-actions { justify-content: flex-end; gap: 8px; }

/* Archive & purge */
.danger-zone { border-color: rgba(229, 72, 77, .55); }
.wizard-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; flex-wrap: wrap; }
.wizard-steps li { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--n400); }
.wizard-steps li.on { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.wizard-steps li.done { opacity: .6; }
.scope-pick { display: flex; flex-direction: column; gap: 6px; }
.scope-pick label.check, .card > label.check { display: flex; gap: 8px; align-items: center; }
.card > label { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.purge-lines li { margin: 3px 0; }
.cancel-row { margin: 8px 0 20px; }
.delete-options h4 { margin: 0 0 6px; }
.delete-options .card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.restore-guild label.check { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.restore-guild label.check input[type=text] { flex: 1; min-width: 180px; }
.delete-head { margin: 18px 0 8px; }
.delete-options label { display: flex; flex-direction: column; gap: 4px; }
.delete-options button { align-self: flex-start; }
.verify-box form { margin: 8px 0; }
.mail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin: 8px 0; }
.mail-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.trial-rules { margin: 6px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
#email label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; text-align: left; margin: 6px 0; }
#email label.check input { width: auto; flex: 0 0 auto; }

/* WoW Macro Studio */
.mx-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem; background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; margin: 6px 0; }
.mx-code.big { font-size: .95rem; }
.mx-live { min-height: 3em; }
.mx-cmd { color: var(--accent); font-weight: 500; }
.mx-meta { color: #b48ee8; }
.mx-cond { color: #e8c46a; }
.mx-unit { color: #59d0a8; }
.mx-br, .mx-sep { color: var(--n400); }
.mx-text { color: var(--bad, #e2475f); text-decoration: underline dotted; }

textarea.mx-input { width: 100%; font-size: .95rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.mx-label { display: flex; justify-content: space-between; font-size: .85rem; margin-top: 8px; }
.mx-count { font-variant-numeric: tabular-nums; }
.mx-suggest { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--card, var(--bg)); max-height: 220px; overflow: auto; margin-top: 2px; }
.mx-suggest button { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 5px 9px; color: inherit; cursor: pointer; }
.mx-suggest button:hover { background: rgba(18, 211, 191, .08); }
.mx-editor-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 960px) { .mx-editor-grid { grid-template-columns: 1fr; } }
.mx-editor-grid .card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mx-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; }
.mx-row label, .mx-builder > label, .mx-editor-grid label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.mx-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mx-checks label.check, .mx-builder label.check { display: flex; flex-direction: row; gap: 6px; align-items: center; font-size: .88rem; }
.mx-builder { display: flex; flex-direction: column; gap: 10px; }
.mx-builder fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mx-builder fieldset[hidden] { display: none; }
.mx-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; }
.mx-filters input[type=search] { flex: 1; min-width: 180px; }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mx-card { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mx-card h3 { margin: 0; font-size: 1rem; }
.mx-class { font-size: .9rem; margin: 10px 0 2px; }
.mx-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.mx-score { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.mx-score .lbl { font-size: .72rem; color: var(--n400); text-transform: uppercase; letter-spacing: .04em; }
.mx-score strong { font-size: 1.25rem; }
.mx-score.ok strong { color: var(--good, #59d0a8); }
.mx-score.bad strong { color: var(--bad, #e2475f); }
.mx-clients { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mx-issues { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.mx-fix { color: var(--accent); }
.mx-steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 8px; }
.mx-step code { font-size: .85rem; }
.mx-step.failed code { color: var(--bad, #e2475f); }
.mx-step.skipped code { opacity: .6; }
.mx-conds { list-style: none; padding-left: 0; margin: 2px 0 0; }
.mx-actions { flex-wrap: wrap; gap: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mx-filters { margin-bottom: 14px; }

/* Dashboard trends */
.trend-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
.mini-chart h3 { margin: 0 0 4px; font-size: .95rem; }
.mini-chart .mrr-chart { margin: 0; }
.snap-name { font-size: 1.05rem !important; }
.trial-bars { display: flex; align-items: flex-end; gap: 8px; min-height: 96px; padding: 6px 0; overflow-x: auto; }
.tb-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 22px; }
.tb-pair { display: flex; align-items: flex-end; gap: 2px; height: 74px; }
.tb { width: 8px; border-radius: 3px 3px 0 0; display: block; }
.tb.started, .tb-key.started { background: var(--n400, #7c8f92); }
.tb.converted, .tb-key.converted { background: var(--accent); }
.tb-key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: middle; }
.mrr-chart .crosshair[hidden] { display: none; }

/* Public front page (/welcome) and invite QR codes */
.front{width:100%;max-width:1040px;margin:0 auto;padding:24px 16px 40px;box-sizing:border-box}
.front-grid > .card + .card{margin-top:0}
.front-hero img{display:block;margin:0 auto}
.front-hero{text-align:center;padding:24px 0 8px}
.front-hero h1{margin:.4rem 0 .2rem;font-size:2rem}
.front-hero .lead{max-width:640px;margin:0 auto 1rem;font-size:1.05rem}
.front-cta{justify-content:center;flex-wrap:wrap;gap:8px}
.front-section{margin-top:2rem}
.front-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:860px){.front-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.front-grid{grid-template-columns:1fr}}
.front-grid .card h3{margin-top:0}
.front-steps{padding-left:1.2rem}
.front-steps li{margin:.4rem 0}
.front-grid.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){.front-grid.plans{grid-template-columns:1fr}}
.front-foot{margin-top:2rem;text-align:center;font-size:.85rem}
.front-foot .sep{margin:0 .4rem}
.plan-card .plan-price{font-size:1.6rem;font-weight:600;margin:.2rem 0 .5rem}
.plan-card .plan-price small{font-size:.85rem;font-weight:400}
.plan-card.featured{outline:2px solid var(--accent, #2bb5a0)}
.front-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.front-app{padding:8px 10px;border:1px solid var(--line, rgba(127,127,127,.25));border-radius:8px}
.qr-box{margin-top:6px}
.qr-box summary{cursor:pointer;font-size:.85rem}
.qr-box svg{display:block;margin-top:6px;background:#fff;padding:6px;border-radius:6px;max-width:180px;height:auto}
#who label.check, .card label.check.inline-check{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;text-align:left}

/* Buster */
.buster-card{padding:0}
.buster-thread{display:flex;flex-direction:column;gap:10px;padding:16px;max-height:62vh;overflow-y:auto}
.buster-q,.buster-a{max-width:80%;padding:10px 12px;border-radius:12px;line-height:1.45}
.buster-q{align-self:flex-end;background:rgb(var(--acc) / .14)}
.buster-a{align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.buster-a.refused{border-color:rgb(var(--warn-rgb) / .5)}
.buster-q p,.buster-a p{margin:.2rem 0}
.buster-a ul{margin:.3rem 0 .3rem 1.1rem;padding:0}
.buster-q .who,.buster-a .who{display:block;font-size:.75rem;font-weight:600;opacity:.75}
.buster-sources{margin-top:.4rem;opacity:.75}
.buster-code{background:rgb(var(--ink) / .08);padding:8px 10px;border-radius:8px;white-space:pre-wrap;font-size:.85rem}
.buster-empty p{margin-top:0}
.buster-examples{display:flex;flex-wrap:wrap;gap:6px}
.chip-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:4px 10px;font-size:.82rem;cursor:pointer}
.chip-btn:hover{border-color:var(--accent)}
.buster-ask{border-top:1px solid var(--line);padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.buster-ask textarea{width:100%;resize:vertical;min-height:0;height:4.4em}
.kb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-head h3{margin:0 auto 0 0}
.kb-doc{margin-bottom:10px}
@media (max-width:640px){.buster-q,.buster-a{max-width:100%}}

/* Buster avatar: the Bonkr logo with a chat bubble in its top-right corner */
.buster-av{position:relative;display:inline-block;width:var(--av,24px);height:var(--av,24px);flex:0 0 auto;line-height:0;vertical-align:middle}
.buster-av img{width:100%;height:100%;border-radius:28%;display:block}
.buster-bubble{position:absolute;top:-22%;right:-26%;width:62%;height:auto;fill:var(--accent-fill);stroke:var(--surface);stroke-width:1.4;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .35))}
.buster-bubble circle{fill:var(--on-accent);stroke:none}
.appnav .buster-av{margin-right:0}
.buster-btn{padding:0;overflow:visible}
.buster-btn .buster-av{transition:transform .15s ease}
.buster-btn:hover .buster-av,.buster-btn[aria-expanded="true"] .buster-av{transform:scale(1.08)}

/* Buster side panel */
.buster-drawer{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(420px,100vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line-strong);box-shadow:-12px 0 32px rgb(0 0 0 / .35)}
.buster-drawer[hidden]{display:none}
.buster-drawer-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line)}
.buster-drawer-head > div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.buster-drawer-head small{color:var(--muted);font-size:.78rem}
.buster-drawer-body{flex:1;min-height:0;display:flex;flex-direction:column}
.buster-drawer-body .buster-thread{flex:1;max-height:none;min-height:0}
.buster-drawer-body .buster-q,.buster-drawer-body .buster-a{max-width:92%}
.buster-window-page{margin:0;height:100vh;overflow:hidden;background:var(--bg)}
.buster-drawer.buster-window{position:static;width:100%;height:100vh;box-shadow:none;border:0}
.buster-loading{padding:16px}
.buster-thinking{opacity:.7;font-style:italic}
@media (min-width:1200px){body.buster-open .shell{padding-right:420px;box-sizing:border-box}}

/* Theme Creator */
:root[data-user-theme] .theme-seg{display:none}
.theme-chip{white-space:nowrap}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.theme-card{border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.theme-card.on{outline:2px solid var(--accent);outline-offset:2px}
.theme-swatch{padding:12px;display:flex;flex-direction:column;gap:6px;min-height:92px}
.theme-swatch .ts-title{font-weight:600}
.theme-swatch .ts-row{display:flex;gap:4px}
.theme-swatch .ts-row span{width:18px;height:18px;border-radius:5px;border:1px solid rgb(127 127 127 / .3)}
.theme-swatch .ts-btn{align-self:flex-start;padding:2px 10px;border-radius:6px;font-size:.78rem;font-weight:600}
.theme-card form{padding:8px 10px;display:flex;gap:6px;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}
.theme-card form small{color:var(--muted)}
.theme-maker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:900px){.theme-maker{grid-template-columns:1fr}}
.color-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.color-field{display:flex;align-items:center;gap:8px}
.color-field input[type=color]{width:42px;height:32px;padding:0;border:1px solid var(--line-strong);border-radius:6px;background:none;flex:0 0 auto}
.color-field input[type=text]{width:6.5rem;font-family:ui-monospace,Consolas,monospace}
.theme-preview{border-radius:12px;padding:16px;border:1px solid rgb(127 127 127 / .3);background:var(--p-bg);color:var(--p-text)}
.theme-preview .pv-card{background:var(--p-surface);border-radius:10px;padding:12px 14px;margin-top:10px}
.theme-preview h3{color:var(--p-heading);margin:0 0 .4rem}
.theme-preview .pv-muted{color:var(--p-muted);font-size:.85rem}
.theme-preview a{color:var(--p-accent)}
.theme-preview .pv-btn{display:inline-block;background:var(--p-accent);color:var(--p-on);border-radius:8px;padding:4px 12px;font-weight:600;margin-right:6px}
.theme-preview .pv-chip{display:inline-block;border-radius:999px;padding:1px 9px;font-size:.78rem;margin-right:4px;border:1px solid currentColor}

/* Bonkr Courier */
.sync-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.sync-grid > .card + .card{margin-top:0}
@media (max-width:1000px){.sync-grid{grid-template-columns:1fr}}
.sync-dl-head{display:flex;gap:12px;align-items:center;margin-bottom:.6rem}
.sync-dl-head h2{margin:0}
.sync-dl ul{padding-left:1.1rem}
.sync-dl li{margin:.3rem 0}

/* ? menu: online guide and PDF guides */
.help-menu .menu-list { min-width: 300px; }
.help-menu .menu-list a { display: flex; align-items: center; gap: 8px; }
.help-menu .menu-list a small { margin-left: auto; }

/* Patreon */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 18px}
.patreon-box{margin-bottom:16px}
.patreon-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.patreon-head h3{margin:0 0 2px}
.api-scopes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:6px 18px}
.api-docs pre{overflow-x:auto}
.api-docs td:first-child{white-space:nowrap}
.sync-setup{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px;background:linear-gradient(135deg,rgb(var(--acc) / .10),transparent 60%),var(--surface)}
.sync-setup img{border-radius:14px;flex:0 0 auto}
.sync-setup h2{margin-top:0}
.sync-setup .grow{flex:1;min-width:0}
@media (max-width:640px){.sync-setup{flex-direction:column}}

/* Closed beta */
.beta-land .front-hero{position:relative}
.beta-chip{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 12px;margin-top:6px}
.beta-card{max-width:620px;margin:0 auto 22px;text-align:center}
.beta-form{justify-content:center}
.beta-form input{flex:1;min-width:220px;max-width:320px;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.beta-links{max-width:900px;margin:0 auto}
.beta-links .card{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.beta-banner{max-width:1100px;margin:0 auto 14px}
fieldset.mail-grid{border:0;padding:0;margin:.6rem 0 0;min-width:0}
fieldset.mail-grid[hidden]{display:none}
.mail-help{grid-column:1 / -1;margin:0}
.mail-method{margin-top:.4rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.beta-form button{flex:0 0 auto;width:auto;min-width:110px}
.beta-card code{white-space:nowrap}

/* Email messages */
.mailtpl summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mailtpl summary small{flex-basis:100%}
.mailtpl-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;margin-top:12px}
@media (max-width:900px){.mailtpl-grid{grid-template-columns:1fr}}
.mailtpl textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.86rem;min-height:220px}
.mailtpl-fields{padding-left:1.1rem;font-size:.86rem;margin:.3rem 0 .8rem}
.mailtpl-preview{background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:.85rem}
.mailtpl-preview pre{white-space:pre-wrap;margin:.4rem 0 0;font-family:inherit}

/* Dashboard Basic / Advanced switch */
.dash-view{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 0 10px}
.dash-view .seg button{padding:5px 14px;font-size:.86rem}
.dash-more{text-align:center;margin-top:14px}

/* Bonkr Sims */
.sim-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:.4rem 0 .8rem}
.sim-kind{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:10px 12px 10px 36px;position:relative;cursor:pointer}
.sim-kind input{position:absolute;left:12px;top:13px;accent-color:var(--accent)}
.sim-kind:has(input:checked){border-color:var(--accent);background:rgb(var(--acc) / .08)}
.sim-kind.soon{opacity:.6;cursor:default}
.sim-kind small{color:var(--muted)}
.sim-new textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.82rem}
.sim-opts{align-items:flex-end;margin:.6rem 0}
.sim-opts label:not(.check){display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.sim-bar{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin:10px 0}
.sim-bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .5s}
.sim-share{height:4px;border-radius:99px;background:var(--panel-2);margin-top:4px;overflow:hidden}
.sim-share i{display:block;height:100%;background:var(--accent)}
.sim-drops{border:1px dashed var(--line);border-radius:10px;padding:8px 12px 10px;margin:.4rem 0 .8rem}
.sim-drops legend{font-size:.8rem;color:var(--muted);padding:0 6px}
.sim-new:not(:has(input[value="dropfinder"]:checked)) .sim-drops{display:none}
.sim-gain{font-variant-numeric:tabular-nums;font-weight:600}
.sim-gain.up{color:var(--ok, #2e9d6a)}
.sim-gain.down{color:var(--muted)}
.sim-change td:first-child{white-space:nowrap}
.sim-head{margin-top:16px}

/* Bonkr Forge spotlight on the front page */
.forge-spot{border:1px solid var(--accent, #2bb5a0);border-radius:16px;padding:22px 22px 18px;
  background:linear-gradient(135deg, rgb(var(--acc) / .14), rgb(var(--acc) / .03) 60%)}
.forge-head{display:flex;gap:18px;align-items:flex-start}
.forge-mark{flex:0 0 64px;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgb(var(--acc) / .18);color:var(--accent-ink, var(--accent))}
.forge-head h2{margin:.35rem 0 .3rem;font-size:1.6rem}
.forge-head .lead{margin:0;max-width:760px}
.forge-grid{margin-top:16px}
.forge-games{margin:14px 0 4px}
.forge-cta{justify-content:flex-start;margin-top:10px}
.plan-forge{display:block;color:var(--text) !important;flex:0 !important;
  background:rgb(var(--acc) / .10);border-radius:8px;padding:6px 8px;font-size:.9rem}
.plan-card.forge-plan{border-color:var(--accent)}
@media (max-width:560px){.forge-head{flex-direction:column}.forge-spot{padding:16px}}
.plan-forge .ico{vertical-align:-3px;margin-right:4px;color:var(--accent)}
.forge-teaser{max-width:900px;margin:1.6rem auto 1.4rem}
.sim-item{color:inherit;text-decoration:underline dotted rgb(var(--acc) / .6);text-underline-offset:3px}
.sim-item:hover{color:var(--accent)}
.plan-card .plan-annual{margin:-.3rem 0 .4rem;font-size:.92rem}
.plan-annual .chip{margin-left:4px}
.price-table input.tiny{width:7em}
.dkp-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin:.4rem 0 .8rem}
.dkp-method{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:10px;padding:10px 12px 10px 36px;position:relative;cursor:pointer}
.dkp-method input{position:absolute;left:12px;top:13px;accent-color:var(--accent)}
.dkp-method:has(input:checked){border-color:var(--accent);background:rgb(var(--acc) / .08)}
.dkp-method small{color:var(--muted)}
#dkp-method:not(:has(input[value="bonkr"]:checked)) .bdkp-nums{opacity:.55}
.grid.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}

/* Account page: settings cards in a centred column, the character card beside them on wide screens */
.account-page { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; gap: 1.2rem; align-items: start; margin: .4rem 0 2rem; }
.account-page.with-hero { grid-template-columns: minmax(300px, 400px) minmax(0, 560px); }
.account-page .auth-box { max-width: none; width: auto; margin: 0; }
.account-cards { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
@media (max-width: 980px) {
  .account-page.with-hero { grid-template-columns: minmax(0, 560px); }
}

/* Support desk (Manage › Support, Back end › Support) */
.support-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.support-thread { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.support-side { display: flex; flex-direction: column; gap: 1rem; }
.support-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .4rem; }
.support-msg { padding: .9rem 1.1rem; border-left: 3px solid var(--line-strong); }
.support-msg.side-support { border-left-color: var(--accent); }
.support-msg.internal { border-left-color: var(--warn); background: rgb(var(--warn-rgb) / .05); }
.support-msg header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.support-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.support-files { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.support-files img { display: block; max-width: min(100%, 420px); max-height: 260px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: .25rem; }
.support-event { text-align: center; }
.support-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: 0; font-size: .9rem; }
.support-dl dt { color: var(--n500); }
.support-dl dd { margin: 0; overflow-wrap: anywhere; }
.chip.prio-urgent { color: var(--bad); border-color: rgb(var(--bad-rgb) / .45); background: rgb(var(--bad-rgb) / .07); }
.chip.prio-high { color: var(--warn); border-color: rgb(var(--warn-rgb) / .4); background: rgb(var(--warn-rgb) / .07); }
.empty-state { text-align: center; padding: 2rem 1rem; }
@media (max-width: 900px) { .support-layout { grid-template-columns: 1fr; } }
.support-search { margin: 0 0 10px; flex-wrap: nowrap; }
.bug-mine li + li { margin-top: .55rem; }
.github-box code { overflow-wrap: anywhere; }
.support-search input[type=search] { flex: 1; min-width: 0; }
a.chip.tag-chip { text-decoration: none; }
a.chip.tag-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.tag-pills { margin-left: 0; align-items: center; }
@media (max-width: 600px) { .support-search { flex-wrap: wrap; } }

/* Bonkr Forge: retail Drop Finder sources and difficulty buttons */
.drop-finder { display: flex; flex-direction: column; gap: .6rem; }
.df-head { margin: .4rem 0 .1rem; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--n400); }
.df-head small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .4rem; }
.df-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.df-tile { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 78px; padding: .5rem; border-radius: 8px; cursor: pointer; overflow: hidden; border: 2px solid rgb(var(--ink) / .14); background: #10262b var(--df-img, none) center / cover no-repeat; isolation: isolate; }
.df-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(6 18 22 / .62); backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); transition: background .15s; }
.df-tile span { font-weight: 600; font-size: .95rem; line-height: 1.2; color: #f0c25a; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.df-tile input { position: absolute; opacity: 0; pointer-events: none; }
.df-tile:hover { border-color: rgb(240 194 90 / .6); }
.df-tile:has(input:checked) { border-color: #f0c25a; box-shadow: 0 0 0 1px #f0c25a, 0 0 14px rgb(240 194 90 / .25); }
.df-tile:has(input:checked)::before { background: rgb(6 18 22 / .28); backdrop-filter: none; -webkit-backdrop-filter: none; }
.df-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.df-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.df-level { cursor: pointer; }
.df-level input { position: absolute; opacity: 0; pointer-events: none; }
.df-level span { display: flex; flex-direction: column; align-items: center; min-width: 108px; padding: .5rem .8rem; border-radius: 6px; border: 1px solid rgb(var(--ink) / .18); }
.df-level strong { font-weight: 500; }
.df-level small { color: var(--n500); font-size: .74rem; }
.df-level:hover span { border-color: var(--accent); }
.df-level input:checked + span { border-color: #f0c25a; color: #f0c25a; background: rgb(240 194 90 / .06); }
.df-level input:checked + span small { color: #d9ad4d; }
.df-level input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.df-track.df-dim { opacity: .4; }
.df-custom { font-size: .85rem; color: var(--n400); }
.df-edit label { display: flex; flex-direction: column; font-size: .8rem; }

/* Forge loot advice: DPS gain per wishlist item */
.forge-gain { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.forge-up { color: var(--good, #59D0A8); }
.forge-down { color: var(--bad, #E2475F); }
.forge-none { color: var(--n500, #8aa); font-weight: 400; }
.forge-card textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
.forge-advice .df-sources { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.forge-advice .df-tile { min-height: 92px; flex-direction: column; gap: .25rem; }
.forge-advice .df-tile small { color: #e8eef0; font-size: .74rem; line-height: 1.25; text-shadow: 0 1px 3px #000; }
.forge-advice .df-tile.soon { cursor: not-allowed; opacity: .55; }
.forge-advice .df-tile.soon::after { content: "Coming soon"; position: absolute; top: 6px; right: 8px; font-size: .66rem; color: #f0c25a; }
.forge-advice .df-tile.always { cursor: default; }
.forge-advice fieldset + fieldset { margin-top: .8rem; }

/* Back end › Bonkr Forge › Server health */
.health-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: .6rem; }
.hm { border: 1px solid rgb(var(--ink) / .12); border-radius: 8px; padding: .6rem .75rem; min-width: 0; }
.hm-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.hm-top strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.hm-bar { height: 6px; border-radius: 3px; background: rgb(var(--ink) / .1); margin: .35rem 0 .3rem; overflow: hidden; }
.hm-bar i { display: block; height: 100%; background: var(--accent); }
.hm-spark { display: block; width: 100%; height: 34px; margin-top: .35rem; }
.hm-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.warnc { color: var(--warn); }
.health-settings { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgb(var(--ink) / .1); }

/* ---- front pages: "What is Bonkr Vault?" feature tiles (bonkr/templates/_showcase.html) ---- */
.showcase{margin:0}
.sc-kicker{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.sc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sc-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.sc-tile img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.sc-tile-copy{padding:9px 11px 11px}
.sc-tile-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-tile h3{font-size:.98rem;margin:0}
.sc-tile .chip{font-size:.68rem;padding:1px 7px}
.sc-tile p{color:var(--muted);font-size:.84rem;line-height:1.4;margin:4px 0 0}
/* the closed-beta front page: everything on one screen */
.beta-one{max-width:1240px;padding-top:28px}
.beta-one-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:36px;align-items:center}
.beta-one-brand{display:flex;align-items:center;gap:16px}
.beta-one-brand h1{font-size:2.3rem;margin:4px 0 0;line-height:1.05}
.beta-one-hero .lead{margin:16px 0 14px}
.beta-one-hero .front-cta{justify-content:flex-start;margin:0}
.beta-one-hero .small{margin:8px 0 0}
.beta-one .beta-card{margin:18px 0 0;padding:14px 16px}
.beta-one .beta-card h2{font-size:1.02rem;margin:0 0 8px}
.beta-one .beta-form{margin:0}
.beta-one .front-foot{margin-top:22px;text-align:center}
@media (max-width:980px){
  .beta-one-grid{grid-template-columns:1fr;gap:26px}
  .sc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){ .sc-tiles{grid-template-columns:1fr 1fr;gap:8px} .sc-tile p{display:none} }
.beta-one .beta-card{text-align:left}
.beta-one .beta-card .beta-form{display:flex;gap:8px;flex-wrap:nowrap}
.beta-one .beta-card .beta-form input{flex:1;max-width:none;text-align:left}
.beta-one .beta-card .beta-form button{width:auto;flex:none}
.beta-one .beta-card .small{margin:8px 0 0}
/* the log-in page: log-in box beside the feature tiles, one screen */
.login-one{max-width:1240px;padding-top:28px}
.login-one-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:center}
.login-one .auth-logo{margin-bottom:14px}
.login-one .auth-box{margin:0;max-width:none;width:100%}
.login-one .auth-links{margin-top:14px;text-align:center}
@media (max-width:980px){ .login-one-grid{grid-template-columns:1fr;gap:26px} .login-one .auth-box{max-width:440px;margin:0 auto} }

/* ---- style audit fixes (Nov 2026) ---- */
/* tick boxes that sit directly in a card: box beside its label, left-aligned (".card > label" stacks other labels) */
.card > label.check, .scope-pick label.check { flex-direction: row; justify-content: flex-start; text-align: left; }
/* game picker: keep the hidden radio inside its tile so the page can't scroll sideways */
.game-opt { position: relative; }
.game-opt input { left: 0; top: 0; width: 1px !important; height: 1px !important; margin: 0; pointer-events: none; }
/* grid columns may shrink below their content (stops wide tables pushing phones sideways) */
.grid > * { min-width: 0; }
/* long addresses and keys in code wrap instead of widening the page */
code { overflow-wrap: anywhere; }
/* the menu bar and top bar stay dark in light mode, so their muted text uses the dark palette */
.appnav, .topbar, .chrome { --muted: var(--n500); }
/* error pages */
.error-page { max-width: 520px; margin: 12vh auto 0; text-align: center; padding: 0 16px; }
.error-page img { display: block; margin: 0 auto 18px; border-radius: 20px; box-shadow: 0 0 40px rgb(var(--acc) / .25); }
.error-page .code { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.error-page h1 { margin: .3rem 0 .6rem; }
.error-page p { color: var(--muted); }
.error-page .row { justify-content: center; margin-top: 18px; }
/* account page: with Battle.net, the cards sit in two columns (Battle.net | email, password, two-step, Discord) */
.account-side { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.account-page.has-bnet { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.account-page.has-bnet.with-hero { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.account-page.has-bnet .account-cards { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
#battlenet .table-wrap { max-height: 60vh; overflow-y: auto; }
#battlenet .sync-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
@media (max-width: 900px) { .account-page.has-bnet.with-hero { grid-template-columns: minmax(0, 1fr); } }
/* the account page with Battle.net uses the full width; the small cards fill the space beside Battle.net */
main.content:has(.account-page.has-bnet) { max-width: none; }
.account-page.has-bnet .account-cards { grid-template-columns: minmax(380px, 560px) minmax(0, 1fr); }
.account-page.has-bnet .account-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
@media (max-width: 1700px) { .account-page.has-bnet .account-cards { grid-template-columns: minmax(0, 1fr); } }
/* Bonkr Forge: the "simulating" card (sim_result.html): 1s and 0s scroll across the bar, WoW one-liners below */
.sim-live .sl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sim-live .sl-head h2 { margin: 0; }
.sl-pct { font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.sim-bar.sl-bar { position: relative; height: 24px; margin: 12px 0 10px; }
.sl-bar i { position: relative; overflow: hidden; z-index: 1; min-width: 4px; transition: width 3s linear;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.sl-bits { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap;
  font: 600 12px/1 ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; letter-spacing: .18em;
  color: color-mix(in srgb, var(--accent-ink) 45%, transparent); animation: sl-scroll 26s linear infinite;
  pointer-events: none; user-select: none; }
/* the same digits, lined up exactly, change colour as the fill passes under them */
.sl-bar i .sl-bits { color: #04262a; font-weight: 800; text-shadow: 0 0 6px rgb(255 255 255 / .35); }
.is-queued .sl-bits { color: rgb(var(--ink) / .2); }
@keyframes sl-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.is-queued .sl-bits { animation-duration: 70s; }
.sl-quip { margin: 2px 0 6px; min-height: 1.4em; font-style: italic; color: var(--text); transition: opacity .25s; }
.sl-quip.out { opacity: 0; }
@media (max-width: 560px) { .sl-pct { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .sl-bits { animation: none; } .sl-bar i { transition: none; } .sl-quip { transition: none; } }

/* ===== Wraithwave Nitro: the public front pages (/welcome and the closed-beta page) ==========================
   The brand kit's loud marketing look: Anton headlines, Bungee stickers, Hazard Yellow and Nitro Red on the usual
   Wraithwave ground. Always dark, whatever theme the visitor's device asks for. Still no animations. */
.nitro-page {
  --hazard: #ffc83d; --nitro: #ff4d5e; --on-hazard: #07161a;
  --bg: var(--ground); --panel: var(--surface); --muted: #9fb8b2; --gold: var(--accent); --gold-dim: var(--a800);
  --display-loud: "Anton Vault", "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
  --sticker: "Bungee Vault", "Bungee", "Arial Black", Impact, sans-serif;
  background-color: var(--ground); color: var(--text); color-scheme: dark;
}
body.nitro-page.no-shell { background-image: none; }
.nitro-page .auth-theme, .nitro-page .theme-seg { display: none; }
.nitro-page .auth-page { justify-content: flex-start; padding-top: 0; }
.nitro { max-width: 1200px; padding-top: 0; }
.nitro-page { overflow-x: hidden; }
.nitro-stripe { height: 14px; width: 100vw; margin: 0 0 0 calc(50% - 50vw); background: repeating-linear-gradient(-45deg, var(--hazard) 0 18px, transparent 18px 36px); }
.nitro h1, .nitro h2 { font-family: var(--display-loud); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .98; color: var(--text); }
.nitro h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 .9rem; }
.nitro h3 { font-weight: 600; }
.nitro .lead { color: #c6dad3; }
.nitro .card { background: var(--surface); border-color: #163a40; border-radius: 16px; }
.nitro .btn.big { min-height: 48px; padding: .75rem 1.3rem; font-size: 1rem; font-weight: 600; border-radius: 12px; display: inline-flex; align-items: center; }
.nitro .btn.big:not(.primary) { border: 2px solid var(--accent); background: transparent; color: var(--text); }
.nitro-sticker { display: inline-block; font-family: var(--sticker); font-size: 1.15rem; line-height: 1.2; color: var(--on-hazard); background: var(--hazard); padding: .25rem .8rem; border-radius: 10px; transform: rotate(-3deg); }
.nitro-kicker { font-family: var(--sticker); font-size: .9rem; color: var(--hazard); margin-bottom: .5rem; }
.nitro-brand { display: flex; align-items: center; gap: 12px; }
.nitro-brand img { border-radius: 14px; }
.nitro-word { font-family: var(--display-loud); font-size: 1.9rem; letter-spacing: .02em; line-height: 1; }
.nitro-word span, .nitro .teal { color: var(--accent); }
.nitro .red { color: var(--nitro); }
.nitro-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 28px 0 40px; }
.nitro-hero h1 { font-size: clamp(3.2rem, 7.4vw, 6.4rem); margin: 18px 0 16px; }
.nitro-hero .lead { font-size: 1.15rem; line-height: 1.55; max-width: 34rem; margin: 0 0 1.2rem; }
.nitro-hero .front-cta { justify-content: flex-start; }
.nitro-hero .note { color: var(--muted); font-size: .9rem; margin: .9rem 0 0; }
.nitro-mascot { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.nitro-mascot .t-loud { font-family: var(--display-loud); }
.nitro-mascot .t-sticker { font-family: var(--sticker); }
@media (max-width: 860px) { .nitro-hero { grid-template-columns: 1fr; gap: 16px; } .nitro-hero-art { order: -1; max-width: 420px; } }
.nitro-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .nitro-vs { grid-template-columns: 1fr; } }
.nitro-vs .card { padding: 22px 24px; }
.nitro-vs h3 { font-family: var(--sticker); font-weight: 400; font-size: .95rem; margin: 0 0 .4rem; }
.nitro-vs .fossil { border: 2px dashed var(--nitro); background: transparent; }
.nitro-vs .fossil h3 { color: var(--nitro); }
.nitro-vs .rex { border: 2px solid var(--accent); }
.nitro-vs .rex h3 { color: var(--accent); }
.nitro-vs strong { display: block; font-family: var(--display-loud); font-weight: 400; font-size: 1.9rem; text-transform: uppercase; line-height: 1; margin-bottom: .7rem; }
.nitro-vs ul { margin: 0; padding-left: 1.1rem; color: #c6dad3; line-height: 1.6; }
.nitro .front-grid .card h3 { color: var(--accent); }
.nitro .front-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: step; }
.nitro .front-steps li { margin: 0; background: var(--surface); border: 1px solid #163a40; border-radius: 16px; padding: 18px 20px; counter-increment: step; }
.nitro .front-steps li::before { content: counter(step); display: block; font-family: var(--sticker); font-size: 2.2rem; color: var(--hazard); line-height: 1; margin-bottom: .5rem; }
@media (max-width: 860px) { .nitro .front-steps { grid-template-columns: 1fr; } }
.nitro .plan-card.featured { border: 2px solid var(--accent); position: relative; }
.nitro .plan-card.featured::before { content: "Crowd favorite"; position: absolute; top: -14px; right: 16px; font-family: var(--sticker); font-size: .78rem; color: var(--on-hazard); background: var(--hazard); padding: 3px 10px; border-radius: 8px; transform: rotate(3deg); }
.nitro .plan-price { font-family: var(--display-loud); font-size: 3rem; line-height: 1.05; }
.nitro .plan-price small { font-family: var(--font); font-size: 1rem; color: var(--muted); }
.nitro .forge-spot { border-radius: 20px; }
.nitro .forge-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.nitro .sc-kicker { font-family: var(--sticker); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .95rem; color: var(--hazard); }
.nitro-band { margin: 2.6rem 0 0; border-radius: 20px; background: var(--hazard); color: var(--on-hazard); padding: 34px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.nitro-band h2 { color: var(--on-hazard); margin: 0 0 .3rem; }
.nitro-band p { margin: 0; font-size: 1.1rem; }
.nitro-band .btn.big, .nitro-band .btn.big:not(.primary) { background: var(--ground); color: var(--hazard); border: 0; font-family: var(--sticker); font-weight: 400; font-size: 1.1rem; }
.nitro .front-foot { color: var(--muted); }
.nitro-beta .beta-one-grid { padding-top: 26px; }
.nitro-beta .nitro-word { display: block; margin-top: 10px; }
.nitro-beta .beta-one-hero > h1 { font-size: clamp(2.8rem, 5.6vw, 4.6rem); margin: 18px 0 0; }
.nitro .beta-banner { margin-top: 14px; }
.nitro-beta .beta-chip { font-family: var(--sticker); font-weight: 400; color: var(--on-hazard); background: var(--hazard); border: 0; border-radius: 8px; transform: rotate(-3deg); }
.nitro-beta-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nitro-beta-right .nitro-mascot { max-width: 380px; }
@media (max-width: 900px) { .nitro-beta-right .nitro-mascot { max-width: 220px; } }
.nitro-beta .beta-one-grid > * { min-width: 0; }
@media (max-width: 900px) { .nitro-beta .beta-one-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .nitro-beta .beta-form input { min-width: 0; } }
.nitro-band-end { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nitro-band-end img { width: 200px; height: auto; }
@media (max-width: 560px) { .nitro-band-end img { width: 150px; } }
.nitro-band > div:first-child { flex: 1 1 420px; min-width: 0; }
/* BonkrDKP + Forge spotlight and the App Store list on /welcome */
.nitro-bdkp .lead { max-width: 52rem; margin: 0 0 1.2rem; }
.nitro-bdkp-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .nitro-bdkp-grid { grid-template-columns: minmax(0, 1fr); } }
.nitro-bdkp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: bd; }
.nitro-bdkp-steps li { background: var(--surface); border: 1px solid #163a40; border-radius: 16px; padding: 16px 18px 16px 64px; position: relative; counter-increment: bd; }
.nitro-bdkp-steps li::before { content: counter(bd); position: absolute; left: 20px; top: 14px; font-family: var(--sticker); font-size: 1.8rem; color: var(--hazard); }
.nitro-bdkp-steps h3 { margin: 0 0 .3rem; color: var(--accent); }
.nitro-bdkp-steps p { margin: 0; color: #c6dad3; line-height: 1.5; }
.nitro-lootcard { margin: 0; background: var(--surface); border: 2px solid var(--accent); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; min-height: 300px; }
.nitro-lootcard figcaption { font-family: var(--sticker); font-size: .8rem; color: var(--hazard); }
.nitro-lootcard .lc-item { font-weight: 600; color: #c8a2ff; }
.nitro-lootcard .lc-item small { color: var(--muted); font-weight: 400; }
.nitro-lootcard .lc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; background: var(--ground); border-radius: 10px; padding: 8px 12px; font-size: .92rem; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.nitro-lootcard .lc-up { color: var(--good); font-weight: 600; }
.nitro-lootcard .lc-flat { color: var(--muted); }
.nitro-lootcard img { width: 110px; height: auto; align-self: flex-end; margin-top: auto; }
.nitro .front-apps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.nitro .front-app { background: var(--surface); border: 1px solid #163a40; border-radius: 14px; padding: 12px 14px; }
.nitro .front-app strong { color: var(--accent); }
/* App Store cards on /welcome: name, one short summary, the games it works with */
.nitro .front-app { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.nitro .front-app .fa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nitro .front-app strong { font-family: var(--display-loud); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.nitro .front-app p { margin: 0; color: #c6dad3; font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nitro .front-app .fa-game { margin-top: auto; padding-top: 4px; font-family: var(--sticker); font-size: .7rem; color: var(--hazard); }
/* "What is Bonkr Vault?" tiles on the Nitro pages */
.nitro .sc-tile { background: var(--surface); border-color: #163a40; border-radius: 16px; }
.nitro .sc-tile h3 { font-family: var(--display-loud); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem; color: var(--text); }
/* the description under each tile's Anton heading: readable size and Soft Chalk (it was .84rem Muted Chalk, too faint);
   the tile pictures no longer repeat it in tiny type. Phones keep it too (smaller). */
.nitro .sc-tile-copy { padding: 12px 14px 14px; }
.nitro .sc-tile p { color: #c6dad3; font-size: 1.05rem; line-height: 1.45; margin-top: 6px; }
@media (max-width: 520px) { .nitro .sc-tile p { display: block; font-size: .9rem; line-height: 1.4; } }
/* One even rhythm between the front page's sections (desktop 96px, tablet 64px, phone 48px) */
.nitro { --nitro-gap: 96px; }
@media (max-width: 860px) { .nitro { --nitro-gap: 64px; } }
@media (max-width: 560px) { .nitro { --nitro-gap: 48px; } }
.nitro-hero { padding-bottom: 0; }
.nitro > .front-section, .nitro > .nitro-band { margin-top: var(--nitro-gap); }
.nitro > .front-foot { margin-top: calc(var(--nitro-gap) / 2); }
.nitro .front-section > h2:first-child, .nitro .front-section > .nitro-kicker:first-child { margin-top: 0; }
.nitro-beta .beta-one-grid { padding-bottom: 0; }
.nitro-beta > .front-foot { margin-top: var(--nitro-gap); }
/* closed-beta code card on the Nitro front page: plain, readable heading (the poster font smears at this size) */
.nitro .beta-card h2 { font-family: var(--display, "Inter", system-ui, sans-serif); font-weight: 600; font-size: 1.05rem;
  text-transform: none; letter-spacing: 0; line-height: 1.3; color: var(--text); text-shadow: none; }
/* staging copy (BONKR_ENV=staging): a hazard banner on every page so nobody mistakes it for the live portal */
.env-banner { position: sticky; top: 0; z-index: 1000; padding: 6px 16px; text-align: center; font-size: .85rem; font-weight: 600;
  color: #1b1b1b; background: repeating-linear-gradient(-45deg, #ffc83d 0 14px, #ffd86b 14px 28px); }
.env-banner strong { letter-spacing: .08em; color: #1b1b1b; }
.env-banner a { color: #1b1b1b; }
/* Email messages › Email look (bonkr/mailstyle.py) */
.maillook{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:12px 0 14px}
.maillook-opt{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;min-width:0}
.maillook-opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.maillook-frame{width:100%;height:300px;border:1px solid var(--line);border-radius:8px;background:#fff;display:block}
.maillook-frame.tall{height:420px;margin-bottom:8px}
.maillook-plain{height:300px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--ground);font-size:.8rem}
.maillook-plain pre{white-space:pre-wrap;margin:0;font-family:inherit}
.mailtpl-text{margin-bottom:10px}
/* Back end › Bonkr Forge › Quick Rank check */
.qr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:.4rem 0 1rem}
.qr-stats div{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.qr-stats strong{font-size:1.5rem;line-height:1.1}
.qr-stats span{font-size:.85rem;color:var(--muted)}
/* ===== Bonkr Bedrock sidebar (option B, 2026-11-01): each menu icon on a small Pit tile, drawn with 2px Mint
   strokes and a soft Turbo Teal fill; the page you're on is solid Turbo Teal with Tar text and a Hazard Yellow
   edge. The sidebar is dark in both themes, so these colours are fixed. */
.side-nav { gap: 14px; }
.side-link { min-height: 40px; gap: 12px; padding: 0 8px; border-radius: 10px; color: #e4f3ec; }
.side-link > svg.ico { box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 8px;
  background: #0d2226; border: 1px solid #163a40; color: #ceeba7; stroke-width: 2; }
.side-link > svg.ico path { fill: rgb(18 211 191 / .22); }
.side-link:hover { background: rgb(228 243 236 / .06); color: #fff; }
.side-link:hover > svg.ico { border-color: #12d3bf; }
.side-link.on { background: #12d3bf; color: #07161a; font-weight: 600; }
.side-link.on > svg.ico { background: rgb(7 22 26 / .2); border-color: transparent; color: #07161a; }
.side-link.on > svg.ico path { fill: none; }
.side-link.on::before { left: -12px; top: 6px; bottom: 6px; width: 4px; border-radius: 0 3px 3px 0; background: #ffc83d; }
.side-link.on .app-tag { color: #07161a; border-color: rgb(7 22 26 / .35); background: transparent; }
.side-link:focus-visible { outline: 2px solid #ffc83d; outline-offset: 2px; }
.side-link .buster-av { --av: 28px; }
/* Back end › Guilds (site_guilds.html) */
.guild-status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 14px; }
.guild-status-strip .gs-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.guild-status-strip .gs-card strong { font-size: 1.4rem; line-height: 1.1; }
.guild-status-strip .gs-card span { font-size: .82rem; color: var(--muted); }
.guild-status-strip .gs-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.guild-status-strip .st-overdue strong, .guild-status-strip .st-disabled strong { color: var(--bad); }
.guild-status-strip .st-suspended strong { color: var(--warn); }
.guild-filter { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.guild-users summary { cursor: pointer; white-space: nowrap; }
.guilds-table .nowrap { white-space: nowrap; }
.guild-users .mini-table { margin-top: 8px; font-size: .82rem; text-align: left; min-width: 360px; }
.guild-users .mini-table th, .guild-users .mini-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Front page pricing: a button on each plan and "How memberships work" */
.plan-card .plan-cta { margin-top: 4px; justify-content: center; }
.plan-card .plan-how { text-align: center; }
.plan-steps { margin-top: 16px !important; }
.plan-steps h3 { margin: 0 0 .5rem; }
.plan-steps ol { margin: 0 0 .6rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 6px; line-height: 1.55; }

/* ===== Side menu stays put (2026-11-01) ===========================================================
   On wide screens the menu is pinned to the window, so it never scrolls away sideways and its bottom
   (plan, API reference, Version / What's new) is never hidden under a horizontal scrollbar. The menu
   list scrolls on its own; the bottom links always keep their room. */
@media (min-width: 1025px) {
  .appnav { position: fixed; left: 0; top: 0; bottom: 0; height: auto; }
  .main-col { margin-left: var(--side-w); }
}
.appnav .side-nav { min-height: 0; }
.appnav > .side-plan, .appnav > .side-api, .appnav > .side-version { flex-shrink: 0; }
.table-wrap.auto-wrap { max-width: 100%; }
.forge-est { font-style: italic; opacity: .85; }   /* Forge Quick Rank estimate (≈) */
/* www.bonkr.net topic pages and FAQ (bonkr/seo.py, templates/marketing/) */
.front-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 1rem; }
.front-topics a.card { display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; border-color: #163a40; }
.front-topics a.card strong { color: var(--accent); }
.front-topics a.card span { color: #9fb8b2; font-size: .9rem; }
.front-topics a.card:hover { border-color: var(--accent); }
.front-faq .faq-item { border-top: 1px solid #163a40; padding: 1rem 0 .2rem; }
.front-faq .faq-item h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--text); }
.front-faq .faq-item p { margin: 0; color: #c6dad3; max-width: 72ch; }
.topic-crumbs { margin: 1rem 0 0; font-size: .85rem; color: #9fb8b2; }
.topic-crumbs a { color: #9fb8b2; }
.topic-body p, .topic-list { color: #c6dad3; max-width: 76ch; }
.topic-list { padding-left: 1.2rem; display: grid; gap: .5rem; }
@media (max-width: 860px) { .topic-hero .nitro-hero-art img { max-height: 240px; width: auto; } }

/* Talents page (bonkr/templates/talents.html, static/talents.js): the game's trees as Bedrock tiles. Taken talents are
   accent-ringed; full ones fill with the accent; choice talents are cut corners; free (granted) ones show "free". */
.talent-trees { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin: .6rem 0 1rem; }
.talent-tree { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 12px; min-width: 0; max-width: 100%; overflow-x: auto; }
.talent-tree h3 { margin: 0 0 8px; font-size: .82rem; font-weight: 500; color: var(--mint); text-transform: uppercase; letter-spacing: .04em; }
.talent-grid { display: grid; grid-template-columns: repeat(var(--cols), 44px); grid-template-rows: repeat(var(--rows), 44px); gap: 8px; }
.talent-node { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--n400); cursor: pointer; }
.talent-node:hover { border-color: var(--a700); background: var(--panel-2); }
.talent-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.talent-node img { width: 36px; height: 36px; border-radius: 5px; opacity: .45; filter: grayscale(.9); }
.talent-node .ini { font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.talent-node .rk { position: absolute; right: -6px; bottom: -7px; font-size: .62rem; line-height: 1; padding: 2px 4px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--n400); }
.talent-node.choice { border-radius: 4px; clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); }
.talent-node.choice .rk { display: none; }
.talent-node.pick { display: none; }
.talent-node.on { border-color: var(--accent); color: var(--text); background: rgb(var(--acc) / .12); }
.talent-node.on img { opacity: 1; filter: none; }
.talent-node.on .rk { color: var(--accent-ink); border-color: rgb(var(--acc) / .5); }
.talent-node.full { background: rgb(var(--acc) / .22); }
.talent-node.full .rk { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.talent-node.free { cursor: default; }
.talent-node.free .rk { font-style: italic; }
.talent-node.blocked { opacity: .45; cursor: not-allowed; }
.talent-points .chip b { font-weight: 600; color: var(--text); }
.talent-heroes { margin: .2rem 0 .4rem; }
.talent-save { border-top: 1px solid var(--line); padding-top: .8rem; display: grid; gap: .6rem; }
.talent-save input[type=text] { min-width: 180px; }
.talent-pick .seg .btn.on { background: var(--accent-fill); color: var(--on-accent); }
.talent-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.talent-list h3 { font-size: .82rem; color: var(--mint); margin: 0 0 4px; }
.talent-list ul { margin: 0; padding-left: 1.1rem; }
textarea.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .8rem; width: 100%; word-break: break-all; }
@media (max-width: 700px) {
  .talent-grid { grid-template-columns: repeat(var(--cols), 36px); grid-template-rows: repeat(var(--rows), 36px); gap: 6px; }
  .talent-node { width: 36px; height: 36px; }
  .talent-node img { width: 28px; height: 28px; }
}
.meter.wide { width: min(420px, 100%); height: 10px; }
.icon-progress { margin: .2rem 0 .4rem; }

/* Raid comp builder (templates/raid_comp.html, static/raidcomp.js) */
.comp-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.comp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.comp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.comp-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin-top: .8rem; }
.comp-groups > .card, .comp-pools > .card, .comp-group, .comp-pool { margin: 0; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.comp-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.comp-group-head h3 { margin: 0; font-size: .95rem; color: var(--mint); }
.comp-zone { min-height: 3rem; display: flex; flex-direction: column; gap: .3rem; border: 1px dashed transparent; border-radius: var(--radius-ctl); padding: .15rem; }
.comp-pool .comp-zone { flex-direction: row; flex-wrap: wrap; }
.comp-pool .comp-person { flex: 0 1 200px; }
.editing .comp-zone { border-color: var(--line); }
.comp-zone.over { border-color: var(--accent); background: rgb(var(--acc) / .06); }
.comp-person { display: flex; align-items: center; gap: .45rem; padding: .3rem .45rem; border-radius: var(--radius-ctl); background: var(--panel-2, var(--surface)); border: 1px solid var(--line); font-size: .86rem; min-width: 0; }
.editing .comp-person { cursor: grab; }
.comp-person.dragging { opacity: .4; }
.comp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-role { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; border-radius: 6px; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 600; background: rgb(var(--ink) / .08); color: var(--muted); }
.comp-role.r-tank { background: rgb(var(--acc) / .18); color: var(--accent-ink); }
.comp-role.r-healer { background: rgb(var(--good-rgb) / .18); color: var(--good); }
.comp-role.r-melee { background: rgb(var(--bad-rgb) / .16); color: var(--bad); }
.comp-role.r-ranged { background: rgb(var(--warn-rgb) / .18); color: var(--warn); }
.comp-bench-count { color: var(--muted); font-size: .72rem; }
.comp-bench-count.hot { color: var(--warn); }
.comp-move { width: auto; max-width: 6.5rem; padding: .1rem .3rem; font-size: .75rem; }
.js .comp-move { display: none; }
.comp-party { display: flex; flex-wrap: wrap; gap: .25rem; min-height: 1rem; }
.comp-save { margin-top: .8rem; }
.comp-side .card { margin-top: 0; }
.comp-side { display: flex; flex-direction: column; gap: .8rem; }
.comp-kind { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .7rem 0 .3rem; }
.comp-cover { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .84rem; }
.comp-cover li { display: flex; align-items: center; gap: .45rem; }
.comp-cover li > span:nth-child(2) { flex: 1; min-width: 0; }
.comp-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; background: var(--n600); }
.comp-cover .st-yes .comp-dot { background: var(--good); }
.comp-cover .st-likely .comp-dot { background: var(--accent); }
.comp-cover .st-maybe .comp-dot { background: var(--warn); }
.comp-cover .st-missing .comp-dot { background: var(--bad); }
.comp-cover .st-missing { color: var(--muted); }
.comp-status { color: var(--muted); font-size: .72rem; }
.comp-cover .st-missing .comp-status { color: var(--bad); }
.comp-game { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .75rem; }
@media (max-width: 900px) { .comp-layout { grid-template-columns: 1fr; } }

/* World buff board (templates/worldbuffs.html) */
.wb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.wb-cards > .card { margin: 0; }
.wb-card { display: flex; flex-direction: column; gap: .35rem; }
.wb-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.wb-card-head h3 { margin: 0; font-size: 1rem; color: var(--mint); }
.wb-name, .wb-meta { margin: 0; }
.wb-meta { margin-top: auto; padding-top: .3rem; }
.wb-place { border-top: 1px solid var(--line); padding-top: .35rem; display: flex; flex-direction: column; gap: .2rem; font-size: .86rem; }
.wb-place-name { font-weight: 500; }
.wb-log li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .25rem 0; }
.wb-now { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.wb-now h3 { margin: 0 0 .5rem; font-size: .95rem; }
.wb-now .row { flex-wrap: wrap; gap: .35rem; }
.muted.small, p.small, span.small { font-size: .82rem; }
.wb-kind { border: 0; padding: 0; margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.wb-kind legend { width: 100%; padding: 0; margin-bottom: .3rem; font-size: .85rem; color: var(--muted); }
.wb-kind label { display: inline-flex; align-items: center; gap: .4rem; width: auto; margin: 0; font-size: .9rem; color: var(--text); }
.wb-kind input { width: auto; margin: 0; }
.wb-kind input[type="radio"] { width: auto; flex: 0 0 auto; }
.wb-kind label { white-space: nowrap; }
.raid-prep .row { flex-wrap: wrap; align-items: center; gap: .5rem; }
.raid-prep-buffs { margin: .6rem 0 0; }

/* My Scorecard (templates/scorecard.html) */
.sc-chart { width: 100%; height: 150px; display: block; }
.sc-chart .sc-line { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sc-chart .sc-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sc-part { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; margin: .5rem 0; font-size: .9rem; }
.sc-part .hm-bar { grid-column: 1 / -1; }
.sc-improved { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .35rem; }
.raid-scores { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.sc-when { white-space: nowrap; }
.sc-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.sc-tip { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; background: var(--panel-2, var(--surface)); }
.sc-tip h3 { margin: 0 0 .4rem; font-size: .98rem; color: var(--mint); }
.sc-tip p { margin: .3rem 0; font-size: .88rem; }
.sc-tip .sc-said { color: var(--accent-ink); font-weight: 500; }
.sc-tip ul { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.sc-tip li { margin: .15rem 0; }

/* ---------------------------------------------------------------------------------------------------------------
   Bedrock refresh (portal 1.8.0, doc 83): the approved mockups ("Bonkr Vault Forever Mockups").
   Menu icons sit on small tiles; the current page is solid Turbo Teal with a Hazard Yellow edge; 44px menu rows;
   bolder headings (Inter 600/700); the Simple / Advanced switch; the dashboard's next-raid panel with voxel art on
   a gridded stage; the Get ready page. Kept at the end so it layers over the older rules above. */
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.card > h2:first-child, .card > .head h2 { font-weight: 600; }
strong { font-weight: 600; }
.btn, button { font-weight: 600; }
.btn.big, button.big { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 1.2rem; }
.chip { font-weight: 600; }

/* menu */
.side-link { min-height: 44px; font-size: .94rem; }
.side-link > svg.ico:first-child { width: 30px; height: 30px; padding: 6px; flex: none; border-radius: 8px;
  background: rgb(18 211 191 / .10); border: 1px solid #163a40; color: #ceeba7; stroke-width: 2; }
.side-link:hover > svg.ico:first-child { border-color: #2c5148; }
.side-link.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.side-link.on:hover { background: var(--accent); color: var(--on-accent); }
.side-link.on::before { left: -12px; top: 6px; bottom: 6px; width: 4px; background: #ffc83d; }
.side-link.on > svg.ico:first-child { background: var(--tar); border-color: var(--tar); color: var(--accent); }
.side-link.on .app-tag { color: var(--on-accent); border-color: rgb(7 22 26 / .35); }
.side-step { flex: none; width: 10px; text-align: center; font-size: .74rem; font-weight: 700; color: #8fb0a8; }
.side-link.on .side-step { color: var(--on-accent); }
.side-mode { margin: 0 12px 14px; padding-top: 12px; border-top: 1px solid #163a40; display: flex; flex-direction: column; gap: 6px; }
.side-mode .seg { display: flex; width: 100%; background: var(--tar); border-color: #163a40; }
.side-mode .seg button { flex: 1; justify-content: center; min-height: 36px; font-size: .84rem; font-weight: 600; color: #9fb8b2; }
.side-mode .seg button[aria-pressed="true"] { background: #163a40; color: #e4f3ec; }
.side-mode small { color: #8fb0a8; font-size: .76rem; padding: 0 4px; }

/* Bedrock pieces shared by the new pages */
.kicker { display: inline-block; align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #07161a; background: #ceeba7; border-radius: 6px; padding: 3px 9px; }
.hi { color: var(--mint); font-weight: 600; }
.bv-tile { width: 32px; height: 32px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--acc) / .10); border: 1px solid var(--line); color: var(--mint); }
.bv-tile svg { stroke-width: 2; }
.art-stage { position: relative; min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background-color: #10292e; background-size: 40px 40px; border-left: 1px solid var(--line);
  background-image: linear-gradient(rgb(18 211 191 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(18 211 191 / .06) 1px, transparent 1px); }
.art-plate { position: absolute; left: 50%; bottom: 24px; width: 200px; height: 40px; margin-left: -100px; border: 2px solid #12d3bf;
  border-radius: 50%; background: rgb(18 211 191 / .08); }
.art-stage img { position: relative; height: 230px; width: auto; }

/* dashboard: next raid, in four steps (Simple mode) */
.raid-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; padding: 0; overflow: hidden; border-radius: var(--radius-win); margin-bottom: 1rem; }
.raid-hero-text { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.raid-hero-title { margin: 0; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.raid-hero-title a, .raid-hero-title a:hover { color: var(--text); text-decoration: none; }
.raid-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--n300); font-size: .92rem; }
.raid-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.raid-hero-meta svg { color: var(--accent-ink); }
.raid-hero-voice { margin: 0; font-size: 1rem; color: var(--n200); }
.raid-hero-voice strong { color: var(--mint); }
.raid-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.raid-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; background: var(--ground); }
.raid-steps .dot { grid-row: span 2; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; background: var(--n800); color: var(--text); }
.raid-steps b { font-weight: 600; font-size: .92rem; }
.raid-steps small { color: var(--muted); font-size: .8rem; }
.raid-steps li.done .dot { background: var(--good); color: var(--ground); }
.raid-steps li.now { border: 2px solid var(--accent); padding: calc(.55rem - 1px) calc(.7rem - 1px); }
.raid-steps li.now .dot { background: var(--accent-fill); color: var(--on-accent); }
@media (max-width: 860px) {
  .raid-hero { grid-template-columns: 1fr; }
  .art-stage { border-left: 0; border-top: 1px solid var(--line); min-height: 210px; }
  .art-stage img { height: 180px; }
  .raid-hero-title { font-size: 1.7rem; }
}

/* Get ready (Simple menu, step 2) */
.prep-tally { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.prep-tally span { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-size: .86rem; font-weight: 600; }
.prep-tally i { width: 9px; height: 9px; border-radius: 99px; display: block; background: var(--n600); }
.prep-tally i.ok { background: var(--good); } .prep-tally i.warn { background: var(--warn); } .prep-tally i.info { background: var(--info); }
.prep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; max-width: 1180px; }
@media (max-width: 860px) { .prep-grid { grid-template-columns: 1fr; } }
.page-head, .prep-tally { max-width: 1180px; }
.prep-grid > .card + .card { margin-top: 0; }
.prep-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.prep-head h2 { margin: 0; color: var(--text); font-size: 1.05rem; font-weight: 600; }
.prep-head .chip { margin-left: auto; }
.prep-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.prep-list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem .75rem;
  border-radius: var(--radius-ctl); background: var(--ground); border: 1px solid var(--line); }

/* member page: Characters as a clean list; officers edit behind one button */
.chars-card .head { margin-bottom: .4rem; }
.char-list { list-style: none; margin: 0; padding: 0; }
.char-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line); }
.char-list li:last-child { border-bottom: 0; }
.char-name { font-weight: 600; }
.char-meta { color: var(--muted); font-size: .88rem; }
.chars-edit { margin-top: .8rem; }
.chars-edit > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chars-edit > summary::-webkit-details-marker { display: none; }
.chars-edit[open] > summary { background: rgb(var(--acc) / .14); }
.chars-edit-body { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }
.char-form { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: .75rem; border-radius: var(--radius-ctl);
  background: var(--ground); border: 1px solid var(--line); }
.char-form-fields, .char-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.char-form-actions .danger { margin-left: auto; }
.char-add { border-style: dashed; }
.prep-card .row + p { margin-top: .7rem; }

/* Account page inside the app (1.8.2): left-aligned like every other page, cards side by side, card-sized titles,
   normal buttons. The login screen keeps its centred box and full-width buttons. */
.account-page { justify-content: start; max-width: 1180px; }
.account-page:not(.has-bnet) { grid-template-columns: minmax(0, 1fr); }
.account-page.with-hero:not(.has-bnet) { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.account-page:not(.has-bnet) .account-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.account-page .auth-box.card { box-shadow: none; padding: 1.2rem 1.3rem; border-color: var(--line); border-radius: var(--radius); }
.account-page .auth-box h1 { font-size: 1.15rem; font-weight: 600; color: var(--mint); letter-spacing: -0.01em; }
.account-page .auth-box .primary { width: auto; min-height: 40px; padding: 0 1.2rem; }
@media (max-width: 900px) { .account-page.with-hero:not(.has-bnet) { grid-template-columns: minmax(0, 1fr); } }

/* Menu section headings: bigger and brighter so each group is easy to spot (Jeremy, 2026-11-04) */
.side-label, button.side-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: #c6dad3; }
button.side-label:hover { color: #e4f3ec; }
button.side-label svg { width: 15px; height: 15px; }

/* Collapse the menu to icons only (desktop; remembered per browser in base.html) */
.side-mini-btn { flex: none; width: 30px; height: 30px; min-height: 0; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; color: #9fb8b2; }
.side-mini-btn svg { transform: rotate(90deg); transition: transform .15s ease; }
.side-mini-btn:hover { color: #e4f3ec; }
@media (max-width: 1024px) { .side-mini-btn { display: none; } }
@media (min-width: 1025px) {
  body.side-mini, body.side-mini .appnav { --side-w: 76px; }
  body.side-mini .side-brand { flex-direction: column; gap: 10px; padding: 16px 0 10px; }
  body.side-mini .brand > span, body.side-mini .side-text, body.side-mini .side-step, body.side-mini .app-tag,
  body.side-mini .side-mode, body.side-mini .side-plan > span, body.side-mini .side-plan small,
  body.side-mini .side-version > span, body.side-mini .side-version small { display: none; }
  body.side-mini .side-mini-btn svg { transform: rotate(-90deg); }
  body.side-mini .side-nav { padding: 6px 10px 16px; gap: 10px; }
  body.side-mini button.side-label { pointer-events: none; padding: 0; min-height: 0; height: 1px; margin: 4px 8px;
    background: #163a40; overflow: hidden; }
  body.side-mini button.side-label > * { display: none; }
  body.side-mini .side-group:first-child button.side-label { display: none; }
  body.side-mini .side-group.shut .side-items { display: flex; }
  body.side-mini .side-link { justify-content: center; padding: 0; gap: 0; }
  body.side-mini .side-link.on::before { left: -10px; }
  body.side-mini .side-plan, body.side-mini .side-version { justify-content: center; margin-left: 10px; margin-right: 10px; padding-left: 0; padding-right: 0; }
}

/* Everyone's version line (not a link for members and officers) */
.side-version-plain small { color: #8fb0a8; }
.side-version-plain:hover { background: none; color: #9fb8b2; }

/* Rotation Builder (templates/rotations.html, static/rotations.js) */
.rot-start { margin: .2rem 0 .6rem; }
.rot-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin: .6rem 0 1rem; }
.rot-list { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.rot-list.on { border-color: var(--accent); box-shadow: 0 0 0 1px rgb(var(--acc) / .35) inset; }
.rot-list-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.rot-list-head h3 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.rot-pick { border: 0; padding: 0; background: none; color: var(--mint); font: inherit; font-weight: 600; cursor: pointer; }
.rot-pick:hover { background: none; text-decoration: underline; }
.rot-aoe { width: 4.2rem; }
.rot-zone { list-style: none; margin: 0; padding: .15rem; min-height: 2.6rem; display: flex; flex-direction: column; gap: .25rem; border: 1px dashed var(--line); border-radius: var(--radius-ctl); }
.rot-zone.over { border-color: var(--accent); background: rgb(var(--acc) / .06); }
.rot-item { display: flex; align-items: center; gap: .35rem; padding: .25rem .4rem; border-radius: var(--radius-ctl); background: var(--panel-2, var(--surface)); border: 1px solid var(--line); font-size: .86rem; cursor: grab; min-width: 0; }
.rot-item.dragging { opacity: .4; }
.rot-item.over { border-color: var(--accent); }
.rot-num { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 6px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 600; background: rgb(var(--acc) / .14); color: var(--accent-ink); }
.rot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-btn { padding: 0 .4rem; line-height: 1.3; }
.rot-pool { border-top: 1px solid var(--line); padding-top: .8rem; }
.rot-pool h3 { margin: 0; font-size: .95rem; }
.rot-filter { max-width: 14rem; }
.rot-group { margin-top: .5rem; }
.rot-group > p { margin: 0 0 .3rem; }
.rot-ability.on { background: rgb(var(--acc) / .16); border-color: var(--accent); }
.rot-custom { margin-top: .8rem; }
.rot-custom input[type=text] { flex: 1 1 12rem; }
.rot-custom input[type=number] { width: 10rem; }
.rot-save { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.rot-code { min-height: 5rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; word-break: break-all; }
@media (max-width: 640px) { .rot-custom input[type=number], .rot-filter { width: 100%; max-width: none; } }
/* Bonkr Armory spotlight on the front page (reuses the BonkrDKP grid and the example card) */
.nitro-armory .armory-card img { width: 150px; }