/* Poke Origin Reborn - site.
   Tokens and components from the Claude Design board "Poke Origin Reborn
   Site" (S13 · Folha de componentes). Values measured in the .dc.html. */

:root {
  --bg-outer: #07090d;
  --bg: #0a0c10;
  --panel: #0d1118;
  --panel-hover: #0f141d;
  --head: #161e2b;
  --head-hover: #1b2432;
  --input: #0b0f16;
  --well: #0f1520;
  --line: #1b2433;
  --line-soft: #161e2b;
  --line-row: #141a24;
  --border: #243044;
  --border-quiet: #2a3547;

  --text-strong: #eef3fa;
  --text-num: #dfe7f2;
  --text: #b6c3d6;
  --text-muted: #8fa0ba;
  --text-label: #6b7d96;
  --text-dim: #5d6d85;
  --text-faint: #4e5d73;
  --text-ghost: #3c4a5e;
  --icon: #4a5b73;

  --accent: #35e0c4;
  --accent-hover: #4df0d4;
  --on-accent: #07130f;
  --accent-soft: #b6f0e6;
  --accent-row: #101a20;

  --amber: #ffc24b;
  --amber-bg: #2a2314;
  --amber-soft: #f0d49a;
  --amber-well: #1d180d;
  --amber-dim: #8a7a4e;
  --red: #ff5a5f;
  --red-bg: #1c1113;
  --red-soft: #ffb4b6;
  --red-btn: #2a1418;
  --red-btn-hover: #38191e;
  --red-btn-border: #5c2329;
  --red-btn-text: #ff8a8f;
  --green: #5fbd58;
  --green-bg: #0f1a12;
  --green-soft: #a9dda5;
  --blue: #3fa9ff;
  --blue-bg: #12232e;
  --violet: #9b8cff;
  --pokeball: #e8453c;
  --disabled-bg: #1a2028;

  --display: 'Chakra Petch', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg-outer); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.55 var(--display);
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }
input, select, textarea, button { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-ghost); }
input:focus, select:focus, textarea:focus, button:focus { outline: none; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 45° chamfer on two corners, the motif of every card and button. */
.ch-9  { clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.ch-10 { clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.ch-11 { clip-path: polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); }
.ch-14 { clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.ch-16 { clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px; }
main { flex: 1; }
.page { padding-top: 34px; padding-bottom: 44px; display: flex; flex-direction: column; gap: 26px; }

/* ---------- top bar ---------- */
.topbar { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.topbar .wrap { display: flex; align-items: center; gap: 26px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-strong); flex: none; }
.brand:hover { color: var(--text-strong); }
.brand-ball { width: 22px; height: 22px; border: 2px solid var(--pokeball); border-radius: 50%; background: #141c28; display: flex; align-items: center; justify-content: center; }
.brand-ball::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pokeball); }
.brand-name { display: flex; flex-direction: column; gap: 3px; }
.brand-name b { font: 700 14px/1 var(--display); letter-spacing: .2em; }
.brand-name small { font: 500 8.5px/1 var(--mono); color: var(--accent); letter-spacing: .24em; }
.topbar-sep { width: 1px; height: 26px; background: var(--line); flex: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; height: 64px; display: flex; align-items: center; padding: 0 15px; font: 600 12px/1 var(--display); letter-spacing: .1em; color: var(--text); white-space: nowrap; }
.nav a:hover { color: var(--text-strong); }
.nav a.on { color: var(--text-strong); }
.nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.online-chip { display: flex; align-items: center; gap: 7px; padding: 0 11px; height: 30px; background: var(--panel-hover); border: 1px solid var(--border); white-space: nowrap; }
.online-chip i { width: 6px; height: 6px; background: var(--green); }
.online-chip.off i { background: var(--red); }
.online-chip span { font: 500 10px/1 var(--mono); color: var(--text-muted); }
.online-chip b { font: 600 11px/1 var(--mono); color: var(--text-num); }
.topbar-user { font: 500 11px/1 var(--mono); color: var(--text-muted); }
.btn.nav-toggle { display: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 46px; padding: 0 22px; border: 1px solid transparent; font: 600 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; white-space: nowrap; background: none; }
.btn svg { flex: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-secondary { background: var(--panel-hover); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--accent); color: var(--text-strong); }
.btn-ghost { background: rgba(13,17,24,.9); border-color: var(--border); color: var(--text-num); }
.btn-ghost:hover { border-color: var(--accent); color: var(--text-num); }
.btn-danger { background: var(--red-btn); border-color: var(--red-btn-border); color: var(--red-btn-text); }
.btn-danger:hover { background: var(--red-btn-hover); color: var(--red-btn-text); }
.btn-quiet { height: 38px; background: transparent; border-color: var(--line); color: var(--text-muted); font-size: 11px; letter-spacing: .14em; }
.btn-quiet:hover { border-color: var(--border); color: var(--text-strong); }
.btn:disabled, .btn.is-disabled { background: var(--disabled-bg); border-color: transparent; color: var(--text-dim); cursor: not-allowed; }
.btn-xl { height: 54px; padding: 0 30px; font-size: 14px; gap: 13px; }
.btn-lg { height: 52px; font-size: 13px; letter-spacing: .18em; }
.btn-sm { height: 34px; padding: 0 18px; font-size: 11px; letter-spacing: .12em; }
.btn-xs { height: 30px; padding: 0 14px; font-size: 10px; letter-spacing: .12em; }
.btn-block { width: 100%; }
.btn-signout:hover { border-color: var(--red); color: var(--red-soft); }

/* ---------- type ---------- */
.h1 { font: 700 34px/1.05 var(--display); color: var(--text-strong); margin: 0; letter-spacing: -.01em; }
.h2 { font: 700 24px/1 var(--display); color: var(--text-strong); margin: 0; }
.h3 { font: 600 17px/1.25 var(--display); color: var(--text-strong); margin: 0; }
.label { font: 600 10px/1 var(--display); letter-spacing: .16em; color: var(--text-label); text-transform: uppercase; }
.lede { font: 400 12.5px/1.5 var(--display); color: var(--text-muted); margin: 0; text-wrap: pretty; }
.note { font: 500 10.5px/1.5 var(--mono); color: var(--text-dim); }
.kicker { display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--accent); }
.kicker span { font: 600 10px/1 var(--display); letter-spacing: .34em; color: var(--accent); }

.section-head { display: flex; align-items: center; gap: 12px; }
.section-head .rule { flex: 1; height: 1px; background: var(--line); }
.section-head .aside { font: 500 10px/1 var(--mono); color: var(--text-dim); }
.section-head a.aside:hover { color: var(--accent); }

/* ---------- surfaces ---------- */
.card { background: var(--panel); border: 1px solid var(--border); }
.card-bar { height: 3px; background: var(--border); }
.card-bar.on { background: var(--accent); }
.card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 20px; }
.mark-accent { border-left: 3px solid var(--accent); }
.mark-amber { border-left: 3px solid var(--amber); }
.mark-blue { border-left: 3px solid var(--blue); }
.mark-violet { border-left: 3px solid var(--violet); }
.mark-green { border-left: 3px solid var(--green); }
.mark-quiet { border-left: 3px solid var(--border); }
.tone-accent { --tone: var(--accent); }
.tone-amber { --tone: var(--amber); }
.tone-blue { --tone: var(--blue); }
.tone-violet { --tone: var(--violet); }

.cols { display: flex; gap: 26px; align-items: flex-start; }
.cols > .grow { flex: 1; min-width: 0; }
.side-400 { width: 400px; flex: none; }
.side-420 { width: 420px; flex: none; }
.side-340 { width: 340px; flex: none; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-9 { display: flex; flex-direction: column; gap: 9px; }
.stack-20 { display: flex; flex-direction: column; gap: 20px; }
.stack-22 { display: flex; flex-direction: column; gap: 22px; }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.field-row { display: flex; gap: 12px; }
.field-label { display: flex; align-items: center; }
.field-label .label { flex: 1; }
.field { display: flex; align-items: center; gap: 11px; height: 46px; padding: 0 14px; background: var(--input); border: 1px solid var(--border); border-left: 3px solid var(--border-quiet); }
.field:focus-within { border-color: var(--accent); }
.field:focus-within svg { stroke: var(--accent); }
.field svg { stroke: var(--icon); flex: none; }
.field input, .field select { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; padding: 0; font: 500 14px/1 var(--mono); color: var(--text-strong); }
.field input[type=password] { letter-spacing: .16em; }
.field select { font-size: 13px; }
.field select option { background: var(--panel); }
.field.lg { height: 48px; }
.field.lg input { font-size: 15px; }
.field.is-error { border-color: var(--red); }
.field.is-error svg.err { stroke: var(--red); }
.field.is-ok { border-color: var(--green); }
.field.is-disabled { background: #10141a; border-color: var(--line); }
.field-help { font: 500 10.5px/1.5 var(--mono); color: var(--text-dim); }
.field-error { font: 500 12.5px/1.35 var(--display); color: var(--red-soft); background: var(--red-bg); border-left: 3px solid var(--red); padding: 11px 13px; }
.textarea { width: 100%; min-height: 96px; resize: vertical; padding: 12px 14px; background: var(--input); border: 1px solid var(--border); border-left: 3px solid var(--border-quiet); font: 400 13px/1.55 var(--display); color: var(--text-strong); }
.textarea:focus { border-color: var(--accent); }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 400 12px/1.45 var(--display); color: var(--text); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { width: 16px; height: 16px; flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: var(--well); border: 1px solid var(--border-quiet); }
.check input:checked + .box { border-color: var(--accent); }
.check input:checked + .box::after { content: ""; width: 8px; height: 8px; background: var(--accent); }
.check input:focus-visible + .box { outline: 1px solid var(--accent); outline-offset: 2px; }

.choice-row { display: flex; gap: 10px; }
.choice { flex: 1; position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--input); border: 1px solid var(--border); border-left: 3px solid var(--border-quiet); cursor: pointer; font: 600 12px/1 var(--display); letter-spacing: .14em; color: var(--text); }
.choice span::before { content: ""; width: 7px; height: 7px; background: var(--border-quiet); }
.choice:hover span { border-color: var(--accent); }
.choice input:checked + span { background: var(--panel-hover); border-color: var(--accent); border-left-color: var(--accent); color: var(--text-strong); }
.choice input:checked + span::before { background: var(--accent); }
.choice input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---------- alerts ---------- */
.alerts { display: flex; flex-direction: column; gap: 9px; }
.alert { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-left: 3px solid; font: 500 13px/1.4 var(--display); }
.alert svg { flex: none; }
.alert-error { background: var(--red-bg); border-color: var(--red); color: var(--red-soft); }
.alert-error svg { stroke: var(--red); }
.alert-success { background: var(--green-bg); border-color: var(--green); color: var(--green-soft); }
.alert-success svg { stroke: var(--green); }
.alert-warning { background: var(--amber-well); border-color: var(--amber); color: var(--amber-soft); }
.alert-warning svg { stroke: var(--amber); }
.alert-info { background: var(--panel-hover); border-color: var(--accent); color: var(--accent-soft); }
.alert-info svg { stroke: var(--accent); }
.alert.sm { padding: 11px 12px; font: 400 11px/1.45 var(--display); }

/* ---------- chips ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font: 600 9px/1 var(--mono); white-space: nowrap; }
.tag i { width: 5px; height: 5px; }
.tag-amber { background: var(--amber-bg); color: var(--amber); }
.tag-free { background: #141c28; color: var(--text-muted); }
.tag-staff { background: var(--blue-bg); color: var(--blue); }
.tag-quiet { background: var(--head); color: var(--text-label); font-weight: 500; }
.tag-online { background: var(--green-bg); color: var(--green-soft); font-weight: 500; }
.tag-online i { background: var(--green); }
.tag-offline { background: var(--head); color: var(--text-muted); font-weight: 500; }
.tag-offline i { background: var(--text-dim); }
.tag-red { background: var(--red-bg); color: var(--red-soft); font-weight: 500; }
.tag-red i { background: var(--red); }

/* ---------- hero (S1) ---------- */
.hero { position: relative; height: 520px; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hero::before { background: linear-gradient(90deg, rgba(10,12,16,.96) 0%, rgba(10,12,16,.84) 34%, rgba(10,12,16,.22) 62%, rgba(10,12,16,.5) 100%); }
.hero::after { background: linear-gradient(180deg, rgba(10,12,16,.55) 0%, rgba(10,12,16,0) 30%, rgba(10,12,16,.9) 100%); }
.hero .wrap { position: relative; z-index: 2; height: 100%; }
.hero-copy { position: absolute; left: 60px; top: 76px; width: 680px; max-width: calc(100% - 64px); display: flex; flex-direction: column; gap: 22px; }
.hero-title { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.hero-title span { font: 700 74px/.92 var(--display); letter-spacing: -.02em; color: var(--text-strong); }
.hero-title .accent-line { display: flex; align-items: baseline; gap: 18px; }
.hero-title .accent-line span { color: var(--accent); }
.hero-title small { font: 500 13px/1 var(--mono); color: var(--text-label); letter-spacing: 0; }
.hero-text { font: 400 16px/1.6 var(--display); color: var(--text); max-width: 520px; margin: 0; text-wrap: pretty; }
.hero-actions { display: flex; align-items: center; gap: 11px; margin-top: 6px; flex-wrap: wrap; }
.build-note { font: 500 11px/1.5 var(--mono); color: var(--text-dim); }

/* ---------- stat strip ---------- */
.stats { display: flex; align-items: stretch; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats .wrap { display: flex; padding: 0; }
.stat { flex: 1; padding: 18px 26px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line); min-width: 0; }
.stat:last-child { border-right: 0; flex: 1.2; }
.stat.state { border-left: 3px solid var(--green); }
.stat.state.off { border-left-color: var(--red); }
.stat .value { display: flex; align-items: baseline; gap: 9px; font: 600 22px/1 var(--mono); color: var(--text-num); }
.stat .value small { font: 500 10px/1 var(--mono); color: var(--text-dim); }
.stat .state-value { display: flex; align-items: center; gap: 9px; font: 600 18px/1 var(--display); color: var(--green); }
.stat .state-value::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.stat.off .state-value { color: var(--red); }

/* ---------- news ---------- */
.news-card { display: flex; gap: 18px; padding: 17px 18px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--tone); color: inherit; }
a.news-card:hover { background: var(--panel-hover); color: inherit; }
.news-meta { width: 100px; flex: none; display: flex; flex-direction: column; gap: 7px; }
.news-meta b { font: 600 9px/1 var(--display); letter-spacing: .14em; color: var(--tone); text-transform: uppercase; }
.news-meta time { font: 500 10px/1 var(--mono); color: var(--text-dim); }
.news-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.news-main h3 { font: 600 17px/1.25 var(--display); color: var(--text-strong); margin: 0; text-wrap: pretty; }
.news-main p { font: 400 13px/1.55 var(--display); color: var(--text); margin: 0; text-wrap: pretty; }
.news-counts { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.count { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); color: var(--text-muted); background: none; border: 0; padding: 0; }
button.count { cursor: pointer; }
button.count:hover { color: var(--text-strong); }
.count svg { stroke: var(--text-label); }
.count.love svg { stroke: var(--red); }
.count.love.on svg { fill: var(--red); }

.article { padding: 30px 32px 34px; display: flex; flex-direction: column; gap: 18px; }
.article-body p { font: 400 15px/1.7 var(--display); color: var(--text); margin: 0 0 14px; max-width: 720px; text-wrap: pretty; }
.comment { padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.comment header { display: flex; align-items: center; gap: 10px; }
.comment header b { font: 600 13px/1 var(--display); color: var(--text-strong); }
.comment header time { font: 500 10px/1 var(--mono); color: var(--text-dim); }
.comment p { margin: 0; font: 400 13px/1.55 var(--display); color: var(--text); white-space: pre-line; }

/* ---------- ranking box (home top 5) ---------- */
.tabs { display: flex; background: var(--head); }
.tab { position: relative; flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; font: 600 10px/1 var(--display); letter-spacing: .14em; color: var(--text-muted); background: var(--head); border: 0; cursor: pointer; }
.tab:hover { background: var(--head-hover); color: var(--text-muted); }
.tab.on { background: var(--panel); color: var(--text-strong); }
.tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.rank-list { display: flex; flex-direction: column; padding: 6px 0; }
.rank-row { display: flex; align-items: center; gap: 13px; padding: 10px 15px; border-left: 3px solid transparent; }
.rank-row .pos { width: 22px; flex: none; font: 600 13px/1 var(--mono); color: var(--text-dim); }
.rank-row:first-child .pos { color: var(--amber); }
.rank-row .name { flex: 1; min-width: 0; font: 600 14px/1 var(--display); color: var(--text-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .unit { font: 500 10px/1 var(--mono); color: var(--text-dim); }
.rank-row .val { width: 34px; flex: none; text-align: right; font: 600 14px/1 var(--mono); color: var(--text-num); }
.rank-row.mine { background: var(--accent-row); border-left-color: var(--accent); }
.rank-row.mine .name { color: var(--text-strong); }
.rank-row.mine .val { color: var(--accent); }
[data-tabpanel][hidden] { display: none; }

/* ---------- poll ---------- */
.poll { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.poll-q { font: 600 15px/1.35 var(--display); color: var(--text-strong); margin: 0; text-wrap: pretty; }
.poll-opts { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.poll-opt { position: relative; width: 100%; height: 38px; padding: 0; background: var(--input); border: 1px solid var(--border); cursor: pointer; overflow: hidden; text-align: left; }
.poll-opt:hover { border-color: var(--accent); }
.poll-opt .fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(36,48,68,.55); }
.poll-opt .row { position: relative; height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.poll-opt .dot { width: 12px; height: 12px; flex: none; border: 1px solid var(--border-quiet); display: flex; align-items: center; justify-content: center; }
.poll-opt .txt { flex: 1; min-width: 0; font: 500 12.5px/1 var(--display); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poll-opt .pct { font: 600 11px/1 var(--mono); color: var(--text-muted); }
.poll-opt.on { border-color: var(--accent); }
.poll-opt.on .fill { background: rgba(53,224,196,.16); }
.poll-opt.on .dot { border-color: var(--accent); }
.poll-opt.on .dot::after { content: ""; width: 6px; height: 6px; background: var(--accent); }
.poll-opt.on .txt { color: var(--text-strong); }
.poll-opt.on .pct { color: var(--accent); }

/* ---------- footer ---------- */
.footer { background: var(--panel); border-top: 1px solid var(--line); margin-top: auto; }
.footer .wrap { display: flex; align-items: center; gap: 28px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 9px; font: 600 11px/1 var(--display); letter-spacing: .18em; color: var(--text-label); }
.footer-brand::before { content: ""; width: 16px; height: 16px; border: 2px solid #3a4658; border-radius: 50%; }
.footer-links { display: flex; align-items: center; gap: 20px; }
.footer-links a { font: 400 12px/1 var(--display); color: var(--text-muted); }
.footer-links a:hover { color: var(--text-strong); }
.footer-legal { margin-left: auto; font: 500 10.5px/1 var(--mono); color: var(--text-faint); }

/* ---------- account (S3) ---------- */
.tiles { display: flex; gap: 14px; }
.tile { flex: 1; min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.tile.wide { flex: 1.4; }
.tile-head { display: flex; align-items: center; gap: 10px; }
.big-num { display: flex; align-items: baseline; gap: 9px; font: 600 30px/1 var(--mono); }
.big-num small { font: 500 12px/1 var(--mono); }
.meter { height: 5px; background: var(--head); }
.meter i { display: block; height: 5px; background: var(--amber); }
.kv { display: flex; flex-direction: column; gap: 7px; }
.kv div { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1.3 var(--mono); color: var(--text); min-width: 0; }
.kv dt, .kv .k { color: var(--text-dim); flex: none; }
.kv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv .dot { width: 6px; height: 6px; flex: none; background: var(--green); }
.kv .dot.red { background: var(--red); }

.char { display: flex; align-items: center; gap: 16px; padding: 15px 17px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border); }
.char:hover { background: var(--panel-hover); }
.char.online { border-left-color: var(--accent); }
.avatar { width: 46px; height: 46px; flex: none; background: var(--well); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--mono); color: var(--text-ghost); text-transform: uppercase; }
.char-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.char-name { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.char-name b { font: 600 18px/1 var(--display); color: var(--text-strong); }
.char-facts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 500 10.5px/1 var(--mono); color: var(--text-dim); }
.char-lvl { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.char-lvl span { font: 500 9px/1 var(--display); letter-spacing: .14em; color: var(--text-label); }
.char-lvl b { font: 600 20px/1 var(--mono); color: var(--text-num); }
.char.online .char-lvl b { color: var(--accent); }
.vsep { width: 1px; height: 38px; background: var(--line); flex: none; }
.slot-free { display: flex; align-items: center; justify-content: center; gap: 10px; height: 62px; background: var(--input); border: 1px dashed var(--border); font: 600 11px/1 var(--display); letter-spacing: .14em; color: var(--text-label); }
.slot-free:hover { border-color: var(--accent); color: var(--text-label); }
.slot-free svg { stroke: var(--text-dim); }

.shortcut { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--tone); color: inherit; }
.shortcut:hover { background: var(--panel-hover); border-color: var(--accent); border-left-color: var(--tone); color: inherit; }
.shortcut-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.shortcut-text b { font: 600 13.5px/1 var(--display); color: var(--text-strong); }
.shortcut-text span { font: 400 11px/1.4 var(--display); color: var(--text-muted); }
.shortcut svg { stroke: var(--icon); flex: none; }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mini-input { height: 34px; padding: 0 10px; background: var(--input); border: 1px solid var(--border); font: 500 12px/1 var(--mono); color: var(--text-strong); min-width: 0; }
.mini-input:focus { border-color: var(--accent); }
.mini-input.num { width: 84px; }

/* ---------- create character (S4) ---------- */
.fixed-row { display: flex; align-items: center; gap: 12px; padding: 14px 15px; background: var(--input); border: 1px solid var(--border); border-left: 3px solid var(--border-quiet); }
.fixed-row b { display: block; font: 600 13.5px/1 var(--display); color: var(--text-strong); margin-bottom: 6px; }
.fixed-row span { font: 400 11px/1.4 var(--display); color: var(--text-muted); }
.preview { height: 300px; background: var(--input); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.preview .frame { width: 72px; height: 72px; border: 1px dashed var(--border-quiet); display: flex; align-items: center; justify-content: center; font: 500 10px/1 var(--mono); color: var(--text-ghost); }
.preview p { margin: 0; font: 500 11px/1.5 var(--mono); color: var(--text-dim); text-align: center; }
.steps-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.steps-list li { display: flex; gap: 11px; font: 400 12px/1.45 var(--display); color: var(--text); }
.steps-list li b { font: 600 11px/1.3 var(--mono); color: var(--blue); }
.steps-list code { font-family: var(--mono); color: var(--text-num); }

/* ---------- download (S7) ---------- */
.dl-hero { padding-top: 40px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.dl-title { font: 700 46px/1.05 var(--display); letter-spacing: -.015em; color: var(--text-strong); max-width: 520px; margin: 0; text-wrap: pretty; }
.dl-text { font: 400 15px/1.6 var(--display); color: var(--text); max-width: 500px; margin: 0; text-wrap: pretty; }
.req { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.req div { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.req div:last-child { border-bottom: 0; padding-bottom: 0; }
.req dt { width: 96px; flex: none; font: 500 10.5px/1 var(--mono); color: var(--text-dim); }
.req dd { margin: 0; font: 500 12px/1 var(--mono); color: var(--text-num); }
.steps { display: flex; gap: 14px; }
.step { flex: 1; min-width: 0; padding: 20px 20px 22px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--tone); display: flex; flex-direction: column; gap: 12px; }
.step .n { font: 600 24px/1 var(--mono); color: var(--tone); }
.step h3 { font: 600 15px/1.25 var(--display); color: var(--text-strong); margin: 0; }
.step p { font: 400 12.5px/1.55 var(--display); color: var(--text); margin: 0; }
.dashed { padding: 18px 20px; background: var(--panel); border: 1px dashed var(--border); display: flex; flex-direction: column; gap: 12px; }
.skel { display: flex; flex-direction: column; gap: 8px; }
.skel div { display: flex; align-items: center; gap: 11px; }
.skel div::before { content: ""; width: 5px; height: 5px; background: var(--border-quiet); flex: none; }
.skel i { flex: 1; height: 9px; background: var(--line-row); }

/* ---------- table (rankings) ---------- */
.table { background: var(--panel); border: 1px solid var(--border); }
.tr { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-row); border-left: 2px solid transparent; }
.tr:nth-child(odd):not(.th) { background: var(--panel-hover); }
.tr:last-child { border-bottom: 0; }
.th { padding: 9px 14px; background: var(--head); }
.th > div { font: 600 9px/1 var(--display); letter-spacing: .16em; color: var(--text-dim); text-transform: uppercase; }
.td-pos { width: 40px; flex: none; font: 500 11.5px/1 var(--mono); color: var(--text-label); }
.td-name { flex: 1; min-width: 0; font: 600 13px/1 var(--display); color: var(--text-num); display: flex; align-items: center; gap: 9px; }
.td-city { width: 150px; flex: none; font: 500 10.5px/1 var(--mono); color: var(--text-muted); }
.td-num { width: 70px; flex: none; text-align: right; font: 600 12.5px/1 var(--mono); color: var(--text-num); }
.tr.mine { background: var(--accent-row) !important; border-left-color: var(--accent); }
.tr.mine .td-name { color: var(--text-strong); }
.tr:nth-child(2) .td-pos { color: var(--amber); }
.pill-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-tabs a { height: 34px; padding: 0 16px; display: flex; align-items: center; background: var(--panel-hover); border: 1px solid var(--border); font: 600 11px/1 var(--display); letter-spacing: .14em; color: var(--text); }
.pill-tabs a:hover { border-color: var(--accent); color: var(--text-strong); }
.pill-tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- pager ---------- */
.pager { display: flex; align-items: center; gap: 6px; }
.pager a, .pager span { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--panel-hover); border: 1px solid var(--border); font: 500 11px/1 var(--mono); color: var(--text); }
.pager a:hover { border-color: var(--accent); color: var(--text-strong); }
.pager .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.pager .off { color: var(--text-dim); }

/* ---------- empty / skeleton ---------- */
.empty { padding: 22px 18px; background: var(--panel); border: 1px dashed var(--border); display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.empty .icon { width: 34px; height: 34px; background: #131a25; display: flex; align-items: center; justify-content: center; }
.empty .icon svg { stroke: var(--text-ghost); }
.empty b { font: 600 12.5px/1 var(--display); color: var(--text-muted); }
.empty span { font: 400 11px/1.45 var(--display); color: var(--text-dim); max-width: 320px; text-wrap: pretty; }

/* ---------- prose (rules) ---------- */
.prose { max-width: 760px; }
.prose h2 { font: 600 17px/1.25 var(--display); color: var(--text-strong); margin: 26px 0 10px; }
.prose p, .prose li { font: 400 14px/1.7 var(--display); color: var(--text); }
.prose ol { padding-left: 20px; }

/* ---------- docs viewer (wiki app) ---------- */
.doc-card { max-width: 760px; background: var(--panel); border: 1px solid var(--border); }
.doc-row { display: block; padding: 11px 16px; border-bottom: 1px solid var(--line-row); font: 600 13px/1.3 var(--display); color: var(--text-num); }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--panel-hover); color: var(--text-strong); }
.doc-row[data-depth="1"] { padding-left: 34px; font-weight: 500; color: var(--text-muted); }
.doc-row[data-depth="2"] { padding-left: 50px; font-weight: 500; color: var(--text-muted); }
.doc-row[data-depth="1"]::before, .doc-row[data-depth="2"]::before { content: "›"; margin-right: 8px; color: var(--text-dim); }
.markdown-body { background: var(--panel); border: 1px solid var(--border); padding: 34px 38px; font: 400 14.5px/1.75 var(--display); color: var(--text); overflow-wrap: anywhere; }
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body h1 { font: 700 28px/1.2 var(--display); color: var(--text-strong); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.markdown-body h2 { font: 700 20px/1.3 var(--display); color: var(--text-strong); margin: 34px 0 12px; }
.markdown-body h3 { font: 600 16px/1.3 var(--display); color: var(--text-num); margin: 24px 0 8px; }
.markdown-body a { border-bottom: 1px solid rgba(53,224,196,.3); }
.markdown-body code { font: 500 .88em var(--mono); background: var(--well); color: var(--text-num); padding: 1px 5px; }
.markdown-body pre { background: var(--input); border: 1px solid var(--line); padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body .table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--border); }
.markdown-body table { border-collapse: collapse; width: 100%; font-size: 13px; }
.markdown-body th { background: var(--head); text-align: left; padding: 8px 12px; font: 600 10px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.markdown-body td { padding: 8px 12px; border-top: 1px solid var(--line-row); vertical-align: top; }
.markdown-body blockquote { margin: 16px 0; padding: 10px 14px; border-left: 3px solid var(--amber); background: var(--amber-well); color: var(--amber-soft); }
.markdown-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.markdown-body ul, .markdown-body ol { padding-left: 22px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav a { padding: 0 10px; }
  .topbar .wrap { gap: 16px; }
  .side-400, .side-420 { width: 360px; }
  .hero-copy { left: 32px; }
}

@media (max-width: 980px) {
  .wrap { padding: 0 20px; }
  .cols { flex-direction: column; align-items: stretch; }
  .side-400, .side-420, .side-340 { width: auto; }
  .tiles, .steps { flex-wrap: wrap; }
  .tile, .step { flex: 1 1 calc(50% - 7px); }
  .tile.wide { flex: 1 1 100%; }
  .stats .wrap { flex-wrap: wrap; }
  .stat { flex: 1 1 33%; border-bottom: 1px solid var(--line); }
  .stat:last-child { flex: 1 1 33%; }
  .topbar-sep { display: none; }
  .btn.nav-toggle { display: inline-flex; margin-left: auto; }
  .topbar .wrap { flex-wrap: wrap; height: auto; min-height: 64px; }
  .nav { order: 5; width: 100%; display: none; flex-direction: column; align-items: stretch; padding-bottom: 8px; }
  .nav a { height: 42px; }
  .nav a.on::after { top: 8px; bottom: 8px; left: 0; right: auto; width: 2px; height: auto; }
  .topbar.open .nav { display: flex; }
  .topbar-end { margin-left: 0; }
  .hero { height: auto; }
  .hero-copy { position: relative; left: 0; top: 0; width: auto; max-width: none; padding: 56px 0 48px; }
  .hero-title span { font-size: 54px; }
  .footer-legal { margin-left: 0; width: 100%; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .topbar-end .online-chip, .topbar-user { display: none; }
  .hero-title span { font-size: 42px; }
  .hero-title .accent-line { flex-wrap: wrap; }
  .field-row { flex-direction: column; }
  .tile, .step { flex: 1 1 100%; }
  .stat { flex: 1 1 50%; }
  .stat:last-child { flex: 1 1 50%; }
  .char { flex-wrap: wrap; }
  .char .vsep { display: none; }
  .news-card { flex-direction: column; gap: 10px; }
  .news-meta { width: auto; flex-direction: row; align-items: center; gap: 12px; }
  .td-city { display: none; }
  .dl-title { font-size: 34px; }
  .card-body { padding: 22px 18px 24px; }
}