/* ═════════════════════════════════════════════════════════════════════
   NORMIE design layer (loaded after styles.css, wins over it).
   A clean white dashboard + a colourful voxel management game.
   White dominates, yellow = primary actions, red = brand + selected + important.
   ═════════════════════════════════════════════════════════════════════ */
:root {
  --n-red: #E60012; --n-red-lo: #B3000E; --n-red-soft: #FDE7E9;
  --n-yel: #FFC900; --n-yel-lo: #E0A800; --n-yel-soft: #FFF6D1;
  --bg: #FFFFFF; --bg-dot: transparent;
  --surface: #FFFFFF; --surface-2: #F7F7F7; --surface-3: #F0F0F0;
  --line: #EAEAEA; --line-strong: #DADADA; --card-bd: #EAEAEA;
  --ink: #171717; --ink-2: #404040; --muted: #737373;
  --up: #16A34A; --up-soft: #DCFCE7; --down: #E60012; --down-soft: #FDE7E9;
  --yellow: var(--n-yel); --yellow-lo: var(--n-yel-lo); --black: #171717;
  --phos: var(--n-yel); --phos-hi: #FFD43D; --phos-lo: var(--n-yel-lo); --phos-deep: #8A6A00; --phos-soft: var(--n-yel-soft); --phos-ink: #171717;
  --red: var(--n-red); --red-hi: #FF2A3B; --red-lo: var(--n-red-lo); --red-soft: var(--n-red-soft);
  --gold: var(--n-yel); --amber: #8A6A00; --amber-soft: var(--n-yel-soft);
  --tile: var(--n-red); --tile-ink: #FFFFFF;
  --key: #FFFFFF; --key-hi: #FFFFFF; --key-lo: #E2E2E2; --key-bd: #DEDEDE;
  --r: 14px; --r-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px -12px rgba(0, 0, 0, 0.18);
  --f-brick: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --top-h: 66px; --side-w: 220px;
  color-scheme: light;
}
body { background: var(--bg); background-image: none; }
::selection { background: var(--n-yel); color: #171717; }
:focus-visible { outline: 2px solid var(--n-red); outline-offset: 3px; }
.ext { text-decoration-color: var(--n-yel); }

/* ── top bar ── */
.topbar { background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--line); }
.brand { gap: 10px; }
.brand-logo { width: 40px; height: 40px; border-radius: 10px; }
.brand-name { font-family: var(--f-body); font-weight: 800; font-size: 25px; letter-spacing: 0.02em; color: #171717; }
.n-word { display: inline-block; height: 1em; width: auto; vertical-align: middle; }
.topnav a { border-radius: 10px; font-size: 14px; padding: 8px 14px; }
.topnav a.on { background: var(--n-yel); color: #171717; box-shadow: inset 0 -3px 0 var(--n-yel-lo); }
.top-right { gap: 10px; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; background: var(--n-red); color: #fff; font: 800 12px/1 var(--f-body); letter-spacing: 0.06em; }
.live-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s steps(1) infinite; }
.live-tag.off { background: var(--surface-3); color: var(--muted); }
.live-tag.off::before { background: var(--muted); animation: none; }
.on-pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.on-pill svg { width: 17px; height: 17px; }
.btn-wallet { background: var(--n-red); color: #fff; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.05), 0 3px 0 0 var(--n-red-lo); }
.btn-wallet:hover { background: #F2101F; }
.btn-wallet svg { width: 18px; height: 18px; }
.ca-chip { height: 38px; box-shadow: inset 0 0 0 1px var(--line); }
.ca-tag { background: var(--n-red); color: #fff; }
.ca-chip.soon .ca-tag { color: #fff; }
.x-link .xn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #171717; color: #fff; }
.x-link .xn svg { width: 16px; height: 16px; }
.mode-pill.live-pill { background: var(--up-soft); color: var(--up); }

/* ── sidebar ── */
.sidebar { background: #fff; border-right: 1px solid var(--line); padding: 16px 12px; }
.nav a, .nav-shill { border-radius: 10px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.nav a.on { background: var(--n-red); color: #fff; box-shadow: 0 3px 0 0 var(--n-red-lo); font-weight: 800; }
.nav a.on .nav-ic { color: #fff; }
.nav a[data-r="restaurant"] .nav-ic { color: var(--n-red); }
.nav a[data-r="restaurant"].on .nav-ic { color: #fff; }
.side-card { box-shadow: inset 0 0 0 1px var(--line); justify-items: start; gap: 4px; }
.side-card img, .side-card .bot { width: 110px; height: auto; justify-self: center; animation: sideBob 2.6s ease-in-out infinite; }
.side-card b { font-size: 20px; }
.side-card b em { font-style: normal; color: var(--n-red); display: block; }
.side-card:hover { box-shadow: inset 0 0 0 2px var(--n-red), var(--shadow); }

/* ── ticker: white strip, slashes in between ── */
.tape { background: #fff; color: var(--muted); border-bottom: 1px solid var(--line); height: 36px; font-size: 12.5px; }
.tape-item b { color: #171717; }
.tape-item .p { color: var(--muted); }
.tape-item .up { color: var(--up); } .tape-item .down { color: var(--n-red); }
.tape-sep { color: #C8C8C8; font-weight: 400; }
.tape-ic { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; vertical-align: -3px; background: var(--surface-3); }

/* ── cards + buttons ── */
.card { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--card-bd), var(--shadow); }
.card-head h2 { font-size: 16.5px; }
.btn-primary { background: var(--n-yel); color: #171717; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.05), 0 4px 0 0 var(--n-yel-lo); }
.btn-primary:hover { background: #FFD43D; }
.btn-primary:active:not([disabled]) { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.05), 0 1px 0 0 var(--n-yel-lo); }
.btn-red { background: var(--n-red); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.05), 0 4px 0 0 var(--n-red-lo); }
.btn-red:hover { background: #F2101F; }
.btn-ghost { background: #fff; box-shadow: inset 0 0 0 1.5px #171717, 0 3px 0 0 #D4D4D4; }
.seg button.on { background: var(--n-red); color: #fff; }
.live-dot::before { background: var(--up); }
.page-head h1::before { background: var(--n-red); box-shadow: inset 0 -3px 0 var(--n-red-lo); }
.new-badge { background: var(--n-red); color: #fff; }
.side-sell { background: var(--n-red-soft); color: var(--n-red); }
.feed.timeline .fi:has(.side-sell) > div { box-shadow: inset 4px 0 0 var(--n-red); }
.toast { border-radius: var(--r); }
.bo-track i, .lvl-track i, .lvl-bar .lvl-track i { background: var(--n-yel); box-shadow: inset 0 -3px 0 var(--n-yel-lo); }
.up-room.on { background: var(--n-yel); }
.yb-row.on { background: var(--n-yel-soft); box-shadow: inset 0 0 0 1.5px var(--n-yel); }
.job.hot { background: var(--n-red-soft); box-shadow: inset 0 0 0 2px var(--n-red), var(--shadow); }
.job:hover { box-shadow: inset 0 0 0 2px var(--n-red), var(--shadow); }
.av { background: var(--surface-3); }

/* ── the NORMIE pixel wordmark ── */
.n-wordmark { display: block; width: min(100%, 420px); height: auto; margin: 0 0 6px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.06)); }
.n-wordmark rect { shape-rendering: crispEdges; }

/* ═════════ home ═════════ */
.home { gap: 16px; }
.hero2 { grid-template-columns: minmax(300px, 0.66fr) minmax(0, 1.9fr) 290px; gap: 8px 14px; }
.hero2-copy { gap: 16px; padding: 4px 0 0 4px; align-self: center; }
.hero2-office { margin: -6px -6px 0 0; height: clamp(460px, 40vw, 640px); -webkit-mask-image: none; mask-image: none; }
.hero2-h { font-size: clamp(26px, 2.1vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
.hero2-h em { font-style: normal; color: var(--n-red); background: none; padding: 0; }
.hero2-p { font-size: 15.5px; color: var(--ink-2); max-width: 40ch; }
.hero2-cta { display: grid; gap: 12px; justify-items: start; }
.hero2-cta .btn { min-width: 230px; }
.hero2-cta .ic-burger { width: 26px; height: 22px; }
.hero2-cta .ic-play { width: 22px; height: 22px; fill: #171717; }
.hero2-cta .ic-play path { fill: #fff; }
.hero-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hero-note b { color: var(--ink); }
.ps-row { border-radius: 12px; justify-content: flex-start; gap: 14px; }
.ps-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.ps-ic svg { width: 34px; height: 34px; }
.ps-row b { font-size: 25px; }
.ps-row b.up { color: var(--up); }
.ps-mini { gap: 4px 14px; }
.ps-mini span { display: inline-flex; align-items: center; gap: 6px; }
.ps-mini span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.ps-mini span.r::before { background: var(--n-red); }
.ps-mini span.y::before { background: var(--n-yel); }
.ra-card .card-head h2::before { display: inline-block; content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--n-red); box-shadow: none; animation: blink 1.4s steps(1) infinite; }
.ra-item b { color: var(--ink); }

/* normie cards (the crew in the restaurant) */
.ncrew { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ncard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 12px 14px; border: 0; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--card-bd), var(--shadow); text-align: left; cursor: pointer; color: var(--ink); transition: transform 0.12s ease, box-shadow 0.12s; }
.ncard:hover, .ncard:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--n-red), var(--shadow); outline: none; }
.ncard.hot { background: var(--n-yel-soft); box-shadow: inset 0 0 0 2px var(--n-red), var(--shadow); }
.ncard-av { grid-row: 1 / 4; width: 62px; height: 62px; border-radius: 12px; overflow: hidden; background: var(--n-yel-soft); display: grid; place-items: end center; }
.ncard-av .bot { width: 58px; height: 58px; }
.ncard b { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.ncard small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.ncard .nc-lv { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink); }
.ncard .nc-lv svg { width: 16px; height: 16px; color: var(--n-red); }
.ncard .nc-go { display: inline-flex; align-items: center; gap: 4px; color: var(--n-red); font-weight: 800; white-space: nowrap; }

/* your normies · progress · tasks */
.trio3 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.75fr) minmax(0, 0.95fr); gap: 14px; align-items: stretch; }
.trio3 .card-head .sub { margin-left: auto; font-weight: 700; color: var(--ink-2); }
.yn-card .card-head h2::before { display: inline-block; content: ''; width: 8px; height: 8px; border-radius: 50%; background: #171717; box-shadow: none; }
.yn-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 14px 14px; }
.yn-slot { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 92px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; }
.yn-slot svg { width: 22px; height: 22px; color: #B5B5B5; }
a.yn-slot:hover { box-shadow: inset 0 0 0 2px var(--n-red); color: var(--ink); }
a.yn-slot .plus { font-size: 26px; line-height: 1; font-weight: 400; color: var(--ink); }
.yb-row { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.yb-row.on { box-shadow: inset 0 0 0 2px var(--n-yel); background: var(--n-yel-soft); }
.np-card { display: grid; grid-template-rows: auto 1fr auto; }
.np-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: stretch; padding: 4px 16px 6px; }
.np-step { position: relative; display: grid; grid-template-rows: auto auto; gap: 6px; padding: 6px 6px 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: center; font-size: 12px; color: var(--ink-2); }
.np-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--surface-2); display: block; }
.np-step b { display: block; font-size: 12.5px; color: var(--ink); }
.np-step small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.np-step.lock img { filter: grayscale(1) contrast(0.85) brightness(1.08); opacity: 0.75; }
.np-step.lock b, .np-step.lock small { color: #A3A3A3; }
.np-step.now { box-shadow: inset 0 0 0 2px var(--n-red); background: var(--n-red-soft); }
.np-step.now b, .np-step.now small { color: var(--n-red); }
.np-step.done { box-shadow: inset 0 0 0 1.5px var(--n-yel); }
.np-step:not(:last-child)::after { content: '›'; position: absolute; right: -8px; top: 34%; z-index: 1; width: 9px; text-align: center; font-weight: 800; color: #171717; font-size: 16px; }
.np-step.lock:not(:last-child)::after { color: #BDBDBD; }
.np-track { position: relative; height: 6px; margin: 10px 22px 16px; border-radius: 999px; background: var(--surface-3); }
.np-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--n-yel); box-shadow: inset 0 -2px 0 var(--n-yel-lo); }
.np-track u { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #BDBDBD; }
.np-track u.on { box-shadow: 0 0 0 2px var(--n-yel-lo); background: var(--n-yel); }
.np-caption { padding: 0 16px 14px; font-size: 13px; color: var(--ink-2); }
.tu-card { display: grid; align-content: start; gap: 12px; padding-bottom: 16px; }
.tu-card > :not(.card-head) { margin: 0 16px; }
.tu-lv { margin-left: auto; font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.tu-lv b { color: var(--up); }
.tu-list { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.tu-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.tu-box { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px #C9C9C9; }
.tu-box.on { background: var(--n-yel); box-shadow: inset 0 0 0 1.5px var(--n-yel-lo); }
.tu-box.on::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #171717; border-bottom: 2px solid #171717; transform: rotate(-45deg) translate(1px, -1px); }
.tu-list .v { font-weight: 700; color: var(--ink); white-space: nowrap; font-size: 13px; }
.tu-note { font-size: 11.5px; color: var(--muted); }
.tu-card .btn { width: auto; }

/* normies right now (light log) */
.minds { --mbg: #FFFFFF; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--card-bd), var(--shadow); background-image: none; }
.minds-head { border-bottom: 1px solid var(--line); }
.minds-live { color: var(--n-red); } .minds-live i { background: var(--n-red); }
.minds-head h2 { color: var(--ink); font-family: var(--f-body); letter-spacing: -0.01em; text-transform: none; font-size: 17px; }
.minds-n { color: var(--muted); }
.mr-item { border-bottom: 1px solid var(--line); }
.mr-av .av { background: var(--surface-3); }
.mr-top { color: var(--muted); } .mr-top b { color: var(--ink); }
.mr-act { color: var(--ink-2); } .mr-buy .mr-act { color: var(--up); } .mr-sell .mr-act { color: #8A6A00; } .mr-blocked .mr-act { color: var(--n-red); } .mr-lvl .mr-act { color: var(--n-red); }
.mr-trade { background: var(--surface-2); color: var(--ink); }
.mr-trade.buy, .mr-trade.up { color: var(--up); } .mr-trade.down { color: var(--n-red); }
.mr-tx { color: var(--muted); } .mr-tx:hover { color: var(--n-red); }
.mr-text { color: var(--ink); }
.mr-why { color: var(--n-red); }
.mr-empty { color: var(--muted); }
.minds-list { scrollbar-color: #DDD transparent; }
.bonded-card .phone-stage { background: radial-gradient(55% 45% at 50% 50%, rgba(230, 0, 18, 0.12), transparent 72%); }

@media (max-width: 1500px) {
  .hero2 { grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.6fr); grid-template-areas: "copy office" "side side"; }
  .ncrew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trio3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trio3 .np-card { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 1060px) {
  .hero2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "office" "side"; }
  .hero2-office { margin: 0 -16px; height: clamp(340px, 82vw, 560px); }
  .hero2-cta { grid-auto-flow: column; justify-content: start; }
}
@media (max-width: 760px) {
  .ncrew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ncard { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .ncard-av { grid-row: auto; }
  .trio3 { grid-template-columns: minmax(0, 1fr); }
  .np-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .np-step:nth-child(4)::after { display: none; }
  .hero2-cta { grid-auto-flow: row; }
  .hero2-cta .btn { min-width: 0; width: 100%; }
}

/* ═════════ labels over the restaurant workers ═════════ */
.hn {
  position: absolute; left: 0; top: 0; display: grid; gap: 4px; padding: 5px 6px 6px; min-width: 0;
  border: 0; border-radius: 10px; background: #fff; color: #171717; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 2px var(--n-red), 0 8px 18px -8px rgba(0, 0, 0, 0.45); pointer-events: auto;
  transform-origin: 50% 100%; will-change: transform; font-family: var(--f-body);
  transition: box-shadow 0.15s;
}
.hn::after { content: ''; position: absolute; left: 50%; top: 100%; width: 11px; height: 11px; margin: -5px 0 0 -5.5px; background: #fff; transform: rotate(45deg); box-shadow: 2px 2px 0 0 var(--n-red); border-radius: 0 0 2px 0; }
.hn-top { display: flex; align-items: center; gap: 7px; }
.hn-av { width: 22px; height: 22px; flex: none; border-radius: 6px; overflow: hidden; background: var(--n-yel-soft); display: grid; place-items: end center; }
.hn-av .bot { width: 22px; height: 22px; }
.hn-t { display: grid; line-height: 1.12; min-width: 0; }
.hn-t b { font-weight: 800; font-size: 13.5px; letter-spacing: -0.01em; }
.hn-t small { display: none; font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.hn.hot .hn-t small, .hn:hover .hn-t small, .hn:focus-visible .hn-t small { display: block; }
.hn.lifted::before { content: ''; position: absolute; left: 50%; top: calc(100% + 4px); width: 2px; height: var(--tail, 0px); margin-left: -1px; background: var(--n-red); opacity: 0.75; }
.hn-cta { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; border-radius: 7px; background: var(--n-yel); box-shadow: inset 0 -2px 0 var(--n-yel-lo); font-weight: 800; font-size: 11px; white-space: nowrap; color: #171717; }
.hn-cta svg { width: 12px; height: 12px; color: var(--n-red); flex: none; }
.hn:hover, .hn.hot, .hn:focus-visible { outline: none; box-shadow: 0 0 0 2.5px var(--n-red), 0 0 0 6px rgba(255, 201, 0, 0.55), 0 12px 24px -8px rgba(0, 0, 0, 0.5); }
.hn.hot .hn-cta, .hn:hover .hn-cta { background: var(--n-red); color: #fff; box-shadow: inset 0 -2px 0 var(--n-red-lo); }
.hn.hot .hn-cta svg, .hn:hover .hn-cta svg { color: var(--n-yel); }
.rs-say { position: absolute; left: 0; top: 0; padding: 7px 12px; border-radius: 12px; background: #fff; color: #171717; font: 800 14px/1.15 var(--f-body); white-space: nowrap; box-shadow: 0 0 0 2px #171717, 0 10px 22px -10px rgba(0, 0, 0, 0.5); pointer-events: none; animation: sayIn 0.25s ease-out; }
.rs-say::after { content: ''; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; transform: rotate(45deg); box-shadow: 2px 2px 0 0 #171717; }
.rs-say.big { font-size: 30px; padding: 10px 20px; letter-spacing: -0.01em; }
.rs-say.quit { background: var(--n-red); color: #fff; box-shadow: 0 0 0 3px #171717, 0 12px 26px -10px rgba(0, 0, 0, 0.55); }
.rs-say.quit::after { background: var(--n-red); }
.rs-say.free { background: var(--n-yel); }
.rs-say.free::after { background: var(--n-yel); }
@keyframes sayIn { from { opacity: 0; margin-top: 10px; } }

/* ═════════ the quit story (full-screen overlay after a launch) ═════════ */
.qs-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(23, 23, 23, 0.62); padding: 18px; animation: qsIn 0.3s ease-out; }
@keyframes qsIn { from { opacity: 0; } }
.qs-box { position: relative; width: min(1180px, 100%); height: min(720px, calc(100vh - 36px)); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); }
.qs-stage { position: absolute; inset: 0; background: linear-gradient(#FFFFFF, #F7F7F7); }
.qs-ui { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.qs-skip { pointer-events: auto; position: absolute; right: 16px; top: 16px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: #171717; color: #fff; font: 800 14px/1 var(--f-body); cursor: pointer; }
.qs-skip:hover { background: var(--n-red); }
.qs-cap { position: absolute; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; padding: 12px 22px; border-radius: 12px; background: #171717; color: #fff; font: 800 clamp(18px, 2.6vw, 30px)/1.1 var(--f-body); letter-spacing: 0.01em; white-space: nowrap; transition: opacity 0.35s, transform 0.35s; }
.qs-cap.on { opacity: 1; transform: translate(-50%, 0); }
.qs-cap.y { background: var(--n-yel); color: #171717; }
.qs-cap.g { background: var(--up); }
.qs-fade { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.4s; }
.qs-fade.on { opacity: 1; }
.qs-title { position: absolute; left: 18px; top: 16px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); pointer-events: none; }
.qs-title .av { width: 34px; height: 34px; border-radius: 8px; }
.qs-title b { display: block; color: var(--ink); font-size: 14px; }
@media (max-width: 700px) { .qs-box { height: min(560px, calc(100vh - 36px)); } .rs-say.big { font-size: 22px; } }

/* ═════════ The Burger Job (full restaurant page) ═════════ */
.rj { gap: 16px; }
.rj-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rj-head h1 { font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.03em; }
.rj-head h1 em { font-style: normal; color: var(--n-red); }
.rj-head p { color: var(--ink-2); max-width: 64ch; margin-top: 6px; }
.rj-counters { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.rj-count { display: grid; gap: 2px; padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); min-width: 170px; }
.rj-count b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.rj-count small { font: 800 11px/1.2 var(--f-body); letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.rj-count.red b { color: var(--n-red); }
.rj-count.grn b { color: var(--up); }
.rj-stage { position: relative; height: clamp(520px, 72vh, 860px); border-radius: var(--r); background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.rj-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: grid; gap: 6px; }
.rj-zoom button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); font: 800 20px/1 var(--f-body); cursor: pointer; }
.rj-zoom button:hover { box-shadow: inset 0 0 0 2px var(--n-red); }
.rj-tip { position: absolute; left: 14px; bottom: 14px; z-index: 6; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--ink-2); }
.rj-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1060px) { .rj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rj-counters { margin-left: 0; } }

/* footer */
.foot-brand b { font-family: var(--f-body); font-weight: 800; }
.foot-brand img { border-radius: 6px; }

/* offices page */
.of-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; }
#of-steps .np-step { border: 0; cursor: pointer; font: inherit; }
#of-steps .np-step:hover { box-shadow: inset 0 0 0 2px var(--n-red); }
#of-info h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
@media (max-width: 900px) { .of-grid { grid-template-columns: minmax(0, 1fr); } }

/* page heroes */
.pg-big { font-size: clamp(48px, 5.6vw, 92px); }
.pg-big em { color: var(--n-red); }
.pg-hero-art img { border-radius: var(--r); }
.bb-num { background: var(--n-yel); color: #171717; }
.bb-tabs button.on { background: var(--n-red); color: #fff; box-shadow: 0 3px 0 var(--n-red-lo); }
.bb-pick.on { box-shadow: inset 0 0 0 2px var(--n-red); background: var(--n-yel-soft); }
.bb-sitem.on { box-shadow: inset 0 0 0 2px var(--n-red); }

/* My Normies: living characters */
.mn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mn-grid:empty { display: none; }
.mn-card { display: grid; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--card-bd), var(--shadow); overflow: hidden; color: var(--ink); transition: transform 0.12s, box-shadow 0.12s; }
.mn-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--n-red), var(--shadow); }
.mn-art { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-2); }
.mn-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-bot { position: absolute; left: 10px; bottom: 6px; width: 54px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.15)); }
.mn-bot .bot { width: 54px; height: auto; }
.mn-body { display: grid; gap: 6px; padding: 12px 14px 14px; }
.mn-body > b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.mn-body small { color: var(--muted); font-size: 12.5px; }
.mn-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.mn-go { font-weight: 800; font-size: 13px; color: var(--n-red); }
.ncard .nc-lv { white-space: nowrap; gap: 8px; min-width: 0; }
.ncard .nc-lv > span:first-child { color: var(--muted); font-weight: 700; }
.ncard small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard b, .ncard small, .ncard .nc-lv { grid-column: 2; }
@media (max-width: 1700px) { .ncard { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; gap: 2px 10px; } .ncard-av { width: 52px; height: 52px; } .ncard-av .bot { width: 48px; height: 48px; } .ncard .nc-go svg { display: none; } }
@media (max-width: 900px) { .on-pill { display: none; } }
@media (max-width: 700px) {
  .live-tag { display: none; }
  .topbar-in { gap: 8px; }
  .btn-wallet { padding: 0 12px 2px; font-size: 13px; }
  .btn-wallet svg { display: none; }
  .brand-name { font-size: 21px; }
  .hn-cta { font-size: 10px; padding: 3px 6px; }
  .np-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.nw { white-space: nowrap; }

/* the Normie who just quit (Burger Job page after a launch) */
.rj-quit { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px var(--n-red), 0 14px 30px -12px rgba(0, 0, 0, 0.45); animation: sayIn 0.3s ease-out; max-width: calc(100% - 28px); }
.rj-quit .av { width: 40px; height: 40px; border-radius: 10px; background: var(--n-yel-soft); flex: none; }
.rj-quit b { display: block; font-size: 15px; font-weight: 800; color: var(--n-red); }
.rj-quit small { display: block; font-size: 12.5px; color: var(--ink-2); }
.rs-focus .hn { opacity: 0.18; transition: opacity 0.4s; } .rs-focus .hn:hover { opacity: 1; }

/* logo + N emblem images */
.brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 0; }
.ic-n { width: 26px; height: 26px; object-fit: contain; flex: none; }
.side-card img { width: 104px; height: auto; }

/* ═══ Normie page: ID badge + room + receipt + tabs (own layout) ═══ */
.nx .nx-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; align-items: start; }
.nx .nx-side { position: sticky; top: 84px; z-index: 4; }
.nx .nx-main { display: grid; gap: 18px; min-width: 0; }
.nx-badge { position: relative; display: grid; gap: 14px; padding: 0 0 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--card-bd), 0 10px 30px rgba(0,0,0,.07); overflow: hidden; }
.nx-badge > :not(.nx-band):not(.nx-slot) { margin: 0 18px; }
.nx-slot { position: absolute; top: 9px; left: 50%; width: 54px; height: 9px; margin-left: -27px; border-radius: 9px; background: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); z-index: 2; }
.nx-band { display: flex; align-items: center; gap: 9px; padding: 28px 18px 14px; background: var(--n-red); color: #fff; }
.nx-band span { font-weight: 900; letter-spacing: .04em; font-size: 15px; color: var(--n-yel); }
.nx-band em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.18); }
.nx-id { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 4px !important; }
.nx-photo { position: relative; width: 112px; height: 132px; border-radius: 12px; background: linear-gradient(#FFF6D6, #FFE48A); box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--line-strong); display: grid; place-items: end center; overflow: hidden; }
.nx-photo svg { width: 104px; height: auto; }
.nx-stamp { position: absolute; top: 44px; left: 4px; right: 4px; text-align: center; transform: rotate(-16deg); font-weight: 900; font-size: 26px; letter-spacing: .1em; color: var(--n-red); border: 3px solid var(--n-red); border-radius: 8px; background: rgba(255,255,255,.55); opacity: .92; }
.nx-stamp.soon { font-size: 15px; color: #B7791F; border-color: #B7791F; top: 52px; }
.nx-who { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.nx-no { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.nx-who h1 { margin: 0; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.nx-since { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.nx-who .ag-status { margin-top: 4px; }
.nx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 0; border-radius: 12px; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.nx-facts > div { padding: 9px 11px; background: #fff; min-width: 0; }
.nx-facts dt { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nx-facts dd { margin: 2px 0 0; display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-facts dd svg { width: 16px; height: 16px; flex: none; }
.nx-facts .nx-tick { color: var(--n-red); }
.nx-wallet { display: grid; gap: 7px; padding: 11px 12px; border-radius: 12px; background: var(--surface-2, #F6F6F6); }
.nx-wallet small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nx-wallet code { font-size: 12px; font-weight: 700; word-break: break-all; line-height: 1.35; color: var(--ink); }
.nx-wbtn { display: flex; gap: 8px; }
.nx-wbtn .btn { flex: 1; justify-content: center; }
.nx-wbtn svg { width: 14px; height: 14px; }
.nx-go { width: auto; justify-content: center; }
.nx-go svg { width: 18px; height: 18px; }
.nx-next { margin-top: -6px !important; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.nx-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nx-ab { display: flex; align-items: center; gap: 9px; padding: 9px; border: 0; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: left; cursor: pointer; color: var(--ink); min-width: 0; transition: box-shadow .12s, transform .12s; }
.nx-ab:hover { box-shadow: inset 0 0 0 2px var(--n-red); transform: translateY(-1px); }
.nx-ab.dim { opacity: .55; }
.nx-ab b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ab small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ab > span:last-child { min-width: 0; }
.nx-ai { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tc); color: #fff; }
.nx-ai svg { width: 16px; height: 16px; }

.nx-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; }
.nx-room { position: relative; min-height: 440px; border-radius: 18px; overflow: visible; background: linear-gradient(180deg, #FFF8DC, #FFE9A6); box-shadow: inset 0 0 0 1px var(--card-bd); }
.nx-stage { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; }
.nx-rh { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; pointer-events: none; }
.nx-rh > * { pointer-events: auto; }
.nx-rh h2 { margin: 0; padding: 7px 12px; border-radius: 10px; background: var(--n-red); color: #fff; font-size: 15px; box-shadow: 0 3px 0 #9E000C; }
.nx-rh .sub { padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.88); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.nx-rh .right { margin-left: auto; position: relative; display: flex; gap: 6px; }
.nx-rh .btn { background: #fff; }
.nx-rh .op-menu { right: 0; top: calc(100% + 6px); }

.nx-rcpt { position: relative; display: grid; align-content: start; gap: 7px; padding: 18px 18px 26px; background: #FFFDF6; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--ink); box-shadow: 0 0 0 1px #EDE6CF, 0 10px 24px rgba(0,0,0,.06); border-radius: 6px 6px 0 0;
  -webkit-mask: radial-gradient(9px at 9px 100%, #0000 98%, #000) -9px 0 / 18px 100% repeat-x; mask: radial-gradient(9px at 9px 100%, #0000 98%, #000) -9px 0 / 18px 100% repeat-x; }
.nx-rhead { display: grid; justify-items: center; gap: 3px; text-align: center; }
.nx-rhead b { font-size: 16px; letter-spacing: .1em; color: var(--n-red); }
.nx-rhead small { font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }
.nx-rcut { height: 0; border-top: 2px dashed #D9D1B8; margin: 4px 0; }
.nx-rl { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.nx-rl span { color: var(--ink-2); white-space: nowrap; }
.nx-rl i { flex: 1; border-bottom: 2px dotted #D9D1B8; transform: translateY(-3px); min-width: 10px; }
.nx-rl b { white-space: nowrap; font-weight: 800; }
.nx-rl small { font-weight: 600; color: var(--muted); }
.nx-total { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; padding: 8px 10px; border-radius: 6px; background: var(--n-yel); }
.nx-total span { font-weight: 900; font-size: 13px; letter-spacing: .06em; }
.nx-total b { font-size: 17px; text-align: right; }
.nx-total em { grid-column: 2; text-align: right; font-style: normal; font-weight: 800; font-size: 12px; }
.nx-total .up { color: #0E7C32; } .nx-total .down { color: #B00010; }
.nx-bar { height: 38px; margin: 6px 10px 0; background: repeating-linear-gradient(90deg, #171717 0 2px, transparent 2px 4px, #171717 4px 7px, transparent 7px 9px, #171717 9px 10px, transparent 10px 13px); opacity: .85; }
.nx-thx { margin: 0; text-align: center; font-size: 10.5px; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
.nx-pend { display: grid; align-content: start; }

.nx-tabs { display: flex; gap: 6px; padding: 6px; border-radius: 14px; background: var(--n-red); overflow-x: auto; scrollbar-width: none; scroll-margin-top: 84px; }
.nx-tabs::-webkit-scrollbar { display: none; }
.nx-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; }
.nx-tabs button:hover { background: rgba(255,255,255,.14); }
.nx-tabs button.on { background: var(--n-yel); color: var(--ink); box-shadow: 0 3px 0 #C99A00; }
.nx-tabs em { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 20px; background: rgba(0,0,0,.18); }
.nx-tabs button.on em { background: rgba(0,0,0,.1); }
.nx-panel { display: grid; gap: 18px; min-width: 0; }
.nx-panel[hidden] { display: none; }
.nx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nx-brain { grid-template-columns: 1fr 1.4fr; }
.nx #ag-market:empty, .nx #ag-market-top:empty { display: none; }

@media (max-width: 1180px) {
  .nx .nx-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .nx-top { grid-template-columns: minmax(0, 1fr); }
  .nx-rcpt { max-width: none; }
}
@media (max-width: 900px) {
  .nx .nx-grid { grid-template-columns: minmax(0, 1fr); }
  .nx .nx-side { position: static; }
  .nx-duo, .nx-brain { grid-template-columns: minmax(0, 1fr); }
  .nx-room { min-height: 320px; }
  .nx-tabs button { flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .nx-id { grid-template-columns: 92px minmax(0, 1fr); }
  .nx-photo { width: 92px; height: 112px; }
  .nx-photo svg { width: 86px; }
  .nx-who h1 { font-size: 25px; }
}
.nx-stage.office { position: absolute; inset: 0; height: auto; margin: 0; }
.nx-facts > div:last-child:nth-child(odd) { grid-column: span 2; }
.nx-facts dd { white-space: normal; line-height: 1.2; }

/* launch: the worker clicked in the restaurant (fixed, no other picks) */
.bb-chosen { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #FFF6D6, #FFE9A6); box-shadow: inset 0 0 0 1px #F2DC8C; }
.bb-chosen-fig { display: grid; place-items: end center; height: 170px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bb-chosen-fig svg { width: 120px; height: auto; }
.bb-chosen-t { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.bb-chosen-t small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--n-red); }
.bb-chosen-t b { font-size: 28px; line-height: 1.05; letter-spacing: -.02em; }
.bb-chosen-t span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.bb-chosen-t p { margin: 4px 0 6px; font-size: 13px; color: var(--ink-2); }
.bb-chosen-t .btn svg { width: 14px; height: 14px; }
@media (max-width: 520px) { .bb-chosen { grid-template-columns: 1fr; } .bb-chosen-fig { height: 150px; } }

/* admin panel (#/admin) */
.x-slot { display: contents; }
.adm { display: grid; place-items: start center; padding-top: 28px; padding-bottom: 60px; }
.adm-card { width: min(560px, 100%); display: grid; gap: 14px; padding: 0 24px 24px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--card-bd), 0 12px 32px rgba(0,0,0,.07); overflow: hidden; }
.adm-login { width: min(420px, 100%); }
.adm-band { display: flex; align-items: center; gap: 10px; margin: 0 -24px; padding: 14px 24px; background: var(--n-red); }
.adm-band span { font-weight: 900; letter-spacing: .12em; color: var(--n-yel); font-size: 14px; }
.adm-out { margin-left: auto; border: 0; border-radius: 8px; padding: 6px 12px; background: rgba(255,255,255,.18); color: #fff; font-weight: 700; cursor: pointer; }
.adm-out:hover { background: rgba(255,255,255,.3); }
.adm-card h1 { margin: 6px 0 0; font-size: 28px; letter-spacing: -.02em; }
.adm-card p { margin: 0; }
.adm-card code { font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); }
.adm-card form { display: grid; gap: 14px; }
.adm-card .field { display: grid; gap: 6px; }
.adm-card .field > span { font-weight: 800; font-size: 13.5px; }
.adm-card .hint { font-size: 12px; color: var(--muted); }
.adm-err { padding: 9px 12px; border-radius: 10px; background: var(--n-red-soft, #FFE5E7); color: #B00010; font-weight: 700; font-size: 13.5px; }
.adm-err[hidden] { display: none; }
.adm-now { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #FFF8DC; box-shadow: inset 0 0 0 1px #F2DC8C; }
.adm-now small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.adm-now div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 13px; }
.adm-now code, .adm-now a, .adm-now span { word-break: break-all; }

/* X button: a black "employee" tile wearing the red Normie cap; hover = he tips his cap */
.x-link.x-capbtn { width: auto; height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 0 13px 0 5px; border-radius: 12px; background: var(--n-red); color: #fff; box-shadow: 0 3px 0 #9E000C; transition: transform .12s ease, box-shadow .12s ease; text-decoration: none; }
.x-link.x-capbtn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #9E000C; }
.x-link.x-capbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9E000C; }
.xc-tile { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 4px; border-radius: 9px; background: #171717; box-shadow: inset 0 -3px 0 rgba(255,255,255,.1), 0 0 0 2px #fff; flex: none; }
.x-link .xc-tile .xn { width: auto; height: auto; background: none; border-radius: 0; margin-top: 7px; }
.xc-tile .xn svg { width: 13px; height: 13px; color: #fff; }
.xc-cap { position: absolute; left: -2px; top: -13px; width: 34px; height: auto; transform: rotate(-8deg); transform-origin: 30% 100%; transition: transform .25s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 1.5px 0 rgba(0,0,0,.35)); pointer-events: none; }
.x-link.x-capbtn:hover .xc-cap { transform: translate(-3px, -6px) rotate(-24deg); }
.xc-t { display: grid; line-height: 1.02; text-align: left; }
.xc-t small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--n-yel); }
.xc-t b { font-size: 14px; font-weight: 900; }
.foot-x { display: inline-flex; align-items: center; gap: 8px; }
.xc-tile.sm { width: 24px; height: 24px; border-radius: 7px; margin-top: 6px; box-shadow: none; }
.xc-tile.sm .xc-cap { width: 26px; top: -10px; left: -2px; }
.foot-x .xc-tile .xn { margin-top: 5px; background: none; }
.foot-x .xc-tile .xn svg { width: 10px; height: 10px; color: #fff; }
.foot-x:hover .xc-cap { transform: translate(-2px, -4px) rotate(-24deg); }
@media (max-width: 1250px) { .xc-t { display: none; } .x-link.x-capbtn { padding: 0 5px; } }
.x-link .xc-cap, .foot-x .xc-cap { height: auto; }
.top-right .x-link.x-capbtn, .topbar .x-link.x-capbtn { width: auto; height: 42px; flex: none; box-sizing: border-box; }
.x-link .xc-cap { width: 34px; }
.foot-x .xc-tile.sm .xc-cap { width: 26px; }
.x-link.x-capbtn { width: auto !important; height: 42px !important; }
@media (max-width: 700px) { .x-link.x-capbtn { height: 38px !important; } .x-link.x-capbtn .xc-tile { width: 28px; height: 28px; } .x-link.x-capbtn .xc-cap { width: 30px; top: -11px; } }
.x-link .xc-cap { width: 38px; left: -4px; top: -16px; transform: rotate(-6deg); }
.x-link.x-capbtn:hover .xc-cap { transform: translate(-3px, -7px) rotate(-22deg); }
@media (max-width: 700px) { .x-link.x-capbtn .xc-cap { width: 33px; top: -13px; } }
.foot-x .xc-tile.sm .xc-cap { width: 28px; top: -12px; left: -3px; }
.x-link.x-capbtn:hover .xc-cap { transform: translate(-3px, -3px) rotate(-22deg); }