/* Bespar STT console. The look is Bespar Label's (STT/services/bespar/web/src/styles.css): its colour
   tokens for light and dark, three control heights (30 / 36 / 44), two radii (8 for controls, 12 for
   panels), and Vazirmatn. Light or dark follows the system (prefers-color-scheme). Right to left
   throughout; codes, keys and addresses are set left to right where they appear.
   Orange = the main action and focus; red = errors and what cannot be undone; green = done.
   That look stays on the pages before signing in (sign-in, invitation, sign-up, the terms, Bespar's root
   console). Once signed in, the page's root carries .gs and the last part of this file, design 6 «خوش‌حساب»
   (S12, docs/designs/console-ten-designs.html), restyles the console: every rule there starts with .gs. */

:root {
  --bg: #f1eadc;
  --bg-2: #fcfaf5;
  --panel: #fcfaf5;
  --panel-2: #f4eee2;
  --raised: #e6dcc7;
  --field: #ffffff;
  --line: #d3c6ac;
  --line-2: #bfb29a;
  --text: #0e1d36;
  --text-2: #2a3650;
  --muted: #46526a;
  --faint: #55617a;

  --accent: #c97a00;
  --accent-text: #0e1d36;
  --accent-soft: rgba(201, 122, 0, 0.12);
  --accent-ink: #8a5300;

  --info: #1d4ed8;
  --info-soft: rgba(29, 78, 216, 0.08);
  --ok: #12703f;
  --ok-soft: rgba(18, 112, 63, 0.1);
  --warn: #8c5a00;
  --warn-soft: #ffe89a;
  --bad: #b42323;
  --bad-soft: rgba(180, 35, 35, 0.08);

  --chart-a: #c97a00;
  --chart-b: #1d4ed8;
  /* The top bar is navy in either theme, as S11's drawn console (docs/designs/console-redesign.html). */
  --chrome: #0e1d36;
  --on-chrome: #efe6d2;
  --on-chrome-2: rgba(239, 230, 210, 0.78);
  --chrome-line: rgba(239, 230, 210, 0.26);
  --overlay: rgba(14, 29, 54, 0.4);
  --shadow: 0 14px 34px rgba(14, 29, 54, 0.14);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2346526a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;

  --font-ui: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --h-sm: 30px;
  --h: 36px;
  --h-lg: 44px;
  --r: 8px;
  --r-lg: 12px;
  --gutter: 24px;
  --side-w: 232px;
  --topbar-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417;
    --bg-2: #16191d;
    --panel: #1b1e23;
    --panel-2: #23272e;
    --raised: #2a2f37;
    --field: #121417;
    --line: #2e333b;
    --line-2: #3a404a;
    --text: #e9eaec;
    --text-2: #c9cdd4;
    --muted: #a3a9b3;
    --faint: #8e95a0;

    --accent: #f5a524;
    --accent-text: #121417;
    --accent-soft: rgba(245, 165, 36, 0.14);
    --accent-ink: #ffd08a;

    --info: #8db8ff;
    --info-soft: rgba(141, 184, 255, 0.14);
    --ok: #7dd3a0;
    --ok-soft: rgba(125, 211, 160, 0.14);
    --warn: #f5b54a;
    --warn-soft: rgba(245, 165, 36, 0.26);
    --bad: #f08c8c;
    --bad-soft: rgba(240, 140, 140, 0.14);

    --chart-a: #f5a524;
    --chart-b: #8db8ff;
    --chrome: #0b0d10;
    --on-chrome: #e9eaec;
    --on-chrome-2: rgba(233, 234, 236, 0.74);
    --chrome-line: rgba(233, 234, 236, 0.2);
    --overlay: rgba(0, 0, 0, 0.58);
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a9b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

@font-face { font-family: "Vazirmatn"; src: url("/console/assets/fonts/Vazirmatn-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/console/assets/fonts/Vazirmatn-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/console/assets/fonts/Vazirmatn-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/console/assets/fonts/Vazirmatn-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
/* Design 6's display face, for the dashboard's greeting and the balance only (fetched only where they are drawn). */
@font-face { font-family: "Lalezar"; src: url("/console/assets/fonts/Lalezar-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* --- base ------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4 { line-height: 1.4; font-weight: 600; margin: 0; }
p { margin: 0 0 8px; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; cursor: pointer; }
code, pre, kbd { font-family: var(--font-code); }
ol { list-style-type: persian; }
code { font-size: 0.9em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; direction: ltr; unicode-bidi: isolate; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* --- helpers ---------------------------------------------------------------------------------------- */
.ltr { direction: ltr; unicode-bidi: isolate; }
.mono { font-family: var(--font-code); font-size: 0.92em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.block { display: block; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.slot:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.loading { color: var(--muted); padding: 12px 0; }
.boot { display: grid; place-items: center; min-height: 60vh; }
.noscript { max-width: 520px; margin: 48px auto; padding: 0 16px; text-align: center; }

.skip {
  position: absolute; inset-inline-start: 12px; top: -48px; z-index: 100;
  background: var(--accent); color: var(--accent-text); padding: 8px 14px; border-radius: var(--r); text-decoration: none; font-weight: 600;
}
.skip:focus { top: 8px; }

/* --- frame: top bar, side navigation, main -------------------------------------------------------- */
/* The top bar (S11; drawn by design 6 since S12, below): Bespar's mark and «کنسول», the account's name, the
   person's email and avatar, «خروج». */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  min-height: var(--topbar-h); padding: 8px var(--gutter);
  background: var(--chrome); color: var(--on-chrome);
}
.topbar :focus-visible { outline-color: var(--on-chrome); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--on-chrome); text-decoration: none; flex: 0 0 auto; }
.brand:hover { color: var(--on-chrome); }
.brand-logo img { display: block; height: 28px; width: auto; }
.topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.who { display: inline-flex; align-items: center; gap: 10px; }
.who-email { font-family: var(--font-code); font-size: 13px; color: var(--on-chrome-2); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--accent); color: #0e1d36; font-weight: 700; line-height: 1;
}
.btn.menu-btn { display: none; background: transparent; color: var(--on-chrome); border-color: var(--chrome-line); }
.btn.menu-btn:hover { background: var(--chrome-line); color: var(--on-chrome); }

/* The side navigation: «حساب», then «پروژه» with its picker, then «راهنما». */
.layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: start; min-height: calc(100vh - var(--topbar-h)); }
.side {
  position: sticky; top: var(--topbar-h); align-self: start;
  display: flex; flex-direction: column; gap: 6px; min-height: calc(100vh - var(--topbar-h));
  max-height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 12px 12px 18px; border-inline-end: 1px solid var(--line); background: var(--bg-2);
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 12px 4px; margin: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; min-height: var(--h); padding: 4px 12px; border-radius: var(--r);
  color: var(--text-2); text-decoration: none; font-weight: 500;
}
.nav-link:hover { background: var(--panel-2); color: var(--text); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-label { display: flex; align-items: center; min-height: var(--h); padding: 4px 12px; color: var(--text-2); font-weight: 500; }
.nav-list.sub { padding-inline-start: 12px; }
.nav-link.sub { min-height: var(--h-sm); font-size: 14px; color: var(--muted); }
.nav-link.sub[aria-current="page"] { color: var(--accent-ink); }
.project-picker { min-height: var(--h); margin: 2px 4px 6px; width: auto; font-weight: 600; background-color: var(--panel-2); }

.main { min-width: 0; padding: 28px var(--gutter) 64px; }
.main:focus { outline: none; }
.view { max-width: 1080px; display: flex; flex-direction: column; gap: 16px; }
.main.public { padding: 0; }

/* --- page head, cards ------------------------------------------------------------------------------ */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; margin-bottom: 8px; }
.page-title { flex: 1 1 320px; min-width: 0; }
.page-head h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.lead { color: var(--text-2); max-width: 720px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { font-size: 18px; margin-top: 8px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; min-width: 0; }
.card > h2 { font-size: 17px; margin-bottom: 12px; }
.card > * + * { margin-top: 12px; }
.card > h2 + * { margin-top: 0; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }

.stats { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.4; }

.facts { margin: 0; display: grid; gap: 8px; }
.facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; min-width: 0; }
.plain-list { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 4px; }
.eyebrow { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.card-head h2, .card-head h3 { font-size: 17px; margin: 0; }
.bad-text { color: var(--bad); }

/* --- the ring, notes and buttons in a row (the dashboard itself is design 6's, below) ----------------- */
.note { font-size: 13px; color: var(--muted); margin: 0; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.link { font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.meter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.meter > div { display: flex; flex-direction: column; gap: 4px; }
.ring { position: relative; width: 86px; height: 86px; flex: 0 0 auto; }
.ring svg { display: block; width: 86px; height: 86px; }
.ring-track { fill: none; stroke: var(--raised); stroke-width: 10; }
.ring-used { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; }
.ring-warn .ring-used { stroke: var(--warn); }
.ring-bad .ring-used { stroke: var(--bad); }
.ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; text-align: center; padding: 18px; line-height: 1.2; }

/* --- tabs (usage), filters, the request log --------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tab {
  display: inline-flex; align-items: center; min-height: var(--h); padding: 4px 14px; color: var(--text-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500;
}
.tab:hover { color: var(--text); background: var(--panel-2); border-radius: var(--r) var(--r) 0 0; }
.tab[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .field { flex: 0 0 auto; }
.select.narrow { width: auto; min-width: 160px; }
table.t td.num { font-variant-numeric: tabular-nums; }
table.t.log td { font-size: 13.5px; }

/* --- the switch (learning) and the playground's text -------------------------------------------------- */
.switch {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--h); padding: 2px 4px; cursor: pointer;
  background: transparent; border: 0; color: var(--text); font-weight: 600; border-radius: var(--r);
}
.switch:disabled { cursor: not-allowed; opacity: 0.6; }
.switch-track {
  display: inline-flex; align-items: center; justify-content: flex-start; width: 44px; height: 26px; padding: 3px;
  border-radius: 999px; background: var(--line-2); transition: background-color 0.15s;
}
.switch-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.switch[aria-checked="true"] .switch-track { background: var(--ok); justify-content: flex-end; }
.transcript {
  white-space: pre-wrap; line-height: 2; padding: 14px 16px; max-height: 420px; overflow-y: auto;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--field);
}
.file-input { padding: 8px 10px; }

/* --- buttons ---------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  min-height: var(--h); padding: 4px 16px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
  font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: var(--raised); border-color: var(--muted); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); color: var(--accent-text); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--panel-2); color: var(--text); }
.btn.danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.btn.small { min-height: var(--h-sm); padding: 2px 10px; font-size: 13px; }
.btn[aria-busy="true"] { cursor: progress; }
.btn.chip { border-radius: 999px; }
.btn.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- forms ------------------------------------------------------------------------------------------ */
form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 14px; font-weight: 500; color: var(--text-2); }
.hint { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.7; }
.hint.block { display: block; margin-top: 2px; }
.input, .select, .textarea {
  width: 100%; min-height: var(--h-lg); padding: 6px 12px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--field); color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.textarea { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.8; }
.input::placeholder, .textarea::placeholder { color: var(--faint); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.ltr-input { direction: ltr; text-align: left; font-family: var(--font-code); }
input[type="date"].ltr-input { font-family: var(--font-ui); }
.select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: left 12px center; padding-inline-end: 36px;
}
select option { background: var(--panel); color: var(--text); }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field.wide { grid-column: 1 / -1; }
fieldset.options { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.options > legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.choice-list { display: flex; flex-direction: column; gap: 8px; }
label.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.7; }
label.check.disabled { opacity: 0.6; cursor: not-allowed; }
details.advanced { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
details.advanced > summary { cursor: pointer; padding: 10px 14px; font-weight: 500; }
.advanced-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
details > summary { cursor: pointer; }
.range-form { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-top: 14px; }
.range-form .field { flex: 1 1 200px; }
.range-form .form-actions { align-self: flex-start; padding-top: 30px; }
.range-line { font-size: 15px; }

/* --- alerts, badges, toasts ----------------------------------------------------------------------- */
.alert { padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel-2); margin: 0; }
.alert > p + p { margin-top: 4px; }
.alert.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.alert.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.alert.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.badge { display: inline-flex; align-items: center; height: 24px; font-size: 12.5px; border-radius: 999px; padding: 0 10px; background: var(--panel-2); color: var(--text-2); white-space: nowrap; font-weight: 500; border: 1px solid var(--line); }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.toasts { position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 70; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: calc(100vw - 40px); }
.toast { pointer-events: auto; background: var(--raised); color: var(--text); border: 1px solid var(--line-2); border-inline-start: 4px solid var(--ok); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--shadow); max-width: 440px; }
.toast.bad { border-inline-start-color: var(--bad); }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-lg); margin: 0; }

/* --- tables ----------------------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); max-width: 100%; }
.card .table-wrap { border-radius: var(--r); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: start; font-weight: 500; font-size: 13px; color: var(--muted); background: var(--panel-2); padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
table.t tbody tr:last-child td { border-bottom: 0; }
.cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 180px; max-width: 360px; white-space: normal; }
.key-visible { white-space: nowrap; }
.confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.confirm-q { font-size: 13.5px; color: var(--bad); max-width: 360px; white-space: normal; }

/* --- secrets shown once, code ----------------------------------------------------------------------- */
.secret-panel {
  border: 2px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.secret-panel h2 { font-size: 18px; }
.secret-warning strong { color: var(--text); }
.secret-box {
  background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px;
  overflow-x: auto; direction: ltr; text-align: left;
}
.secret-value, .totp-secret {
  font-family: var(--font-code); font-size: 15px; background: none; border: 0; padding: 0;
  overflow-wrap: anywhere; word-break: break-all; user-select: all; -webkit-user-select: all;
}
.totp-secret { font-size: 18px; letter-spacing: 0.06em; word-break: normal; white-space: normal; }
.copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copy-status { color: var(--muted); }
.code-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.code-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
pre.code { margin: 0; padding: 14px 16px; overflow-x: auto; direction: ltr; text-align: left; font-size: 13.5px; line-height: 1.65; tab-size: 4; }
pre.code code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }

/* --- the pages before signing in -------------------------------------------------------------------- */
.auth { width: 100%; max-width: 560px; margin: 0 auto; padding: 40px 16px 64px; display: flex; flex-direction: column; gap: 20px; }
.auth.wide { max-width: 860px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth-brand .brand-logo img { height: 48px; width: auto; }
.auth-product { color: var(--muted); font-weight: 500; margin: 0; }
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 22px; }
.auth-card .page-head h1 { font-size: 24px; }
.auth-card h3 { font-size: 16px; }
.auth-links { display: flex; justify-content: center; gap: 20px; font-size: 14px; }
/* The pages before signing in since 2026-11-02 (the owner: "push the same login style as for label for stt as
   well"): the sign-in at the reading start, the logo's rain on the other side (logo-rain.js), under the company
   site's starry navy sky — the same in both colour schemes, so the tokens the card and the form read are set here.
   authFrame adds .rain; the console's failure page keeps .auth alone. On a phone the rain stands above the card;
   the terms (.wide) keep the sky without the rain, for the text's width. */
.auth.rain {
  --bg: #0e1d36; --panel: rgba(10, 22, 41, 0.78); --panel-2: rgba(239, 230, 210, 0.06); --raised: rgba(239, 230, 210, 0.1);
  --field: rgba(6, 14, 28, 0.72); --line: rgba(239, 230, 210, 0.14); --line-2: rgba(239, 230, 210, 0.24);
  --text: #efe6d2; --text-2: #d8cfbd; --muted: #a9b4c7; --faint: #8390a6;
  --accent: #f5a524; --accent-text: #0e1d36; --accent-soft: rgba(245, 165, 36, 0.16); --accent-ink: #ffd08a;
  --info: #8db8ff; --info-soft: rgba(141, 184, 255, 0.14); --ok: #7dd3a0; --ok-soft: rgba(125, 211, 160, 0.14);
  --warn: #f5b54a; --warn-soft: rgba(245, 165, 36, 0.26); --bad: #f08c8c; --bad-soft: rgba(240, 140, 140, 0.14);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  color-scheme: dark; color: var(--text);
  position: relative; isolation: isolate; overflow: hidden; max-width: none; min-height: 100vh; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(16px, 4vw, 56px); padding: 24px clamp(16px, 5vw, 72px);
  background: radial-gradient(130% 115% at 50% 42%, transparent 50%, rgba(0, 0, 0, 0.34) 100%), linear-gradient(180deg, #13264a 0%, #0a1629 100%);
}
.auth-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
.auth-side { display: flex; flex-direction: column; gap: 20px; width: min(520px, 100%); justify-self: center; min-width: 0; }
.auth-rain { align-self: stretch; min-height: min(78vh, 680px); }
.auth.rain.wide { grid-template-columns: minmax(0, 1fr); }
.auth.rain.wide .auth-side { width: min(860px, 100%); }
.auth.rain.wide .auth-rain { display: none; }
@media (max-width: 820px) {
  .auth.rain { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; }
  .auth.rain .auth-rain { order: -1; min-height: 0; height: 30vh; }
}
.after-form { margin-top: 4px; }
.step-label { font-size: 13px; color: var(--accent-ink); font-weight: 600; margin: 0; }
.setup-block { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); }
.setup-block.consent { border-color: var(--accent); }
.otpauth-link { font-weight: 600; }
/* The authenticator's QR code (qr.js): dark on white in either theme, so every camera reads it. */
.qr-box { display: flex; justify-content: center; }
.qr { display: block; width: 224px; height: 224px; max-width: 100%; border-radius: var(--r); }
.qr-light { fill: #fff; }
.qr-dark { fill: #000; }
.terms-box { max-height: 320px; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--field); }
.terms-title { font-size: 16px; margin-bottom: 4px; }

/* --- rendered Markdown (terms) ---------------------------------------------------------------------- */
.terms-article, .terms-box { line-height: 1.95; }
.terms-article h2 { font-size: 18px; margin: 20px 0 6px; }
.terms-article h3, .terms-article h4 { font-size: 16px; margin: 14px 0 4px; }
.terms-box h5 { font-size: 15px; margin: 16px 0 4px; }
.terms-box h6 { font-size: 14px; margin: 12px 0 4px; }
.terms-article ul, .terms-article ol, .terms-box ul, .terms-box ol { padding-inline-start: 24px; margin: 6px 0 12px; }
.terms-article li + li, .terms-box li + li { margin-top: 4px; }
.terms-article blockquote, .terms-box blockquote {
  margin: 10px 0; padding: 8px 14px; border-inline-start: 4px solid var(--accent); background: var(--accent-soft); border-radius: 4px;
}

/* --- usage chart ------------------------------------------------------------------------------------ */
.chart-frame { overflow-x: auto; direction: rtl; }
svg.chart { display: block; direction: ltr; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .scale, svg.chart .tick { font-family: var(--font-ui); font-size: 11.5px; fill: var(--muted); }
svg.chart.billable .bar { fill: var(--chart-a); }
svg.chart.test .bar { fill: var(--chart-b); }
svg.chart .bar:hover { opacity: 0.8; }
.details-card > summary { font-weight: 600; }
.details-card[open] > summary { margin-bottom: 12px; }

/* --- the authenticator code asked again before a sensitive change (step-up) ------------------------ */
dialog.step-up, dialog.dialog {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); color: var(--text);
  padding: 24px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--shadow);
}
dialog.step-up::backdrop, dialog.dialog::backdrop { background: var(--overlay); }
dialog.step-up .dialog-head h2 { font-size: 18px; }
dialog.step-up .dialog-body > p { color: var(--text-2); margin-bottom: 14px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dialog-head h2 { font-size: 19px; }

/* --- adding funds (S11; the sheet is design 6's since S12, below): the way to pay, Bespar's شبا ------------- */
.pay-panel { display: flex; flex-direction: column; gap: 12px; }
code.sheba { background: none; border: 0; padding: 0; font-size: 15px; letter-spacing: 0.02em; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.badge.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.alert.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* --- billing: an invoice laid out for printing (#/billing/<number>) --------------------------------- */
.invoice { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 12px; min-width: 0; }
.invoice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.invoice-head h2 { flex: 1; text-align: center; font-size: 18px; }
.invoice-head p { margin: 0; }
.inv-wrap { overflow-x: auto; display: grid; gap: 10px; }
table.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.inv-table th, table.inv-table td { border: 1px solid var(--line-2); padding: 6px 8px; vertical-align: top; text-align: start; }
table.inv-table th { background: var(--panel-2); font-weight: 600; }
table.inv-table .inv-section { text-align: center; }
table.inv-table .num { text-align: center; white-space: nowrap; }
table.inv-table .inv-sign { height: 84px; }

@page { size: A4 landscape; margin: 10mm; }
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 12px; }
  .topbar, .side, .skip, .toasts, .page-actions, .invoice-view > .page-head { display: none !important; }
  .layout { display: block; min-height: 0; }
  .main { padding: 0; }
  .invoice { border: 0; border-radius: 0; padding: 0; background: #fff; color: #000; }
  .inv-wrap { overflow: visible; }
  table.inv-table { font-size: 11px; page-break-inside: avoid; }
  table.inv-table th, table.inv-table td { border-color: #000; color: #000; }
  table.inv-table th { background: #eee; }
  .invoice .alert.bad { border: 2px solid #a00; color: #a00; background: #fff; }
}

/* --- narrow screens --------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .who-email { display: none; }
}
/* On a narrow screen the navigation folds behind «فهرست» (docs/console.md). */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .topbar { gap: 10px; }
  .btn.menu-btn { display: inline-flex; }
  .layout { display: block; }
  .side {
    display: none; position: static; min-height: 0; max-height: none; overflow: visible;
    border-inline-end: 0; border-bottom: 1px solid var(--line);
  }
  .side.open { display: flex; }
  .main { padding-top: 20px; }
  .page-head h1 { font-size: 22px; }
}
@media (max-width: 640px) {
  .form-grid.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .topbar-end .btn { padding: 2px 8px; font-size: 13px; }
  .card, .auth-card { padding: 16px; }
  .facts > div { grid-template-columns: 1fr; gap: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .range-form .form-actions { padding-top: 0; }
  .auth { padding-top: 24px; }
  .meter { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  dialog.step-up, dialog.dialog { padding: 16px; }
}

/* ======================================================================================================== */
/* Design 6, «خوش‌حساب» (Good Standing), the owner's choice of 2026-11-02: the signed-in console only.        */
/* app.js puts .gs on <html> while the signed-in frame is on screen and takes it off for every page before     */
/* signing in, so nothing below reaches them. Bright and rounded like Iran's payment apps: white tiles (24 px) */
/* on a morning page, pill buttons, pistachio for the main action, saffron for the month's ring, pomegranate   */
/* for warnings and «خروج». Lalezar (.lz) only for the greeting and the balance; Vazirmatn for the rest.       */
/* The dark twin, «pistachio night», follows the system like the rest of the console.                          */
/* Text pairs are WCAG AA in both themes (docs/console.md lists them); --edge, a field's outline, is 3:1.      */
/* ======================================================================================================== */

.gs {
  /* design 6's own tokens */
  --tile: #ffffff; --ink: #1a2420; --ink2: #33403a; --mut: #56645d; --edge: #7c8a82;
  --pist: #2f7a4a; --pist-ink: #22603a; --pist-soft: #cdebb5; --pist-tint: #e7f3de; --on-pist: #ffffff;
  --sun: #ffc83d; --sun-soft: #fff1c9; --on-sun: #1a2420; --pom: #c8344f; --pom-soft: #fbe7ea; --pom-ink: #a3283f;
  --mk-bg: #2f7a4a; --mk-fg: #ffffff; --mk-dot: #ff5a36;
  /* the console's tokens, so every shared piece takes the new colours */
  --bg: #f3f6f1; --bg-2: #f3f6f1; --panel: var(--tile); --panel-2: #f3f6f1; --raised: #e1e8de; --field: #f3f6f1;
  --line: #e1e8de; --line-2: var(--edge); --text: var(--ink); --text-2: var(--ink2); --muted: var(--mut); --faint: var(--mut);
  --accent: var(--pist); --accent-text: var(--on-pist); --accent-soft: var(--pist-tint); --accent-ink: var(--pist-ink);
  --info: var(--ink2); --info-soft: #f3f6f1; --ok: var(--pist-ink); --ok-soft: var(--pist-tint);
  --warn: var(--ink); --warn-soft: var(--sun-soft); --bad: var(--pom); --bad-soft: var(--pom-soft);
  --chart-a: var(--pist); --chart-b: #d99a00;
  --chrome: var(--tile); --on-chrome: var(--ink); --on-chrome-2: var(--mut); --chrome-line: var(--line);
  --overlay: rgba(26, 36, 32, 0.42); --shadow: 0 12px 32px rgba(26, 36, 32, 0.12);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356645d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --h-sm: 34px; --h: 40px; --h-lg: 46px; --r: 14px; --r-lg: 24px; --side-w: 236px; --topbar-h: 64px; --gutter: 26px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  .gs {
    --tile: #182a22; --ink: #eaf2ec; --ink2: #cfdcd3; --mut: #a3b5aa; --edge: #6f877a;
    --pist: #7bcb8e; --pist-ink: #a4e0b3; --pist-soft: #24412e; --pist-tint: #1e3527; --on-pist: #11201a;
    --sun: #ffd25e; --sun-soft: #3a3420; --on-sun: #11201a; --pom: #f2899b; --pom-soft: #3a2026; --pom-ink: #f2899b;
    --mk-bg: #7bcb8e; --mk-fg: #11201a; --mk-dot: #ff5a36;
    --bg: #11201a; --bg-2: #11201a; --panel-2: #11201a; --raised: #28402f; --field: #11201a; --line: #28402f;
    --info-soft: #11201a; --chart-b: #ffd25e;
    --overlay: rgba(0, 0, 0, 0.5); --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3b5aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

.gs body { background: var(--bg); color: var(--ink); }
.gs .lz { font-family: "Lalezar", "Vazirmatn", Tahoma, sans-serif; font-weight: 400; }
.gs :focus-visible { outline: 2px solid var(--pist); outline-offset: 2px; }
.gs [tabindex="-1"]:focus { outline: none; }
.gs ::selection { background: var(--pist-soft); color: var(--ink); }
.gs a { color: var(--pist-ink); }
.gs a:hover { color: var(--ink); }
.gs code { background: var(--bg); border-color: var(--line); border-radius: 6px; }
.gs .card code, .gs .alert code { background: var(--bg); }
/* An icon (icons.js) takes the colour of its text; it never carries words of its own. */
.gs svg.i { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs svg.mk { display: block; width: 30px; height: 30px; flex: 0 0 auto; }
.gs .mk-bg { fill: var(--mk-bg); }
.gs .mk-fg { fill: var(--mk-fg); }
.gs .mk-dot { fill: var(--mk-dot); }
.gs .skip { background: var(--pist); color: var(--on-pist); border-radius: 999px; }

/* --- the top bar: the mark, «بسپار گفتار» and «کنسول»; the account, the email, the avatar and «خروج» ---- */
.gs .topbar {
  min-height: var(--topbar-h); padding: 8px 22px; gap: 14px;
  background: var(--tile); color: var(--ink); border-radius: 0 0 22px 22px; box-shadow: 0 1px 0 var(--line);
}
.gs .topbar :focus-visible { outline-color: var(--pist); }
.gs .brand { gap: 9px; color: var(--ink); font-weight: 700; font-size: 16px; }
.gs .brand:hover { color: var(--ink); }
.gs .brand-name { white-space: nowrap; }
.gs .pill { font-size: 12.5px; font-weight: 600; line-height: 24px; color: var(--pist-ink); background: var(--pist-tint); border-radius: 999px; padding: 0 10px; white-space: nowrap; }
.gs .topbar-end { gap: 12px; font-size: 13px; color: var(--mut); min-width: 0; }
.gs .org {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; min-width: 0; max-width: 240px;
  background: var(--bg); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs .org:hover { background: var(--pist-tint); color: var(--pist-ink); }
.gs .org bdi { overflow: hidden; text-overflow: ellipsis; }
.gs .who-email { font-size: 12px; color: var(--mut); }
.gs .avatar { width: 34px; height: 34px; background: var(--pist); color: var(--on-pist); }
.gs .btn.out { background: transparent; color: var(--pom); font-weight: 600; padding: 4px 8px; min-height: var(--h-sm); }
.gs .btn.out:hover { background: var(--pom-soft); color: var(--pom-ink); }
.gs .btn.menu-btn { background: var(--bg); color: var(--ink); }
.gs .btn.menu-btn:hover { background: var(--pist-tint); color: var(--pist-ink); }

/* --- the navigation: pill items with icons in «حساب», «پروژه» (with its picker) and «راهنما» ----------- */
.gs .layout { min-height: calc(100vh - var(--topbar-h)); }
.gs .side { background: transparent; border: 0; padding: 18px 12px 22px; gap: 2px; }
.gs .nav-group { gap: 2px; }
.gs .nav-group-title { font-size: 12px; font-weight: 600; color: var(--mut); padding: 12px 12px 4px; }
.gs .nav-list { gap: 2px; }
.gs .nav-link, .gs .nav-label {
  gap: 10px; min-height: 38px; padding: 0 12px; border-radius: 999px; color: var(--ink2); font-weight: 500; text-decoration: none;
}
.gs .nav-link svg.i, .gs .nav-label svg.i { color: var(--mut); }
.gs .nav-link:hover { background: var(--tile); color: var(--ink); }
.gs .nav-link[aria-current="page"] { background: var(--pist-soft); color: var(--pist-ink); font-weight: 700; }
.gs .nav-link[aria-current="page"] svg.i { color: var(--pist-ink); }
.gs .nav-list.sub { padding-inline-start: 0; }
.gs .nav-link.sub { min-height: 30px; padding-inline-start: 39px; font-size: 13px; color: var(--mut); }
.gs .nav-link.sub:hover { color: var(--ink); }
.gs .nav-link.sub[aria-current="page"] { background: var(--pist-tint); color: var(--pist-ink); font-weight: 700; }
.gs .pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 16px; background: var(--tile); margin: 2px 0 6px; }
.gs .pick:focus-within { outline: 2px solid var(--pist); outline-offset: 2px; }
.gs .pick .project-picker {
  flex: 1 1 auto; min-width: 0; min-height: 30px; margin: 0; padding: 0 0 0 26px; border: 0; border-radius: 8px;
  background-color: transparent; background-position: left 4px center; font-weight: 600; color: var(--ink); box-shadow: none;
}
.gs .pick .project-picker:focus { outline: none; box-shadow: none; }
.gs .ini {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 700; line-height: 1; background: var(--pist-soft); color: var(--pist-ink);
}
.gs .ini.s { background: var(--sun-soft); color: var(--ink); }

/* --- the main area: tiles on the morning page ------------------------------------------------------- */
.gs .main { padding: 22px var(--gutter) 40px; }
.gs .view { max-width: 1100px; gap: 16px; }
.gs .page-head { margin-bottom: 4px; }
.gs .page-head h1 { font-size: 26px; font-weight: 700; }
.gs .lead { color: var(--mut); }
.gs .eyebrow { color: var(--pist-ink); }
.gs .section-title { font-size: 18px; font-weight: 700; margin-top: 6px; }
.gs .card { background: var(--tile); border: 0; border-radius: 24px; padding: 20px; }
.gs .grid { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gs .card > h2 { font-size: 16px; font-weight: 700; }
.gs .card-head h2, .gs .card-head h3 { font-size: 16px; font-weight: 700; }
.gs .stat-label { color: var(--mut); }
.gs .stat-value { font-size: 22px; font-weight: 700; }
.gs .facts dt { color: var(--mut); }
.gs .note, .gs .hint { color: var(--mut); }
.gs .bad-text { color: var(--pom); }
.gs .loading { color: var(--mut); }
.gs .empty { border: 0; border-radius: 24px; background: var(--tile); color: var(--mut); }
.gs .card .empty, .gs dialog .empty { background: var(--bg); border-radius: 16px; padding: 24px 16px; }

/* --- buttons: pills; primary pistachio, the rest a pistachio tint, ghost a link ------------------------ */
.gs .btn {
  min-height: var(--h); padding: 4px 18px; border: 0; border-radius: 999px; gap: 6px;
  background: var(--pist-tint); color: var(--pist-ink); font-size: 14px; font-weight: 600;
  transition: background-color 0.12s, color 0.12s, transform 0.12s;
}
.gs .btn:hover { background: var(--pist-soft); color: var(--pist-ink); border-color: transparent; }
.gs .btn:active { transform: scale(0.97); }
.gs .btn:disabled { opacity: 0.5; transform: none; }
.gs .btn.primary { background: var(--pist); color: var(--on-pist); border: 0; }
.gs .btn.primary:hover { background: color-mix(in srgb, var(--pist) 86%, var(--ink)); color: var(--on-pist); }
.gs .btn.ghost { background: transparent; color: var(--pist-ink); padding: 4px 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.gs .btn.ghost:hover { background: var(--pist-tint); color: var(--pist-ink); }
.gs .btn.danger { background: transparent; color: var(--pom); box-shadow: inset 0 0 0 1.5px currentColor; }
.gs .btn.danger:hover { background: var(--pom-soft); color: var(--pom-ink); }
.gs .btn.small { min-height: var(--h-sm); padding: 2px 14px; font-size: 13px; }
.gs .btn.wide { width: 100%; min-height: 50px; font-size: 15px; }
.gs .btn.icon { width: 36px; min-height: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--bg); color: var(--mut); }
.gs .btn.icon:hover { background: var(--pist-tint); color: var(--pist-ink); }
.gs .btn.icon svg.i { width: 16px; height: 16px; }
.gs .btn svg.i { width: 15px; height: 15px; }
.gs .btn.chip { background: var(--bg); color: var(--ink); }
.gs .btn.chip:hover { background: var(--pist-tint); color: var(--pist-ink); }
.gs .btn.chip[aria-pressed="true"] { background: var(--pist-soft); color: var(--pist-ink); box-shadow: inset 0 0 0 2px var(--pist); font-weight: 700; }
.gs .chips { gap: 8px; }
.gs .link { color: var(--pist-ink); font-weight: 700; }
.gs .confirm-q { color: var(--pom); }

/* --- forms: fields on the morning colour, rounded, with an outline of 3:1 ---------------------------- */
.gs .field-label, .gs fieldset.options > legend { color: var(--ink2); }
.gs .input, .gs .select, .gs .textarea { border: 1px solid var(--edge); border-radius: 14px; background-color: var(--field); color: var(--ink); }
.gs .input::placeholder, .gs .textarea::placeholder { color: var(--mut); }
.gs .input:hover, .gs .select:hover, .gs .textarea:hover { border-color: var(--ink2); }
.gs .input:focus, .gs .select:focus, .gs .textarea:focus { border-color: var(--pist); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pist) 30%, transparent); }
.gs .input[aria-invalid="true"], .gs .textarea[aria-invalid="true"], .gs input[aria-invalid="true"] { border-color: var(--pom); box-shadow: 0 0 0 3px var(--pom-soft); }
.gs select option { background: var(--tile); color: var(--ink); }
.gs input[type="checkbox"], .gs input[type="radio"] { accent-color: var(--pist); }
.gs details.advanced { border: 0; border-radius: 16px; background: var(--bg); }
.gs details.advanced > summary { border-radius: 16px; font-weight: 600; }
.gs .switch-track { background: var(--edge); }
.gs .switch[aria-checked="true"] .switch-track { background: var(--pist); }
.gs .switch-thumb { background: var(--tile); }
.gs .transcript { border: 0; border-radius: 16px; background: var(--bg); }

/* --- notices, badges, toasts: warnings in pomegranate ------------------------------------------------ */
.gs .alert { border: 0; border-radius: 16px; background: var(--tile); color: var(--ink); }
.gs .card .alert, .gs dialog .alert { background: var(--bg); }
.gs .alert.bad, .gs .card .alert.bad, .gs dialog .alert.bad { background: var(--pom-soft); border-inline-start: 4px solid var(--pom); }
.gs .alert.warn, .gs .card .alert.warn, .gs dialog .alert.warn { background: var(--sun-soft); border-inline-start: 4px solid var(--pom); }
.gs .alert.ok, .gs .card .alert.ok, .gs dialog .alert.ok { background: var(--pist-tint); color: var(--pist-ink); }
.gs .alert.info, .gs .card .alert.info, .gs dialog .alert.info { background: var(--pist-tint); }
.gs .badge { border: 0; height: 24px; padding: 0 10px; font-size: 12px; font-weight: 700; background: var(--bg); color: var(--ink2); }
.gs .badge.ok { background: var(--pist-tint); color: var(--pist-ink); }
.gs .badge.warn { background: var(--sun-soft); color: var(--ink); }
.gs .badge.bad { background: var(--pom-soft); color: var(--pom-ink); }
.gs .badge.info { background: var(--bg); color: var(--ink2); }
.gs .toast { background: var(--tile); color: var(--ink); border: 0; border-inline-start: 4px solid var(--pist); border-radius: 16px; box-shadow: var(--shadow); }
.gs .toast.bad { border-inline-start-color: var(--pom); }

/* --- tables, tabs, code, secrets ------------------------------------------------------------------------ */
.gs .table-wrap { border: 0; border-radius: 24px; background: var(--tile); }
.gs .card .table-wrap { border-radius: 16px; background: transparent; }
.gs table.t th { background: transparent; color: var(--mut); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--line); padding: 10px 12px; }
.gs table.t td { border-bottom: 1px solid var(--line); }
.gs .tabs { border: 0; gap: 6px; }
.gs .tab { min-height: 38px; padding: 4px 16px; border: 0; border-radius: 999px; margin: 0; background: var(--tile); color: var(--ink2); }
.gs .tab:hover { background: var(--pist-tint); color: var(--pist-ink); border-radius: 999px; }
.gs .tab[aria-current="page"] { background: var(--pist-soft); color: var(--pist-ink); font-weight: 700; }
.gs .code-wrap { border: 0; border-radius: 16px; background: var(--bg); }
.gs .code-head { background: transparent; border-bottom: 1px solid var(--line); padding: 6px 8px 6px 14px; }
.gs .code-label { color: var(--ink2); }
.gs .secret-panel { border: 0; background: var(--sun-soft); border-radius: 24px; }
.gs .secret-box { border: 0; border-radius: 14px; background: var(--tile); }
.gs .setup-block { border: 0; border-radius: 16px; background: var(--bg); }
.gs .setup-block.consent { box-shadow: inset 0 0 0 2px var(--pist); }
.gs .terms-box { border: 1px solid var(--line); border-radius: 14px; background: var(--tile); }
.gs .terms-article blockquote, .gs .terms-box blockquote { border-inline-start-color: var(--pist); background: var(--pist-tint); }
.gs svg.chart .grid { stroke: var(--line); }
.gs svg.chart .scale, .gs svg.chart .tick { fill: var(--mut); }
.gs .invoice { border: 0; border-radius: 24px; background: var(--tile); }
.gs table.inv-table th, .gs table.inv-table td { border-color: var(--line); }
.gs table.inv-table th { background: var(--bg); }

/* --- the ring (this month against a limit) and the project's bar --------------------------------------- */
.gs .ring { width: 104px; height: 104px; }
.gs .ring svg { width: 104px; height: 104px; }
.gs .ring-track { stroke: var(--sun-soft); stroke-width: 12; }
.gs .ring-used { stroke: var(--sun); stroke-width: 12; }
.gs .ring-warn .ring-used { stroke: var(--sun); }
.gs .ring-bad .ring-used { stroke: var(--pom); }
.gs .ring-label { font-size: 22px; font-weight: 700; padding: 16px; }
.gs .ring-label.long { font-size: 14px; }
.gs .meter { gap: 18px; }
/* A project's month against its limit: <meter> (its value is an attribute, so no style is needed), track only without a limit. */
.gs meter.spend, .gs .spend-track {
  display: block; width: 100%; height: 8px; margin-top: 6px; border: 0; border-radius: 999px; background: var(--bg); overflow: hidden;
  appearance: none; -webkit-appearance: none;
}
.gs meter.spend::-webkit-meter-bar { height: 8px; border: 0; border-radius: 999px; background: var(--bg); }
.gs meter.spend::-webkit-meter-optimum-value,
.gs meter.spend::-webkit-meter-suboptimum-value,
.gs meter.spend::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--pist); }
.gs meter.spend::-moz-meter-bar { border-radius: 999px; background: var(--pist); }
.gs meter.spend.warn::-webkit-meter-optimum-value { background: var(--sun); }
.gs meter.spend.warn::-moz-meter-bar { background: var(--sun); }
.gs meter.spend.bad::-webkit-meter-optimum-value { background: var(--pom); }
.gs meter.spend.bad::-moz-meter-bar { background: var(--pom); }

/* --- the dashboard: the greeting, the balance card, the month card, the project cards ------------------- */
.gs .hi h1 { font-size: 32px; line-height: 1.3; color: var(--ink); }
.gs .hi .lead { font-size: 14px; color: var(--mut); margin: 2px 0 0; }
.gs .two { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; }
.gs .two.one { grid-template-columns: minmax(0, 1fr); }
.gs .two > .card > * + * { margin-top: 0; }
.gs .bal { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; background: var(--pist-soft); color: var(--pist-ink); }
.gs .bal > :not(svg.bgmk) { position: relative; }
.gs .bal svg.bgmk { position: absolute; width: 170px; height: 170px; inset-inline-end: -40px; top: -40px; opacity: 0.12; }
.gs .bal svg.bgmk path { fill: currentColor; }
.gs .bal svg.bgmk .mk-bg { fill: transparent; }
.gs .lab { margin: 0; font-size: 14px; font-weight: 600; color: inherit; }
.gs .amt { margin: 2px 0 0; font-size: 50px; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
.gs .amt.bad { color: var(--pom-ink); }
.gs .amt small { font-family: "Vazirmatn", Tahoma, sans-serif; font-size: 16px; font-weight: 600; color: var(--pist-ink); margin-inline-start: 6px; }
.gs .bal .note { color: var(--pist-ink); }
.gs .quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gs .quick .btn { background: var(--tile); color: var(--ink); min-height: 34px; padding: 0 14px; font-size: 13.5px; }
.gs .quick .btn:hover { background: var(--pist-tint); color: var(--pist-ink); }
.gs .bal .btns { margin-top: 12px; }
.gs .bal .btn.ghost:hover { background: var(--pist-tint); }
.gs .wait { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; background: var(--tile); color: var(--ink2); border-radius: 14px; padding: 8px 12px; font-size: 13px; }
.gs .wait svg.i { color: var(--pist-ink); width: 16px; height: 16px; }
.gs .bal .alert { margin-top: 12px; }
.gs .mon { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gs .two.one .mon { flex-direction: row; align-items: center; gap: 20px; }
.gs .mon .lab { font-size: 13px; color: var(--mut); }
.gs .mon .v { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.gs .mon .v small { font-size: 13px; font-weight: 600; color: var(--mut); margin-inline-start: 4px; }
.gs .mu { margin: 0; font-size: 13px; color: var(--mut); }
.gs .lnk { display: inline-block; margin-top: 6px; color: var(--pist-ink); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.gs .lnk:hover { text-decoration: underline; }
.gs .section-head .btn { flex: 0 0 auto; }
.gs .prj { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; }
.gs .prj-card { display: flex; flex-direction: column; gap: 0; }
.gs .prj-card > * + * { margin-top: 0; }
.gs .pt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gs .pt > div { min-width: 0; }
.gs .pt h3 { font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.gs .pt .mu { font-size: 12.5px; }
.gs .pt .badge { margin-inline-start: auto; }
.gs .ad { display: grid; gap: 6px; margin-top: 14px; }
.gs .a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; background: var(--bg); border-radius: 14px; padding: 5px 12px 6px 6px; }
.gs .a .el { grid-column: 1; font-size: 11.5px; color: var(--mut); line-height: 1.5; }
.gs .a .c {
  grid-column: 1; font-size: 12px; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; justify-self: start;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.gs .a .copy { display: contents; }
.gs .a .copy .btn { grid-column: 2; grid-row: 1 / span 2; background: var(--tile); color: var(--pist-ink); width: 32px; height: 32px; min-height: 32px; }
.gs .a .copy-status:empty { display: none; }
.gs .a .copy-status { grid-column: 1 / -1; font-size: 12px; }
.gs .use { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 14px; font-size: 13.5px; }
.gs .use b { font-weight: 700; }
.gs .prj-card .btns { margin-top: 12px; }

/* --- add funds: a sheet that rises from the bottom, in three steps ------------------------------------- */
.gs dialog.dialog { border: 0; border-radius: 28px; background: var(--tile); color: var(--ink); box-shadow: var(--shadow); padding: 20px 24px 24px; }
.gs dialog.dialog::backdrop { background: rgba(26, 36, 32, 0.42); }
.gs .dialog-head h2 { font-size: 22px; font-weight: 700; }
.gs dialog.sheet {
  width: min(600px, 100%); max-width: 100%; max-height: calc(100% - 16px); margin: auto auto 0;
  border-radius: 28px 28px 0 0; padding: 12px 26px 26px; animation: sheet-rise 0.22s ease-out;
}
.gs .handle { display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto 12px; }
@keyframes sheet-rise { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.gs .steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; padding: 0; }
.gs .steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--mut); padding-top: 8px; border-top: 4px solid var(--line); }
.gs .steps li b {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); color: var(--ink2); font-size: 12px; font-weight: 700;
}
.gs .steps li.done { border-top-color: var(--pist); color: var(--ink2); }
.gs .steps li.done b { background: var(--pist); color: var(--on-pist); }
.gs .steps li.on { border-top-color: var(--sun); color: var(--ink); font-weight: 600; }
.gs .steps li.on b { background: var(--sun); color: var(--on-sun); }
.gs .step { display: flex; flex-direction: column; gap: 12px; }
.gs .amts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gs .amts .btn { min-height: 52px; border-radius: 16px; padding: 4px 8px; font-size: 14.5px; font-weight: 700; white-space: normal; text-align: center; }
.gs .amts .btn svg.i { width: 16px; height: 16px; display: none; }
.gs .amts .btn[aria-pressed="true"] svg.i { display: block; }
.gs fieldset.ways { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gs .ways label.check {
  align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 4px 12px; border: 0; border-radius: 14px;
  background: var(--bg); color: var(--mut); font-size: 13.5px; font-weight: 600; text-align: center;
}
.gs .ways label.check:has(input:checked) { background: var(--ink); color: var(--tile); }
.gs .ways label.check:has(input:focus-visible) { outline: 2px solid var(--pist); outline-offset: 2px; }
.gs .ways input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gs .ways label.check.disabled { opacity: 1; cursor: not-allowed; }
.gs .pay-sum { margin: 0; font-size: 15px; color: var(--ink2); }
.gs .pay-sum strong { color: var(--ink); font-size: 18px; }
.gs .shb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--sun-soft); border-radius: 16px; padding: 10px 14px; }
.gs .shb p { margin: 0; font-size: 12.5px; color: var(--ink2); }
.gs .shb code.sheba { display: block; font-size: 15px; color: var(--ink); background: none; border: 0; padding: 0; letter-spacing: 0.02em; }
.gs .shb .btn { background: var(--tile); color: var(--ink); }
.gs .shb .btn:hover { background: var(--pist-tint); color: var(--pist-ink); }
.gs .sheet .form-actions { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 2px; }
.gs .sheet .form-actions .btn { width: 100%; }

/* --- printing an invoice: black on white, whatever the theme ------------------------------------------- */
@media print {
  .gs .topbar, .gs .side, .gs .skip, .gs .toasts, .gs .page-actions { display: none !important; }
  .gs body { background: #fff; color: #000; }
  .gs .layout { display: block; min-height: 0; }
  .gs .main { padding: 0; }
  .gs .invoice { border: 0; border-radius: 0; padding: 0; background: #fff; color: #000; }
  .gs table.inv-table th, .gs table.inv-table td { border-color: #000; color: #000; }
  .gs table.inv-table th { background: #eee; }
}

/* --- narrow screens: the tiles stack; the navigation folds behind «فهرست» as before ---------------------- */
@media (max-width: 1100px) {
  .gs .org { max-width: 180px; }
}
@media (max-width: 900px) {
  .gs { --gutter: 16px; }
  .gs .topbar { padding: 8px 14px; gap: 10px; }
  .gs .layout { display: block; }
  .gs .side { display: none; position: static; min-height: 0; max-height: none; overflow: visible; margin: 10px var(--gutter) 0; padding: 10px; border-radius: 24px; background: var(--tile); }
  .gs .side.open { display: flex; }
  .gs .pick { background: var(--bg); }
  .gs .main { padding-top: 18px; }
  .gs .page-head:not(.hi) h1 { font-size: 22px; }
  .gs .two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gs .org, .gs .pill { display: none; }
  .gs .prj { grid-template-columns: minmax(0, 1fr); }
  .gs .amts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs dialog.sheet { width: 100%; padding: 10px 16px 20px; }
  .gs .steps li { font-size: 12px; flex-direction: column; gap: 4px; }
}
@media (max-width: 520px) {
  .gs .card { padding: 16px; border-radius: 20px; }
  .gs dialog.dialog:not(.sheet) { padding: 16px; }
  .gs .hi h1 { font-size: 28px; }
  .gs .amt { font-size: 40px; }
  .gs .brand { font-size: 15px; }
  .gs .btn.menu-btn { padding: 2px 10px; }
  .gs .topbar-end { gap: 6px; }
  .gs fieldset.ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .gs .brand-name { display: none; }
}