:root {
  --bg: #f5f4f0; --card: #ffffff; --soft: #f1f0eb; --ink: #1c1e24; --text: #2a2d35; --muted: #626774; --dim: #8b909b;
  --line: #e5e3dd; --line2: #d9d6ce;
  --accent: #2f56d0; --accent-ink: #2346b3; --accent-bg: #eaf0ff;
  --gold: #b8892b; --gold-bg: #fbf3e2; --ely: #a8761a; --ely-bg: #fdf6e6; --asm: #6a3bb5; --asm-bg: #f3edfc;
  --good: #1d8a5b; --good-bg: #e5f5ed; --warn: #9a6400; --warn-bg: #fdf1dc; --bad: #c03a33; --bad-bg: #fdecea;
  --blue: #2f56d0; --blue-bg: #eaf0ff; --slot: #262932;
  --shadow: 0 1px 2px rgba(20, 20, 30, .04), 0 4px 16px rgba(20, 20, 30, .05);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 860px; margin: 0 auto; padding: 0 16px 56px; }
a { color: var(--accent); }
h1, h2, h3, .brand span, .faction b, .banner .name, .price b, .tile b, .num, .timeline b { font-family: "Plus Jakarta Sans", Inter, sans-serif; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 860px; margin: 0 auto; padding: 18px 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-wing { width: 34px; height: 22px; fill: var(--accent); }
.brand span { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.brand b { color: var(--accent); font-weight: 700; }
.account { display: flex; gap: 8px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.who-mini { color: var(--muted); }
.pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--gold-bg); color: var(--gold); border: 1px solid #ecd9ae; letter-spacing: .04em; }
.devbar { max-width: 828px; margin: 0 auto 6px; padding: 6px 12px; border-radius: 10px; font-size: 13px; text-align: center; background: var(--warn-bg); color: var(--warn); }

/* Buttons */
button { font: inherit; font-size: 14px; cursor: pointer; color: var(--text); background: var(--card); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 14px; transition: background .15s, border-color .15s; }
button:hover { border-color: #c6c2b8; background: #fafaf8; }
button.gold { background: var(--accent); color: #fff; border: 1px solid var(--accent); font-weight: 600; }
button.gold:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
:focus-visible { outline: 3px solid rgba(47, 86, 208, .35); outline-offset: 2px; }

/* Hero */
.hero { text-align: center; padding: 40px 0 28px; }
#hero { padding: 20px 0 16px; } #hero h1 { margin: 0; }
.eyebrow.below { margin: 4px 0 10px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 8px; }
.hero h1 { font-size: clamp(30px, 5.5vw, 46px); line-height: 1.15; margin: 0 0 12px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.hero h1 span { color: var(--accent); }
.lead { color: var(--muted); max-width: 500px; margin: 0 auto 24px; font-size: 17px; }
.classes { display: flex; gap: 6px; flex-wrap: wrap; }
.classes img { width: 34px; height: 34px; padding: 4px; border-radius: 50%; background: var(--slot); object-fit: contain; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.picker-head h2 { margin: 0; }

/* Ask */
.askbar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line2);
  border-radius: 14px; padding: 5px 5px 5px 14px; }
.askbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47,86,208,.12); }
.askbar input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 17px; color: var(--ink); background: transparent; height: 44px; }
.askbar .gold { height: 44px; padding: 0 22px; border-radius: 12px; font-size: 15px; }
.personal { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.personal input { width: 16px; height: 16px; accent-color: var(--accent); }
.personal b { color: var(--ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.chips button { border-radius: 999px; padding: 6px 13px; font-size: 13.5px; color: var(--text); }
.chips button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.answer .q { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.answer .q h2 { margin: 0; font-size: 19px; }
.answer .src { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.src.instant, .src.cached, .src.notes { background: var(--good-bg); color: var(--good); }
.src.ai { background: var(--accent-bg); color: var(--accent); }
.src.offline, .src.limit, .src.off_topic { background: var(--warn-bg); color: var(--warn); }
.src.example { background: var(--soft); color: var(--muted); }
.answer .a { font-size: 17px; color: var(--ink); margin: 0 0 10px; }
.answer ol { margin: 0 0 12px; padding-left: 22px; } .answer li { margin: 4px 0; color: var(--text); }
.answer .more { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.answer .more span { font-size: 13px; color: var(--muted); }
.answer .more button { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.answer .left { margin: 10px 0 0; font-size: 12.5px; color: var(--dim); }
/* One Ask card: the question bar always shows; examples open on demand. */
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ask-head h2 { margin: 0; }
.ask-toggle { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.ask-toggle i { transition: transform .2s; }
.ask-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.ask .answer { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.ask-more { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.ask-more-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.ask-more .chips { margin-top: 8px; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow); position: relative; }
h2 { font-size: 18px; margin: 0 0 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--ink); letter-spacing: -.01em; }
h2 i { color: var(--accent); font-size: 20px; }
.muted { color: var(--muted); margin: 0; } .small { font-size: 14px; text-align: center; }

/* Picker */
.picker .step { margin-bottom: 20px; }
.step-label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.step-label span { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.regions { display: flex; gap: 8px; flex-wrap: wrap; }
.regions button { border-radius: 999px; padding: 7px 14px; }
.regions button i { display: none; }
.regions button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.factions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faction { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px 12px; border-radius: 14px; border-width: 2px; }
.faction svg { width: 84px; height: 56px; }
.faction b { font-size: 17px; font-weight: 700; color: var(--ink); }
.faction small { color: var(--muted); font-size: 13px; }
.faction.elyos[aria-checked="true"] { border-color: var(--ely); background: var(--ely-bg); }
.faction.asmo[aria-checked="true"] { border-color: var(--asm); background: var(--asm-bg); }
.faction.elyos[aria-checked="true"] b { color: var(--ely); } .faction.asmo[aria-checked="true"] b { color: var(--asm); }
.faction[aria-checked="false"] svg { filter: grayscale(1); opacity: .45; }
.servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.servers button { display: flex; flex-direction: column; align-items: flex-start; padding: 9px 12px; text-align: left; border-width: 1.5px; }
.servers b { font-weight: 600; font-size: 15px; color: var(--ink); }
.servers small { font-size: 12px; color: var(--dim); }
.servers.elyos button[aria-checked="true"] { border-color: var(--ely); background: var(--ely-bg); }
.servers.asmo button[aria-checked="true"] { border-color: var(--asm); background: var(--asm-bg); }
.namebar { display: flex; gap: 8px; }
.namefield, .dlg input { flex: 1; min-width: 0; height: 50px; border-radius: 12px; border: 1.5px solid var(--line2); background: #fff; color: var(--ink); padding: 0 14px; font: inherit; font-size: 17px; }
.namefield:focus, .dlg input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47,86,208,.12); }
.namebar .gold { height: 50px; padding: 0 22px; white-space: nowrap; font-size: 15px; }
@media (max-width: 560px) {
  .askbar { padding-left: 12px; } .askbar .gold { padding: 0 16px; }
  .namebar { flex-direction: column; } .namebar input { flex: none; width: 100%; } .namebar .gold { width: 100%; }
  .tile { padding: 8px 10px; } .tile b { font-size: 19px; } .banner .name { font-size: 24px; }
}
.error { color: var(--bad); margin: 10px 0 0; font-size: 15px; }
.note { color: var(--good); background: var(--good-bg); border-radius: 10px; padding: 10px 12px; margin: 10px 0 0; font-size: 14px; }
.legal-note { font-size: 12.5px; margin-top: 6px; }
.saved { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.saved button { font-size: 13px; padding: 4px 12px; border-radius: 999px; }
.namefield { width: 100%; }
.go-bottom { width: 100%; height: 50px; font-size: 15px; border-radius: 12px; }

/* Loading */
.loading { text-align: center; color: var(--muted); padding: 40px 0; }
.rune { width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Character banner */
.banner { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.banner .bg-emblem { display: none; }
.banner .portrait { position: relative; width: 84px; height: 84px; flex: none; }
.banner .portrait img.face { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--slot); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line2); }
.banner .portrait img.emblem { position: absolute; right: -6px; bottom: -4px; width: 36px; height: 36px; padding: 4px; border-radius: 50%; background: var(--slot); border: 2px solid #fff; }
.banner .name { font-size: 28px; font-weight: 800; margin: 0; line-height: 1.15; color: var(--ink); letter-spacing: -.02em; }
.banner .sub { color: var(--muted); margin: 4px 0 0; font-size: 15px; }
.banner .fac-elyos { color: var(--ely); font-weight: 600; } .banner .fac-asmo { color: var(--asm); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 18px; width: 100%; }
.tile { background: var(--soft); border-radius: 12px; padding: 10px 14px; }
.tile span { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.tile b { font-size: 24px; font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; }

/* Fixes */
.fix { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.fix:first-of-type { border-top: 0; padding-top: 4px; }
.num { min-width: 30px; height: 30px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.fix .t { font-weight: 600; margin: 0; color: var(--ink); } .fix .t i { color: var(--accent); }
.fix .d { color: var(--muted); margin: 2px 0 0; font-size: 15px; }
.fix .body { flex: 1; }
.tag { font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; white-space: nowrap; background: var(--soft); color: var(--muted); }
.tag.free { background: var(--good-bg); color: var(--good); }
.tag.big { background: var(--accent-bg); color: var(--accent); }
.trap { display: flex; gap: 10px; align-items: center; background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 15px; }

/* Bars */
.bars { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 28px; }
@media (max-width: 640px) { .bars { grid-template-columns: 1fr; } }
.bar .lbl { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
.bar .lbl span { color: var(--ink); font-weight: 700; } .bar .lbl b { color: var(--text); font-weight: 400; }
.track { height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; }
.fill { height: 100%; background: var(--accent); border-radius: 4px; }
.fill.full { background: var(--good); }
.gate .track { height: 10px; margin: 10px 0; }
.gate p { margin: 0; font-size: 15px; color: var(--muted); }
.gate p b { color: var(--ink) !important; }

/* Gear */
.gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.item { background: var(--soft); border-radius: 12px; padding: 10px; display: flex; gap: 10px; align-items: center; }
.item img { width: 46px; height: 46px; border-radius: 9px; flex: none; background: var(--slot); border-bottom: 3px solid var(--g, #888); }
.item .n { font-size: 14px; font-weight: 600; margin: 0; line-height: 1.3; color: var(--ink) !important; }
.item .m { font-size: 13px; color: var(--muted); margin: 0; }
.item.empty { justify-content: center; font-size: 14px; color: var(--dim); min-height: 68px; background: transparent; border: 1.5px dashed var(--line2); }
.life { font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; display: inline-block; margin-top: 4px; }
.life.forever { background: var(--good-bg); color: var(--good); }
.life.carries { background: var(--blue-bg); color: var(--blue); }
.life.transferable { background: var(--warn-bg); color: var(--warn); }
.life.temporary { background: #fff; color: var(--muted); border: 1px solid var(--line2); }
.legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Timeline */
.timeline { display: flex; gap: 12px; }
.timeline div { flex: 1; border-top: 3px solid var(--line); padding-top: 10px; font-size: 15px; }
.timeline div:first-child { border-color: var(--accent); }
.timeline b { display: block; color: var(--ink); font-weight: 700; }
.timeline span { color: var(--muted); font-size: 14px; }

/* Pro */
.pro { border: 1.5px solid #ecd9ae; background: linear-gradient(180deg, #fffaf0 0%, #fff 140px); overflow: hidden; }
.pro h2 i { color: var(--gold); }
.pro .badge { font-family: Inter, sans-serif; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--gold-bg); color: var(--gold); border: 1px solid #ecd9ae; letter-spacing: .05em; }
.step-row { display: flex; gap: 12px; padding: 9px 0; font-size: 15px; align-items: flex-start; border-top: 1px solid var(--line); }
.step-row:first-of-type { border-top: 0; }
.step-row .when { min-width: 62px; color: var(--gold); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.step-row .what { flex: 1; color: var(--text); }
.locked .steps { filter: blur(5px); user-select: none; pointer-events: none; }
.unlock { position: absolute; inset: 56px 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; background: rgba(255,255,255,.4); }
.unlock p { margin: 0; font-weight: 700; font-size: 17px; color: var(--ink); } .unlock small { color: var(--muted); font-size: 14px; }
.pro:not(.locked) .unlock { display: none; }
.pro-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
@media (max-width: 640px) { .pro-grid { grid-template-columns: 1fr; } }
.pro h3 { font-size: 14px; margin: 0 0 8px; color: var(--ink); font-weight: 700; }
.headline { margin: 0 0 6px; font-weight: 600; color: var(--ink); }
.source { margin: 10px 0 0; font-size: 13px; color: var(--muted); } .source i { color: var(--gold); }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; padding: 5px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.check.done span { text-decoration: line-through; color: var(--dim); }
.progress { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.progress .tile b { font-size: 18px; }
.progress .tile .chg { display: block; font-style: normal; font-size: 12.5px; font-weight: 500; margin-top: 2px; }
.chg.up { color: var(--good); } .chg.down { color: var(--bad); } .chg.same { color: var(--dim); }
.prog-sub { font-size: 13px; margin: -4px 0 8px; }
.prog-today { font-size: 13.5px; margin: 0 0 8px; } .prog-today b { font-weight: 600; }
.up { color: var(--good) !important; } .down { color: var(--bad) !important; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.spark div { flex: 1; max-width: 18px; background: var(--accent); opacity: .75; border-radius: 3px 3px 0 0; min-height: 3px; }
.pro-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }

/* Stat balance */
.bal { display: grid; grid-template-columns: 200px minmax(0,1fr) 52px; gap: 12px; align-items: center; font-size: 14px; padding: 5px 0; }
@media (max-width: 640px) { .bal { grid-template-columns: 120px minmax(0,1fr) 44px; font-size: 13px; } }
.bal > span:first-child { color: var(--ink); font-weight: 700; }
.bal .bars2 { display: flex; flex-direction: column; gap: 3px; }
.bal-you { height: 9px; background: var(--accent); border-radius: 0 4px 4px 0; }
.bal-top { height: 9px; background: #cfd3dc; border-radius: 0 4px 4px 0; }
.bal .d { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.bal-legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tip { font-size: 15px; margin: 12px 0 0; display: flex; gap: 8px; align-items: center; color: var(--text); } .tip i { color: var(--accent); }

/* Dialogs */
dialog { border: 0; border-radius: 18px; padding: 0; background: #fff; color: var(--text); width: min(420px, calc(100% - 32px)); box-shadow: 0 24px 64px rgba(20,20,30,.25); }
dialog::backdrop { background: rgba(20, 22, 30, .45); }
.dlg { display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.dlg h2 { margin: 0; } .dlg h2 i { color: var(--gold); }
.price { margin: 0; font-size: 15px; color: var(--muted); } .price b { font-size: 32px; color: var(--ink); font-weight: 800; }
.perks { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.perks i { color: var(--accent); margin-right: 6px; }
.testmode { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 10px; margin: 0; font-size: 14px; }

footer { text-align: center; color: var(--dim); font-size: 13px; padding: 24px 16px 36px; }

/* Navigation */
.nav { display: flex; gap: 4px; margin-right: auto; margin-left: 16px; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.nav a:hover { color: var(--ink); background: var(--soft); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-bg); }
@media (max-width: 560px) { .nav { order: 3; width: 100%; margin: 4px 0 0; } }

/* Compare page */
.class-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 18px; }
.cls { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: 14px; border-width: 2px; }
.cls img { width: 46px; height: 46px; padding: 5px; border-radius: 50%; background: var(--slot); margin-bottom: 4px; }
.cls b { font-size: 14px; color: var(--ink); } .cls small { font-size: 12px; color: var(--muted); }
.cls.on { border-color: var(--accent); background: var(--accent-bg); }
.cls.on b { color: var(--accent); }
.mychar { border-top: 1px solid var(--line); padding-top: 16px; }
.mychar h3 { font-size: 15px; margin: 0 0 10px; color: var(--ink); display: flex; gap: 6px; align-items: center; } .mychar h3 i { color: var(--accent); }
.mychar-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 8px; }
.mychar-row select, .mychar-row input { height: 44px; border: 1.5px solid var(--line2); border-radius: 10px; background: #fff; color: var(--ink); padding: 0 10px; font: inherit; min-width: 0; }
.mychar-row .gold { height: 44px; }
@media (max-width: 640px) { .mychar-row { grid-template-columns: 1fr 1fr; } .mychar-row input, .mychar-row .gold { grid-column: span 2; } }
.chips.left { justify-content: flex-start; margin: 10px 0 0; }
.chips button img { width: 18px; height: 18px; border-radius: 50%; background: var(--slot); padding: 2px; vertical-align: -4px; }
.chips button.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }

.cmp-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 560px; font-size: 14px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cmp thead th { vertical-align: bottom; border-bottom: 2px solid var(--line2); }
/* Remove badge sits on the corner of the column's icon, so it's clear what it removes */
.col-pic { position: relative; display: inline-block; margin-bottom: 6px; }
.cmp thead th .col-pic img { margin-bottom: 0; }
.col-x { position: absolute; top: -5px; right: -7px; width: 20px; height: 20px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted); background: #fff; border: 1px solid var(--line2); box-shadow: 0 1px 4px rgba(16, 32, 84, .2); }
.col-x:hover { color: #fff; border-color: var(--bad); background: var(--bad); }
.cmp thead th img { width: 40px; height: 40px; padding: 4px; border-radius: 50%; background: var(--slot); display: block; margin-bottom: 6px; }
.cmp thead th img.face { padding: 0; object-fit: cover; border: 2px solid var(--accent); }
.cmp thead th b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; color: var(--ink); }
.cmp thead th small { color: var(--muted); font-weight: 500; font-size: 12px; }
.cmp thead th.col-char, .cmp td:nth-child(2) { }
.cmp tbody th { color: var(--ink); font-weight: 700; width: 160px; position: sticky; left: 0; background: var(--card); }
.cmp td { color: var(--text); font-weight: 400; }
.cell-who { display: none; }
.cmp td small { display: block; color: var(--dim); font-size: 11.5px; }
.cmp tr.grp th { background: var(--soft); color: var(--ink); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px; position: static; }
.cmp ul { margin: 0; padding-left: 16px; } .cmp li { margin: 2px 0; }
.cmp tr.warn td li { color: var(--warn); }
.empty-note { color: var(--muted); padding: 20px; }
.rate { display: flex; align-items: center; gap: 8px; }
.dots { display: flex; gap: 3px; }
.dots span { width: 14px; height: 8px; border-radius: 3px; background: var(--line); }
.dots span.on { background: var(--accent); }
.rate b { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-bg); border-radius: 6px; padding: 0 6px; }
.foot { font-size: 12.5px; margin-top: 12px; }

.switch h2 { flex-wrap: wrap; } .switch h2 .ti-arrow-right { color: var(--muted); }
.switch img.mini { width: 30px; height: 30px; padding: 3px; border-radius: 50%; background: var(--slot); }
.deltas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
@media (max-width: 640px) { .deltas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.delta { background: var(--soft); border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.delta span { display: block; color: var(--ink); font-weight: 700; margin-bottom: 2px; } .delta b { font-size: 16px; font-weight: 500; color: var(--text); }
.delta.up b { color: var(--good); } .delta.down b { color: var(--bad); }
.switch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .switch-grid { grid-template-columns: 1fr; } }
.switch h3 { font-size: 14px; margin: 0 0 6px; display: flex; gap: 6px; align-items: center; }
.switch h3.gain { color: var(--good); } .switch h3.lose { color: var(--bad); }
.switch ul { margin: 0; padding-left: 18px; font-size: 14.5px; } .switch li { margin: 3px 0; }
.switch .facts { margin-top: 14px; padding: 12px 12px 12px 30px; background: var(--soft); border-radius: 12px; }
.askbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 14px; border-radius: 10px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }
.askbtn:hover { background: var(--accent-ink); }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  main { padding: 0 12px 48px; }
  .card { padding: 18px 16px; }

  /* Header: the account email crowds the buttons */
  .who-mini { display: none; }

  /* Answer card: badge above the question, question uses the full width */
  .answer .q { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
  .answer .q h2 { font-size: 17px; }

  /* Character tiles: keep labels on one line and numbers inside */
  .tile { padding: 8px 10px; }
  .tile span { font-size: 12.5px; white-space: nowrap; }
  .tile b { font-size: 18px; }

  /* "Do this now": tag above the advice instead of squeezing it */
  .fix { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "num tag" "num body"; column-gap: 12px; row-gap: 4px; }
  .fix .num { grid-area: num; }
  .fix .tag { grid-area: tag; justify-self: start; }
  .fix .body { grid-area: body; }

  /* Pro roadmap: time and tag on one line, the step text full width below */
  .step-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "when tag" "what what"; gap: 4px 10px; }
  .step-row .when { grid-area: when; min-width: 0; }
  .step-row .tag { grid-area: tag; justify-self: start; }
  .step-row .what { grid-area: what; }

  /* Stat balance: label and difference on one line, bars full width below */
  .bal { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label diff" "bars bars"; gap: 4px 10px; padding: 6px 0; }
  .bal > span:first-child { grid-area: label; }
  .bal .bars2 { grid-area: bars; }
  .bal .d { grid-area: diff; }

  .life { font-size: 12px; }
  .classes { gap: 4px; } .classes img { width: 30px; height: 30px; padding: 3px; }

  /* Comparison table, phones: no sideways scrolling.
     Up to 3 columns: names pinned on top, each row is its label plus one
     value per column, with one line under the whole row and thin lines
     between columns so every value sits under its name. */
  .cmp-wrap { overflow: visible; margin: 0; padding: 0; }
  .cmp { display: block; min-width: 0; font-size: 13.5px; }
  .cmp[data-cols="3"] { font-size: 12.5px; }
  .cmp thead, .cmp tbody { display: block; }
  .cmp tr { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
  .cmp th, .cmp td { overflow-wrap: break-word; hyphens: manual; min-width: 0; }
  .cmp thead { position: sticky; top: 0; z-index: 3; background: #fff; padding: 10px 0 8px; border-bottom: 2px solid var(--line2); }
  .cmp thead th:first-child { display: none; }
  .cmp thead th { border: 0; padding: 0 8px; }
  .cmp thead th img { width: 30px; height: 30px; padding: 3px; }
  .cmp thead th b { font-size: 13.5px; overflow-wrap: anywhere; }
  .cmp thead th small { font-size: 11.5px; display: block; line-height: 1.3; }
  .col-x { top: -4px; right: -6px; width: 18px; height: 18px; font-size: 11px; }
  .col-pic { margin-bottom: 4px; }
  .cmp tbody tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .cmp tbody th { grid-column: 1 / -1; position: static; width: auto; padding: 0 0 6px; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--ink); }
  .cmp td { padding: 0 8px; border: 0; line-height: 1.45; }
  .cmp thead th:nth-child(2), .cmp td:nth-child(2) { padding-left: 0; }
  .cmp thead th:nth-child(n+3), .cmp td:nth-child(n+3) { border-left: 1px solid var(--line); }
  .cmp tr.grp { padding: 16px 0 2px; border: 0; }
  .cmp tr.grp th { background: var(--soft); border-radius: 8px; padding: 6px 10px; }
  .cmp ul { padding-left: 14px; }
  .dots span { width: 9px; height: 7px; }
  .rate { flex-wrap: wrap; gap: 4px; }

  /* 4-5 columns don't fit side by side: each row lists one line per
     column, led by that column's icon (the same icons as the header). */
  .cmp.many tr { display: block; }
  .cmp.many thead { position: static; }  /* every line already names its column */
  .cmp.many thead tr { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .cmp.many thead th { display: grid; grid-template-columns: 28px auto; column-gap: 8px; align-items: center; padding: 0; border: 0; }
  .cmp.many thead th:first-child { display: none; }
  .cmp.many thead th .col-pic { grid-row: span 2; margin: 0; }
  .cmp.many thead th img { width: 28px; height: 28px; }
  .cmp.many thead th b { font-size: 13px; line-height: 1.2; }
  .cmp.many td { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 5px 0; border: 0; }
  .cmp.many td + td { border-top: 1px dashed var(--line); }
  .cmp.many .cell-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .cmp.many .cell-who img { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--slot); padding: 2px; object-fit: contain; }
  .cmp.many .cell-who img.face { padding: 0; object-fit: cover; border: 1.5px solid var(--accent); }
  .cmp.many .cell-who em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Theme: sky art ----------
   The art fills the screen behind everything (fixed, so it never stretches
   with long pages). A veil keeps the top bright and calms the lower half,
   and every block of text sits on a frosted panel. */
body { background: #dfe7f5; position: relative; }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -2; background: url("img/bg-desktop.webp") center top / cover no-repeat; }
body::after { z-index: -1; background: radial-gradient(ellipse 55% 20% at 50% 17%, rgba(16, 32, 84, .32), transparent 75%), linear-gradient(180deg, rgba(16, 32, 84, .30) 0%, rgba(16, 32, 84, .05) 26%, rgba(236, 241, 250, .30) 52%, rgba(236, 241, 250, .78) 100%); }
@media (orientation: portrait) {
  body::before { background-image: url("img/bg-mobile.webp"); }
  /* The headline sits lower on phones, over the brightest part of the art */
  body::after { background: radial-gradient(ellipse 90% 16% at 50% 30%, rgba(16, 32, 84, .5), transparent 75%),
    linear-gradient(180deg, rgba(16, 32, 84, .30) 0%, rgba(16, 32, 84, .08) 30%, rgba(236, 241, 250, .30) 52%, rgba(236, 241, 250, .78) 100%); }
}

/* Header: a frosted bar so the logo and links read over any part of the sky */
.top { margin-top: 12px; padding: 10px 16px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 24px rgba(16, 32, 84, .15); max-width: 828px; }
@media (max-width: 560px) { .top { border-radius: 20px; margin: 10px 12px 0; } }
.devbar { margin-top: 10px; background: rgba(253, 241, 220, .92); border: 1px solid #ecd9ae; }

/* Headline: white with a soft dark halo over the blue sky */
.hero h1, .hero .lead { color: #fff; text-shadow: 0 2px 18px rgba(10, 24, 70, .55), 0 1px 3px rgba(10, 24, 70, .55), 0 0 2px rgba(10, 24, 70, .35); }
.hero h1 span { color: #ffd27a; }
.eyebrow { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .82); color: var(--accent); }

/* Panels: frosted cream glass with a thin gold trim */
.card { background: rgba(255, 255, 255, .9); border: 1px solid rgba(201, 162, 74, .45);
  backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 34px rgba(16, 32, 84, .16), inset 0 1px 0 rgba(255, 255, 255, .9); border-radius: 18px; }
#loading { background: rgba(255, 255, 255, .85); border-radius: 18px; }
footer { color: #3b4566; }

/* Buttons: glowing sky-blue pills for the main action, light glass for the rest */
button { background: rgba(255, 255, 255, .8); border-color: rgba(120, 140, 190, .35); }
button:hover { background: #fff; border-color: #c9a24a; }
button.gold, .askbtn { border-radius: 999px; color: #fff; border: 1px solid rgba(255, 255, 255, .55);
  background: linear-gradient(180deg, #7397ff 0%, #4062e0 55%, #3940bd 100%);
  box-shadow: 0 4px 16px rgba(64, 98, 224, .40), inset 0 1px 0 rgba(255, 255, 255, .45); text-shadow: 0 1px 2px rgba(20, 30, 90, .35); }
button.gold:hover, .askbtn:hover { background: linear-gradient(180deg, #86a6ff 0%, #4d6ff0 55%, #4148cc 100%); border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 6px 22px rgba(64, 98, 224, .55), inset 0 1px 0 rgba(255, 255, 255, .55); }
.regions button[aria-checked="true"] { background: linear-gradient(180deg, #7397ff, #3f55d6); border-color: rgba(255, 255, 255, .55); }
.askbar, .namefield, .dlg input { border-radius: 999px; }
.namefield { padding: 0 20px; }
.askbar { background: #fff; padding-left: 20px; }
.go-bottom { border-radius: 999px; }

/* Terms, privacy and refund pages */
.legal { line-height: 1.65; }
.legal h2 { font-size: 17px; margin: 22px 0 8px; }
.legal p, .legal li { color: var(--text); font-size: 15.5px; }
.legal ul { padding-left: 20px; margin: 0; } .legal li { margin: 5px 0; }
.legal .updated { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.footer-links { margin-top: 6px; } .footer-links a { color: #3b4566; }
.del-row { display: flex; gap: 8px; flex-wrap: wrap; }
.del-row input { flex: 1; min-width: 180px; height: 44px; border-radius: 999px; border: 1.5px solid var(--line2); padding: 0 16px; font: inherit; }
button.danger { border-radius: 999px; background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; padding: 0 18px; height: 44px; }
button.danger:hover { background: #a3302a; border-color: #a3302a; }

/* My Account and Admin pages */
.acct-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(120, 140, 190, .35);
  background: rgba(255, 255, 255, .8); color: var(--text); text-decoration: none; font-weight: 600; }
.acct-btn:hover { border-color: #c9a24a; background: #fff; }
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.acct-row:first-of-type { border-top: 0; }
.acct-row > span { color: var(--muted); } .acct-row b { color: var(--ink); overflow-wrap: anywhere; text-align: right; }
.small-left { font-size: 14px; margin-top: 6px; }
.admin-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.stack input { height: 44px; border-radius: 999px; border: 1.5px solid var(--line2); padding: 0 16px; font: inherit; }
.stack .gold { height: 44px; align-self: flex-start; padding: 0 20px; }
.small-btn { font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.danger-zone { border-color: rgba(192, 58, 51, .35); }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.admin-table { font-size: 14px; }
.arow { display: grid; grid-template-columns: minmax(0, 2.2fr) 1.2fr .6fr .6fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.arow.q { grid-template-columns: minmax(0, 3fr) .6fr 1.2fr; }
.arow.head { border-top: 0; font-weight: 700; color: var(--ink); font-size: 13px; }
.arow .em { overflow-wrap: anywhere; color: var(--ink); }
/* On/off toggle (admin Pro switches). Not ".switch": that's the Compare page's switch box. */
.toggle { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle i { position: absolute; inset: 0; background: var(--line2); border-radius: 999px; transition: background .15s; }
.toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input:checked + i { background: var(--good); }
.toggle input:checked + i::after { transform: translateX(16px); }
@media (max-width: 640px) {
  .arow { grid-template-columns: minmax(0, 1fr) auto auto; font-size: 13px; }
  .arow > span:nth-child(2) { display: none; }
  .arow.q { grid-template-columns: minmax(0, 1fr) auto; }
  .arow.q > span:nth-child(3) { display: none; }
  .acct-btn { padding: 7px 10px; }
}
.gold-link { background: linear-gradient(180deg, #7397ff 0%, #4062e0 55%, #3940bd 100%); color: #fff; border-color: rgba(255, 255, 255, .55); }
.gold-link:hover { color: #fff; border-color: rgba(255, 255, 255, .8); background: linear-gradient(180deg, #86a6ff 0%, #4d6ff0 55%, #4148cc 100%); }