/* ==========================================================
   PAO HQ — pixel-art RPG theme
   ========================================================== */
@font-face { font-family: 'Press Start 2P'; src: url('../fonts/press-start-2p.woff2') format('woff2'); font-display: swap; }
/* Pixel font for Latin + Chakra Petch for Thai, scaled up so Thai stays readable next to tiny pixel glyphs */
@font-face { font-family: 'PAO Pixel'; src: url('../fonts/press-start-2p.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+25A0-25FF; font-display: swap; }
@font-face { font-family: 'PAO Pixel'; font-weight: 400; src: url('../fonts/chakra-600-thai.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; size-adjust: 165%; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('../fonts/vt323.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 400; src: url('../fonts/chakra-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 400; src: url('../fonts/chakra-400-thai.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; src: url('../fonts/chakra-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; src: url('../fonts/chakra-600-thai.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; font-display: swap; }

:root {
  --px: 4px;
  --bg: #0b0c1d;
  --bg2: #12142b;
  --win-top: #27318a;
  --win-bot: #141a4a;
  --win-solid: #161c4a;
  --frame-out: #05061a;
  --frame-light: #e9e7ff;
  --frame-mid: #8f94c9;
  --ink: #f4f2ff;
  --ink-2: #c3c6ea;
  --ink-3: #8d91c0;
  --accent: #3ddc84;
  --accent-2: #36b46f;
  --gold: #ffd23f;
  --hp: #e94560;
  --hp-dark: #8f1f35;
  --xp: #ffd23f;
  --xp-dark: #8a6a00;
  --mp: #4cc9f0;
  --warn: #ff9f1c;
  --danger: #ff4d6d;
  --ok: #3ddc84;
  --chart-a: #2196c8;
  --chart-b: #c08a00;
  --font-pixel: 'PAO Pixel', 'Press Start 2P', 'Chakra Petch', monospace;
  --font-body: 'Chakra Petch', 'Leelawadee UI', Tahoma, sans-serif;
  --font-num: 'VT323', 'Chakra Petch', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(#ffffff22 1px, transparent 1px),
    radial-gradient(#4cc9f018 1px, transparent 1px);
  background-size: 48px 48px, 96px 96px;
  background-position: 0 0, 24px 36px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  min-height: 100vh;
}
img { image-rendering: pixelated; }
/* Character sprites are 92x92 pixel art: always nearest-neighbour, and only shown at
   whole-pixel scales of 92 (184 = 2x, 92 = 1x, 46 = 1/2, 23 = 1/4) so pixels stay square. */
img.sprite { image-rendering: crisp-edges; image-rendering: pixelated; object-fit: contain; flex: none; }
a { color: var(--mp); }
a:hover { color: var(--gold); }
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pixel { font-family: var(--font-pixel); letter-spacing: 0.5px; }
.num { font-family: var(--font-num); }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 16px; }
.grow { flex: 1; }

/* ---------- RPG window (notched pixel frame) ---------- */
.window {
  position: relative;
  background: linear-gradient(180deg, var(--win-top), var(--win-bot));
  color: var(--ink);
  padding: 18px 20px;
  margin: 8px;
  box-shadow:
    inset 0 0 0 4px var(--frame-light),
    inset 0 0 0 6px var(--frame-mid),
    inset 0 0 0 8px var(--frame-out),
    0 4px 0 0 var(--frame-out), 0 -4px 0 0 var(--frame-out),
    4px 0 0 0 var(--frame-out), -4px 0 0 0 var(--frame-out),
    8px 8px 0 0 #00000066;
}
.window.flat { background: var(--win-solid); }
.window.dark { background: linear-gradient(180deg, #1a1b33, #0e0f22); }
.window > h2, .window > header h2, .window-title {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--gold);
  margin: 0 0 12px;
  text-shadow: 2px 2px 0 #000;
  text-transform: uppercase;
}
.window-title .th { font-family: var(--font-body); font-size: 14px; color: var(--ink-2); text-transform: none; margin-left: 8px; text-shadow: none; }

.grid { display: grid; gap: 12px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  color: #10122a;
  background: var(--accent);
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 -4px 0 0 var(--frame-out) inset,
    0 4px 0 0 var(--frame-out), 0 -4px 0 0 var(--frame-out),
    4px 0 0 0 var(--frame-out), -4px 0 0 0 var(--frame-out);
  margin: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 0 inset, 0 4px 0 0 var(--frame-out), 0 -4px 0 0 var(--frame-out), 4px 0 0 0 var(--frame-out), -4px 0 0 0 var(--frame-out); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.secondary { background: var(--frame-mid); }
.btn.gold { background: var(--gold); }
.btn.danger { background: var(--hp); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--ink-3); }
.btn.small { font-size: 8px; padding: 7px 9px; }
.btn.icon { padding: 7px 8px; }

/* ---------- Forms ---------- */
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
label.field > span .req { color: var(--hp); }
input, select, textarea {
  font-family: var(--font-body);
  font-size: 15px;
  width: 100%;
  color: var(--ink);
  background: #0a0c24;
  border: 0;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 2px var(--frame-mid), inset 4px 4px 0 0 #00000088;
  border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold), inset 4px 4px 0 0 #00000088; }
textarea { min-height: 90px; resize: vertical; }
input[type="checkbox"] { width: auto; box-shadow: none; accent-color: var(--accent); transform: scale(1.3); }
select option { background: #0a0c24; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-error { color: #fff; background: var(--hp-dark); padding: 8px 10px; margin-bottom: 12px; box-shadow: inset 0 0 0 2px var(--hp); }

/* ---------- Bars (HP / XP / progress) ---------- */
.bar {
  position: relative;
  height: 14px;
  background: #05061a;
  box-shadow: inset 0 0 0 2px #000, 0 0 0 2px var(--frame-mid);
  margin: 4px 2px;
  overflow: hidden;
}
.bar > .fill {
  position: absolute; left: 2px; top: 2px; bottom: 2px;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--bar-c, var(--accent)) 0 6px, var(--bar-c2, var(--accent-2)) 6px 8px);
  box-shadow: inset 0 3px 0 0 #ffffff55, inset 0 -3px 0 0 #00000044;
  transition: width 0.6s steps(12);
}
.bar.hp { --bar-c: var(--hp); --bar-c2: var(--hp-dark); }
.bar.xp { --bar-c: var(--xp); --bar-c2: var(--xp-dark); }
.bar.mp { --bar-c: var(--mp); --bar-c2: #1b7a99; }
.bar.low { animation: blink 1s steps(2) infinite; }
.bar-label { display: flex; justify-content: space-between; font-family: var(--font-pixel); font-size: 8px; color: var(--ink-2); margin-top: 6px; }
.bar.thin { height: 10px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1;
  padding: 5px 6px;
  color: #10122a;
  background: var(--frame-mid);
  box-shadow: 0 2px 0 0 #000;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.badge.green { background: var(--accent); }
.badge.gold { background: var(--gold); }
.badge.red { background: var(--hp); color: #fff; }
.badge.blue { background: var(--mp); }
.badge.orange { background: var(--warn); }
.badge.gray { background: #5b5f8c; color: #fff; }
.badge.purple { background: #b388ff; }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

.stars { color: var(--gold); letter-spacing: 1px; font-size: 14px; white-space: nowrap; }
.stars .off { color: #3b3f6e; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th {
  font-family: var(--font-pixel); font-size: 8px; color: var(--gold); text-align: left;
  padding: 8px; border-bottom: 2px solid var(--frame-mid); white-space: nowrap; text-transform: uppercase;
}
table.tbl td { padding: 8px; border-bottom: 1px dashed #ffffff22; vertical-align: top; }
table.tbl tr:hover td { background: #ffffff0d; }
table.tbl td.num, table.tbl th.num { text-align: right; font-family: var(--font-num); font-size: 20px; line-height: 1; }
table.tbl th.num { font-family: var(--font-pixel); font-size: 8px; }
.empty { color: var(--ink-3); text-align: center; padding: 24px; font-family: var(--font-pixel); font-size: 10px; }

/* ---------- Layout: login ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box { width: 100%; max-width: 420px; text-align: center; }
/* Logos are smooth vector-style artwork, not pixel art: let the browser scale them smoothly. */
img.logo { image-rendering: auto; }
.login-box .logo { width: 214px; max-width: 80%; height: auto; display: block; margin: 4px auto 6px; }
.login-box .mascot { width: 96px; height: 60px; display: block; margin: 0 auto 8px; animation: bob 1.2s steps(2) infinite; }
.login-box form { text-align: left; margin-top: 16px; }
.login-box .press { font-family: var(--font-pixel); font-size: 10px; color: var(--gold); margin: 14px 0 4px; animation: blink 1.2s steps(2) infinite; }
.login-box .foot { font-size: 12px; color: var(--ink-3); margin-top: 14px; }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* ---------- Layout: app ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
.hud { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: #070816; border-bottom: 4px solid var(--frame-out); box-shadow: 0 4px 0 0 #2a2f6a; position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.hud .logo { height: 30px; width: auto; display: block; }
.hud .player { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 260px; }
.hud .player .avatar { width: 46px; height: 46px; }
.hud .player .name { font-family: var(--font-pixel); font-size: 10px; }
.hud .player .bars { width: 160px; }
.hud .session { font-family: var(--font-pixel); font-size: 8px; color: var(--ink-3); text-align: right; }
.hud .session.warn { color: var(--warn); animation: blink 1s steps(2) infinite; }
.menu { padding: 12px 4px; }
.menu .window { padding: 12px 8px; }
.menu nav { padding: 8px 4px; }
.menu a {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none;
  padding: 7px 6px 7px 22px;
  position: relative;
  font-size: 15px;
  white-space: nowrap;
}
.menu a::before { content: ''; position: absolute; left: 4px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left: 8px solid var(--frame-light); opacity: 0; }
.menu a:hover::before, .menu a.active::before { opacity: 1; animation: nudge 0.6s steps(2) infinite; }
.menu a.active { color: var(--gold); }
.menu a .ico { font-family: var(--font-pixel); font-size: 10px; width: 18px; text-align: center; color: var(--mp); }
.menu .sep { border-top: 2px dashed #ffffff22; margin: 10px 0; }
.menu .count { margin-left: auto; flex: none; }
/* collapsible sections: a header button per group, its links below (state remembered per browser) */
.menu .menu-section + .menu-section { border-top: 2px dashed #ffffff22; margin-top: 6px; padding-top: 6px; }
.menu .menu-group {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1px; color: var(--ink-3);
  padding: 8px 4px; text-transform: uppercase;
}
.menu .menu-group:hover, .menu .menu-group:focus-visible { color: var(--gold); }
.menu .menu-group .caret { width: 10px; }
.menu .menu-items[hidden] { display: none; }
.hud .hud-user { margin-left: auto; font-weight: 600; color: var(--ink-2); }
@keyframes nudge { 50% { transform: translateX(3px); } }
main.content { padding: 12px 16px 40px 4px; min-width: 0; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 8px 12px; }
.page-head h1 { font-family: var(--font-pixel); font-size: 16px; margin: 0; color: var(--ink); text-shadow: 3px 3px 0 #000; }
.page-head .sub { color: var(--ink-2); }
.page-head .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 0 8px 8px; }
.toolbar label.field { margin: 0; min-width: 150px; }

.menu-toggle, .menu-backdrop { display: none; }
@media (max-width: 900px) {
  /* phones & tablets: content first, the menu is a drawer behind ☰ */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 4px; }
  .menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); z-index: 40; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 4px 24px; background: var(--bg); box-shadow: 4px 0 0 #000; transform: translateX(-105%); transition: transform .18s ease-out; visibility: hidden; }
  .app.menu-open .menu { transform: none; visibility: visible; }
  .app.menu-open .hud { z-index: 45; } /* ✕ stays reachable above the drawer */
  .menu { padding-top: 64px; }
  .app.menu-open .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: #0008; }
  .menu .sep { display: none; }
  .menu a { min-height: 44px; }
  .hud { gap: 8px; padding: 6px 8px; }
  .hud .logo { height: 24px; }
  .hud .player { margin-left: 0; }
  main.content { padding: 8px 4px 40px; }
  .page-head { margin: 6px 4px 10px; }
  .page-head h1 { font-size: 13px; }
  .page-head .actions { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .hud > .pixel.small, .hud .hud-user { display: none; }
  .hud .session { font-size: 7px; }
  .toolbar { margin: 0 4px 8px; gap: 8px; }
  .toolbar label.field { flex: 1 1 140px; min-width: 0; }
  .window { margin-left: 4px; margin-right: 4px; }
  button, .btn, select, input, textarea { min-height: 40px; }
  .btn.small, button.small { min-height: 36px; }
  .hud { flex-wrap: nowrap; }
  .hud .btn, .hud button { padding: 4px 8px; min-height: 36px; }
  .hud .session { display: none; } /* the expiry warning still pops up as a toast */
}
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }

/* ---------- Stat tiles ---------- */
.stat .label { font-family: var(--font-pixel); font-size: 8px; color: var(--ink-2); text-transform: uppercase; }
.stat .value { font-family: var(--font-num); font-size: 44px; line-height: 1; color: var(--ink); margin: 6px 0 2px; text-shadow: 3px 3px 0 #000; }
.stat .value.gold { color: var(--gold); }
.stat .delta { font-size: 13px; color: var(--ink-2); }
.stat .delta.up { color: var(--ok); }
.stat .delta.down { color: var(--hp); }
.stat .ico { float: right; font-size: 26px; line-height: 1; }

/* ---------- Lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 8px 4px; border-bottom: 1px dashed #ffffff22; }
.list li:last-child { border-bottom: 0; }
.list .meta { font-size: 12px; color: var(--ink-3); }
.clickable { cursor: pointer; }
.clickable:hover { background: #ffffff0d; }

/* ---------- Charts ---------- */
.chart-box { position: relative; }
.chart-box canvas { width: 100%; height: 220px; display: block; image-rendering: pixelated; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: #05061a; color: var(--ink); padding: 6px 8px; font-size: 13px; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--frame-light), 4px 4px 0 0 #000;
}
.chart-tip b { font-family: var(--font-num); font-size: 20px; font-weight: normal; }
.chart-tip .sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }

/* ---------- Character cards ---------- */
.char-card { text-align: center; }
.char-card .portrait {
  width: 184px; height: 184px; margin: 4px auto 10px; display: block;
  background: radial-gradient(circle at 50% 70%, #ffffff22 0 40%, transparent 41%), #0a0c24;
  box-shadow: inset 0 0 0 2px var(--frame-mid), 4px 4px 0 0 #000;
  object-fit: contain;
}
.char-card .cname { font-family: var(--font-pixel); font-size: 13px; color: var(--ink); margin: 4px 0; }
.char-card .cth { color: var(--ink-2); }
.char-card .ctitle { color: var(--mp); font-size: 13px; min-height: 20px; }
.char-card .lvl { font-family: var(--font-pixel); font-size: 10px; color: var(--gold); margin: 8px 0 2px; }
.char-card .bars { text-align: left; margin: 8px 6px; }
.char-card .quests { text-align: left; font-size: 13px; margin-top: 10px; }
.char-card .quests li { padding: 4px 2px; }
.char-card .bio { font-size: 13px; color: var(--ink-2); min-height: 40px; }
.char-card .stats { display: flex; justify-content: space-around; margin-top: 8px; font-family: var(--font-pixel); font-size: 8px; color: var(--ink-2); }
.char-card .stats b { display: block; font-family: var(--font-num); font-size: 26px; color: var(--ink); font-weight: normal; }
.mini-party { display: flex; gap: 10px; flex-wrap: wrap; }
.mini-party .m { flex: 1 1 150px; display: flex; gap: 8px; align-items: center; }
.mini-party .m img { width: 46px; height: 46px; background: #0a0c24; box-shadow: inset 0 0 0 2px var(--frame-mid); }
.mini-party .m .n { font-family: var(--font-pixel); font-size: 8px; }
.mini-party .m .grow { min-width: 0; }

/* ---------- Quest board ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 4px; overflow-x: auto; }
.board .col { min-height: 300px; }
.board .col h2 { display: flex; justify-content: space-between; }
.quest {
  background: #f1e3c0;
  color: #3a2a14;
  padding: 10px 12px;
  margin: 10px 4px 14px;
  position: relative;
  box-shadow: 0 4px 0 0 #6b4b1f, 0 -4px 0 0 #6b4b1f, 4px 0 0 0 #6b4b1f, -4px 0 0 0 #6b4b1f, 6px 8px 0 0 #00000088;
  font-size: 14px;
}
.quest .qt { font-weight: 600; margin: 4px 0; word-wrap: break-word; }
.quest .qm { font-size: 12px; color: #6b4b1f; }
.quest .rank { font-family: var(--font-pixel); font-size: 8px; padding: 3px 5px; color: #fff; background: #6b4b1f; }
.quest .rank.urgent { background: #c0233f; }
.quest .rank.high { background: #d9731a; }
.quest .rank.normal { background: #2f6db5; }
.quest .rank.low { background: #6f7a5c; }
.quest .bar { box-shadow: inset 0 0 0 2px #3a2a14; background: #c9b78f; }
.quest .actions { display: flex; justify-content: space-between; margin-top: 6px; }
.quest .actions .btn { font-size: 8px; padding: 5px 7px; margin: 2px; }
.quest .actions .btn.ghost { color: #3a2a14; box-shadow: inset 0 0 0 2px #6b4b1f; }
.quest.overdue { background: #f5c9c9; }
.quest.done { opacity: 0.8; }
.quest.done::after { content: 'CLEAR!'; position: absolute; right: 10px; bottom: 46px; font-family: var(--font-pixel); font-size: 9px; color: #2a8a52; transform: rotate(8deg); }
.proj-card .bar { margin-top: 8px; }

/* ---------- Modal ---------- */
dialog.modal { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: 720px; width: calc(100% - 32px); }
dialog.modal::backdrop { background: #000000bb; }
dialog.modal .window { margin: 8px; max-height: calc(100vh - 60px); overflow-y: auto; }
dialog.modal .modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.secret-box { font-family: var(--font-num); font-size: 30px; color: var(--gold); background: #05061a; padding: 10px; text-align: center; letter-spacing: 2px; user-select: all; box-shadow: inset 0 0 0 2px var(--gold); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: #05061a; padding: 10px 14px; box-shadow: 0 0 0 3px var(--accent), 6px 6px 0 0 #000; font-size: 14px; animation: pop 0.2s steps(3); }
.toast.error { box-shadow: 0 0 0 3px var(--hp), 6px 6px 0 0 #000; }
.toast.warn { box-shadow: 0 0 0 3px var(--warn), 6px 6px 0 0 #000; }
@keyframes pop { from { transform: scale(0.8); opacity: 0; } }

/* ---------- Alerts ---------- */
.alert-overdue { color: var(--hp); font-weight: 600; }
.alert-soon { color: var(--warn); }
.banner { margin: 0 8px 10px; padding: 10px 14px; background: var(--hp-dark); box-shadow: inset 0 0 0 3px var(--hp); }
.banner.warn { background: #5a3a07; box-shadow: inset 0 0 0 3px var(--warn); }

.tabs { display: flex; gap: 4px; margin: 0 8px 8px; flex-wrap: wrap; }
.tabs .btn.active { background: var(--gold); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; word-break: break-word; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { border-left: 4px solid var(--mp); padding: 4px 0 10px 12px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -8px; top: 8px; width: 12px; height: 12px; background: var(--gold); box-shadow: 0 0 0 2px #000; }
.pre { white-space: pre-wrap; word-break: break-word; }
.audit-details { font-family: var(--font-num); font-size: 16px; color: var(--ink-2); max-width: 520px; white-space: pre-wrap; word-break: break-word; }
.loading { font-family: var(--font-pixel); font-size: 10px; color: var(--ink-3); padding: 40px; text-align: center; animation: blink 1s steps(2) infinite; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }
.sw-a { background: var(--chart-a); }
.sw-b { background: var(--chart-b); }

img.mini { width: 23px; height: 23px; background: #0a0c24; box-shadow: inset 0 0 0 1px var(--frame-mid); vertical-align: middle; }
.window .row > img.sprite { width: 92px; height: 92px; background: #0a0c24; box-shadow: inset 0 0 0 2px var(--frame-mid), 4px 4px 0 0 #000; }
.window .row > img.mini { width: 23px; height: 23px; box-shadow: none; }

/* ==========================================================
   Gamification layer (kept light: no continuous animation except
   short steps() loops; everything stops under reduced motion)
   ========================================================== */
img.icon { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; flex: none; }
.menu a img.icon { width: 32px; height: 32px; }
.menu a .label { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.menu a { padding-top: 4px; padding-bottom: 4px; }
.icon-btn { padding: 6px 8px; line-height: 0; }
.icon-btn img.icon { width: 16px; height: 16px; }
.hud .lv { color: var(--gold); }
.rank-title { color: var(--mp); font-family: var(--font-body); font-size: 12px; }
.xp-text { color: var(--gold); font-family: var(--font-num); font-size: 20px; font-weight: normal; }
.gold-text { color: var(--gold); }
.form-note { grid-column: 1 / -1; margin: 0 0 12px; padding: 8px 10px; font-size: 13px; color: var(--ink); background: #3a2f07; box-shadow: inset 0 0 0 2px var(--gold); }
.legend-line { margin: 0 8px 4px; }

/* rank chips: difficulty D..S */
.rank-chip { display: inline-block; font-family: var(--font-pixel); font-size: 8px; line-height: 1; padding: 4px 5px; color: #fff; background: #6f7a5c; vertical-align: middle; }
.rank-chip.d1 { background: #6f7a5c; }
.rank-chip.d2 { background: #2f6db5; }
.rank-chip.d3 { background: #2a8a52; }
.rank-chip.d4 { background: #d9731a; }
.rank-chip.d5 { background: #c0233f; box-shadow: 0 0 0 2px var(--gold); }

/* quest cards: main quests get a gold frame + ribbon */
.quest.main { box-shadow: 0 4px 0 0 var(--gold), 0 -4px 0 0 var(--gold), 4px 0 0 0 var(--gold), -4px 0 0 0 var(--gold), 6px 8px 0 0 #00000088; padding-top: 22px; }
.quest .ribbon { position: absolute; left: -4px; top: -4px; font-family: var(--font-pixel); font-size: 8px; color: #3a2a14; background: var(--gold); padding: 4px 6px; }
.quest .qreward { font-family: var(--font-num); font-size: 18px; color: #8a5a00; }
.urgent-flag { display: inline-block; font-size: 12px; font-weight: 600; color: #fff; background: #d9731a; padding: 0 6px; margin-bottom: 2px; }
.urgent-flag.urgent { background: #c0233f; }

/* badges */
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0; margin: 10px 0 4px; }
.badges li { line-height: 0; padding: 3px; background: #0a0c24; box-shadow: inset 0 0 0 2px var(--frame-mid); }
.ach-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ach-grid li { display: flex; gap: 10px; align-items: flex-start; padding: 8px; background: #0a0c2466; box-shadow: inset 0 0 0 2px var(--frame-mid); }
.ach-grid li.earned { box-shadow: inset 0 0 0 2px var(--gold); }
.ach-grid li.locked img.icon { filter: grayscale(1) brightness(0.5); }
.ach-grid li.locked b { color: var(--ink-3); }

/* leaderboard */
.leader-mini { list-style: none; padding: 0; margin: 0; }
.leader-mini li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed #ffffff22; }
.leader-mini li.me { background: #ffd23f14; }
.leader-mini .place { font-family: var(--font-pixel); font-size: 10px; width: 30px; color: var(--ink-2); }
.leader-mini .place.p1 { color: var(--gold); }
.leader-mini .place.p2 { color: #d8dbe8; }
.leader-mini .place.p3 { color: #d9731a; }
table.tbl tr.me-row td { background: #ffd23f14; }
.mvp .row { gap: 18px; }
.mvp img.mvp-sprite { width: 92px; height: 92px; background: #0a0c24; box-shadow: inset 0 0 0 2px var(--gold), 4px 4px 0 0 #000; }
.mvp .cname { font-family: var(--font-pixel); font-size: 13px; margin: 6px 0; }

/* monsters (overdue CRM follow-ups) */
.monster-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.monster-banner a { color: #fff; font-weight: 600; }
table.tbl tr.monster-row td { background: #e9456018; }
table.tbl tr.monster-row td:first-child { box-shadow: inset 4px 0 0 0 var(--hp); }

/* reward toasts + floating +XP */
.toast.xp { box-shadow: 0 0 0 3px var(--gold), 6px 6px 0 0 #000; }
.toast.levelup { box-shadow: 0 0 0 3px var(--mp), 6px 6px 0 0 #000; background: #10204a; }
.toast.achievement { box-shadow: 0 0 0 3px #b388ff, 6px 6px 0 0 #000; background: #1d1440; }
.toast .reward { display: inline-flex; align-items: center; gap: 8px; }
.xp-float {
  position: fixed; right: 220px; top: 54px; z-index: 120; pointer-events: none;
  font-family: var(--font-pixel); font-size: 14px; color: var(--gold); text-shadow: 2px 2px 0 #000;
  animation: xp-rise 1.4s steps(14) forwards;
}
@keyframes xp-rise { 0% { transform: translateY(8px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }

/* ---------- Office scene ---------- */
.office-window { padding-bottom: 14px; }
.office-window .window-title { margin-bottom: 8px; }
.office { position: relative; height: 300px; overflow: hidden; background: #241c33; box-shadow: inset 0 0 0 2px #000; margin-top: 6px; }
.office.compact { height: 230px; }
.office-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.office-layer { position: absolute; inset: 0; }
.actor, .monster {
  position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; background: transparent;
  cursor: pointer; color: var(--ink); will-change: transform;
}
.actor { width: 92px; height: 92px; transition-property: transform; transition-timing-function: linear; transition-duration: 2s; }
.office.compact .actor { width: 46px; height: 46px; }
.actor.instant { transition: none; }
.actor .actor-body { display: block; width: 100%; height: 100%; }
.actor img.actor-sprite { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 #00000066); }
.actor.face-left img.actor-sprite { transform: scaleX(-1); }
.actor.walking .actor-body { animation: walk-bob 0.5s steps(2) infinite; }
@keyframes walk-bob { 50% { transform: translateY(-3px); } }
.actor .tag {
  position: absolute; left: 50%; top: -18px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-pixel); font-size: 8px; padding: 3px 5px; background: #05061acc; box-shadow: 0 0 0 1px var(--frame-mid);
}
.actor .tag b { color: var(--gold); font-weight: normal; }
.office.compact .actor .tag { top: -16px; font-size: 7px; }
.actor .bubble {
  position: absolute; right: -6px; top: -2px; min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  font-family: var(--font-pixel); font-size: 10px; color: #10122a; background: var(--frame-light); box-shadow: 2px 2px 0 0 #000;
}
.actor .bubble.overdue { background: var(--hp); color: #fff; animation: blink 1s steps(2) infinite; }
.actor .bubble.busy { background: var(--mp); }
.actor .bubble.idle { background: var(--accent); }
.actor:hover .tag, .actor:focus-visible .tag { background: var(--gold); color: #10122a; }
.actor:hover .tag b, .actor:focus-visible .tag b { color: #10122a; }
.actor:focus-visible, .monster:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }
.monster { width: 48px; text-align: center; }
.monster img.icon { width: 48px; height: 48px; display: block; animation: squish 1.2s steps(2) infinite; transform-origin: bottom center; }
@keyframes squish { 50% { transform: scale(1.08, 0.9); } }
.monster .mtag { display: block; font-family: var(--font-pixel); font-size: 7px; color: #fff; background: var(--hp); padding: 2px 3px; margin-top: 2px; white-space: nowrap; }
.monster-more { position: absolute; left: 0; top: 0; font-family: var(--font-pixel); font-size: 9px; color: #fff; background: var(--hp); padding: 3px 5px; }

dialog.modal.status-modal { max-width: 440px; }
dialog.modal.status-modal .window .char-card { margin: 0; box-shadow: none; background: transparent; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .xp-float { display: none; }
}
.row.nowrap-row { flex-wrap: nowrap; gap: 8px; }
.quest .qm.wait { font-weight: 600; color: #8a5a00; align-self: center; }

/* ---------- Item Vault (inventory) ---------- */
:root { --r-video: #ffd23f; --r-presentation: #b388ff; --r-document: #4cc9f0; --r-image: #3ddc84; --r-archive: #8f94c9; }
.inventory { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.slot {
  --rc: var(--r-archive);
  display: flex; flex-direction: column; gap: 4px; padding: 10px; min-height: 210px;
  color: var(--ink); text-decoration: none; background: #0a0c24;
  box-shadow: inset 0 0 0 2px var(--rc), inset 0 0 0 4px #000, 4px 4px 0 0 #000;
}
.slot:hover, .slot:focus-visible { background: #141a44; transform: translateY(-2px); color: var(--ink); }
.slot.rarity-video { --rc: var(--r-video); }
.slot.rarity-presentation { --rc: var(--r-presentation); }
.slot.rarity-document { --rc: var(--r-document); }
.slot.rarity-image { --rc: var(--r-image); }
.slot.rarity-archive { --rc: var(--r-archive); }
.slot-art { display: flex; align-items: center; justify-content: center; height: 96px; background: radial-gradient(circle, #ffffff12 0 45%, transparent 46%); }
.slot-art img.icon { width: 48px; height: 48px; }
.slot-thumb { width: 96px; height: 96px; object-fit: cover; image-rendering: auto; box-shadow: 0 0 0 2px #000; }
.slot-rarity { font-family: var(--font-pixel); font-size: 7px; color: var(--rc); letter-spacing: 1px; }
.rarity-text-video { color: var(--r-video); } .rarity-text-presentation { color: var(--r-presentation); }
.rarity-text-document { color: var(--r-document); } .rarity-text-image { color: var(--r-image); } .rarity-text-archive { color: var(--r-archive); }
.slot-title { font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.slot-meta { font-size: 12px; color: var(--ink-3); }
.slot-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.slot-flags { display: flex; gap: 4px; margin-top: auto; }
.tag-chip { display: inline-block; font-size: 12px; padding: 1px 6px; margin: 1px 2px; color: var(--mp); background: #4cc9f01a; box-shadow: inset 0 0 0 1px #4cc9f055; border: 0; font-family: var(--font-body); cursor: default; }
button.tag-chip { cursor: pointer; }
button.tag-chip.on { background: var(--mp); color: #10122a; }
.tag-cloud { margin: 0 8px 8px; }
.tabs .btn img.icon { width: 16px; height: 16px; vertical-align: -3px; }
.upload-progress { margin-top: 8px; }

/* ---------- Demo Room ---------- */
.demo-stage { padding: 14px; background: #05061a; text-align: center; }
.demo-stage .demo-video, .demo-stage .demo-image { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; background: #000; box-shadow: 0 0 0 4px #000, 0 0 0 6px var(--frame-mid); }
.demo-stage .demo-image { image-rendering: auto; }
.demo-stage .demo-pdf { display: block; width: 100%; height: 78vh; border: 0; background: #fff; }
.demo-noview { padding: 40px 10px; }
.demo-noview img.icon { width: 96px; height: 96px; }
.secret-box.small-secret { font-size: 14px; padding: 6px; letter-spacing: 0; }
.share-url { font-family: var(--font-num); font-size: 18px; color: var(--gold); }

/* ---------- public share page ---------- */
.share-screen { max-width: 1100px; margin: 0 auto; padding: 16px; }
.share-head { display: flex; align-items: center; gap: 12px; margin: 4px 8px 12px; }
.share-head .logo { height: 32px; width: auto; }

.notification-center { position: relative; }
.notification-list { position: absolute; right: 0; top: 100%; z-index: 100; width: min(360px, 85vw); max-height: 65vh; overflow: auto; background: var(--bg, #171b29); border: 4px solid #d8ac54; padding: 16px; box-shadow: 8px 8px #000; }
.notification-list p { border-bottom: 2px solid #596071; padding-bottom: 8px; }

.marketing-calendar { display: grid; grid-template-columns: repeat(7, minmax(115px, 1fr)); min-width: 805px; gap: 4px; }
.marketing-calendar-heading { text-align: center; padding: 8px; }
.marketing-calendar-day { min-height: 110px; border: 2px solid #596071; padding: 8px; background: #171b29; }
.marketing-calendar-item { display: block; margin-top: 6px; font-size: 13px; border-left: 4px solid #d8ac54; padding-left: 5px; overflow-wrap: anywhere; }
.marketing-calendar-item.state-posted { border-color: #69ba79; }
.marketing-calendar-item.state-pending { border-color: #e27e5d; }
.marketing-document-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.marketing-document { display: block; overflow-wrap: anywhere; }
.marketing-row { margin: 12px 0; padding: 12px; border: 2px solid #596071; }
.marketing-editor { max-height: 70vh; overflow: auto; padding-right: 10px; }
.marketing-editor textarea { min-height: 90px; }
.marketing-editor select[multiple], label.field select[multiple] { min-height: 140px; }
.marketing-artifact { overflow-wrap: anywhere; }

/* ---------- AI Office ---------- */
.ai-floor {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 14px;
  background-color: #1b1d3a;
  background-image: linear-gradient(#ffffff0a 2px, transparent 2px), linear-gradient(90deg, #ffffff0a 2px, transparent 2px);
  background-size: 32px 32px; border: 2px solid #000; min-height: 220px;
}
.ai-desk {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; cursor: pointer;
  background: #2a2d5c; border: 2px solid #000; box-shadow: 3px 3px 0 #000; color: var(--ink); font: inherit; text-align: center;
}
.ai-desk:hover, .ai-desk:focus-visible { outline: 2px solid var(--gold); }
.ai-desk.selected { background: #3a3f80; outline: 2px solid var(--gold); }
.ai-desk.error { background: #4a1f2e; }
.ai-desk.stopped { opacity: 0.7; }
.ai-char { position: relative; height: 92px; display: flex; align-items: flex-end; }
.ai-sprite { width: 92px; height: 92px; image-rendering: pixelated; }
.ai-desk.running .ai-sprite { animation: ai-bob 0.6s steps(2) infinite; }
.ai-bubble {
  position: absolute; top: -4px; right: -18px; background: #fff; color: #10122a; border: 2px solid #000;
  font-family: var(--font-pixel); font-size: 8px; padding: 2px 4px; animation: blink 1s steps(2) infinite;
}
.ai-table { width: 96px; height: 10px; background: #8a5a2b; border: 2px solid #000; margin-top: -6px; }
.ai-tag { font-size: 13px; }
.ai-status { color: var(--ink-2); min-height: 1.2em; word-break: break-word; }
.ai-log { max-height: 420px; overflow-y: auto; background: #0d0e22; border: 2px solid #000; padding: 8px; }
.ai-line { padding: 4px 0; border-bottom: 1px dashed #ffffff1a; }
.ai-line .pre { word-break: break-word; }
.ai-line.ai-error .pre { color: var(--hp); }
.ai-line.ai-done .pre { color: var(--ok); }
.ai-line.ai-tool .pre { color: var(--ink-3); font-size: 12px; }
@keyframes ai-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-desk.running .ai-sprite, .ai-bubble { animation: none; } }.ai-room { border: 2px solid #000; background: #23264d; padding: 8px; box-shadow: 3px 3px 0 #000; }
.ai-room.offline { filter: grayscale(0.8); opacity: 0.75; }
.ai-room-head { margin-bottom: 4px; }
.ai-room-meta { margin-bottom: 6px; }.ai-floor .empty { grid-column: 1 / -1; align-self: center; }

/* ---------- Project previews ---------- */
.pv-card { display: flex; flex-direction: column; gap: 6px; }
.pv-frame { width: 100%; height: 640px; border: 2px solid #000; background: #fff; }

/* projects: kind badges; finance: profit share editor */
.badge.kind-client { background: #2f6fb0; } .badge.kind-game { background: #7a3fb0; } .badge.kind-internal { background: #556; }
.share-row { flex-wrap: nowrap; } .share-row select { width: auto; min-width: 150px; } .share-row input.pct { width: 80px; } .share-row input:not(.pct) { flex: 1; width: auto; }
.share-list { margin: 0; padding-left: 16px; }

/* day/month/year inputs (ui.js dateInput / monthInput) */
.dmy-wrap, .month-wrap { display: inline-flex; align-items: center; gap: 4px; position: relative; max-width: 100%; }
.dmy-wrap input.dmy { width: 9.5em; } .dmy-wrap input.dmy-time { width: 4.5em; }
.dmy-wrap .dmy-btn { padding: 2px 6px; }
.dmy-wrap .dmy-picker { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.month-wrap select { width: auto; }

/* ---------- AI Office dashboard (ai-office-board.js) ---------- */
.aio-strip { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0 8px 10px; padding: 8px 12px; background: var(--win-solid); box-shadow: inset 0 0 0 2px var(--frame-mid); }
.aio-strip .pill { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #1f2766; }
.aio-strip .pill.ok { background: #2f5a2a; } .aio-strip .pill.bad { background: #6a2a20; }
.aio-warn { color: var(--warn); font-weight: 700; }
.aio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; margin: 0 8px 12px; }
.aio-card { background: var(--win-solid); box-shadow: inset 0 0 0 3px var(--frame-mid), 4px 4px 0 #000; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.aio-card.running { box-shadow: inset 0 0 0 3px var(--mp), 4px 4px 0 #000; }
.aio-card.waiting { box-shadow: inset 0 0 0 3px var(--warn), 4px 4px 0 #000; }
.aio-card.error { box-shadow: inset 0 0 0 3px var(--hp), 4px 4px 0 #000; }
.aio-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.aio-head h3 { margin: 0; font-size: 18px; color: var(--gold); }
.aio-card h4 { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); text-transform: none; }
.aio-card section { border-top: 1px dashed #3a3f80; padding-top: 6px; }
.aio-task { margin: 2px 0; line-height: 1.5; overflow-wrap: anywhere; }
.aio-result .aio-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; max-height: 7.5em; overflow: hidden; background: #10122a; padding: 6px 10px; border-radius: 6px; }
.aio-result.open .aio-text { max-height: none; }
.aio-team { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aio-team li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.aio-team .aio-line { grid-column: 1 / -1; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aio-board { color: var(--ink-2); }
.aio-cmds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aio-why { color: #ff8a9a; }
.aio-foot { border-top: 2px solid #3a3f80; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.aio-input { width: 100%; resize: vertical; min-height: 56px; }
.link { background: none; border: none; color: var(--mp); cursor: pointer; padding: 0; text-decoration: underline; font: inherit; }
.po-settings { margin-top: 8px; } .po-settings > summary { cursor: pointer; font-weight: 700; color: var(--gold); margin: 0 8px 8px; }
@media (max-width: 700px) { .aio-grid { grid-template-columns: 1fr; } }

/* ---------- marketing radar ---------- */
.banner.ok { background: #14361f; box-shadow: inset 0 0 0 3px var(--accent); }
.radar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin: 0 8px 8px; }
.radar-card { background: var(--win-solid); box-shadow: inset 0 0 0 2px var(--frame-mid); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.radar-card.used { opacity: .7; }
.radar-card.picked { box-shadow: inset 0 0 0 2px var(--gold); }
.radar-title { margin: 4px 0 0; font-size: 16px; line-height: 1.4; }
.radar-title a { color: var(--gold); }
.radar-card p { margin: 2px 0; line-height: 1.6; }
.radar-angle { color: var(--mp); }
.radar-card .toolbar { margin: 6px 0 0; gap: 6px; }
.article-body { max-height: 55vh; overflow: auto; white-space: pre-wrap; line-height: 1.7; }
@media (max-width: 700px) { .radar-grid { grid-template-columns: 1fr; } }
.radar-filter { width: auto; min-width: 140px; }

/* ---------- phones: last in the file so it wins over the component rules above ---------- */
@media (max-width: 600px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat .value { font-size: clamp(20px, 7vw, 30px); overflow-wrap: anywhere; }
  .stat .ico { font-size: 20px; }
  .stat .label, .window-title { overflow-wrap: anywhere; }
}
.aio-test .aio-link code { display: block; overflow-wrap: anywhere; background: #10122a; padding: 4px 8px; border-radius: 4px; color: var(--gold); }
.aio-test .row { gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* AI Office: progress of a web-sent job (PAO Office reports the worker's checklist) */
.aio-cmd { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px dashed var(--frame-mid); }
.aio-cmd:last-child { border-bottom: 0; }
.aio-prompt { overflow-wrap: anywhere; opacity: .9; }
.aio-bar { height: 8px; background: var(--win-solid); border: 1px solid var(--frame-mid); }
.aio-bar > span { display: block; height: 100%; background: var(--gold); transition: width .4s; }
.aio-cmd.done .aio-bar > span { background: var(--ok); }
.notebook-card { display: block; text-decoration: none; color: inherit; }
.notebook-card:hover { outline: 2px solid var(--gold); }
/* AI Office: extensions per project (allowed / switched off / in use now) */
.aio-exts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.aio-ext { border: 1px solid var(--frame-mid); padding: 1px 6px; }
.aio-ext.off { opacity: .5; text-decoration: line-through; }
.aio-ext.live { border-color: var(--ok); color: var(--ok); }
/* marketing radar: search requests and where finds were used */
.radar-runs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.radar-run { border: 2px solid var(--frame-mid); padding: 8px; display: grid; gap: 4px; }
.radar-run.on { border-color: var(--gold); }
.radar-used { color: var(--ok); }
.radar-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--gold); padding: 0 6px; }

.aio-ext-now { display: inline-block; margin-left: 6px; padding: 0 6px; background: var(--gold, #ffd23f); color: #05061a; font-size: 11px; border-radius: 3px; }

.aio-cmd-result { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18em; overflow: auto; background: #10122a; padding: 6px 10px; border-radius: 6px; margin: 4px 0 0; }