/* ============================================================================
   BOB HQ — PLATFORM SYSTEMS

   Everything the second pass added: microinteractions, the new primitives,
   global search, notifications, achievements, the Creator Program, Discover,
   the expanded profile and onboarding.

   A SEPARATE FILE, NOT AN APPENDED ONE. app.css is base + shell + the original
   component set; pages.css is the original nine pages. Keeping the new systems
   in their own sheet means the boundary between "v1, working, verified" and
   "v2, new" is visible in the file list, and either can be read without
   scrolling through the other. All three share tokens.css, which is the only
   thing that actually enforces consistency — none of these rules invent a
   colour, a radius, a duration or a shadow.
   ========================================================================= */

/* ============================================================================
   1 · MICROINTERACTIONS  (see js/core/fx.js)
   ========================================================================= */

/* Ripple. Gold at 13% rather than white: white ripples on a dark surface read
   as a flash, and this product has an accent that means "you did something". */
.rip {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,206,58,.20), rgba(255,206,58,.04) 60%, transparent 70%);
  transform: scale(0); opacity: .9;
  animation: rip var(--d-3) var(--ease-out) forwards;
}
@keyframes rip { to { transform: scale(1); opacity: 0; } }

/* Reveal on scroll. The stagger index is set inline by fx.js and capped at 8. */
.rv { opacity: 0; transform: translateY(14px); }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-3) var(--ease-out) calc(var(--rv-i, 0) * 40ms),
              transform var(--d-3) var(--ease-out) calc(var(--rv-i, 0) * 40ms);
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* Celebration particles. Rationed to unlocks, level ups and claims. */
.burst { position: fixed; z-index: var(--z-toast); pointer-events: none; }
.burst i {
  position: absolute; border-radius: 2px; display: block;
  animation: burst var(--bd, 700ms) var(--ease-out) forwards;
}
@keyframes burst {
  from { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  to { transform: translate(var(--bx), calc(var(--by) + 40px)) scale(.3) rotate(220deg); opacity: 0; }
}

/* Tooltip. One node, moved and re-filled. */
.tip {
  position: fixed; z-index: var(--z-toast); pointer-events: none;
  max-width: 260px; padding: 6px 10px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--e-2);
  font: var(--t-xs); color: var(--text); line-height: 1.45;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.tip.is-on { opacity: 1; transform: none; }
.tip--below { transform: translateY(-4px); }

/* ============================================================================
   2 · NEW PRIMITIVES
   ========================================================================= */

/* --- segmented ------------------------------------------------------------ */
.seg {
  display: inline-flex; gap: 2px; padding: 3px; flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.seg-i {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent; color: var(--text-3); font: var(--t-xs); font-weight: 600;
  white-space: nowrap; position: relative; overflow: hidden;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.seg-i:hover { color: var(--text); }
.seg-i.is-on { background: var(--surface-3); color: var(--cyan-l); box-shadow: var(--e-1); }

/* --- menu ----------------------------------------------------------------- */
.menu {
  position: fixed; z-index: var(--z-pop); min-width: 208px; padding: 5px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--e-3);
  opacity: 0; transform: translateY(-5px) scale(.98);
  transition: opacity var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.menu.is-on { opacity: 1; transform: none; }
.menu-i {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--text-2); font: var(--t-h3); text-align: left;
  position: relative; overflow: hidden;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.menu-i:hover, .menu-i:focus-visible { background: var(--surface-3); color: var(--text); outline: none; }
.menu-i[disabled] { opacity: .4; pointer-events: none; }
.menu-i--danger { color: var(--danger); }
.menu-i--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.menu-hint { margin-left: auto; font: var(--t-xs); font-style: normal; color: var(--text-4); }
.menu-sep { height: 1px; background: var(--line); margin: 5px 2px; }

/* --- ring ----------------------------------------------------------------- */
.ring { position: relative; display: grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-t { stroke: var(--surface-3); }
.ring-v { transition: stroke-dashoffset var(--d-3) var(--ease); }
.ring-v--gold { stroke: var(--gold); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent)); }
.ring-v--cyan { stroke: var(--cyan); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 45%, transparent)); }
.ring-c { text-align: center; line-height: 1.1; }
.ring-c b { display: block; font: var(--t-h1); font-size: 21px; font-variant-numeric: tabular-nums; }
.ring-c span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; }

/* --- rarity --------------------------------------------------------------
   The dot carries the colour and the label stays near-neutral. Colouring the
   whole word makes four rarity chips in a row look like a set of buttons. */
.rar {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px; border-radius: var(--r-pill);
  font: var(--t-xs); font-weight: 600; text-transform: capitalize;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3);
}
.rar i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.rar--common i { background: var(--rar-common); }
.rar--rare i { background: var(--rar-rare); box-shadow: 0 0 6px var(--rar-rare); }
.rar--epic i { background: var(--rar-epic); box-shadow: 0 0 7px var(--rar-epic); }
.rar--legendary i { background: var(--rar-legendary); box-shadow: 0 0 9px var(--rar-legendary); }
.rar--rare { color: var(--rar-rare); border-color: color-mix(in srgb, var(--rar-rare) 28%, transparent); }
.rar--epic { color: var(--rar-epic); border-color: color-mix(in srgb, var(--rar-epic) 30%, transparent); }
.rar--legendary { color: var(--rar-legendary); border-color: color-mix(in srgb, var(--rar-legendary) 34%, transparent); }

.rar-bg--common { background: color-mix(in srgb, var(--rar-common) 16%, transparent); color: var(--rar-common); }
.rar-bg--rare { background: color-mix(in srgb, var(--rar-rare) 16%, transparent); color: var(--rar-rare); }
.rar-bg--epic { background: color-mix(in srgb, var(--rar-epic) 17%, transparent); color: var(--rar-epic); }
.rar-bg--legendary { background: color-mix(in srgb, var(--rar-legendary) 17%, transparent); color: var(--rar-legendary); }

/* --- tier badge ----------------------------------------------------------- */
.tier {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 7px; border-radius: var(--r-pill);
  font: var(--t-xs); font-weight: 700;
  background: var(--surface-3); border: 1px solid var(--line);
}
.tier-g { font-style: normal; font-size: 13px; line-height: 1; }
.tier--sm { padding: 2px 9px 2px 6px; }
.tier--builder { color: var(--tier-builder); border-color: color-mix(in srgb, var(--tier-builder) 32%, transparent); background: color-mix(in srgb, var(--tier-builder) 12%, transparent); }
.tier--verified { color: var(--tier-verified); border-color: color-mix(in srgb, var(--tier-verified) 32%, transparent); background: color-mix(in srgb, var(--tier-verified) 12%, transparent); }
.tier--featured { color: var(--tier-featured); border-color: color-mix(in srgb, var(--tier-featured) 34%, transparent); background: color-mix(in srgb, var(--tier-featured) 13%, transparent); }
.tier--elite { color: var(--tier-elite); border-color: color-mix(in srgb, var(--tier-elite) 36%, transparent); background: color-mix(in srgb, var(--tier-elite) 13%, transparent); }

/* --- meter ---------------------------------------------------------------- */
.meter { display: flex; flex-direction: column; gap: 11px; }
.meter-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.meter-l { display: inline-flex; align-items: center; gap: 7px; font: var(--t-xs); font-weight: 600; color: var(--text-2); }
.meter-l .ic { color: var(--text-4); }
.meter-v { font: var(--t-xs); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.meter-v i { font-style: normal; font-weight: 500; color: var(--text-4); }
.meter-r.is-done .meter-l { color: var(--ok); }
.meter-r.is-done .meter-l .ic { color: var(--ok); }
.prog-bar--ok { background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 60%, transparent), var(--ok)); }

/* --- tile ----------------------------------------------------------------- */
.tile {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 13px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  color: inherit; text-decoration: none; position: relative; overflow: hidden;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.tile--tap { cursor: pointer; }
.tile--tap:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateX(3px); }
.tile--tap:hover .tile-t { color: var(--cyan-l); }
.tile > .cover { width: 112px; flex: none; border-radius: var(--r); border: 1px solid var(--line); }
.tile-ic {
  width: 42px; height: 42px; flex: none; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3);
}
.tile-ic--gold { color: var(--gold); background: color-mix(in srgb, var(--gold) 11%, transparent); border-color: color-mix(in srgb, var(--gold) 22%, transparent); }
.tile-ic--cyan { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 11%, transparent); border-color: color-mix(in srgb, var(--cyan) 22%, transparent); }
.tile-b { flex: 1; min-width: 0; }
.tile-t { display: block; font: var(--t-h3); transition: color var(--d-1) var(--ease); }
.tile-s { font: var(--t-sm); color: var(--text-2); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-m { display: flex; gap: 13px; margin-top: 7px; flex-wrap: wrap; }
.tile-r { flex: none; display: flex; align-items: center; gap: 8px; }

/* --- sheet ---------------------------------------------------------------- */
.sheet-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(3,4,8,.5); opacity: 0;
  transition: opacity var(--d-2) var(--ease);
}
.sheet-wrap.is-on { opacity: 1; }
.sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw); display: flex; flex-direction: column;
  background: var(--bg-1); border-left: 1px solid var(--line-2);
  box-shadow: var(--e-3);
  transform: translateX(100%);
  transition: transform var(--d-3) var(--ease-out);
}
.sheet.is-on { transform: none; }
.sheet-h {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 16px 14px 14px 20px; border-bottom: 1px solid var(--line);
}
.sheet-h h2 { flex: 1; font: var(--t-h2); }
.sheet-b { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }

/* --- sparkline ------------------------------------------------------------ */
.spark { display: block; overflow: visible; }
.spark-l { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spark-a { stroke: none; }
.spark--cyan .spark-l { stroke: var(--cyan); }
.spark--cyan .spark-a { fill: color-mix(in srgb, var(--cyan) 13%, transparent); }
.spark--cyan .spark-d { fill: var(--cyan); }
.spark--gold .spark-l { stroke: var(--gold); }
.spark--gold .spark-a { fill: color-mix(in srgb, var(--gold) 13%, transparent); }
.spark--gold .spark-d { fill: var(--gold); }

/* --- keys ----------------------------------------------------------------- */
.kbds { display: inline-flex; gap: 3px; }
.kbds kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 5px;
  background: var(--surface-3); border: 1px solid var(--line-2); border-bottom-width: 2px;
  font: var(--t-xs); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
}

/* --- skeleton row --------------------------------------------------------- */
.sk--row { display: flex; align-items: center; gap: 13px; padding: 13px; }
.sk-av { width: 38px; height: 38px; border-radius: 50%; flex: none; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
.sk--row > div { flex: 1; }
.sk--row .sk-l { margin: 6px 0; }

/* --- toast action --------------------------------------------------------- */
.toast-a {
  margin-left: 4px; padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--cyan-l); font: var(--t-xs); font-weight: 700; cursor: pointer;
  pointer-events: auto;
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.toast-a:hover { background: var(--surface-3); border-color: var(--cyan-d); }
.toasts { pointer-events: none; }
.toast { pointer-events: auto; }

/* ============================================================================
   3 · SHELL ADDITIONS — search entry points and the bell
   ========================================================================= */
.side-search {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 24px);
  margin: 0 12px 4px; padding: 9px 11px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text-3); font: var(--t-h3); text-align: left;
  position: relative; overflow: hidden;
  transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.side-search:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }
.side-search span { flex: 1; }
body.is-rail .side-search { width: 44px; margin: 0 auto 4px; justify-content: center; padding: 10px 0; }
body.is-rail .side-search span, body.is-rail .side-search .kbds { display: none; }
@media (max-width: 1180px) {
  .side-search { width: 44px; margin: 0 auto 4px; justify-content: center; padding: 10px 0; }
  .side-search span, .side-search .kbds { display: none; }
}
@media (max-width: 860px) {
  .side-search { width: calc(100% - 24px); margin: 0 12px 4px; justify-content: flex-start; padding: 9px 11px; }
  .side-search span, .side-search .kbds { display: flex; }
  .side-search span { display: block; }
}

.topsearch {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px 7px 12px; min-width: 218px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--text-4); font: var(--t-sm);
  transition: border-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.topsearch:hover { border-color: var(--cyan-d); color: var(--text-2); }
.topsearch span { flex: 1; text-align: left; }

.bell { position: relative; }
.bell-n {
  position: absolute; top: 1px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--gold); color: var(--gold-t);
  font: var(--t-xs); font-weight: 800; font-style: normal; font-size: 10px;
  border: 2px solid var(--bg-1);
  animation: bellIn var(--d-2) var(--ease);
}
@keyframes bellIn { from { transform: scale(.4); opacity: 0; } }

/* The topbar is fixed-height and already lost a fight with its own contents
   once. The search pill is the first thing to go, then its label — both are
   duplicated by the sidebar entry and by ⌘K. */
@media (max-width: 1080px) { .topsearch { min-width: 0; } .topsearch span, .topsearch .kbds { display: none; } }
@media (max-width: 620px) { .topsearch { display: none; } }

/* ============================================================================
   4 · GLOBAL SEARCH OVERLAY
   Anchored at 12vh rather than centred: results grow downward, and a
   vertically centred panel jumps as the list length changes.
   ========================================================================= */
.pal-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(3,4,8,.66); backdrop-filter: blur(5px);
  display: flex; justify-content: center; padding: 12vh 16px 16px;
  opacity: 0; transition: opacity var(--d-2) var(--ease);
}
.pal-wrap.is-on { opacity: 1; }
.pal {
  width: min(680px, 100%); max-height: 72vh; align-self: flex-start;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); box-shadow: var(--e-3);
  transform: translateY(-12px) scale(.99);
  transition: transform var(--d-2) var(--ease-out);
}
.pal-wrap.is-on .pal { transform: none; }

.pal-h { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.pal-in { flex: 1; min-width: 0; background: none; border: 0; padding: 4px 0; font: var(--t-h2); font-weight: 500; color: var(--text); }
.pal-in::placeholder { color: var(--text-4); font-weight: 400; }

.pal-res { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.pal-sec + .pal-sec { margin-top: 6px; }
.pal-sec-h {
  display: flex; align-items: center; gap: 7px; padding: 9px 10px 6px;
  font: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--text-4);
}
.pal-sec-h .ic { color: var(--text-4); }
.pal-sec-h i { font-style: normal; margin-left: auto; color: var(--text-4); }

.pal-r {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: var(--r); cursor: pointer;
  color: inherit; text-decoration: none; scroll-margin: 8px;
}
/* Keyboard cursor and mouse hover are the SAME state on purpose — two
   different highlights on screen at once is the classic command-palette bug
   where you cannot tell which one Enter will pick. fx.js syncs them by
   moving the cursor on pointerenter. */
.pal-r.is-cur { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pal-r.is-cur .pal-r-b b { color: var(--cyan-l); }
.pal-r.is-cur > .ic:last-child { opacity: 1; transform: none; }
.pal-r > .ic:last-child { color: var(--text-4); opacity: 0; transform: translateX(-4px); transition: opacity var(--d-1) var(--ease), transform var(--d-1) var(--ease); }

.pal-r-ic {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3);
}
.pal-r-ic--page { color: var(--cyan); }
.pal-r-ic--build { color: var(--text-2); }
.pal-r-ic--creator { color: var(--cyan-l); }
.pal-r-ic--product { color: var(--gold); }
.pal-r-ic--event { color: var(--gold); }
.pal-r-b { flex: 1; min-width: 0; }
.pal-r-b b { display: block; font: var(--t-h3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--d-1) var(--ease); }
.pal-r-b span { display: block; font: var(--t-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pal-r-m { display: flex; gap: 11px; flex: none; }
.pal-r mark { background: color-mix(in srgb, var(--cyan) 26%, transparent); color: var(--cyan-l); border-radius: 3px; padding: 0 1px; }

.pal-q { display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.pal-q-b {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 8px 7px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: none; color: var(--text-2); font: var(--t-sm); text-align: left;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.pal-q-b:hover { background: var(--surface-2); color: var(--text); }
.pal-q .icobtn { width: 26px; height: 26px; opacity: 0; }
.pal-q:hover .icobtn { opacity: 1; }

.pal-foot {
  flex: none; display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg-1);
  font: var(--t-xs); color: var(--text-4);
}
.pal-foot span { display: inline-flex; align-items: center; gap: 5px; }
.pal-count { color: var(--text-3); }

.pal-none { text-align: center; padding: 44px 24px 40px; }
.pal-none canvas { margin: 0 auto 16px; border-radius: var(--r-sm); }
.pal-none h3 { font: var(--t-h1); font-size: 19px; margin-bottom: 8px; }
.pal-none p { font: var(--t-sm); color: var(--text-3); max-width: 46ch; margin: 0 auto; }

.pal-bob { display: flex; gap: 11px; align-items: flex-start; padding: 14px 12px 8px; }
.pal-bob canvas { border-radius: 6px; flex: none; }
.pal-bob p { font: var(--t-xs); color: var(--text-3); font-style: italic; }

@media (max-width: 620px) {
  .pal-wrap { padding: 6vh 10px 10px; }
  .pal { max-height: 84vh; }
  .pal-foot { display: none; }
  .pal-r-m { display: none; }
}

/* ============================================================================
   5 · NOTIFICATION CENTRE
   ========================================================================= */
.notif-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.notif-filters { flex: 1; min-width: 0; overflow-x: auto; }
.notif-filters::-webkit-scrollbar { height: 0; }
.notif-filters .seg { flex-wrap: nowrap; }
/* Six filters do not fit a phone-width sheet, so the row scrolls. A plain
   overflow clip cuts a label mid-word against the button beside it and reads
   as broken rather than as scrollable, so the right edge is faded out — the
   standard "there is more this way" cue, and the only one that works without
   taking vertical space for a scrollbar. */
.notif-filters {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
/* Below this the two controls genuinely cannot share a line: "Mark all read"
   alone is most of a 280px sheet. Stacking gives the filters the full width,
   at which point four of the six are visible without scrolling at all. */
@media (max-width: 420px) {
  .notif-tools { align-items: stretch; }
  .notif-filters { flex-basis: 100%; order: 2; }
  .notif-tools > .btn { order: 1; align-self: flex-end; }
}

.notifs { display: flex; flex-direction: column; gap: 2px; }
.notif-day {
  font: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--text-4);
  padding: 16px 8px 7px;
}
.notif {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 11px; border-radius: var(--r); cursor: pointer;
  position: relative; overflow: hidden;
  border: 1px solid transparent;
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.notif:hover { background: var(--surface); border-color: var(--line); }
/* Unread is a left bar plus a slightly lifted surface. A background tint alone
   is too weak on a dark UI to survive being scanned quickly. */
.notif.is-unread { background: var(--surface); }
.notif.is-unread::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  background: var(--cyan); border-radius: 0 2px 2px 0;
}
.notif-ic {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3);
}
.notif-ic--gold { color: var(--gold); background: color-mix(in srgb, var(--gold) 11%, transparent); border-color: color-mix(in srgb, var(--gold) 20%, transparent); }
.notif-ic--cyan { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 11%, transparent); border-color: color-mix(in srgb, var(--cyan) 20%, transparent); }
.notif-face { flex: none; }
.notif-face canvas { width: 34px; height: 34px; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgba(255,206,58,.2); }
.notif-b { flex: 1; min-width: 0; }
.notif-b b { display: block; font: var(--t-h3); }
.notif-b p { font: var(--t-sm); color: var(--text-2); margin-top: 3px; }
.notif-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.notif-t { font: var(--t-xs); color: var(--text-4); white-space: nowrap; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.notif-r .ic { color: var(--text-4); transition: transform var(--d-2) var(--ease); }
.notif.is-open .notif-r .ic { transform: rotate(180deg); }

.notif-kids { margin: 2px 0 6px 22px; padding-left: 12px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.notif--kid { padding: 8px 9px; }
.notif--kid .notif-b b { font: var(--t-sm); font-weight: 600; }
.notif--kid .notif-b p { font: var(--t-xs); }
.notif--kid.is-unread::before { display: none; }

/* ============================================================================
   6 · ACHIEVEMENTS
   ========================================================================= */
.ach-head {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center;
  padding: var(--s-6); margin-bottom: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background:
    radial-gradient(80% 130% at 8% 0%, rgba(255,206,58,.09), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--surface) 72%);
}
.ach-head-l { display: flex; align-items: center; gap: var(--s-5); }
.ach-head-l h1 { font: var(--t-display); font-size: clamp(24px, 2.4vw, 32px); }
.ach-head-l p { font: var(--t-body); color: var(--text-2); margin-top: 8px; max-width: 52ch; }
.ach-head-r { display: flex; gap: 11px; align-items: flex-start; max-width: 260px; }
.ach-head-r canvas { border-radius: var(--r-sm); flex: none; }
.ach-head-r p { font: var(--t-sm); color: var(--text-2); font-style: italic; }
@media (max-width: 900px) { .ach-head { grid-template-columns: 1fr; } .ach-head-r { max-width: none; } }
@media (max-width: 560px) { .ach-head-l { flex-direction: column; align-items: flex-start; } }

.ach {
  display: flex; gap: 13px; padding: 15px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); position: relative; overflow: hidden;
  transition: transform var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.ach:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--e-2); }
/* Locked cards are dimmed, NOT greyed out. Desaturating them completely makes
   the page read as broken content rather than as content you have not reached. */
.ach.is-locked { background: var(--bg-1); }
.ach.is-locked .ach-ic { opacity: .55; }
.ach.is-locked .ach-t b { color: var(--text-2); }
.ach--near { border-color: color-mix(in srgb, var(--cyan) 28%, transparent); }

.ach-ic {
  width: 46px; height: 46px; flex: none; border-radius: var(--r);
  display: grid; place-items: center; position: relative;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3);
}
.ach--common.is-got .ach-ic { color: var(--rar-common); border-color: color-mix(in srgb, var(--rar-common) 30%, transparent); }
.ach--rare.is-got .ach-ic { color: var(--rar-rare); background: color-mix(in srgb, var(--rar-rare) 11%, transparent); border-color: color-mix(in srgb, var(--rar-rare) 32%, transparent); }
.ach--epic.is-got .ach-ic { color: var(--rar-epic); background: color-mix(in srgb, var(--rar-epic) 12%, transparent); border-color: color-mix(in srgb, var(--rar-epic) 34%, transparent); }
.ach--legendary.is-got .ach-ic {
  color: var(--gold-t); border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  background: linear-gradient(160deg, var(--gold-l), var(--gold-d));
  box-shadow: var(--e-gold);
}
.ach-check {
  position: absolute; right: -5px; bottom: -5px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok); color: #06210f; border: 2px solid var(--surface);
}
.ach-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ach-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ach-t b { font: var(--t-h3); }
.ach-d { font: var(--t-sm); color: var(--text-2); }
.ach-f { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.ach-f .stat b { color: var(--ok); }
.ach-when { font: var(--t-xs); color: var(--text-4); margin-left: auto; }
.ach-p { margin-top: auto; padding-top: 4px; }
.ach-p-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ach-rw { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }

/* Unlock celebration */
.celebrate { text-align: center; }
.celebrate-ic {
  width: 76px; height: 76px; margin: 4px auto 16px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  animation: pop var(--d-3) var(--ease-out);
}
@keyframes pop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }
.celebrate h3 { font: var(--t-display); font-size: 26px; margin-bottom: 10px; }
.celebrate > p { font: var(--t-body); color: var(--text-2); max-width: 42ch; margin: 12px auto 0; }
.celebrate-r { display: flex; justify-content: center; gap: 20px; margin-top: 18px; }
.celebrate-r .stat { font: var(--t-h3); color: var(--text-2); }
.celebrate-r .stat b { color: var(--gold); }
.celebrate-r .ic { color: var(--gold); }
.celebrate-more { font: var(--t-xs) !important; color: var(--text-4) !important; margin-top: 12px !important; }
.celebrate-bob { display: flex; gap: 11px; align-items: center; text-align: left; margin-top: 20px; padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); }
.celebrate-bob canvas { border-radius: 6px; flex: none; }
.celebrate-bob p { font: var(--t-sm); color: var(--text-2); font-style: italic; }

/* ============================================================================
   7 · CREATOR PROGRAM
   ========================================================================= */
.prog-hero {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-7); align-items: center;
  padding: var(--s-7) var(--s-6); margin-bottom: var(--s-7);
  border: 1px solid var(--line); border-radius: var(--r-xl); position: relative; overflow: hidden;
  background:
    radial-gradient(85% 130% at 10% 0%, rgba(255,206,58,.11), transparent 58%),
    radial-gradient(70% 120% at 96% 100%, rgba(176,108,245,.10), transparent 62%),
    linear-gradient(160deg, var(--surface-2), var(--surface) 70%);
}
.prog-hero-b { min-width: 0; }
.prog-hero-b h1 { font: var(--t-display); max-width: 20ch; }
.prog-hero-b > p { font: var(--t-body); color: var(--text-2); margin-top: 14px; max-width: 56ch; }
.prog-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--gold);
}
.prog-hero-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.prog-nudge {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 10px 12px; border-radius: var(--r);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  font: var(--t-sm); color: var(--text);
}
.prog-nudge .ic { color: var(--gold); flex: none; }
.prog-nudge span { flex: 1; }
.prog-hero-r { flex: none; }
.prog-standing, .prog-hero-face { text-align: center; max-width: 240px; }
.prog-standing p, .prog-hero-face p { font: var(--t-sm); color: var(--text-2); margin-top: 14px; font-style: italic; }
.prog-hero-face canvas { border-radius: var(--r-lg); padding: 10px; background: linear-gradient(160deg, rgba(255,206,58,.12), transparent); box-shadow: var(--e-2), 0 0 0 1px rgba(255,206,58,.16); }
@media (max-width: 900px) { .prog-hero { grid-template-columns: 1fr; } .prog-standing, .prog-hero-face { max-width: none; } }

/* --- tier cards ----------------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 16px; }
.tier-c {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line);
  position: relative; overflow: hidden;
  transition: transform var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.tier-c:hover { transform: translateY(-4px); box-shadow: var(--e-2); }
/* The tier's own colour appears as a top edge only. Tinting a whole card in
   four different hues down a row turns the ladder into a paint chart and makes
   the one you are actually on impossible to spot. */
.tier-c::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tc, var(--line-2)); }
.tier-c--builder { --tc: var(--tier-builder); }
.tier-c--verified { --tc: var(--tier-verified); }
.tier-c--featured { --tc: var(--tier-featured); }
.tier-c--elite { --tc: var(--tier-elite); }
.tier-c.is-got { background: linear-gradient(170deg, color-mix(in srgb, var(--tc) 7%, var(--surface)), var(--surface) 60%); }
.tier-c.is-cur { border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc), var(--e-2); }
.tier-c.is-next { border-color: var(--line-2); }

.tier-c-h { display: flex; align-items: flex-start; gap: 12px; }
.tier-c-h > div { flex: 1; min-width: 0; }
.tier-c-h b { display: block; font: var(--t-h2); color: var(--tc); }
.tier-c-h span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 4px; }
.tier-glyph {
  width: 40px; height: 40px; flex: none; border-radius: var(--r);
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: color-mix(in srgb, var(--tc, var(--line)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, var(--line)) 30%, transparent);
}
.tier-glyph--lg { width: 56px; height: 56px; font-size: 27px; }
.tier-c-blurb { font: var(--t-sm); color: var(--text-2); }
.tier-c-lbl { font: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-4); margin-bottom: 10px; }
.tier-c-none { font: var(--t-sm); color: var(--text-2); }
.tier-c-perks { margin-top: auto; }

.perks, .reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.perks li, .reqs li { display: flex; align-items: flex-start; gap: 9px; font: var(--t-sm); color: var(--text-2); }
.perks .ic { color: var(--ok); margin-top: 2px; flex: none; }
.reqs .ic { color: var(--text-4); margin-top: 2px; flex: none; }
.perks--lg li { font: var(--t-body); }

/* --- steps ---------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.step { display: flex; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.step-n {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font: var(--t-h3); font-weight: 800;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); color: var(--gold);
}
.step b { display: block; font: var(--t-h3); margin-bottom: 6px; }
.step p { font: var(--t-sm); color: var(--text-2); }

/* --- milestones ----------------------------------------------------------- */
.milestone {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.milestone-ic {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.milestone b { display: block; font: var(--t-h3); }
.milestone span { display: block; font: var(--t-xs); color: var(--gold); margin-top: 3px; }

/* --- creator challenges --------------------------------------------------- */
.cc {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.cc:hover { border-color: var(--line-2); transform: translateY(-3px); }
.cc.is-joined { border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.cc-h { display: flex; align-items: center; gap: 10px; }
.cc-h .cd-u { min-width: 34px; padding: 4px 6px; }
.cc-h .cd-u b { font: var(--t-h3); }
.cc h3 { font: var(--t-h2); }
.cc p { font: var(--t-sm); color: var(--text-2); flex: 1; }
.cc-f { display: flex; align-items: center; gap: 14px; padding-top: 11px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cc-f .stat b { color: var(--gold); }

/* --- faq ------------------------------------------------------------------ */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq-i { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq-i summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
  font: var(--t-h3); list-style: none;
  transition: background var(--d-1) var(--ease);
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary span { flex: 1; }
.faq-i summary .ic { color: var(--text-4); transition: transform var(--d-2) var(--ease); }
.faq-i[open] summary .ic { transform: rotate(180deg); }
.faq-i summary:hover { background: var(--surface-2); }
.faq-i p { padding: 0 16px 16px; font: var(--t-sm); color: var(--text-2); max-width: 74ch; }

.prog-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: var(--r-xl);
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 8%, var(--surface-2)), var(--surface) 72%);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.prog-foot canvas { border-radius: var(--r-sm); flex: none; }
.prog-foot > div { flex: 1; min-width: 200px; }
.prog-foot b { display: block; font: var(--t-h2); }
.prog-foot p { font: var(--t-sm); color: var(--text-2); margin-top: 5px; }

/* ============================================================================
   8 · APPLY
   ========================================================================= */
.page--narrow { max-width: 720px; }
.apply-back { display: inline-flex; align-items: center; gap: 5px; font: var(--t-xs); color: var(--text-3); margin-bottom: 14px; }
.apply-back .ic { transform: scaleX(-1); }
.apply-back:hover { color: var(--cyan); }
.apply-head h1 { font: var(--t-display); font-size: clamp(24px, 2.6vw, 32px); }
.apply-sub { font: var(--t-body); color: var(--text-2); margin-top: 10px; max-width: 58ch; }
.apply-steps { display: flex; gap: 8px; margin: 22px 0 12px; flex-wrap: wrap; }
.apply-step { display: flex; align-items: center; gap: 8px; font: var(--t-xs); color: var(--text-4); }
.apply-step i {
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); font-style: normal; font-weight: 700;
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.apply-step.is-on { color: var(--cyan-l); }
.apply-step.is-on i { background: var(--cyan); color: var(--cyan-t); border-color: var(--cyan); }
.apply-step.is-done { color: var(--ok); }
.apply-step.is-done i { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

.apply-body { display: flex; flex-direction: column; gap: 20px; margin: 26px 0; }
.apply-foot { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.apply-count { font: var(--t-xs); color: var(--text-4); }

.field-l { display: flex; align-items: baseline; gap: 8px; font: var(--t-h3); margin-bottom: 8px; }
.field-l i { font: var(--t-xs); font-style: normal; color: var(--text-3); font-weight: 400; }
.field-err { font: var(--t-xs); color: var(--danger); margin-top: 6px; min-height: 0; }
.field-hint { font: var(--t-xs); color: var(--text-4); margin-top: 8px; }
.field.is-err .sf, .field.is-err .chips--pick { border-color: var(--danger); }
.field.is-err .chips--pick { border-radius: var(--r); }
.sf--area { align-items: flex-start; padding: 4px 13px; }
.sf--area .sf-in { resize: vertical; min-height: 84px; line-height: 1.55; }
.chips--pick { padding: 4px 0; border: 1px solid transparent; }

.apply-stats { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.apply-stats-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: var(--t-h3); }
.apply-stats-h .ic { color: var(--gold); }

.apply-tier { display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--tier-builder) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tier-builder) 28%, transparent); --tc: var(--tier-builder); }
.apply-tier > div { flex: 1; }
.apply-tier b { display: block; font: var(--t-h2); }
.apply-tier span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 4px; }

/* Custom checkbox. The real input stays in the DOM for keyboard and screen
   readers; only its rendering is replaced. */
.checkrow { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--d-1) var(--ease); }
.checkrow:hover { border-color: var(--line-2); }
.checkrow input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox {
  width: 20px; height: 20px; flex: none; border-radius: 6px; margin-top: 1px;
  display: grid; place-items: center; color: transparent;
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.checkrow input:checked + .checkbox { background: var(--cyan); border-color: var(--cyan); color: var(--cyan-t); }
.checkrow input:focus-visible + .checkbox { outline: 2px solid var(--cyan); outline-offset: 2px; }
.checkrow > div { flex: 1; }
.checkrow b { display: block; font: var(--t-h3); font-weight: 500; }
.checkrow span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 5px; }
.checkrow.is-err { border-color: var(--danger); }

.apply-note { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); }
.apply-note canvas { border-radius: 6px; flex: none; }
.apply-note p { font: var(--t-sm); color: var(--text-2); font-style: italic; }

.apply-done { text-align: center; padding: 30px 10px; }
.apply-done canvas { margin: 0 auto 20px; border-radius: var(--r-lg); padding: 8px; background: linear-gradient(160deg, rgba(255,206,58,.12), transparent); box-shadow: 0 0 0 1px rgba(255,206,58,.16); }
.apply-done h1 { font: var(--t-display); }
.apply-done > p { font: var(--t-body); color: var(--text-2); max-width: 50ch; margin: 12px auto 0; }

/* ============================================================================
   9 · CREATOR DASHBOARD
   ========================================================================= */
.dash-top {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center;
  padding: var(--s-6); margin-bottom: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%);
}
.dash-standing { min-width: 0; }
.dash-standing-h { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.dash-standing-h b { display: block; font: var(--t-display); font-size: 26px; }
.dash-standing-h p { font: var(--t-sm); color: var(--text-2); margin-top: 4px; }
.dash-lbl { font: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-4); margin-bottom: 8px; display: block; }
.dash-nextreq { max-width: 460px; }
.dash-max { font: var(--t-body); color: var(--text-2); }
.dash-ring { text-align: center; flex: none; max-width: 220px; }
.dash-ring p { font: var(--t-sm); color: var(--text-2); font-style: italic; margin-top: 14px; }
@media (max-width: 900px) { .dash-top { grid-template-columns: 1fr; } .dash-ring { max-width: none; } .dash-nextreq { max-width: none; } }

.dash-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; }
.metric { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.metric-h { display: flex; align-items: center; gap: 9px; font: var(--t-xs); font-weight: 600; color: var(--text-3); }
.metric-ic { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); }
.metric--gold .metric-ic { color: var(--gold); background: color-mix(in srgb, var(--gold) 11%, transparent); }
.metric--cyan .metric-ic { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 11%, transparent); }
.metric-v { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px; }
.metric-v b { font: var(--t-display); font-size: 26px; font-variant-numeric: tabular-nums; }
.metric--gold .metric-v b { color: var(--gold); }
.metric-v i { font: var(--t-xs); font-style: normal; color: var(--text-4); }
.metric-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.metric-d { display: inline-flex; align-items: center; gap: 3px; font: var(--t-xs); font-weight: 700; padding: 2px 7px 2px 5px; border-radius: var(--r-pill); }
.metric-d.is-up { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.metric-d.is-down { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.metric-d.is-down .ic { transform: rotate(180deg); }

.sources { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.sources-l { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.source-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font: var(--t-sm); color: var(--text-2); }
.source-h b { color: var(--text); font-variant-numeric: tabular-nums; }
.sources-r { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 18px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sources-r canvas { border-radius: var(--r-sm); }
.sources-r p { font: var(--t-sm); color: var(--text-2); font-style: italic; }
@media (max-width: 900px) { .sources { grid-template-columns: 1fr; } }

.ms { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ms.is-ready { border-color: color-mix(in srgb, var(--gold) 34%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 7%, var(--surface)), var(--surface) 60%); }
.ms.is-claimed { opacity: .7; }
.ms-ic { width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); }
.ms.is-ready .ms-ic { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 26%, transparent); }
.ms-b { flex: 1; min-width: 0; }
.ms-b b { display: block; font: var(--t-h3); }
.ms-rw { display: block; font: var(--t-xs); color: var(--gold); margin-top: 3px; }
.ms-p { margin-top: 9px; }
.ms-p span { display: block; font: var(--t-xs); color: var(--text-4); margin-top: 5px; font-variant-numeric: tabular-nums; }
.ms-done { display: inline-flex; align-items: center; gap: 5px; font: var(--t-xs); font-weight: 600; color: var(--ok); flex: none; }
.ms-lock { color: var(--text-4); flex: none; }

.mybuild { display: flex; align-items: center; gap: 16px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--d-1) var(--ease); }
.mybuild:hover { border-color: var(--line-2); }
.mybuild-t { flex: 1; min-width: 0; color: inherit; }
.mybuild-t b { display: block; font: var(--t-h3); }
.mybuild-t span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.mybuild-t:hover b { color: var(--cyan-l); }
.mybuild-s { display: flex; gap: 16px; flex: none; }
@media (max-width: 620px) { .mybuild { flex-wrap: wrap; } .mybuild-t { flex-basis: 100%; } }

.gate { text-align: center; padding: 40px 20px; max-width: 560px; margin: 0 auto; }
.gate canvas { margin: 0 auto 22px; border-radius: var(--r-lg); padding: 9px; background: linear-gradient(160deg, rgba(255,206,58,.12), transparent); box-shadow: 0 0 0 1px rgba(255,206,58,.16); }
.gate h1 { font: var(--t-display); font-size: clamp(22px, 2.2vw, 28px); }
.gate > p { font: var(--t-body); color: var(--text-2); margin: 12px auto 0; max-width: 46ch; }
.gate-req { margin-top: 24px; padding: 18px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }

/* ============================================================================
   10 · GUIDELINES + RESOURCES
   ========================================================================= */
.doc-head { margin-bottom: var(--s-7); }
.doc-head h1 { font: var(--t-display); }
.doc-head > p { font: var(--t-body); color: var(--text-2); margin: 12px 0 16px; max-width: 62ch; }

.guide { padding: 24px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.guide-h { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.guide-n { font: var(--t-display); font-size: 30px; color: var(--text-4); line-height: 1; font-variant-numeric: tabular-nums; }
.guide-ic { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 11%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
.guide-h h2 { font: var(--t-h1); font-size: 21px; }
.guide-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.guide-col-h { display: flex; align-items: center; gap: 7px; font: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); margin-bottom: 12px; }
.guide-col-h.is-ok { color: var(--ok); }
.guide-col-h.is-no { color: var(--danger); }
.guide-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.guide-col li { font: var(--t-sm); color: var(--text-2); padding-left: 15px; position: relative; }
.guide-col li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.guide-col:first-child li::before { background: color-mix(in srgb, var(--ok) 60%, transparent); }
.guide-col:last-child li::before { background: color-mix(in srgb, var(--danger) 60%, transparent); }
@media (max-width: 720px) { .guide-rules { grid-template-columns: 1fr; gap: 18px; } }

.guide-why { padding: 14px 16px; border-radius: var(--r); background: var(--bg-1); border-left: 2px solid var(--gold); }
.guide-why b { display: block; font: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--gold); margin-bottom: 6px; }
.guide-why p { font: var(--t-sm); color: var(--text-2); max-width: 72ch; }

.doc-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); margin-top: 8px; }
.doc-foot canvas { border-radius: var(--r-sm); flex: none; }
.doc-foot > div { flex: 1; min-width: 220px; }
.doc-foot b { display: block; font: var(--t-h3); }
.doc-foot p { font: var(--t-sm); color: var(--text-2); margin-top: 5px; }

.res-pick {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 22px; margin-bottom: var(--s-6);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 8%, var(--surface-2)), var(--surface) 72%);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.res-pick canvas { border-radius: var(--r-sm); flex: none; }
.res-pick > div { flex: 1; min-width: 220px; }
.res-pick b { display: block; font: var(--t-h2); }
.res-pick p { font: var(--t-sm); color: var(--text-2); font-style: italic; margin-top: 7px; }

/* ============================================================================
   11 · DISCOVER
   ========================================================================= */
.disc-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); margin-bottom: var(--s-5);
}
.disc-hero-art { position: relative; min-height: 300px; }
.disc-hero-art a { display: block; height: 100%; }
.cover--hero { height: 100%; aspect-ratio: auto; border: 0; }
.disc-hero-b { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.disc-hero-b h1 { font: var(--t-display); font-size: clamp(24px, 2.8vw, 36px); }
.disc-hero-b > p { font: var(--t-body); color: var(--text-2); max-width: 48ch; }
@media (max-width: 900px) { .disc-hero { grid-template-columns: 1fr; } .disc-hero-art { min-height: 200px; } .disc-hero-b { padding: 22px; } }

.disc-lens { margin-bottom: var(--s-6); overflow-x: auto; }
.disc-lens::-webkit-scrollbar { height: 0; }
.disc-season-tag { display: flex; align-items: center; }

.disc-creator {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 20px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); height: 100%;
  transition: border-color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.disc-creator:hover { border-color: var(--line-2); transform: translateY(-3px); }
.disc-creator b { display: flex; align-items: center; gap: 6px; font: var(--t-h3); margin-top: 5px; }
.disc-creator > span:not(.stat) { font: var(--t-xs); color: var(--text-3); }
.disc-creator .btn { margin-top: 6px; }

/* ============================================================================
   12 · PROFILE EXPANSION
   ========================================================================= */
.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.showcase-i {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 18px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden;
}
/* The rarity colour is a corner wash, not a border or a fill. It reads
   instantly at a glance and still leaves the card legible. */
.showcase-i::after {
  content: ''; position: absolute; inset: auto -30% -60% auto; width: 140px; height: 140px;
  border-radius: 50%; opacity: .16; pointer-events: none;
}
.showcase-i.ach--common::after { background: var(--rar-common); }
.showcase-i.ach--rare::after { background: var(--rar-rare); }
.showcase-i.ach--epic::after { background: var(--rar-epic); }
.showcase-i.ach--legendary::after { background: var(--rar-legendary); opacity: .22; }
.showcase-ic {
  width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
}
.showcase-i.ach--legendary .showcase-ic { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 34%, transparent); }
.showcase-i.ach--epic .showcase-ic { color: var(--rar-epic); border-color: color-mix(in srgb, var(--rar-epic) 32%, transparent); }
.showcase-i.ach--rare .showcase-ic { color: var(--rar-rare); border-color: color-mix(in srgb, var(--rar-rare) 32%, transparent); }
.showcase-i b { font: var(--t-h3); }
.showcase-w { font: var(--t-xs); color: var(--text-4); margin-top: auto; }

.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.about-r { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.about-ic { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); }
.about-b { flex: 1; min-width: 0; }
.about-l { display: block; font: var(--t-xs); color: var(--text-4); text-transform: uppercase; letter-spacing: var(--track-caps); margin-bottom: 5px; }
.about-b b { display: block; font: var(--t-h3); }
.about-b p { font: var(--t-xs); color: var(--text-3); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.act-ic { width: 28px; height: 28px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); }
.act-ic--gold { color: var(--gold); }
.act-ic--cyan { color: var(--cyan); }
.act-t span { color: var(--text-3); }

/* --- pickers -------------------------------------------------------------- */
.pickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pickers--sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.picker {
  display: flex; flex-direction: column; gap: 0; padding: 0; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  position: relative; color: inherit;
  transition: border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.picker:hover { border-color: var(--line-2); transform: translateY(-2px); }
.picker.is-on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.picker .cover { aspect-ratio: 16/9; }
.picker-b { padding: 10px 12px; }
.picker-b b { display: block; font: var(--t-h3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-b span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; text-transform: capitalize; }
.picker-check {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cyan); color: var(--cyan-t);
}
.picker--ach { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
.picker--row { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
.picker--row b { font: var(--t-h3); flex: 1; }
.picker--row .picker-check { position: static; }

/* ============================================================================
   13 · ONBOARDING
   ========================================================================= */
.ob-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: 20px;
  background: rgba(3,4,8,.82); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity var(--d-3) var(--ease);
}
.ob-wrap.is-on { opacity: 1; }
.ob {
  width: min(620px, 100%); max-height: 90dvh; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  box-shadow: var(--e-3);
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(255,206,58,.10), transparent 58%),
    linear-gradient(160deg, var(--surface-2), var(--surface) 68%);
  transform: translateY(16px) scale(.98);
  transition: transform var(--d-3) var(--ease-out);
}
.ob-wrap.is-on .ob { transform: none; }
.ob-skip {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  background: none; border: 0; cursor: pointer;
  font: var(--t-xs); font-weight: 600; color: var(--text-4); padding: 6px 8px;
  border-radius: var(--r-sm);
  transition: color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.ob-skip:hover { color: var(--text); background: var(--surface-3); }

.ob-stage { flex: 1; min-height: 0; overflow-y: auto; padding: 40px 38px 26px; text-align: center; }
.ob-stage h1 { font: var(--t-display); margin-bottom: 12px; }
.ob-stage > p { font: var(--t-body); color: var(--text-2); max-width: 46ch; margin: 0 auto 12px; }
.ob-aside { font: var(--t-xs) !important; color: var(--text-4) !important; font-style: italic; }

.ob-face { position: relative; display: inline-block; margin-bottom: 22px; }
.ob-face canvas { border-radius: var(--r-lg); padding: 11px; background: linear-gradient(160deg, rgba(255,206,58,.13), transparent); box-shadow: var(--e-2), 0 0 0 1px rgba(255,206,58,.18); }
.ob-face--sm { margin-bottom: 16px; }
.ob-live { position: absolute; right: 8px; bottom: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); border: 2px solid var(--bg); animation: pulse 2.4s ease-in-out infinite; }

.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 22px; text-align: left; }
.ob-t { padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.ob-t-ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--cyan); margin-bottom: 9px; }
.ob-t b { display: block; font: var(--t-h3); margin-bottom: 4px; }
.ob-t span { display: block; font: var(--t-xs); color: var(--text-3); line-height: 1.5; }
@media (max-width: 560px) { .ob-grid { grid-template-columns: 1fr; } }

.ob-q { text-align: left; margin-top: 20px; }
.ob-q > label { display: block; font: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-4); margin-bottom: 9px; }

.ob-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; text-align: left; }
.ob-choice {
  display: flex; align-items: center; gap: 13px; padding: 15px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: inherit; position: relative; overflow: hidden;
  transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.ob-choice:hover { border-color: var(--cyan-d); background: var(--surface-2); transform: translateX(3px); }
.ob-choice > div { flex: 1; min-width: 0; }
.ob-choice b { display: block; font: var(--t-h3); }
.ob-choice span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.ob-choice-ic { width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); }
.ob-choice > .ic { color: var(--text-4); }

.ob-bar { flex: none; display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg-1); }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); transition: background var(--d-2) var(--ease), width var(--d-2) var(--ease); }
.ob-dots i.is-on { width: 22px; border-radius: 99px; background: var(--gold); }
.ob-dots i.is-done { background: var(--text-4); }
.ob-foot { flex: 1; display: flex; align-items: center; gap: 10px; }

@media (max-width: 560px) { .ob-stage { padding: 34px 20px 20px; } .ob-bar { padding: 14px 16px; } }

/* ============================================================================
   14 · POLISH — cross-cutting corrections found in the pass
   ========================================================================= */

/* Section rhythm. `.sec` had a fixed 38px bottom margin while the new pages
   use the space scale; unifying on --s-7 (40px) keeps every page on the same
   vertical rhythm regardless of which sheet styled it. */
.sec { margin-bottom: var(--s-7); }

/* Cards, tiles, achievements and milestones were each setting their own
   focus-visible implicitly via the global rule, which draws a rectangle
   through a rounded card. Matching the outline to the element's own radius. */
.card:focus-visible, .tile:focus-visible, .ach:focus-visible,
.notif:focus-visible, .picker:focus-visible, .ob-choice:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--r-lg);
}

/* Every interactive surface fx.js can ripple needs its own stacking context
   and a clip, or the wave paints outside the control. Declared here rather
   than written by fx.js at runtime so the first click costs no style read.

   .nav-i is deliberately ABSENT from both this list and the ripple selector in
   fx.js: its active indicator is a pseudo-element drawn 12px outside the row,
   so clipping the row to hide a ripple would also delete the entire active
   state. A nav row already reports its click by becoming the active page,
   which is a stronger acknowledgement than a ripple. */
.btn, .chip, .tab, .icobtn, .prompt, .post-btn, .cv, .tile, .notif, .ach,
.seg-i, .menu-i, .ob-choice, .picker, .side-search {
  position: relative; overflow: hidden;
}

/* Toolbar wrapping. Three of the new pages put tabs, chips and a segmented
   control in one .toolbar; without this they compress each other rather than
   wrapping, and the last control loses its labels first. */
.toolbar > * { flex: none; }
.toolbar .tabs, .toolbar .chips { flex: 0 1 auto; }

@media (max-width: 560px) {
  .tiers { grid-template-columns: 1fr; }
  .dash-metrics { grid-template-columns: 1fr 1fr; }
  .showcase { grid-template-columns: 1fr 1fr; }
  .ach-head { padding: var(--s-5); }
  .prog-hero { padding: var(--s-5); }
}

/* ============================================================================
   15 · IDENTITY — sign in, account, and the app switcher

   Bob is two apps sharing one account. Everything in this section exists to
   make that legible: which app you are in, who you are signed in as, and which
   of the two balances on your account you are looking at.
   ========================================================================= */

/* --- app switcher (sidebar) ----------------------------------------------- */
.appsw {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 10px; padding: 8px 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text-3); text-align: left;
  transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.appsw:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }
.appsw-ic {
  width: 26px; height: 26px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  color: var(--gold);
}
.appsw-t { flex: 1; min-width: 0; }
.appsw-t b { display: block; font: var(--t-xs); font-weight: 700; color: var(--text); }
.appsw-t span { display: block; font: var(--t-xs); font-size: 10.5px; color: var(--text-4); }
.appsw > .ic { color: var(--text-4); }
body.is-rail .appsw-t, body.is-rail .appsw > .ic { display: none; }
body.is-rail .appsw { justify-content: center; padding: 8px 0; }
@media (max-width: 1180px) {
  .appsw-t, .appsw > .ic { display: none; }
  .appsw { justify-content: center; padding: 8px 0; }
}
@media (max-width: 860px) {
  .appsw-t { display: block; }
  .appsw > .ic { display: block; }
  .appsw { justify-content: flex-start; padding: 8px 9px; }
}

/* --- switcher dialog ------------------------------------------------------ */
.switch-lead { font: var(--t-body); color: var(--text-2); margin-bottom: 16px; }
.switch-apps { display: grid; gap: 10px; margin-bottom: 16px; }
.switch-app {
  display: flex; align-items: center; gap: 13px; padding: 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: inherit; text-align: left; position: relative; overflow: hidden;
  transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.switch-app:hover { border-color: var(--cyan-d); background: var(--surface-2); transform: translateX(3px); }
/* The room you are already in is not a button. Making it look clickable and
   then doing nothing on click is a small lie the user notices immediately. */
.switch-app.is-here { cursor: default; border-color: var(--line-2); background: var(--bg-1); }
.switch-app.is-here:hover { transform: none; border-color: var(--line-2); background: var(--bg-1); }
.switch-app > div { flex: 1; min-width: 0; }
.switch-app b { display: block; font: var(--t-h2); }
.switch-app span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.switch-ic {
  width: 42px; height: 42px; flex: none; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--cyan);
}
.switch-app.is-here .switch-ic { color: var(--gold); background: color-mix(in srgb, var(--gold) 11%, transparent); border-color: color-mix(in srgb, var(--gold) 24%, transparent); }
.switch-app > .ic { color: var(--text-4); }

.switch-who {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r);
}
.switch-who > div { flex: 1; min-width: 0; }
.switch-who b { display: block; font: var(--t-h3); }
.switch-who span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.switch-who canvas { border-radius: 6px; flex: none; }
.switch-av { width: 34px; height: 34px; font-size: 12px; background: linear-gradient(135deg,#2cd4e8,#1a6f8c); }

/* --- sign in -------------------------------------------------------------- */
.auth { display: flex; flex-direction: column; gap: 14px; }
.auth-head { display: flex; align-items: center; gap: 14px; }
.auth-head canvas { border-radius: var(--r); flex: none; padding: 6px; background: linear-gradient(160deg, rgba(255,206,58,.12), transparent); box-shadow: 0 0 0 1px rgba(255,206,58,.16); }
.auth-head h3 { font: var(--t-h1); font-size: 21px; }
.auth-sub { font: var(--t-sm); color: var(--text-2); margin-top: 5px; max-width: 44ch; }
.auth-reason { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--cyan) 9%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent); font: var(--t-sm); color: var(--text); }
.auth-reason .ic { color: var(--cyan); flex: none; }
.auth-err { font: var(--t-sm); color: var(--danger); min-height: 1.2em; }
.auth-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-toggle, .auth-forgot {
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font: var(--t-xs); font-weight: 600; color: var(--cyan);
}
.auth-toggle:hover, .auth-forgot:hover { color: var(--cyan-l); text-decoration: underline; }
.auth-forgot { color: var(--text-4); font-weight: 500; }
.auth-note { display: flex; align-items: flex-start; gap: 9px; padding-top: 4px; font: var(--t-xs); color: var(--text-4); }
.auth-note .ic { flex: none; margin-top: 1px; }

/* --- account panel -------------------------------------------------------- */
.acct { display: flex; flex-direction: column; gap: 18px; }
.acct-head { display: flex; align-items: center; gap: 14px; }
.acct-av { width: 54px; height: 54px; font-size: 19px; background: linear-gradient(135deg,#2cd4e8,#1a6f8c); }
.acct-head b { display: block; font: var(--t-h1); font-size: 20px; }
.acct-head > div > span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; }

/* THE TWO BALANCES. Deliberately not a matched pair of grey boxes: credits are
   cyan and leave for the Launcher, Bolts are gold and stay here. Someone
   glancing at this must be able to tell they are unrelated currencies without
   reading the captions. */
.acct-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bal { display: flex; flex-direction: column; gap: 10px; padding: 15px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.bal-ic { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; }
.bal b { display: block; font: var(--t-display); font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bal > div > span { display: block; font: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); margin-top: 3px; }
.bal p { font: var(--t-xs); color: var(--text-3); margin-top: 7px; }
.bal .btn { margin-top: auto; }
.bal--credits { background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 8%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--cyan) 24%, transparent); }
.bal--credits .bal-ic { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 13%, transparent); }
.bal--credits b, .bal--credits > div > span { color: var(--cyan-l); }
.bal--bolts { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 8%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--gold) 24%, transparent); }
.bal--bolts .bal-ic { color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent); }
.bal--bolts b, .bal--bolts > div > span { color: var(--gold); }
@media (max-width: 620px) { .acct-bal { grid-template-columns: 1fr; } }

.acct-key-row { display: flex; align-items: center; gap: 14px; padding: 15px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.acct-key-row > div { flex: 1; min-width: 0; }
.acct-key {
  display: block; font-family: var(--font-mono); font-size: 15px; letter-spacing: .04em;
  color: var(--text); margin: 4px 0 6px; word-break: break-all;
}
.acct-links { display: grid; gap: 8px; }
.acct-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: inherit; text-align: left; position: relative; overflow: hidden;
  transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.acct-link:hover { border-color: var(--line-2); background: var(--surface-2); }
.acct-link > div { flex: 1; min-width: 0; }
.acct-link b { display: block; font: var(--t-h3); }
.acct-link span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 2px; }
.acct-link-ic { width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); }
.acct-link > .ic { color: var(--text-4); }

/* --- account chip in the sidebar ------------------------------------------ */
.me-bal { display: flex; gap: 10px; align-items: center; }
.me-bal i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font: var(--t-xs); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.me-cr { color: var(--cyan); }
.me-bo { color: var(--gold); }
.me--out .me-tt b, .me--wait .me-tt b { color: var(--text); }
.me--wait { cursor: default; opacity: .75; }
.av--ghost {
  width: 32px; height: 32px; background: var(--surface-2);
  border: 1px dashed var(--line-2); color: var(--text-4);
  display: grid; place-items: center;
}

/* --- topbar currency pills ------------------------------------------------ */
.pill-cr .ic { color: var(--cyan); }
.pill-bo .ic { color: var(--gold); }
/* Under 820px only ONE pill survives, and it is credits — the balance that
   costs real money and that Bob spends without asking. Bolts are visible on
   Home, on Profile and in the account panel; credits running out mid-build is
   the failure worth warning about on a phone. */
@media (max-width: 820px) { .topbar .pill-bo { display: none; } }
@media (max-width: 620px) { .topbar .pill-cr { display: none; } }

/* At phone width the switcher card runs out of room: a 42px icon, a two-line
   title, a subtitle and an 88px "You are here" badge do not fit across 199px,
   so "Bob HQ" wrapped to two lines and the badge shoved the text into a
   column 9px wide. Measured, not guessed.

   The badge is the thing to move — it is a label, not an action, and it reads
   perfectly well under the title. */
@media (max-width: 480px) {
  .switch-app { flex-wrap: wrap; row-gap: 8px; padding: 14px; }
  .switch-app > div { flex: 1 1 auto; min-width: 0; }
  .switch-app b { font-size: 16px; }
  .switch-app .badge { order: 3; flex-basis: 100%; justify-content: center; }
  .switch-ic { width: 36px; height: 36px; }
  .switch-who { flex-wrap: wrap; row-gap: 10px; }
  .switch-who > div { flex: 1 1 100%; order: 2; }
}

/* ============================================================================
   16 · FOCUS RINGS ON WRAPPED INPUTS

   HQ's text fields are an input INSIDE a styled wrapper (.sf, .comp-box, the
   search palette). The wrapper already reports focus via :focus-within — a
   cyan border plus a soft ring. But app.css also has a global
   `:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px }`,
   which the inner <input> matches the moment it is focused.

   So a focused field drew TWO concentric cyan rings at different radii: the
   wrapper's rounded one, and the input's rectangular one 2px outside it,
   overlapping at the corners. It reads as a rendering glitch, and it is worse
   in Safari, which also parks its password-manager button inside the field.

   Suppressing the inner outline is safe rather than an accessibility
   regression: the visible focus indicator is not being removed, it is being
   drawn once instead of twice, by the element that actually looks like the
   control. Any input NOT inside a wrapper keeps the global ring.
   ========================================================================= */
.sf .sf-in:focus-visible,
.sf .sf-in:focus,
.comp-box .comp-ta:focus-visible,
.comp-box .comp-ta:focus,
.pal-h .pal-in:focus-visible,
.pal-h .pal-in:focus {
  outline: none;
  box-shadow: none;
}

/* The wrapper is what shows focus, so it must be unmistakable on its own —
   slightly stronger than the old ring now that it is the only one. */
.sf:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent);
}

/* ============================================================================
   17 · TWO SMALL-SCREEN DEFECTS FOUND BY MEASURING

   Both were invisible in code review and obvious the moment the rendered boxes
   were measured at 280px.

   (a) THE BELL BADGE WAS EATING THE BELL — 49% of the icon covered.

   Root cause is a collision between two earlier decisions: §14 gives .icobtn
   `overflow: hidden` so ripples stay inside the control, and the unread badge
   is absolutely positioned at the top-right. Clipped to the button, the badge
   cannot sit outside it the way a notification badge normally does, so it gets
   pushed inward on top of the glyph — and "9+" is wide enough to swallow it.

   Shrinking the badge and pinning it to the exact corner drops the overlap to
   ~15%, which is what a badge is supposed to look like. The ring is a
   box-shadow rather than a border so it separates the badge from the icon
   without making the badge box any larger.
   ========================================================================= */
.bell-n {
  top: 0; right: 0;
  min-width: 15px; height: 15px; padding: 0 3px;
  font-size: 9px; line-height: 1;
  border: 0;
  box-shadow: 0 0 0 2px var(--bg-1);
}

/* (b) TAB BAR LABELS COLLIDED.

   Five equal cells across 280px is 56px each; "Workshop" measured 56px and
   "Community" 64px, so both filled or overflowed their cell and the two words
   ran together with no gap.

   Labels stay — a bottom bar of unlabelled icons is a guessing game — but they
   get a smaller size and an ellipsis as the backstop, so a longer word added
   later degrades instead of colliding. */
@media (max-width: 400px) {
  .tabbar a { padding: 0 3px; min-width: 0; }
  .tabbar a span {
    font-size: 9.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}