/* Admin panel styles. Served from this host only (CSP style-src 'self'): no inline style="" anywhere, so every look is a class here.
   Logical properties only (margin-inline, padding-inline, text-align:start, inset-inline-*): the same sheet mirrors for Arabic (html dir="rtl").
   Fonts: system stacks only (CSP font-src 'self', no web fonts).

   CLASSES THE PAGES USE
   Layout     .shell .side .nav .nav-item(.is-active) .nav-badge .main .topbar .page-head .page-sub .search .content .flash .plain
   Blocks     .stack (vertical flow, gap) .row (wrapping row, gap) .row-between .grid-stats (stat cards) .grid-boxes (two-up boxes) .card .card-head .card-title
              .stat .stat-label .stat-value .stat-note (+ .is-good .is-warn .is-bad on .stat-value)  .muted  .sr-only  .note (+ .note-info)
   Table      .table-wrap (scrolls on a phone) > table.data   th/td  td.num (numbers, end-aligned)  td.strong  td.wrap  tr.is-selected
   Pills      .pill + .pill-ok .pill-warn .pill-bad .pill-info .pill-muted .pill-vip
   Buttons    .btn  .btn-primary  .btn-danger  .btn-ghost  .btn-sm   (a bare <button> is a primary button; button.secondary is a plain .btn)
   Filters    .filters > .chip (.is-active)      Tabs  .tabs > .tab (.is-active)
   Forms      .form .field label .input select textarea .hint
   Alerts     .alert + .alert-ok .alert-warn .alert-bad .alert-info   .empty-state > .empty-title + p
   Lists      .attn-list > .attn (+ .attn-warn .attn-ok .attn-info .attn-bad) with .attn-body .attn-title .attn-detail     .list > .list-item > .list-main (+ .setting-value)   details.dev-details
   Bars       .bars > .bar-row > .bar-head + .bar-track > .bar-fill.w-NN (NN = 0..100)  + .bar-bets .bar-wins .bar-gifts .bar-admin
   Profile    .profile .avatar .profile-name .profile-meta .profile-balance      .kv (definition list)
*/
:root {
  --bg: #f4f6fa; --card: #ffffff; --line: #e3e8ef; --line-soft: #eef1f5; --fg: #1b2230; --muted: #5b6475;
  --primary: #1d4ed8; --primary-dark: #1e40af; --primary-soft: #eef3ff; --on-primary: #ffffff;
  --side: #111827; --side-line: #1f2937; --side-fg: #e5e7eb; --side-muted: #9ca3af; --side-btn: #1f2937; --side-btn-line: #374151;
  --ok: #15803d; --ok-bg: #e8f5ec; --ok-fg: #14532d; --ok-line: #b7dfc3;
  --warn: #b45309; --warn-bg: #fff7e6; --warn-line: #f5d9a8; --warn-fg: #7a4a00; --pill-warn-bg: #fef3c7; --pill-warn-fg: #78350f;
  --bad: #b91c1c; --bad-bg: #fde8e8; --bad-fg: #9b1c1c; --bad-line: #f1b5b5;
  --info-bg: #dbe5ff; --info-fg: #1e3a8a; --muted-bg: #eef1f5; --muted-fg: #374151;
  --danger-line: #c2410c; --danger-fg: #9a3412; --danger-bg: #fff1e8;
  --badge: #f59e0b; --badge-fg: #111827; --radius: 12px; --radius-sm: 8px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 "Segoe UI", Tahoma, Arial, sans-serif; }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
h1 { font-size: 26px; font-weight: 700; margin: 0; line-height: 1.25; }
h2 { font-size: 17px; font-weight: 600; margin: 0; }
p { margin: 0 0 10px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.muted, .empty { color: var(--muted); }
.ok { color: var(--ok); } .err { color: var(--bad); } .warn { color: var(--warn); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--primary); color: var(--on-primary); padding: 8px 12px; border-radius: var(--radius-sm); z-index: 10; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---- shell: side menu + main ---- */
.shell { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; }
.side { flex: 1 1 230px; max-width: 280px; background: var(--side); color: var(--side-fg); padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.side-logo { width: 34px; height: 34px; border-radius: 9px; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.side-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.side-brand-text strong { font-size: 15px; color: #fff; }
.side-brand-text small { font-size: 12px; color: var(--side-muted); }
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-sm); color: #d1d5db; text-decoration: none; font-size: 15px; }
.nav-item:hover { background: var(--side-line); color: #fff; }
.nav-item.is-active { background: var(--primary); color: #fff; font-weight: 600; }
.nav-label { flex: 1; }
.nav-badge { background: var(--badge); color: var(--badge-fg); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.side-foot { border-top: 1px solid var(--side-line); padding: 14px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.side-who { font-size: 13px; color: var(--side-muted); overflow-wrap: anywhere; }
.side-who strong { color: #fff; }
.side-role { display: block; font-size: 12px; margin-block-start: 2px; }
.side-foot form { margin: 0; }
.side-foot .btn { width: 100%; }
.main { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 22px; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.page-head { display: flex; flex-direction: column; gap: 4px; }
.page-sub { color: var(--muted); font-size: 14px; }
.search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.search .input { width: 300px; max-width: 100%; }
.content { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.plain { max-width: 560px; margin: 0 auto; padding: 32px 16px 48px; display: flex; flex-direction: column; gap: 18px; }
.plain .side-brand { padding: 0; }
.plain .side-brand-text strong { color: var(--fg); }
.plain .side-brand-text small { color: var(--muted); }

/* ---- blocks ---- */
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 100%; }
/* a table scrolls inside its own box and never widens the page: every child of a stack may shrink below its content (a phone is 390 px wide) */
.stack > *, .content > * { min-width: 0; max-width: 100%; }
.stack > .table-wrap { min-width: 0; max-width: 100%; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.grid-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.card, form.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 0; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-title { font-size: 17px; font-weight: 600; margin: 0; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-note { color: var(--muted); font-size: 13px; }
.is-good { color: var(--ok); } .is-warn { color: var(--warn); } .is-bad { color: var(--bad); }
.note { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-fg); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.note-info { background: var(--primary-soft); border-color: var(--info-bg); color: var(--info-fg); }
.banner { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; color: var(--warn-fg); }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
table:not(.data) { background: var(--card); display: block; overflow-x: auto; }
th, td { text-align: start; padding: 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
td.num, th.num { text-align: end; }
td.strong { font-weight: 600; }
td.wrap { white-space: normal; }
tr.is-selected td { background: var(--primary-soft); }
table.data tbody tr:hover td { background: #fafbfd; }

/* ---- pills ---- */
.pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--muted-bg); color: var(--fg); white-space: nowrap; }
.pill-ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill-warn { background: var(--pill-warn-bg); color: var(--pill-warn-fg); }
.pill-bad { background: var(--bad-bg); color: var(--bad-fg); }
.pill-info { background: var(--info-bg); color: var(--info-fg); }
.pill-muted { background: var(--muted-bg); color: var(--muted-fg); }
.pill-vip { background: var(--pill-warn-bg); color: var(--pill-warn-fg); }

/* ---- buttons and forms ---- */
button, .btn { font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); padding: 9px 16px; min-height: 40px; cursor: pointer; border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:hover, .btn:hover { background: var(--primary-dark); color: var(--on-primary); }
button.secondary, .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) { background: var(--card); border-color: #cbd3df; color: var(--fg); }
button.secondary:hover, .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover { background: #eef2f7; color: var(--fg); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-danger { background: var(--card); border-color: var(--danger-line); color: var(--danger-fg); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger-fg); }
.btn-ghost { background: var(--side-btn); border-color: var(--side-btn-line); color: #fff; }
.btn-ghost:hover { background: #374151; color: #fff; }
.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }
form.inline { display: inline; margin: 0; }
label { display: block; margin: 8px 0 3px; color: var(--muted); font-size: 14px; }
.input, input, select, textarea { font: inherit; font-size: 15px; padding: 9px 12px; min-height: 44px; border: 1px solid #cbd3df; border-radius: var(--radius-sm); background: var(--card); color: var(--fg); max-width: 100%; }
input[type="hidden"] { display: none; }
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { margin: 0; }
.hint { color: var(--muted); font-size: 13px; }

/* ---- filters, tabs ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid #cbd3df; border-radius: var(--radius-sm); background: var(--card); color: var(--fg); text-decoration: none; font-size: 14px; font-weight: 600; }
.chip:hover { background: #eef2f7; color: var(--fg); }
.chip.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-weight: 600; }
.tab:hover { color: var(--fg); }
.tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }

/* ---- alerts, empty state, flash ---- */
.alert { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; background: var(--card); }
.alert-ok, .flash p.ok[role="status"] { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-fg); }
.alert-bad, .flash p.err[role="status"], p.err[role="alert"] { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-fg); }
.alert-info { background: var(--primary-soft); border-color: var(--info-bg); color: var(--info-fg); }
.flash p { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
p.err[role="alert"] { border: 1px solid var(--bad-line); border-radius: 10px; padding: 12px 14px; }
.empty-state { text-align: center; color: var(--muted); padding: 28px 16px; border: 1px dashed #cbd3df; border-radius: var(--radius); background: var(--card); }
.empty-title { font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.revealed { font-family: ui-monospace, Consolas, monospace; background: var(--card); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; }

/* ---- attention list, plain list ---- */
.attn-list { display: flex; flex-direction: column; gap: 10px; }
.attn { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--bg); }
.attn-warn { background: var(--warn-bg); } .attn-ok { background: #f0faf3; } .attn-info { background: var(--bg); } .attn-bad { background: var(--bad-bg); }
.attn-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attn-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.attn-detail { color: var(--muted); font-size: 13px; }
.list { display: flex; flex-direction: column; }
.list-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.list-item > :first-child { min-width: 0; overflow-wrap: anywhere; }
.list-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setting-value { font-weight: 600; }
.dev-details { margin-block-start: 2px; }
.dev-details summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.dev-details p { margin: 4px 0 0; overflow-wrap: anywhere; }
.list-item > :last-child { color: var(--muted); white-space: nowrap; }

/* ---- bars (width classes at the end of the file: no inline style) ---- */
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-head { display: flex; justify-content: space-between; font-size: 14px; gap: 10px; }
.bar-track { height: 10px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 10px; border-radius: 999px; background: var(--primary); }
.bar-bets { background: #1d4ed8; } .bar-wins { background: #0ea5e9; } .bar-gifts { background: #f59e0b; } .bar-admin { background: #9333ea; }

/* ---- profile, key-value ---- */
.profile { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--info-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex: none; }
.profile-name { font-size: 20px; font-weight: 700; }
.profile-meta { color: var(--muted); font-size: 14px; }
.profile-balance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.profile-balance strong { font-size: 28px; }
.kv { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: 0; margin: 0; }
.kv dt, .kv dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.kv dt { color: var(--muted); }

/* ---- phones: the menu stacks above the page ---- */
@media (max-width: 860px) {
  .side { flex: 1 1 100%; max-width: none; padding: 12px; }
  .nav { flex-direction: row; flex-wrap: wrap; flex: none; }
  .nav-item { min-height: 44px; padding: 8px 12px; }
  .side-foot { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side-foot .btn { width: auto; }
  .main { flex-basis: 100%; padding: 20px 16px 40px; }
  .search { width: 100%; }
  .search .input { flex: 1; width: auto; }
  .profile-balance { align-items: flex-start; }
}

/* ---- bar widths: .w-0 .. .w-100 ---- */
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* ---- game control (Pages/Games/Control): presets, knobs, the check results and the status line. Logical properties only. ---- */
.gc-game { font-size: 17px; }
.gc-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gc-group legend { padding-inline: 6px; font-weight: 600; }
.gc-mode { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--fg); font-weight: 600; }
.gc-mode input, .gc-choice input { width: auto; min-height: 0; padding: 0; accent-color: var(--primary); }
.gc-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.gc-choice { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; min-height: 44px; border: 1px solid #cbd3df; border-radius: var(--radius-sm); background: var(--card); color: var(--fg); cursor: pointer; }
.gc-choice-name { font-weight: 600; }
.gc-choice small { color: var(--muted); }
.gc-knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.gc-feel { background: var(--bg); }
.gc-feel .gc-choice { cursor: not-allowed; opacity: .6; }
.gc-results { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.gc-warnings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gc-status { white-space: normal; }

/* Designer view of the game control (Pages/Games/Control/_Designer*): the probability tree, the editor of the selected level, the estimate, the simulation. Logical properties only;
   colours come from classes (no inline style); a phone sees the indented list instead of the picture. */
.gd { gap: 18px; }
.gd.is-loading .gd-estimate, .gd.is-loading .gd-tree { opacity: .6; transition: opacity .15s; }
.gd-tree { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gd-tree-svg { width: 100%; max-width: 860px; margin-inline: auto; }
.gd-svg { display: block; width: 100%; height: auto; }
.gd-line { stroke: #b6c0d0; stroke-width: 2; }
.gd-box { fill: var(--card); stroke: #cbd3df; stroke-width: 2; }
.gd-node[role="button"] { cursor: pointer; }
.gd-node[role="button"]:hover .gd-box { fill: #f4f7fd; }
.gd-node.is-selected .gd-box { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 3; }
.gd-node:focus { outline: none; }
.gd-node:focus-visible .gd-box { stroke: var(--primary); stroke-width: 5; }
.gd-static .gd-box { fill: var(--bg); stroke-dasharray: 6 4; }
.gd-t-name { fill: var(--fg); font-weight: 600; }
.gd-t-value { fill: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.gd-t-muted { fill: var(--muted); }
.gd-stripe { fill: #94a3b8; }
.gd-node.gd-cat-empty .gd-stripe { fill: #94a3b8; }
.gd-node.gd-cat-partial .gd-stripe { fill: #60a5fa; }
.gd-node.gd-cat-small .gd-stripe { fill: #34d399; }
.gd-node.gd-cat-medium .gd-stripe { fill: #fbbf24; }
.gd-node.gd-cat-big .gd-stripe { fill: #f87171; }
.gd-levels { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 8px; }
.gd-level { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; text-align: start; background: var(--card); color: var(--fg); border: 2px solid #cbd3df; border-inline-start-width: 8px;
  border-radius: var(--radius-sm); padding: 10px 14px; min-height: 52px; font-weight: 600; }
.gd-level:hover { background: #f4f7fd; color: var(--fg); }
.gd-level.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.gd-level.gd-cat-empty { border-inline-start-color: #94a3b8; }
.gd-level.gd-cat-partial { border-inline-start-color: #60a5fa; }
.gd-level.gd-cat-small { border-inline-start-color: #34d399; }
.gd-level.gd-cat-medium { border-inline-start-color: #fbbf24; }
.gd-level.gd-cat-big { border-inline-start-color: #f87171; }
.gd-level-name { font-weight: 600; }
.gd-level-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gd-level-sub { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 400; }
.gd-indent { margin-inline-start: 20px; }
li.gd-static { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px dashed #cbd3df; border-radius: var(--radius-sm); padding: 10px 14px; color: var(--muted); }
.gd-total { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.gd-editor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gd-editor .card-head { margin-bottom: 0; }
.gd-sentence { font-size: 17px; margin: 0; }
.gd-slider { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.gd-range { flex: 1 1 240px; min-width: 0; min-height: 32px; height: 32px; padding: 0; border: 0; background: transparent; accent-color: var(--primary); }
.gd-range:disabled { opacity: .5; }
.gd-num-wrap { display: inline-flex; align-items: center; gap: 6px; }
.gd-num { width: 112px; text-align: end; font-variant-numeric: tabular-nums; direction: ltr; }
.gd-num:read-only { background: var(--bg); }
.gd-unit { font-weight: 600; color: var(--muted); }
.gd-editor p { margin: 0; }
.gd-bal { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gd-bal legend { padding-inline: 6px; font-weight: 600; }
.gc-choice.is-on, .gc-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.gd-estimate { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gd-estimate p { margin: 0; }
.gd-table th, .gd-table td { white-space: normal; }
.gd-table th[scope="row"] { color: var(--fg); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.gd-problems { margin: 6px 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
.gd-chart-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gd-chart-box p { margin: 0; }
.gd-chart { display: block; width: 100%; max-width: 720px; height: auto; }
.gd-axis { stroke: #cbd3df; stroke-width: 1; }
.gd-bar-live { fill: #9aa5b8; }
.gd-bar-new { fill: var(--primary); }
.gd-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.gd-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.gd-key-live { background: #9aa5b8; }
.gd-key-new { background: var(--primary); }
.gd-sim { min-width: 0; }
.gd-sim p { margin: 0; }
.gd-run { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.gd-result { min-width: 0; }
.gd-result.is-stale { opacity: .85; }
.gd-more { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 14px; background: var(--card); }
.gd-more summary { cursor: pointer; font-weight: 600; }
.gd-more ul { margin: 8px 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
/* the check played on the owner's own computer: three numbered steps, the command in a box that always reads left to right */
.gd-steps { margin: 0; padding-inline-start: 26px; display: flex; flex-direction: column; gap: 16px; list-style: decimal; }
.gd-steps li::marker { font-weight: 700; }
.gd-steps li { min-width: 0; padding-inline-start: 4px; }
.gd-steps p { margin: 0; }
.gd-cmd { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); overflow-wrap: anywhere; white-space: pre-wrap; text-align: start; font-size: 13px; }
.gd-file { max-width: 100%; min-width: 0; }
.gd-upload { margin: 0; }
.gd-gate p { margin: 0; }
/* a button that cannot be pressed must not look pressable (the app has no general disabled look; this is only for the Designer) */
.gd button:disabled, .gd button:disabled:hover { background: var(--muted-bg); border-color: #cbd3df; color: var(--muted); cursor: not-allowed; opacity: .7; }
.gd-realmaths summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .gd-tree-svg { display: none; }
  .gd-levels { display: flex; }
  .gd-slider { gap: 10px; }
  /* the picture shrinks with the screen: its axis words are made bigger so they stay readable (they are in picture units) */
  .gd-chart .gd-axis-label { font-size: 17px; }
}

/* Notices and Exchange codes (Wave 3) */
.nx-window { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); }
.nx-window-title { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.nx-ticker { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-tag { display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); font-family: ui-monospace, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.nx-recall > summary { list-style: none; cursor: pointer; display: inline-flex; }
.nx-recall > summary::-webkit-details-marker { display: none; }
.nx-recall[open] > form { margin-top: 8px; min-width: 240px; }
.nx-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Guided editors (Settings/Editor): forms for the settings that hold tables and lists. */
.ed-h3 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; }
.ed-area { font-size: 18px; font-weight: 600; margin: 8px 0 0; }
.ed-group { border-inline-start: 3px solid var(--line); padding-inline-start: 12px; margin-block: 6px; }
.ed-table .table-wrap input.input, .ed-table .table-wrap select, .ed-table .table-wrap textarea { min-width: 96px; }
.ed-table th[scope="row"] { white-space: nowrap; font-weight: 600; }
.ed-table tr.ed-add td, .ed-table tr.ed-add th { background: var(--bg); }
.ed-bad { border-color: var(--danger-line); background: var(--bad-bg); }
.ed-wide { min-width: 220px; }
.ed-checks { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.ed-check { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; }
.ed-check input { width: auto; min-height: 0; padding: 0; accent-color: var(--primary); }
.ed-diff, .ed-facts, .ed-issues { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.ed-review-item { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.ed-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* Easy view of the game control (Pages/Games/Control/_Easy): the switch, the big state, the choice cards. Logical properties only; phone width stacks the cards. */
.gc-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gc-modes .hint { flex: 1 1 220px; }
.gc-state { background: var(--primary-soft); border-color: var(--info-bg); gap: 8px; }
.gc-state-big { font-size: 34px; line-height: 1.2; font-weight: 700; color: var(--primary-dark); overflow-wrap: anywhere; }
.gc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.gc-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 2px; margin: 0; padding: 12px 14px; min-height: 76px; border: 2px solid #cbd3df; border-radius: var(--radius); background: var(--card); color: var(--fg); cursor: pointer; }
.gc-card input { grid-row: 1 / span 2; width: auto; min-height: 0; padding: 0; accent-color: var(--primary); }
.gc-card:hover { background: #f4f7fd; }
.gc-card.is-on, .gc-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.gc-card-big { font-size: 22px; font-weight: 700; line-height: 1.2; }
.gc-card-note { grid-column: 2; color: var(--muted); font-size: 13px; }
.gc-notes { display: flex; flex-direction: column; gap: 4px; }
.gc-notes p { margin: 0; }
.btn-lg { min-height: 52px; padding: 12px 28px; font-size: 17px; }
details.card > summary { cursor: pointer; }
details.card ul { margin: 10px 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 860px) {
  .btn-lg { width: 100%; }
  .gc-state-big { font-size: 28px; }
}