/* Tarkk admin. The CSP allows no inline scripts or styles, so menus, hovers
   and motion live here; admin.js and motion.js only add small touches on
   top of pages that already work without them. */
:root {
  --bg: #f5f4f0; --surface: #fff; --surface-2: #efede7; --line: #e3e0d8; --line-2: #cdc9bd;
  --fg: #1b1a16; --muted: #6d695f; --accent: #e8590c; --accent-2: #f07a32;
  --good: #12924a; --warn: #b45309; --bad: #d92d20; --info: #2563eb;
  --card: var(--surface);
  --shadow: none;
  --ease: cubic-bezier(.23, 1, .32, 1);
  /* A light overshoot, for things that pop into place. */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --side: 264px;
  --chevron: url(chevron.svg);
  --picker-shadow: 0 12px 28px -12px rgba(27, 26, 22, .28); --picker-line: var(--line);
}
/* Dark follows the device unless Settings picked a theme for this browser
   (data-theme on <html>, set by the server so nothing flashes). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #121210; --surface: #1a1a17; --surface-2: #23221f; --line: #2d2c28; --line-2: #3d3c36;
    --fg: #ecebe5; --muted: #9d998e; --accent: #ff7a2e; --accent-2: #ff9a5c;
    --good: #3ccf7a; --warn: #f5b14c; --bad: #ff6b6b; --info: #74a7ff;
    --shadow: none;
    --chevron: url(chevron-dark.svg);
    --picker-shadow: 0 12px 28px -10px rgba(0, 0, 0, .7); --picker-line: var(--line-2);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121210; --surface: #1a1a17; --surface-2: #23221f; --line: #2d2c28; --line-2: #3d3c36;
  --fg: #ecebe5; --muted: #9d998e; --accent: #ff7a2e; --accent-2: #ff9a5c;
  --good: #3ccf7a; --warn: #f5b14c; --bad: #ff6b6b; --info: #74a7ff;
  --shadow: none;
  --chevron: url(chevron-dark.svg);
  --picker-shadow: 0 12px 28px -10px rgba(0, 0, 0, .7); --picker-line: var(--line-2);
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
@font-face { font-family: Vazirmatn; src: url(Vazirmatn-Regular.ttf) format("truetype"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url(Vazirmatn-Bold.ttf) format("truetype"); font-weight: 600 900; font-display: swap; }
/* Draws 0-9 as Persian digits while the text stays Latin, for the few
   numbers that must post or copy as Latin digits: number fields and the
   Rial price for Bazaar (scripts/admin_digit_font.py). Everything else is
   written in Persian digits by the server (numbers.go). */
@font-face { font-family: "Vazirmatn Digits"; src: url(VazirmatnDigits-Regular.woff2) format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Vazirmatn Digits"; src: url(VazirmatnDigits-Bold.woff2) format("woff2"); font-weight: 600 900; font-display: swap; }
/* No page scrollbar: it looked out of place and made pages shift sideways
   when one had it and the next didn't. Wheel, trackpad and keys still scroll. */
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
/* Scrollbars inside tables, menus and logs are thin and match the theme. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
main { padding: 16px; max-width: 1100px; margin: 0 auto; }
a { color: var(--accent); text-underline-offset: 3px; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; } h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.i { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; }
.muted { color: var(--muted); }
.error-text { color: var(--bad); } .warn-text { color: var(--warn); }
/* Emails, ids and numbers read left to right inside Persian text. */
.ltr { direction: ltr; unicode-bidi: isolate; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em; word-break: break-all; direction: ltr; unicode-bidi: isolate; }
code.key { font-size: 1.1em; letter-spacing: .05em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- controls ---------------------------------------------------------- */
input, select, button { font: inherit; color: var(--fg); }
input, select { padding: 11px 14px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg); transition: border-color .18s ease, box-shadow .18s ease; min-width: 0; }
input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-inline-end: 42px; font-weight: 500; background: var(--chevron) no-repeat right 14px center / 16px, var(--bg); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
[dir="rtl"] select { background-position: left 14px center, 0 0; }
select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); background-color: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
select option { background: var(--surface); color: var(--fg); }
/* Where the browser allows it, the open list is ours too: a rounded card
   with roomy rows, a hover tint and a check on the chosen one. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; gap: 10px; background-image: none; padding-inline-end: 14px; }
  [dir="rtl"] select { background-position: 0 0; }
  select::picker-icon { content: ""; width: 16px; height: 16px; margin-inline-start: auto; background: var(--chevron) no-repeat center / 16px; transition: rotate .25s var(--ease); }
  select:open::picker-icon { rotate: 180deg; }
  select:open { border-color: var(--accent); box-shadow: none; }
  ::picker(select) { border: 1px solid var(--picker-line); border-radius: 6px; background: var(--surface); color: var(--fg); padding: 6px; margin-block: 6px; box-shadow: var(--picker-shadow); max-height: min(320px, 60vh); overflow-y: auto; scrollbar-width: thin;
    opacity: 0; translate: 0 -6px; scale: .98; transition: opacity .18s ease, translate .22s var(--ease), scale .22s var(--ease), overlay .22s allow-discrete, display .22s allow-discrete; }
  select:open::picker(select) { opacity: 1; translate: 0 0; scale: 1; }
  @starting-style { select:open::picker(select) { opacity: 0; translate: 0 -6px; scale: .98; } }
  select option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; background: transparent; cursor: pointer; font-weight: 500; transition: background-color .12s ease, color .12s ease; }
  select option:hover, select option:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
  select option:checked { color: var(--accent); font-weight: 600; }
  select option::checkmark { order: 1; margin-inline-start: auto; content: "✓"; color: var(--accent); font-weight: 700; }
  @media (prefers-reduced-motion: reduce) { ::picker(select), select::picker-icon { transition: opacity .15s ease; translate: none; scale: none; } }
}
input:hover:not(:focus) { border-color: color-mix(in srgb, var(--fg) 22%, var(--line-2)); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: none; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .875rem; }
form { margin: 0; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; color: #fff; text-decoration: none; background: var(--accent); box-shadow: none; transition: transform .12s var(--ease), box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
button:hover, .btn:hover { filter: none; box-shadow: none; }
button:active, .btn:active { transform: scale(.97); }
button .i, .btn .i { width: 18px; height: 18px; }
button.ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--line); box-shadow: none; }
button.ghost:hover { filter: none; box-shadow: none; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
button.sm { padding: 6px 11px; border-radius: 6px; font-size: .82rem; gap: 6px; }
button.sm .i { width: 15px; height: 15px; }
button.link { background: none; border: none; color: var(--accent); padding: 4px 0; font-weight: 500; box-shadow: none; }
button.link:hover { filter: none; box-shadow: none; text-decoration: underline; }
/* Copy button next to a Bazaar price (admin.js shows it). */
.copy-cell { display: inline-flex; align-items: center; gap: 8px; }
code.rial { user-select: all; }
button.copy { position: relative; padding: 6px; border-radius: 6px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
button.copy:hover { filter: none; box-shadow: none; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
button.copy .i { width: 15px; height: 15px; }
/* The label is for screen readers; the icon turns into a check when copied. */
button.copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button.copy .i + .i { display: none; }
button.copy.copied { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
button.copy.copied .i { display: none; }
button.copy.copied .i + .i { display: block; animation: pop .3s var(--ease) both; }
/* The sign-in code was sent on its own; the button shows it is working. */
form.sending > button { opacity: .7; cursor: progress; pointer-events: none; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack > button { align-self: flex-start; }
.auth .stack > button { align-self: stretch; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px 16px; align-items: end; }
.form-grid .full { grid-column: 1 / -1; }
/* A field whose name stays on one line, so every input in a row lines up;
   the longer explanation sits under the input. */
.form-grid.fields { align-items: start; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .18s ease; }
.field:focus-within > label { color: var(--accent); }
.field .hint { color: var(--muted); font-size: .78rem; line-height: 1.5; transition: color .18s ease; }
.field:focus-within .hint { color: color-mix(in srgb, var(--fg) 70%, var(--muted)); }
.error { background: color-mix(in srgb, var(--bad) 12%, transparent); border-inline-start: 4px solid var(--bad); padding: 8px 12px; border-radius: 4px; }

.avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; font-weight: 700; font-size: .95rem; color: #fff; background: var(--accent); box-shadow: none; }
.avatar.sm { width: 28px; height: 28px; font-size: .78rem; }
.avatar.xl { width: 76px; height: 76px; font-size: 2rem; box-shadow: none; animation: pop .6s var(--ease) both; }

/* ---- shell: sidebar on wide screens, a sliding menu on phones ---------- */
body.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh;
  background: var(--bg); }
.nav-toggle, .topbar, .scrim { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--fg); text-decoration: none; letter-spacing: -.01em; }
.brand img { border-radius: 6px; box-shadow: none; }
.side { background: var(--surface); border-inline-end: 1px solid var(--line); z-index: 40; }
.side-inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px 14px; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 8px 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.side-close { display: none !important; }
/* Only the links scroll, so the account card always stays at the bottom. */
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; margin-inline: -14px; padding: 4px 14px 12px; scrollbar-width: thin; }
.nav-group { margin: 14px 12px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 8px 12px; border-radius: 6px; color: var(--fg); text-decoration: none; font-weight: 500; transition: background-color .18s ease, color .18s ease, transform .18s var(--ease); }
.nav a .i { width: 20px; height: 20px; color: var(--muted); transition: color .18s ease, transform .25s var(--ease); }
.nav a:hover { background: var(--surface-2); }
.nav a:hover .i { color: var(--fg); transform: scale(1.08); }
.nav a:active { transform: scale(.98); }
.nav a.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 650; }
.nav a.on .i { color: var(--accent); }
.nav a.on::before { content: ""; position: absolute; inset-inline-start: -14px; top: 9px; bottom: 9px; width: 4px; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--accent); box-shadow: none; animation: grow-y .45s var(--ease) both; }
.side-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; color: var(--fg); text-decoration: none; transition: background-color .18s ease; }
.me:hover, .me.on { background: var(--surface-2); }
.me-text { min-width: 0; display: flex; flex-direction: column; }
.me-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text small { color: var(--muted); font-size: .8rem; }
.side-actions { display: flex; gap: 8px; }
.side-actions > * { flex: 1 1 0; min-width: 0; }
.side-actions .lang, .side-actions button { white-space: nowrap; }
.side .lang, .side .signout { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 6px; font-size: .85rem; }
.side .lang .i, .side .signout .i { width: 16px; height: 16px; }
[dir="rtl"] .signout .i, [dir="rtl"] .dialog-icon .i { transform: scaleX(-1); }

main.content { width: 100%; max-width: 1320px; margin: 0 auto; padding: 36px clamp(20px, 3.2vw, 48px) 72px; min-width: 0; }
main.content > * { animation: rise .5s var(--ease) both; }
main.content > :nth-child(2) { animation-delay: .04s; } main.content > :nth-child(3) { animation-delay: .08s; }
main.content > :nth-child(4) { animation-delay: .12s; } main.content > :nth-child(5) { animation-delay: .16s; }
main.content > :nth-child(6) { animation-delay: .2s; } main.content > :nth-child(n+7) { animation-delay: .24s; }

/* Confirm dialog (a popover: top layer, Esc and outside click close it). */
.dialog { width: min(calc(100vw - 32px), 380px); margin: auto; padding: 28px 24px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); text-align: center; box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .5); }
.dialog::backdrop { background: rgba(8, 10, 14, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog.dialog:popover-open { animation: dialog-in .34s var(--ease) both; }
.dialog:popover-open::backdrop { animation: auth-fade .25s ease both; }
.dialog-icon { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); box-shadow: 0 0 0 8px color-mix(in srgb, var(--bad) 6%, transparent); }
.dialog-icon .i { width: 26px; height: 26px; }
.dialog.calm .dialog-icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 6%, transparent); }
.dialog h2 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; }
.dialog p { margin: 0 0 22px; color: var(--muted); font-size: .92rem; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-actions button { width: 100%; padding-block: 11px; }
button.danger { background: var(--bad); box-shadow: none; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* Side drawer (a popover): slides in from the edge away from the menu over a
   blurred page; Esc, the close button and an outside click send it back.
   Its contents rise in just behind it. */
.drawer { position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; width: min(100vw, 440px); height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-inline-start: 1px solid var(--line); background: var(--surface); color: var(--fg); box-shadow: 0 0 80px -24px rgba(0, 0, 0, .55); overflow-y: auto; overscroll-behavior: contain; transform: translateX(104%); transition: transform .44s var(--ease), overlay .44s allow-discrete, display .44s allow-discrete; }
[dir="rtl"] .drawer { transform: translateX(-104%); }
main.content > .drawer { animation: none; } /* it slides; the page's rise-in is not for it */
.drawer:popover-open { display: flex; flex-direction: column; transform: none; }
@starting-style { .drawer:popover-open { transform: translateX(104%); } [dir="rtl"] .drawer:popover-open { transform: translateX(-104%); } }
/* The backdrop fades by opacity: animating the blur itself stalls the first frames. */
.drawer::backdrop { background: rgba(8, 10, 14, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .32s ease, overlay .32s allow-discrete, display .32s allow-discrete; }
.drawer:popover-open::backdrop { opacity: 1; }
@starting-style { .drawer:popover-open::backdrop { opacity: 0; } }
.drawer-head { display: flex; align-items: flex-start; gap: 14px; padding: 26px 24px 20px; }
.drawer-head > div { flex: 1; min-width: 0; }
.drawer-head h2 { margin: 2px 0 0; font-size: 1.15rem; font-weight: 800; }
.drawer-head p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.drawer-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.drawer-icon .i { width: 22px; height: 22px; }
button.drawer-close { padding: 0; width: 38px; height: 38px; border-radius: 6px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
button.drawer-close:hover { filter: none; box-shadow: none; color: var(--fg); border-color: var(--line-2); background: var(--surface-2); }
button.drawer-close .i { width: 18px; height: 18px; transition: transform .3s var(--ease); }
button.drawer-close:hover .i { transform: rotate(90deg); }
.drawer-error { margin: 0 24px 18px; box-shadow: none; animation: shake .42s .1s ease; }
.drawer-form { padding: 4px 24px 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.drawer-form > button { align-self: stretch; margin-top: 6px; padding-block: 12px; }
.drawer [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 14%, transparent); }
.drawer:popover-open .drawer-head, .drawer:popover-open .drawer-form > :not([type="hidden"]) { animation: rise .5s var(--ease) both; }
.drawer:popover-open .drawer-head { animation-delay: .06s; }
.drawer:popover-open .drawer-form > :nth-child(2) { animation-delay: .1s; }
.drawer:popover-open .drawer-form > :nth-child(3) { animation-delay: .14s; }
.drawer:popover-open .drawer-form > :nth-child(4) { animation-delay: .18s; }
.drawer:popover-open .drawer-form > :nth-child(5) { animation-delay: .22s; }
/* Back open after a refused add: already there, nothing slides again. */
.drawer.settled, .drawer.settled::backdrop { transition: none; }
.drawer.settled .drawer-head, .drawer.settled .drawer-form > * { animation: none; }
/* The admin just added (or just given a new password) glows for a moment. */
tr.fresh > td { animation: fresh 2.6s ease both; }
@keyframes fresh { from, 30% { background: color-mix(in srgb, var(--accent) 13%, transparent); } to { background: transparent; } }

/* A form result is the same page again: no entrance replay, and the form
   action's #section brings the page back to where the button was. */
body.posted main.content > *, body.posted .page-icon, body.posted .avatar.xl, body.posted .kpi .big, body.posted .bar { animation: none; }
[id] { scroll-margin-top: 24px; }
/* The outcome of an action floats at the top, wherever the page is. */
main.content > .flash.toast { position: fixed; z-index: 70; top: 18px; inset-inline: 0; width: max-content; max-width: min(calc(100vw - 32px), 560px); margin: 0 auto; box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .45); animation: toast-in .45s var(--ease) both, toast-out .4s ease 7s forwards; }
main.content > .flash.toast.bad { animation: toast-in .45s var(--ease) both, shake .42s .15s ease, toast-out .4s ease 10s forwards; }
main.content > .flash.toast:hover { animation-play-state: paused; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px); visibility: hidden; } }

/* ---- page parts --------------------------------------------------------- */
.page-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.page-head > div { flex: 1; min-width: 220px; }
.page-head h1 { margin: 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.lead { margin: 4px 0 0; color: var(--muted); }
.page-icon, .hero-icon { display: grid; place-items: center; flex-shrink: 0; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.page-icon { width: 54px; height: 54px; border-radius: 10px; box-shadow: none; animation: pop .55s var(--ease) both; }
.page-icon .i { width: 26px; height: 26px; }
.page-tools { margin-inline-start: auto; }

.flash { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 20px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); box-shadow: none; overflow-wrap: anywhere; }
.flash > .i { width: 20px; height: 20px; margin-top: 2px; color: var(--muted); }
.flash p { margin: 0; } .flash p + p { margin-top: 6px; }
.flash a { font-weight: 600; }
.flash.bad { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.flash.bad > .i { color: var(--bad); }
.flash.ok { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 7%, var(--surface)); }
.flash.ok > .i { color: var(--good); }
main.content > .flash.bad { animation: rise .45s var(--ease) both, shake .42s .15s ease both; }
.flash.secret code.key { display: inline-block; margin: 4px 0; padding: 8px 14px; font-size: 1.25rem; letter-spacing: .06em; background: var(--surface); border: 1px dashed var(--accent); border-radius: 6px; user-select: all; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; margin-bottom: 24px; box-shadow: none; min-width: 0; }
.panel:has(> .table-wrap) { overflow: clip; }
.panel-head, .section-head { margin-bottom: 16px; }
.panel-head h2, .section-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.02rem; font-weight: 700; }
.panel-head h2 .i, .section-head h2 .i { width: 20px; height: 20px; color: var(--accent); }
.panel-head p, .section-head p { margin: 4px 0 0; color: var(--muted); font-size: .875rem; }
.panel-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; color: var(--muted); font-size: .85rem; }
.panel-note .i { margin-top: 3px; width: 16px; height: 16px; }
.section { margin-bottom: 22px; }
.grid-2, .grid-3, .split { display: grid; gap: 20px; margin-bottom: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.split { grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr); align-items: start; }
.grid-2 > .panel, .grid-3 > .panel, .split > .panel { margin: 0; }

/* Stat tiles. */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { position: relative; overflow: hidden; padding: 20px 22px; background:var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; transition: transform .3s var(--ease), border-color .2s ease, box-shadow .3s ease; }
.kpi::after { content: ""; position: absolute; inset-inline: 22px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background:var(--surface); opacity: .55; pointer-events: none; transition: opacity .3s ease; }
.kpi:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.kpi:hover::after { opacity: 1; }
.kpi-head { display: flex; align-items: center; gap: 10px; }
.kpi-head h2 { margin: 0; font-size: .9rem; font-weight: 600; color: var(--muted); }
.kpi-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); flex-shrink: 0; }
.kpi-icon .i { width: 19px; height: 19px; }
.big { font-size: 2rem; font-weight: 700; }
.kpi .big { margin: 14px 0 4px; font-size: 2.35rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; animation: rise .6s .12s var(--ease) both; }
.kpi-sub { margin: 4px 0 0; color: var(--muted); font-size: .87rem; }
.delta { display: inline-flex; padding: 2px 9px; border-radius: 5px; font-size: .8rem; font-weight: 600; background: var(--surface-2); }
.delta.up { color: var(--good); background: color-mix(in srgb, var(--good) 13%, transparent); }
.kpi.warn .kpi-icon { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.kpi.warn .big { color: var(--bad); }
.kpi.warn { background:var(--surface); }
.kpi.warn::after { background:var(--surface); }

/* Label and value rows. */
.rows { margin: 0; display: flex; flex-direction: column; }
.rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.rows > div:last-child { border-bottom: 0; }
.rows dt { color: var(--muted); font-size: .9rem; }
.rows dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }

/* Sign-ups per day: ten height classes, since inline styles are blocked. */
.chart { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 230px; padding-top: 14px; }
.chart::before { content: ""; position: absolute; inset: 14px 0 26px; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%; border-bottom: 1px solid var(--line-2); pointer-events: none; }
.col { position: relative; flex: 1; min-width: 0; height: 100%; padding-bottom: 26px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar { position: relative; width: min(72%, 22px); border-radius: 3px 3px 2px 2px; background: var(--accent); transform-origin: bottom; animation: grow-y .8s var(--ease) both; transition: filter .18s ease, box-shadow .18s ease; }
.col:nth-child(n+6) .bar { animation-delay: .05s; } .col:nth-child(n+11) .bar { animation-delay: .1s; }
.col:nth-child(n+16) .bar { animation-delay: .15s; } .col:nth-child(n+21) .bar { animation-delay: .2s; }
.col:nth-child(n+26) .bar { animation-delay: .25s; }
.col:hover .bar { filter: none; box-shadow: none; }
.bar::after { content: attr(data-n); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 3px 8px; border-radius: 3px; white-space: nowrap; font-size: .75rem; font-weight: 600; background: var(--fg); color: var(--bg); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .2s var(--ease); z-index: 2; }
.col:hover .bar::after { opacity: 1; transform: translate(-50%, 0); }
.h0 { height: 3px; background: var(--line-2); } .h1 { height: 10%; } .h2 { height: 20%; } .h3 { height: 30%; } .h4 { height: 40%; } .h5 { height: 50%; }
.h6 { height: 60%; } .h7 { height: 70%; } .h8 { height: 80%; } .h9 { height: 90%; } .h10 { height: 100%; }
.col small { position: absolute; bottom: 4px; font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1500px) { .col small { display: none; } .col:nth-child(3n+1) small, .col:last-child small { display: block; } }
@media (max-width: 640px) { .col:nth-child(3n+1) small { display: none; } .col:nth-child(6n+1) small, .col:last-child small { display: block; } .chart { gap: 2px; height: 190px; } }

/* Tables sit edge to edge in their panel and scroll sideways on phones. */
.table-wrap { overflow-x: auto; margin-inline: -24px; scrollbar-width: thin; }
.panel > .table-wrap:first-child { margin-top: -22px; }
.panel > .table-wrap:last-child { margin-bottom: -22px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
th { text-align: start; padding: 12px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
th:first-child, td:first-child { padding-inline-start: 24px; }
th:last-child, td:last-child { padding-inline-end: 24px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
tr.muted td { opacity: .55; }
th.num, td.num { text-align: end; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; min-width: 200px; max-width: 460px; }
td code { white-space: nowrap; word-break: normal; }
td.wrap code { white-space: normal; word-break: break-all; }
code.kind { white-space: nowrap; word-break: normal; }
code.kind { padding: 2px 7px; border-radius: 3px; font-size: .8rem; background: var(--surface-2); border: 1px solid var(--line); }
td.act { text-align: end; }
td.act form { display: inline-block; margin-inline-start: 6px; }
td.empty, p.empty, li.empty { text-align: center; color: var(--muted); padding: 30px 12px; }
.price { font-size: 1.02rem; color: var(--accent); }
.who { display: flex; align-items: center; gap: 10px; }
.who b, .who small { display: block; }
.who small { color: var(--muted); font-size: .8rem; }

/* Status chips. */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 5px; font-size: .78rem; font-weight: 600; line-height: 1.7; white-space: nowrap; vertical-align: middle; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.chip .i { width: 13px; height: 13px; }
.chip.good, .st-active { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 28%, transparent); }
.chip.bad, .st-refunded, .st-invalid { color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, transparent); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.chip.warn, .st-pending { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.chip.accent, .role-owner { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.role-support { color: var(--info); background: color-mix(in srgb, var(--info) 11%, transparent); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
.chip.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.2s ease-in-out infinite; }

/* System status board: one word on whether anything is wrong, a tick per
   check, then the checks as a ledger: broken ones first and open, healthy
   ones as quiet one-line rows. No tinted cards; state is the LED and word. */
.board { --tone: var(--good); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 24px; overflow: clip; }
.board.is-bad { --tone: var(--bad); }
.board.is-stale, .board.is-none { --tone: var(--warn); }
.board-head { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "word" "sub" "ticks"; gap: 4px; padding: 20px 20px 18px; border-bottom: 1px solid var(--line); }
.board-word { grid-area: word; display: flex; align-items: center; gap: 12px; min-width: 0; }
.board-word .led { width: 10px; height: 10px; border-radius: 2px; background: var(--tone); flex-shrink: 0; }
.board.is-bad .board-word .led { animation: blink 1.6s ease-in-out infinite; }
.board-word h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.board.is-bad .board-word h2 { color: var(--bad); }
.board-sub { grid-area: sub; margin: 0; padding-inline-start: 22px; color: var(--muted); font-size: .88rem; }
.ticks { grid-area: ticks; display: flex; gap: 3px; margin: 10px 0 0; padding-inline-start: 22px; }
.ticks span { width: 6px; height: 18px; border-radius: 1px; background: var(--good); opacity: .85; }
.ticks span.stale { background: var(--warn); }
.ticks span.bad { background: var(--bad); opacity: 1; }
.board-note { margin: 0; padding: 12px 20px 14px; color: var(--muted); font-size: .8rem; }

.ledger { list-style: none; margin: 0; padding: 0; interpolate-size: allow-keywords; }
.ledger.fine:empty { display: none; }
.ledger.fine { columns: 2 340px; column-gap: 0; column-rule: 1px solid var(--line); }
.check { --tone: var(--good); min-width: 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.check.stale { --tone: var(--warn); }
.check.firing { --tone: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
[dir="rtl"] .check.firing { box-shadow: inset -3px 0 0 var(--bad); }
.check summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 12px; padding: 11px 20px; padding-inline-end: 16px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; }
.check summary:hover { background: var(--bg); }
.check summary::-webkit-details-marker { display: none; }
.check summary:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.check-icon { display: grid; place-items: center; color: var(--muted); }
.check.firing .check-icon, .check.stale .check-icon { color: var(--tone); }
.check-icon .i { width: 17px; height: 17px; }
.check-name { min-width: 0; display: flex; flex-direction: column; }
.check-name b { font-weight: 650; font-size: .93rem; }
.check-name small { color: var(--muted); font-size: .79rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.check-state::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--tone); }
.check.firing .check-state { color: var(--bad); font-weight: 650; }
.check.firing .check-state::before { animation: blink 1.6s ease-in-out infinite; }
.check.stale .check-state { color: var(--warn); }
.check-caret { width: 7px; height: 7px; margin-inline-start: 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.check details[open] .check-caret { transform: translateY(2px) rotate(225deg); }
.check details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.check details[open]::details-content { block-size: auto; }
.check-body { padding: 0 20px 14px; padding-inline-start: 49px; }
.check-label { margin: 6px 0 3px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.check-reading, .check-fix { margin: 0; font-size: .87rem; overflow-wrap: anywhere; }
.check-fix { padding: 8px 12px; border-inline-start: 2px solid var(--bad); background: var(--bg); }
.check-meta { margin: 10px 0 0; color: var(--muted); font-size: .78rem; }
.check-meta code { font-size: .9em; }
@media (max-width: 640px) {
  .board-head { padding: 16px; }
  .board-word h2 { font-size: 1.2rem; }
  .check summary { padding-inline: 16px 12px; }
  .check-name small { display: none; }
  .check.firing summary { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
  .check.firing .check-state { grid-column: 2; grid-row: 2; white-space: normal; }
  .check.firing .check-caret { grid-column: 3; grid-row: 1; }
  .check-body { padding-inline: 16px; }
  .board-note { padding-inline: 16px; }
}

/* System stats: each card has one number that matters, then the details
   under a dashed rule, so the four read the same way. */
.stats .kpi { display: flex; flex-direction: column; }
/* flag: something under the line needs a look, but the big number itself is fine. */
.kpi.flag { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.kpi.flag::after { background:var(--surface); }
.kpi.flag .kpi-icon { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.stats .kpi-head h2 { min-width: 0; }
.stats .big { font-size: clamp(1.8rem, 2.3vw, 2.35rem); white-space: nowrap; }
.big .of { font-size: .55em; font-weight: 700; color: var(--muted); }
.meter { height: 6px; margin: 12px 0 0; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transform-origin: left; animation: grow-x .9s .2s var(--ease) both; }
[dir="rtl"] .meter span { transform-origin: right; background: var(--accent); }
.meter .w0 { width: 0; } .meter .w1 { width: 10%; } .meter .w2 { width: 20%; } .meter .w3 { width: 30%; } .meter .w4 { width: 40%; } .meter .w5 { width: 50%; }
.meter .w6 { width: 60%; } .meter .w7 { width: 70%; } .meter .w8 { width: 80%; background: var(--warn); } .meter .w9 { width: 90%; background: var(--warn); } .meter .w10 { width: 100%; background: var(--bad); }
.mini { margin: auto 0 0; padding-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.mini::before { content: ""; display: block; margin-top: 2px; margin-bottom: 5px; border-top: 1px dashed var(--line); }
.mini > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .85rem; }
.mini dt { color: var(--muted); }
.mini dd { margin: 0; display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini dd small { color: var(--muted); font-weight: 500; font-size: .78rem; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }

/* Event tables: a kind reads as an icon and a phrase in its tone, details
   as labelled chips (events.go). In a narrow box each row becomes a card. */
.ev { --tone: var(--muted); display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-weight: 600; color: var(--fg); }
.ev.t-good { --tone: var(--good); } .ev.t-bad { --tone: var(--bad); } .ev.t-warn { --tone: var(--warn); }
.ev.t-info { --tone: var(--info); } .ev.t-accent { --tone: var(--accent); }
.ev-i { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); box-shadow: none; transition: transform .35s var(--ease), box-shadow .25s ease; }
.ev-i .i { width: 15px; height: 15px; }
.ev-t { font-size: .88rem; }
tbody tr:hover .ev-i { transform: scale(1.1) rotate(-4deg); box-shadow: none; }
.kvs { display: flex; flex-wrap: wrap; gap: 6px; }
.kv { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; font-size: .8rem; line-height: 1.6; background: var(--surface); transition: border-color .2s ease, transform .3s var(--ease); }
.kv:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-1px); }
.kv .k { display: flex; align-items: center; padding: 2px 9px; color: var(--muted); background: var(--surface-2); border-inline-end: 1px solid var(--line); white-space: nowrap; }
.kv .v { display: flex; align-items: center; gap: 6px; padding: 2px 9px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; white-space: normal; }
.kv .v.chip { margin: 3px 6px; padding: 0 8px; font-size: .74rem; line-height: 1.6; }
.kv .v.list { flex-wrap: wrap; gap: 2px 6px; }
.kv .sep { color: var(--muted); font-weight: 400; }
.kv.note { flex-basis: 100%; }
.kv.note .v { font-weight: 400; color: var(--fg); }
td.c-det { white-space: normal; min-width: 220px; max-width: 520px; }
code.raw { white-space: normal; word-break: break-all; }
.tile .ev { align-items: flex-start; }
.tile .ev-t { font-size: .8rem; color: var(--muted); font-weight: 600; line-height: 1.5; }
.tile .ev-i { width: 24px; height: 24px; border-radius: 3px; }
.tile:hover .ev-i { transform: scale(1.1) rotate(-4deg); }
table.events tbody tr { animation: rise .45s var(--ease) both; }
table.events tbody tr:nth-child(2) { animation-delay: .03s; } table.events tbody tr:nth-child(3) { animation-delay: .06s; }
table.events tbody tr:nth-child(4) { animation-delay: .09s; } table.events tbody tr:nth-child(5) { animation-delay: .12s; }
table.events tbody tr:nth-child(6) { animation-delay: .15s; } table.events tbody tr:nth-child(7) { animation-delay: .18s; }
table.events tbody tr:nth-child(n+8) { animation-delay: .21s; }
/* Cards whenever the table's own box is narrow: on phones, and in the
   half-width panels of an account page. */
.table-wrap:has(> table.events) { container: events / inline-size; }
@container events (max-width: 640px) {
  table.events thead { display: none; }
  table.events, table.events tbody { display: block; }
  table.events tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  table.events tbody tr:last-child { border-bottom: 0; }
  table.events td, table.events td:first-child, table.events td:last-child { display: block; padding: 0; border: 0; min-width: 0; max-width: none; white-space: normal; }
  table.events tbody tr.nil-row { display: block; padding: 0; }
  table.events tbody tr.nil-row td { padding: 0; }
  table.events tbody tr::before { content: ""; order: 3; flex-basis: 100%; height: 0; margin-block: -4px; }
  table.events tbody tr.nil-row::before { display: none; }
  table.events td.c-ev { order: 1; flex: 1 1 0; }
  table.events td.c-when { order: 2; color: var(--muted); font-size: .78rem; white-space: nowrap; }
  table.events td.c-who, table.events td.c-acct, table.events td.c-src { order: 4; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
  table.events td.c-acct::before, table.events td.c-src::before { content: attr(data-label); color: var(--muted); }
  table.events td.c-det { order: 5; flex-basis: 100%; }
  table.events td.c-ev ~ td:empty { display: none; }
  table.events .who { gap: 6px; }
  table.events .who .avatar.sm { width: 22px; height: 22px; font-size: .7rem; }
}

/* Security counts. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; transition: transform .3s var(--ease); }
.tile:hover { transform: translateY(-2px); }
.tile b { font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile code { color: var(--muted); font-size: .8rem; }

/* Search: a big field in the middle for users, a toolbar for logs. */
.search-hero, .empty-state { max-width: 640px; margin: 7vh auto 0; text-align: center; }
.search-hero h1, .empty-state h1 { margin: 0 0 6px; font-size: 1.85rem; font-weight: 800; letter-spacing: -.015em; }
.hero-icon { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 10px; box-shadow: none; animation: pop .6s var(--ease) both; }
.hero-icon .i { width: 36px; height: 36px; }
.empty-state .btn { margin-top: 18px; }
.search { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; }
.search:focus-within { border-color: var(--accent); box-shadow: none; }
.search > .i { width: 20px; height: 20px; margin-inline-start: 10px; color: var(--muted); transition: color .2s ease; }
.search:focus-within > .i { color: var(--accent); }
.search input { flex: 1; padding: 12px 4px; border: 0; background: transparent; }
.search input:focus { box-shadow: none; }
.search button { border-radius: 6px; padding-inline: 22px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
.toolbar .search { flex: 1 1 280px; margin: 0; padding: 0 4px; border-radius: 6px; box-shadow: none; background: var(--bg); border-color: var(--line-2); }
.toolbar .search input { padding: 10px 4px; }
.toolbar select { flex: 0 1 auto; }

/* Log lines look like a terminal in both themes. */
.log { margin: 14px 0 0; border-radius: 6px; overflow: hidden; background: #0d1117; border: 1px solid #1f2630; }
.log code { display: block; padding: 8px 14px; white-space: pre-wrap; color: #c9d1d9; font-size: .8rem; line-height: 1.6; border-bottom: 1px solid #1a2029; border-inline-start: 3px solid transparent; }
.log code:last-child { border-bottom: 0; }
.log code.lv-warn { border-inline-start-color: #f5b14c; background: rgba(245, 177, 76, .07); color: #f7d398; }
.log code.lv-error { border-inline-start-color: #ff6b6b; background: rgba(255, 107, 107, .09); color: #ffb4b4; }
.log .empty { color: #8b949e; margin: 0; }

/* One account. */
.profile { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 26px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 10px; box-shadow: none;
  background: var(--surface); }
.profile-main { flex: 1; min-width: 0; }
.profile h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.015em; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .875rem; }
.meta li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Account actions: one list of rows grouped by what they touch. Each row
   reads the same way (what it is, what it does, then the reason and the
   button), buttons line up in one column, and only the colour of the icon
   and button says how heavy the action is. */
.act-group + .act-group { margin-top: 22px; }
.act-group-h { margin: 0 0 10px; padding-inline-start: 4px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.act-list { container-type: inline-size; border: 1px solid var(--line); border-radius: 10px; overflow: clip; background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.act { --tone: var(--muted); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; padding: 16px 18px; transition: background-color .25s ease; }
.act + .act { border-top: 1px solid var(--line); }
.act.accent { --tone: var(--accent); } .act.bad { --tone: var(--bad); } .act.good { --tone: var(--good); } .act.warn { --tone: var(--warn); }
/* A bar on the leading edge grows in under the row being worked on. */
.act::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--tone); transform: scaleY(0); opacity: 0; transition: transform .45s var(--ease), opacity .2s ease; }
.act:hover, .act:focus-within { background: color-mix(in srgb, var(--tone) 5%, transparent); }
.act:focus-within::before, .act:hover::before { transform: none; opacity: 1; }
.act-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); transition: transform .45s var(--ease); }
.act-icon .i { width: 19px; height: 19px; }
.act:hover .act-icon, .act:focus-within .act-icon { transform: scale(1.08) rotate(-4deg); }
.act-text h4 { margin: 0 0 2px; font-size: .95rem; font-weight: 700; }
.act-text p { margin: 0; color: var(--muted); font-size: .85rem; max-width: 62ch; }
.act-do { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.act-do label { gap: 5px; font-size: .78rem; color: var(--muted); }
.act-do input, .act-do select { padding-block: 9px; color: var(--fg); font-weight: 400; }
.act-reason input { width: 230px; }
.act-months select { width: 92px; }
.act-do button { min-width: 140px; padding-block: 10px; white-space: nowrap; }
button.danger-soft { color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); box-shadow: none; }
button.danger-soft:hover { filter: none; color: #fff; background: var(--bad); border-color: var(--bad); box-shadow: none; }
/* Long forms put their fields under the text. */
.act.wide { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.act.wide .act-do { grid-column: 2; flex-wrap: wrap; justify-content: flex-start; }
.act.wide .act-confirm { flex: 1 1 240px; } .act.wide .act-reason { flex: 2 1 280px; } .act.wide .act-reason input { width: 100%; }
.act.wide .act-do button { margin-inline-start: auto; }
.danger-zone { container-type: inline-size; border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background:var(--surface); }
.danger-zone .panel-head h2, .danger-zone .panel-head h2 .i { color: var(--bad); }
.danger-zone .act { padding: 4px 0 0; background: none; }
.danger-zone .act::before { display: none; }
/* Narrow rows: the fields and the button drop under the text. */
@container (max-width: 760px) {
  .act { grid-template-columns: auto minmax(0, 1fr); }
  .act-do { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .act-reason { flex: 1 1 160px; } .act-reason input { width: 100%; }
}
@container (max-width: 460px) {
  .act { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .act-icon { display: none; }
  .act-do, .act.wide .act-do { grid-column: 1; }
  .act-do button { flex: 1 1 100%; margin-inline-start: 0; }
}

/* ---- settings ----------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Jump links to each section; on phones they stay under the top bar. */
/* overflow-x: auto also clips vertically, so the strip keeps room for the hover lift and the focus ring and gives it back in margin */
.settings-jump { display: flex; gap: 8px; margin: -13px -5px 17px; padding: 5px; overflow-x: auto; scrollbar-width: none; }
.settings-jump::-webkit-scrollbar { display: none; }
.settings-jump a { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 7px 14px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: .86rem; font-weight: 600; text-decoration: none; transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .3s var(--spring); }
.settings-jump a .i { width: 16px; height: 16px; color: var(--muted); transition: color .18s ease; }
.settings-jump a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); transform: translateY(-1px); }
.settings-jump a:hover .i { color: var(--accent); }
.settings-jump a:active { transform: scale(.96); }
.settings { max-width: 920px; }
.settings > .panel { animation: rise .55s var(--ease) both; scroll-margin-top: 24px; }
/* Jump links glide to their section; the glow below lands as it arrives. */
@media (prefers-reduced-motion: no-preference) { html:has(.settings-jump) { scroll-behavior: smooth; } }
.settings > .panel:nth-child(2) { animation-delay: .06s; } .settings > .panel:nth-child(3) { animation-delay: .12s; } .settings > .panel:nth-child(4) { animation-delay: .18s; }
/* A section reached from a jump link glows for a moment. */
.settings > .panel:target { animation: rise .55s var(--ease) both, target-glow 1.6s .1s ease both; }
@keyframes target-glow { 0%, 100% { box-shadow: none; } 30% { box-shadow: none; } }

/* Theme and language: big cards that work like radio buttons. */
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; font-weight: 400; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .3s ease, transform .45s var(--spring); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); }
.choice:active { transform: scale(.97); transition-duration: .12s; }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: none; }
.choice-text { display: flex; flex-direction: column; gap: 2px; padding-inline: 4px; min-width: 0; }
.choice-text b { display: flex; align-items: center; gap: 7px; font-size: .95rem; }
.choice-text b .i { width: 17px; height: 17px; color: var(--muted); transition: color .2s ease, transform .45s var(--spring); }
.choice:has(input:checked) .choice-text b .i { color: var(--accent); transform: rotate(-12deg) scale(1.1); }
.choice-text small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.choice-tick { position: absolute; top: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--accent); box-shadow: none; scale: 0; opacity: 0; transition: scale .45s var(--spring), opacity .2s ease; }
.choice-tick .i { width: 14px; height: 14px; stroke-width: 3; }
.choice:has(input:checked) .choice-tick { scale: 1; opacity: 1; }
/* Previews: a tiny panel (menu, header bar, card) in each theme's colours. */
.swatch, .glyph { position: relative; height: 92px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(127, 127, 127, .22); transition: transform .45s var(--spring); }
.choice:hover > .swatch, .choice:hover > .glyph { transform: scale(1.02); }
.swatch { display: grid; grid-template-columns: 28% minmax(0, 1fr); grid-template-rows: 12px minmax(0, 1fr); gap: 7px; padding: 9px; background: #f4f5f7; }
.swatch i { border-radius: 3px; background: #fff; box-shadow: none; }
.swatch i:first-child { grid-row: 1 / 3; }
.swatch i:nth-child(2) { width: 62%; background: #e8590c; box-shadow: none; }
.swatch i:nth-child(3) { border-radius: 3px; }
.swatch-dark { background: #0e1014; }
.swatch-dark i { background: #1c2129; box-shadow: none; }
.swatch-dark i:nth-child(2) { background: #ff8c42; }
/* Automatic: the light preview, with the dark one over its lower half. */
.swatch-system { display: block; padding: 0; background: #0e1014; }
.swatch-system > .swatch { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; }
.swatch-system > .swatch-dark { clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .6s var(--ease); }
.choice:hover .swatch-system > .swatch-dark { clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%); }
.glyph { display: grid; place-items: center; font-size: 2.1rem; font-weight: 800; color: var(--accent); background: var(--surface); }
.glyph[lang="fa"] { font-family: Vazirmatn, Tahoma, sans-serif; }
.glyph[lang="en"] { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.02em; }
.choice-apply { margin-top: 14px; }
/* admin.js applies a choice the moment it is picked. */
.choice-form.auto .choice-apply { display: none; }
.choice-form.sending .choice:has(input:checked) .choice-tick { animation: tick-wait .9s ease-in-out infinite; }
@keyframes tick-wait { 50% { box-shadow: none; } }

.panel > .error { margin: 0 0 16px; border-radius: 6px; animation: rise .35s var(--ease) both, shake .42s .12s ease both; }
.form-end { display: flex; justify-content: flex-end; margin-top: 18px; }
.act-text h4 .chip { margin-inline-start: 6px; }
/* The theme switch spreads from the card that was picked (admin.js). */
html.theme-shift::view-transition-old(root), html.theme-shift::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-shift::view-transition-new(root) { z-index: 1; }

/* Short laptop screens: tighter links so the whole menu fits. */
@media (min-width: 961px) and (max-height: 780px) {
  .side-inner { padding-top: 14px; }
  .side-head { padding-bottom: 12px; }
  .nav-group { margin: 10px 12px 2px; }
  .nav a { padding: 6px 12px; }
  .side-foot { padding-top: 10px; gap: 6px; }
  .me { padding: 6px 8px; }
}

/* ---- phones and small tablets ------------------------------------------ */
@media (max-width: 960px) {
  body.app { display: block; }
  .nav-toggle { display: block; position: fixed; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
  .topbar .brand { flex: 1; min-width: 0; }
  .topbar .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .icon-btn { display: inline-grid !important; place-items: center; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; transition: transform .12s var(--ease), border-color .18s ease; }
  .icon-btn:active { transform: scale(.94); }
  .icon-btn .i { width: 20px; height: 20px; }
  .nav-toggle:focus-visible + .topbar .icon-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(8, 10, 14, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
  .side { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(86vw, 300px); height: auto; overflow-y: auto; visibility: hidden; transform: translateX(-104%); box-shadow: 0 0 60px rgba(0, 0, 0, .35); transition: transform .38s var(--ease), visibility .38s; }
  [dir="rtl"] .side { transform: translateX(104%); }
  .nav-toggle:checked ~ .scrim { opacity: 1; visibility: visible; }
  .nav-toggle:checked ~ .side { transform: none; visibility: visible; }
  .nav-toggle:checked ~ .side .nav a { animation: rise .4s var(--ease) both; }
  .side { overflow: hidden; }
  .side-inner { position: static; height: 100%; }
  main.content { padding: 22px 16px 56px; }
  [id] { scroll-margin-top: 80px; }
  main.content > .flash.toast { top: 72px; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* The drawer turns into a bottom sheet that rises from the thumb's edge. */
  .drawer, [dir="rtl"] .drawer { inset: auto 0 0 0; width: 100%; height: auto; max-height: calc(100dvh - 40px); border: 0; border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(104%); }
  .drawer:popover-open, [dir="rtl"] .drawer:popover-open { transform: none; }
  @starting-style { .drawer:popover-open, [dir="rtl"] .drawer:popover-open { transform: translateY(104%); } }
  .drawer::before { content: ""; flex-shrink: 0; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--line-2); }
  .drawer-head { padding: 14px 18px 16px; }
  .drawer-error { margin-inline: 18px; }
  .drawer-form { padding: 18px 18px 22px; }
  .page-head { gap: 12px; margin-bottom: 20px; }
  .page-head h1 { font-size: 1.35rem; }
  .page-icon { width: 46px; height: 46px; border-radius: 6px; }
  .page-icon .i { width: 22px; height: 22px; }
  .page-tools, .page-tools button { width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpis.wide { grid-template-columns: minmax(0, 1fr); }
  .kpi { padding: 14px; border-radius: 10px; }
  .kpi .big { font-size: 1.9rem; margin-top: 10px; }
  .kpi-head h2 { font-size: .82rem; }
  .kpi-icon { width: 32px; height: 32px; }
  .panel { padding: 16px; border-radius: 10px; }
  .table-wrap { margin-inline: -16px; }
  .panel > .table-wrap:first-child { margin-top: -16px; }
  .panel > .table-wrap:last-child { margin-bottom: -16px; }
  th:first-child, td:first-child { padding-inline-start: 16px; }
  th:last-child, td:last-child { padding-inline-end: 16px; }
  /* Admins read as cards on a phone: who on top, role and authenticator
     beside the last sign-in, then the actions, with nothing off-screen. */
  table.team thead { display: none; }
  table.team tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  table.team tbody tr:last-child { border-bottom: 0; }
  table.team td { padding: 0; border: 0; white-space: normal; }
  table.team td:first-child { grid-column: 1 / -1; }
  table.team td.seen { justify-self: end; color: var(--muted); font-size: .8rem; }
  table.team td.seen::before { content: attr(data-label) " · "; }
  table.team td.act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; text-align: start; }
  table.team td.act:has(> .chip) { position: absolute; inset-block-start: 14px; inset-inline-end: 16px; }
  table.team tr:has(td.act > .chip) { position: relative; }
  table.team td.act form { margin: 0; flex: 1; }
  table.team td.act button { width: 100%; padding-block: 9px; }
  table.team .who { padding-inline-end: 52px; }
  table.team .who small { overflow-wrap: anywhere; }
  .profile { padding: 20px; gap: 14px; flex-direction: column; align-items: flex-start; }
  .avatar.xl { width: 60px; height: 60px; font-size: 1.6rem; }
  .profile h1 { font-size: 1.4rem; }
  .search-hero, .empty-state { margin-top: 3vh; }
  .search-hero h1, .empty-state h1 { font-size: 1.5rem; }
  .search { flex-wrap: wrap; }
  .search input { flex-basis: 60%; }
  .search-hero .search button { flex-basis: 100%; }
  .settings-jump { position: sticky; top: 61px; z-index: 10; margin: -6px -16px 16px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .settings-jump a { padding: 6px 12px; font-size: .82rem; }
  [id], .settings > .panel { scroll-margin-top: 130px; }
  .choices { gap: 8px; }
  .choice { padding: 6px 6px 10px; gap: 8px; border-radius: 6px; }
  .swatch, .glyph { height: 64px; border-radius: 6px; }
  .swatch { padding: 6px; gap: 5px; grid-template-rows: 9px minmax(0, 1fr); }
  .swatch-system { padding: 0; }
  .glyph { font-size: 1.6rem; }
  .choice-text b { font-size: .86rem; gap: 5px; }
  .choice-text b .i { display: none; }
  .choice-text small { font-size: .74rem; }
  .choice-tick { top: 10px; inset-inline-end: 10px; width: 20px; height: 20px; }
  .form-end button { width: 100%; }
}
@media (max-width: 420px) { .choices:not(.two) .choice-text small { display: none; } }

/* ---- empty lists ---------------------------------------------------------
   One look for every list with nothing in it: a tile springs in, its icon
   draws itself stroke by stroke, the words rise after it, and then the
   tile floats while a dashed halo breathes out now and then. The float is
   on the art, not the tile, so the halo rides along and always leaves
   from the tile's centre. */
.nil { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 16px 30px; }
.nil-art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; animation: nil-float 5.4s ease-in-out .9s infinite; }
.nil-art::before, .nil-art::after { content: ""; position: absolute; inset: -9px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); opacity: 0; animation: nil-halo 4.2s ease-out 1.1s infinite; pointer-events: none; }
.nil-art::after { animation-delay: 3.2s; }
.nil-tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; color: var(--accent); background:var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); box-shadow: none; animation: nil-pop .75s cubic-bezier(.34, 1.56, .64, 1) .06s both; }
.nil-tile .i { width: 28px; height: 28px; }
.drawn > * { stroke-dasharray: 1 1; animation: nil-draw .95s var(--ease) .28s both; }
.drawn > :nth-child(2) { animation-delay: .4s; } .drawn > :nth-child(n+3) { animation-delay: .52s; }
.nil-title { margin: 0; font-weight: 700; color: var(--fg); animation: rise .55s var(--ease) .2s both; }
.nil-hint { margin: 5px 0 0; max-width: 440px; color: var(--muted); font-size: .875rem; line-height: 1.7; animation: rise .55s var(--ease) .28s both; }
tr.nil-row td { padding: 0; white-space: normal; }
/* In a table wider than the screen the message stays in view, centred on
   the visible part rather than on the whole scrolling table. */
.table-wrap:has(.nil-row) { container-type: inline-size; }
tr.nil-row .nil { position: sticky; inset-inline-start: 0; width: 100cqi; box-sizing: border-box; }
tbody tr.nil-row:hover { background: none; }
.panel.quiet { padding-block: 4px; }
.log .nil-title { color: #c9d1d9; } .log .nil-hint { color: #8b949e; }
.log .nil-tile { color: #ff9a57; background:var(--surface); border-color: rgba(255, 140, 66, .3); }
@keyframes nil-pop { from { opacity: 0; transform: scale(.55) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes nil-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes nil-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes nil-halo { 0% { opacity: 0; transform: scale(.82); } 18% { opacity: .9; } 100% { opacity: 0; transform: scale(1.32); } }

/* Find an account. Before a search a lens drifts over a stack of accounts,
   lighting each one it passes; after a miss it shakes its head over an
   empty card. Drawn left to right and mirrored for Persian. */
.finder { display: flex; flex-direction: column; align-items: center; margin-top: 38px; }
.finder .scene { width: min(300px, 84%); height: auto; overflow: visible; margin-bottom: 8px; animation: nil-pop .8s cubic-bezier(.34, 1.4, .64, 1) .12s both; }
[dir="rtl"] .finder .scene { scale: -1 1; }
.finder h2 { margin: 12px 0 4px; font-size: 1.2rem; font-weight: 800; animation: rise .55s var(--ease) .24s both; }
.finder-x { margin: 0; color: var(--muted); animation: rise .55s var(--ease) .3s both; }
.scene .card { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; }
.scene .card.ghost { fill: color-mix(in srgb, var(--surface) 55%, transparent); stroke-dasharray: 7 6; }
.scene .dot, .scene .line { fill: var(--line); }
.scene .glass { fill: color-mix(in srgb, var(--surface) 70%, transparent); stroke: var(--fg); stroke-width: 3.5; }
.scene .handle, .scene .cross { stroke: var(--fg); stroke-linecap: round; fill: none; }
.scene .handle { stroke-width: 6.5; }
.scene .cross { stroke-width: 3; }
.idle .lens-at { transform: translate(150px, 29px); animation: lens-scan 8s cubic-bezier(.65, 0, .35, 1) .7s infinite; }
.idle .row .card, .idle .row .dot { animation: row-lit 8s ease-in-out .7s infinite; }
.idle .r1 .card, .idle .r1 .dot { animation-delay: -2.18s; }
.idle .r3 .card, .idle .r3 .dot { animation-delay: 2.94s; }
.idle .lens { animation: lens-tilt 4s ease-in-out infinite; }
.missed .lens-at { transform: translate(168px, 57px); }
.missed .lens { animation: lens-no .9s ease-in-out .55s both, lens-tilt 4s ease-in-out 1.6s infinite; }
.missed .cross { stroke-dasharray: 1 1; animation: nil-draw .5s var(--ease) 1.15s both; }
.missed .card.ghost { animation: ghost-dash 1.6s linear infinite; }
.finder-ways { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; padding: 0; }
.finder-ways li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); box-shadow: none; color: var(--muted); font-size: .85rem; animation: rise .55s var(--ease) .38s both; }
.finder-ways li + li { animation-delay: .46s; }
.finder-ways .i { width: 16px; height: 16px; color: var(--muted); }
.finder-ways code { color: var(--fg); font-size: .8rem; }
.finder-q { margin: 14px 0 0; color: var(--muted); font-size: .9rem; animation: rise .55s var(--ease) .36s both; }
.finder-q code { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 3px; color: var(--fg); background: color-mix(in srgb, var(--bad) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent); overflow-wrap: anywhere; }
.finder-tips { list-style: none; width: min(100%, 460px); margin: 20px 0 0; padding: 6px 18px; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.finder-tips li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; font-size: .9rem; animation: rise .55s var(--ease) .44s both; }
.finder-tips li + li { border-top: 1px solid var(--line); animation-delay: .52s; }
.finder-tips li:last-child { animation-delay: .6s; }
.finder-tips .i { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--muted); }
@keyframes lens-scan {
  0%, 12% { transform: translate(150px, 29px); }
  28%, 40% { transform: translate(122px, 75px); }
  56%, 68% { transform: translate(160px, 121px); }
  84%, 100% { transform: translate(150px, 29px); }
}
@keyframes row-lit {
  0%, 22%, 46%, 100% { fill: var(--surface); stroke: var(--line-2); }
  30%, 38% { fill: var(--surface); stroke: var(--fg); }
}
.idle .row .dot { animation-name: dot-lit; }
@keyframes dot-lit { 0%, 22%, 46%, 100% { fill: var(--line); } 30%, 38% { fill: color-mix(in srgb, var(--accent) 45%, var(--line)); } }
@keyframes lens-tilt { 0%, 100% { rotate: -4deg; } 50% { rotate: 5deg; } }
@keyframes lens-no { 0%, 100% { transform: none; } 20% { transform: translateX(-9px) rotate(-10deg); } 45% { transform: translateX(8px) rotate(9deg); } 70% { transform: translateX(-4px) rotate(-4deg); } }
@keyframes ghost-dash { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) {
  .nil-tile, .nil-title, .nil-hint, .drawn > *, .finder .scene, .finder h2, .finder-x, .finder-q, .finder-ways li, .finder-tips li, .missed .cross { animation: auth-fade .4s ease both; }
  .nil-art, .nil-art::before, .nil-art::after { animation: none; }
  .idle .lens-at { animation: none; transform: translate(122px, 75px); }
  .idle .row .card, .idle .row .dot, .idle .lens, .missed .lens, .missed .card.ghost { animation: none; }
  .idle .r2 .card { fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); stroke: color-mix(in srgb, var(--accent) 55%, var(--line-2)); }
  .idle .r2 .dot { fill: color-mix(in srgb, var(--accent) 45%, var(--line)); }
}
/* A form result is the same page again: the empty lists are already there. */
body.posted .nil-art { animation-delay: 0s; }
body.posted .nil-tile, body.posted .drawn > *, body.posted .nil-title, body.posted .nil-hint { animation: none; }

/* Persian: no capitals and no letter spacing, which break joined letters. */
:root[lang="fa"] body { font-family: Vazirmatn, Tahoma, system-ui, sans-serif; }
:root[lang="fa"] input[inputmode="numeric"]:not(.otp), :root[lang="fa"] input[inputmode="decimal"] { font-family: "Vazirmatn Digits", Vazirmatn, Tahoma, system-ui, sans-serif; }
:root[lang="fa"] code.rial { font-family: "Vazirmatn Digits", Vazirmatn, Tahoma, system-ui, sans-serif; font-size: 1em; }
:root[lang="fa"] input[dir="ltr"]::placeholder { direction: ltr; }
:root[lang="fa"] th, :root[lang="fa"] .nav-group { text-transform: none; letter-spacing: 0; font-size: .8rem; }
:root[lang="fa"] .page-head h1, :root[lang="fa"] .profile h1, :root[lang="fa"] .search-hero h1, :root[lang="fa"] .brand, :root[lang="fa"] .kpi .big { letter-spacing: 0; }

/* Language switch: in the sidebar once signed in, in the corner before. */
.lang { text-decoration: none; font-weight: 600; font-size: .9rem; padding: 4px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--fg); transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
.lang:hover { border-color: var(--accent); color: var(--accent); }
.lang[lang="fa"] { font-family: Vazirmatn, Tahoma, sans-serif; }
.lang-corner { position: fixed; inset-block-start: 14px; inset-inline-end: 16px; z-index: 1; background: color-mix(in srgb, var(--card) 80%, transparent); animation: auth-fade .4s .3s both; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes pulse { 0% { box-shadow: none; } 100% { box-shadow: none; } }
@keyframes blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  main.content > *, .page-icon, .hero-icon, .avatar.xl, .kpi .big, main.content > .flash.bad, .nav-toggle:checked ~ .side .nav a { animation-name: auth-fade; animation-delay: 0s; }
  .bar, .nav a.on::before { animation: none; }
  .chip.live::before, .board.is-bad .board-word .led, .check.firing .check-state::before { animation: none; }
  .meter span { animation: none; }
  .check details::details-content, .check-caret, .check summary { transition: none; }
  .side, .scrim { transition: none; }
  .dialog:popover-open { animation-name: auth-fade; }
  .drawer, [dir="rtl"] .drawer { transform: none; opacity: 0; transition: opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete; }
  .drawer:popover-open { opacity: 1; }
  @starting-style { .drawer:popover-open, [dir="rtl"] .drawer:popover-open { transform: none; opacity: 0; } }
  .drawer:popover-open .drawer-head, .drawer:popover-open .drawer-form > :not([type="hidden"]) { animation-name: auth-fade; animation-delay: 0s; }
  .drawer-error { animation: none; }
  button.drawer-close:hover .i { transform: none; }
  main.content > .flash.toast, main.content > .flash.toast.bad { animation: auth-fade .3s both, toast-out .3s ease 8s forwards; }
  .kpi:hover, .tile:hover, .kpi:hover::after, .nav a:hover .i { transform: none; }
  button:active, .btn:active, .nav a:active, .icon-btn:active { transform: none; }
  .act::before, .act-icon { transition: none; }
  .act:hover .act-icon, .act:focus-within .act-icon { transform: none; }
  table.events tbody tr { animation-name: auth-fade; animation-delay: 0s; }
  tbody tr:hover .ev-i, .tile:hover .ev-i, .kv:hover { transform: none; }
  .settings > .panel, .settings > .panel:target, .panel > .error { animation: auth-fade .3s both; }
  .choice, .swatch, .glyph, .choice-tick, .choice-text b .i, .settings-jump a { transition: border-color .2s ease, background-color .2s ease, opacity .2s ease; }
  .choice:hover, .choice:active, .choice:hover > .swatch, .choice:hover > .glyph, .settings-jump a:hover, .settings-jump a:active { transform: none; }
  .choice:has(input:checked) .choice-text b .i { transform: none; }
  .swatch-system > .swatch-dark { transition: none; }
  .choice:hover .swatch-system > .swatch-dark { clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); }
  .choice-form.sending .choice:has(input:checked) .choice-tick { animation: none; }
}

/* Sign-in, authenticator and password pages: one centred card that rises in,
   a warm wash behind it, and a shake when a code or password is refused.
   CSS only: the panel's CSP allows no scripts and no inline styles. */
.auth { min-height: calc(100vh - 32px); display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; align-content: center; padding: 24px 0; }
body:has(.auth) { background: var(--bg); }
.auth-card { min-width: 0; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 28px 24px 22px; box-shadow: none; animation: auth-rise .48s cubic-bezier(.23, 1, .32, 1) both; }
.auth-card > * { animation: auth-rise .42s cubic-bezier(.23, 1, .32, 1) both; }
.auth-card > :nth-child(2) { animation-delay: .05s; } .auth-card > :nth-child(3) { animation-delay: .1s; }
.auth-card > :nth-child(4) { animation-delay: .15s; } .auth-card > :nth-child(5) { animation-delay: .2s; }
.auth-card > :nth-child(n+6) { animation-delay: .25s; }
.auth-mark { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: none; animation: auth-pop .6s cubic-bezier(.23, 1, .32, 1) both; }
.auth h1 { text-align: center; margin: 0 0 .4rem; font-size: 1.45rem; }
.auth-lead, .auth-who { text-align: center; color: var(--muted); margin: 0 0 1.2rem; }
.auth-who { font-size: .9rem; }
.auth .stack { gap: 14px; }
.auth label { font-size: .9rem; }
.auth input { padding: 12px 14px; border-radius: 6px; background: var(--bg); transition: border-color .18s ease, box-shadow .18s ease; }
.auth input:focus { outline: none; border-color: var(--accent); box-shadow: none; }
.auth input.otp { text-align: center; font: 600 1.6rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .45em; padding-inline-start: calc(14px + .45em); }
.auth input.otp::placeholder { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.auth button:not(.link) { margin-top: 4px; padding: 13px 14px; border-radius: 6px; border: none; background: var(--accent); box-shadow: none; transition: transform .12s cubic-bezier(.23, 1, .32, 1), box-shadow .18s ease, filter .18s ease; }
.auth button:not(.link):hover { filter: none; box-shadow: none; }
.auth button:not(.link):active { transform: scale(.97); }
.auth .error { border-radius: 6px; animation: auth-rise .3s cubic-bezier(.23, 1, .32, 1) both, auth-shake .42s .1s ease both; }
.auth-alt { text-align: center; margin-top: 10px; }
.steps { padding-inline-start: 1.2em; margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: 10px; }
.steps li::marker { color: var(--accent); font-weight: 700; }
.steps code.key { display: inline-block; word-break: normal; word-spacing: .15em; margin-top: 6px; padding: 6px 10px; background: var(--bg); border: 1px dashed var(--line); border-radius: 3px; }
.qr-box { margin: 12px 0 4px; width: 196px; max-width: 100%; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; animation: qr-in .5s var(--ease) .15s both; }
.qr { display: block; width: 100%; height: auto; }
.qr-alt { margin: 10px 0 0; color: var(--muted); font-size: .92em; }
@keyframes qr-in { from { opacity: 0; scale: .94; } }
@media (prefers-reduced-motion: reduce) { .qr-box { animation-name: auth-fade; } }
@keyframes auth-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes auth-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes auth-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-card > *, .auth-mark, .auth .error { animation-name: auth-fade; }
  .auth button:not(.link):active { transform: none; }
}
@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }

.auth-mark img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.auth-mark:has(img) { overflow: hidden; }

/* ---- fields: an icon, an example, and help that answers back ----------- */
/* Label, box and hint keep one rhythm everywhere: 8px apart, the hint a
   little quieter than the label. */
.field { gap: 8px; }
.auth .field > label, .drawer-form label { font-size: .88rem; letter-spacing: .005em; }
.auth .stack { gap: 18px; }
.auth .stack > .go { margin-top: 6px; }
.control { position: relative; display: flex; align-items: center; min-width: 0; font-weight: 400; }
.control > input { flex: 1; width: 100%; }
.control > .i { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color .2s ease, scale .35s var(--spring); }
[dir="rtl"] .control > .i { left: auto; right: 14px; }
/* Physical sides: an email or password box reads left to right even on a
   Persian page, so its own start is not the page's start. */
.control > .i ~ input { padding-left: 44px; }
[dir="rtl"] .control > .i ~ input { padding-left: 14px; padding-right: 44px; }
.control:focus-within > .i { color: var(--accent); scale: 1.1; }
.control:has(:user-invalid) > .i { color: var(--bad); }
input:user-invalid { border-color: color-mix(in srgb, var(--bad) 65%, var(--line-2)); }
input:user-invalid:focus { box-shadow: none; }
/* A Persian example in a left-to-right box sits on the right, like the
   label; typing then starts from the left as usual. */
:root[lang="fa"] .control input:placeholder-shown { text-align: right; }
:root[lang="fa"] .control input[type="password"]:placeholder-shown, :root[lang="fa"] .control input[name="name"]:placeholder-shown { direction: rtl; }
:root[lang="fa"] .control input[type="password"]:placeholder-shown::placeholder { direction: rtl; }
/* Show / hide password. */
.control .reveal, .auth .control .reveal { position: absolute; right: 6px; margin: 0; padding: 7px; border-radius: 6px; background: transparent; color: var(--muted); box-shadow: none; filter: none; transition: color .18s ease, background-color .18s ease, transform .12s var(--ease); }
[dir="rtl"] .control .reveal, [dir="rtl"] .auth .control .reveal { right: auto; left: 6px; }
.control .reveal:hover, .auth .control .reveal:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: none; filter: none; }
.control .reveal:active { transform: scale(.88); }
.control .reveal .i { width: 18px; height: 18px; }
.control .reveal .i + .i, .control .reveal[aria-pressed="true"] .i { display: none; }
.control .reveal[aria-pressed="true"] .i + .i { display: block; animation: pop .3s var(--spring) both; }
.control .reveal[aria-pressed="false"] .i:first-child { animation: pop .3s var(--spring) both; }
.control:has(.reveal:not([hidden])) > input { padding-right: 46px; }
[dir="rtl"] .control:has(.reveal:not([hidden])) > input { padding-left: 46px; }
/* Caps Lock note. */
.hint.caps { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--warn); font-size: .8rem; font-weight: 600; animation: rise .28s var(--ease) both; }
.hint.caps[hidden] { display: none; }
.hint.caps .i { width: 15px; height: 15px; }
.auth .field > .hint { color: var(--muted); font-size: .8rem; line-height: 1.55; }
/* What a new password needs; each rule lights up once met. */
.pw-rules { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: .82rem; }
.form-grid .pw-rules { grid-column: 1 / -1; margin: 0; }
.pw-rules li { display: inline-flex; align-items: center; gap: 7px; transition: color .25s ease; }
.pw-rules .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; stroke-width: 3; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); opacity: .55; scale: .82; transition: scale .4s var(--spring), opacity .2s ease, background-color .25s ease, border-color .25s ease, color .25s ease; }
.pw-rules li.ok { color: var(--good); }
.pw-rules li.ok .i { opacity: 1; scale: 1; color: #fff; background: var(--good); border-color: var(--good); }
/* The browser's saved-login fill keeps the theme instead of turning yellow or blue. */
input:-webkit-autofill, input:-webkit-autofill:hover { -webkit-text-fill-color: var(--fg); caret-color: var(--fg); box-shadow: 0 0 0 40px color-mix(in srgb, var(--accent) 6%, var(--bg)) inset; transition: background-color 600000s 0s, color 600000s 0s; }
input:-webkit-autofill:focus { box-shadow: 0 0 0 40px color-mix(in srgb, var(--accent) 6%, var(--bg)) inset, 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
/* Sign-in card: a little more air around the mark and the fields. */
.auth-card { padding: 34px 28px 28px; }
.auth-mark { margin-bottom: 18px; }
.auth h1 { margin-bottom: .35rem; }
.auth-lead, .auth-who { margin-bottom: 1.5rem; line-height: 1.65; }
@media (max-width: 480px) { .auth-card { padding: 28px 20px 22px; border-radius: 10px; } }

/* ---- buttons that answer ------------------------------------------------ */
/* "Go" buttons carry an arrow that leans forward on hover and keeps
   travelling while the next page loads. */
button.go .i { transition: translate .35s var(--spring); }
[dir="rtl"] button.go .i { scale: -1 1; }
button.go:hover .i { translate: 3px 0; }
[dir="rtl"] button.go:hover .i { translate: -3px 0; }
button.go.busy .i { animation: go-on .9s var(--ease) infinite; }
[dir="rtl"] button.go.busy .i { animation-name: go-on-rtl; }
@keyframes go-on { 0% { translate: 0 0; opacity: 1; } 45% { translate: 14px 0; opacity: 0; } 46% { translate: -14px 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes go-on-rtl { 0% { translate: 0 0; opacity: 1; } 45% { translate: -14px 0; opacity: 0; } 46% { translate: 14px 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
/* Any button that sent its form: a light sweeps across it until the next
   page arrives, and it cannot be pressed twice. */
button.busy { position: relative; overflow: hidden; cursor: progress; pointer-events: none; }
button.busy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%); translate: -100% 0; animation: sweep 1.15s ease-in-out .15s infinite; }
button.ghost.busy::after, button.link.busy::after { background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 75%); }
form.sending > button.busy, form.sending .busy { opacity: 1; }
@keyframes sweep { to { translate: 100% 0; } }
/* A thin bar along the top while the next page is on its way; it only
   shows for anything slower than a blink. */
html.leaving body::before { content: ""; position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; transform-origin: left; background: var(--accent); box-shadow: none; animation: leave-bar 9s cubic-bezier(.08, .82, .17, 1) .14s both; }
html[dir="rtl"].leaving body::before { transform-origin: right; background: var(--accent); }
@keyframes leave-bar { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
.nav a.going .i { animation: pop .35s var(--spring) both; }

/* ---- page motion -------------------------------------------------------- */
/* Moving between pages uses the browser's own cross-document view
   transitions: no script framework, no change to forms, links or the CSP,
   and a browser without them simply loads the page as before. The menu
   and top bar hold still, the open-page highlight slides to the next link,
   the sign-in card reshapes into the next step, and the content swaps with
   a short cross-fade (the new page's own entrance does the rest). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.side-inner { view-transition-name: side; }
.topbar { view-transition-name: topbar; }
.auth-card { view-transition-name: auth-card; }
.auth-mark { view-transition-name: auth-mark; }
.lang-corner { view-transition-name: lang-corner; }
/* The theme change in Settings is its own circle reveal of the whole page. */
html.theme-shift *, html.theme-shift *::before { view-transition-name: none !important; }

/* One highlight for the open page, tied to its link by anchor positioning,
   so it can travel from link to link. Browsers without anchor positioning
   keep the link's own highlight. */
.nav { position: relative; }
.nav-pill { display: none; }
@supports (anchor-name: --a) and (top: anchor(top)) {
  .nav a.on { anchor-name: --nav-on; background: transparent; }
  .nav a.on::before { display: none; }
  .nav:has(a.on) .nav-pill { display: block; position: absolute; position-anchor: --nav-on; top: anchor(top); bottom: anchor(bottom); left: anchor(left); right: anchor(right); border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; view-transition-name: nav-pill; }
  .nav-pill::before { content: ""; position: absolute; inset-inline-start: -14px; top: 9px; bottom: 9px; width: 4px; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--accent); box-shadow: none; animation: grow-y .45s var(--ease) both; }
  .vt-in .nav-pill::before { animation: none; }
}

::view-transition-group(*) { animation-duration: .42s; animation-timing-function: var(--ease); }
/* The highlight glides with a little give at the end, like the app's tabs. */
::view-transition-group(nav-pill) { animation-duration: .52s; animation-timing-function: cubic-bezier(.3, 1.3, .5, 1); }
::view-transition-old(nav-pill) { animation: none; opacity: 0; }
::view-transition-new(nav-pill) { animation: none; }
/* Menu and bar are the same picture before and after: no blink. */
::view-transition-old(side), ::view-transition-old(topbar) { animation: none; opacity: 0; }
::view-transition-new(side), ::view-transition-new(topbar) { animation: none; }
/* The sign-in card keeps its top edge while it grows or shrinks; its
   content rises in on its own. */
::view-transition-group(auth-card) { animation-duration: .5s; }
::view-transition-old(auth-card), ::view-transition-new(auth-card) { height: 100%; object-fit: cover; object-position: top; }
::view-transition-old(auth-card) { animation: vt-out .18s ease both; }
::view-transition-new(auth-card) { animation: vt-fade .3s ease both; }
.vt-in .auth-card, .vt-in .auth-mark { animation: none; }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-out-up { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-out-down { to { opacity: 0; transform: translateY(10px); } }
@keyframes vt-fade { from { opacity: 0; } }
/* Phones: following a link in the open menu slides the menu away while the
   page changes underneath. */
@media (max-width: 960px) {
  ::view-transition-old(side) { animation: vt-out .3s ease both; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .control > .i, .pw-rules .i, button.go .i { transition: none; }
  .control:focus-within > .i, button.go:hover .i, [dir="rtl"] button.go:hover .i { scale: none; translate: none; }
  [dir="rtl"] button.go .i { scale: -1 1; }
  button.go.busy .i, .nav a.going .i, .control .reveal .i { animation: none !important; }
  button.busy::after { animation: none; background: color-mix(in srgb, var(--fg) 8%, transparent); }
  html.leaving body::before { animation: auth-fade .3s .14s both; transform: none; opacity: .9; }
  .hint.caps { animation-name: auth-fade; }
}

/* ---- house style --------------------------------------------------------
   Tarkk's panel reads like a well-made instrument, not a template: warm
   paper and ink, hairline rules instead of shadows, small radii, no
   gradients and no glows. Orange is a signal, used for what is live or
   chosen, never for decoration. Primary buttons are ink and turn orange
   under the pointer; a field in use simply gets an ink edge. */
body { letter-spacing: -.003em; }
:root[lang="fa"] body { letter-spacing: 0; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* Fields: one hairline, a little darker on hover, ink when in use. */
input, select, textarea { background: var(--surface); border-color: var(--line-2); }
input:hover:not(:focus), select:hover, textarea:hover:not(:focus) { border-color: color-mix(in srgb, var(--fg) 35%, var(--line-2)); background-color: var(--surface); }
input:focus, select:focus, textarea:focus, .auth input:focus, select:open { border-color: var(--fg); box-shadow: none; outline: none; }
input:user-invalid:focus { border-color: var(--bad); box-shadow: none; }
.drawer [aria-invalid="true"] { box-shadow: none; }
.auth input { background: var(--surface); }
.control:focus-within > .i { color: var(--fg); scale: 1; }
.field:focus-within > label { color: var(--fg); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow: 0 0 0 40px var(--surface-2) inset; }
.search:focus-within { border-color: var(--fg); box-shadow: none; }

/* Buttons: ink, square-shouldered; orange under the pointer. */
button, .btn, .auth button:not(.link), .composer > summary { background: var(--fg); color: var(--bg); box-shadow: none; filter: none; border-radius: 6px; transition: background-color .2s ease, color .2s ease, transform .12s var(--ease); }
button:hover, .btn:hover, .auth button:not(.link):hover, .composer > summary:hover { background: var(--accent); color: #fff; box-shadow: none; filter: none; }
.auth button:not(.link) { padding: 12px 14px; }
button.ghost, .composer > summary.quiet { background: transparent; color: var(--fg); border: 1px solid var(--line-2); }
button.ghost:hover, .composer > summary.quiet:hover { background: var(--surface-2); color: var(--fg); border-color: color-mix(in srgb, var(--fg) 40%, var(--line-2)); }
button.link, button.link:hover, .auth .control .reveal, .control .reveal { background: transparent; }
button.link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
button.link:hover { color: var(--accent); text-decoration-color: currentColor; }
.control .reveal:hover, .auth .control .reveal:hover { background: var(--surface-2); color: var(--fg); }
button.danger, button.danger:hover { background: var(--bad); color: #fff; }
button.danger:hover { background: color-mix(in srgb, var(--bad) 85%, #000); }
button.copy, button.drawer-close { background: transparent; color: var(--muted); }
button.copy:hover, button.drawer-close:hover { background: var(--surface-2); color: var(--fg); }
a { color: var(--fg); text-decoration-color: color-mix(in srgb, var(--fg) 30%, transparent); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
.qr-alt a, .auth-alt a { color: var(--accent); }

/* No icon tiles, halos or badges of colour behind icons: the icon alone. */
.page-icon { display: none; }
.hero-icon, .nil-tile, .kpi-icon, .check-icon, .ev-i, .act-icon, .drawer-icon, .dialog-icon { background: none; border: 0; box-shadow: none; }
.hero-icon { width: auto; height: auto; margin-bottom: 12px; color: var(--fg); }
.nil-tile { width: auto; height: auto; color: var(--muted); }
.log .nil-tile { color: #9d998e; }
.nil-art::before, .nil-art::after { display: none; }
.kpi-icon { width: auto; height: auto; color: var(--muted); }
.drawer-icon, .dialog-icon { width: auto; height: auto; }
.dialog-icon { margin-bottom: 10px; }
.act-icon, .ev-i { width: 28px; height: auto; }
tbody tr:hover .ev-i { transform: none; box-shadow: none; }
.panel-head h2 .i, .section-head h2 .i { color: var(--muted); }
.avatar { background: var(--fg); color: var(--bg); box-shadow: none; }
.avatar.xl { box-shadow: none; }
.brand img { box-shadow: none; border-radius: 6px; }
.auth-mark, .auth-mark:has(img) { width: 52px; height: 52px; border: 0; background: none; box-shadow: none; margin-bottom: 20px; }

/* Cards: hairlines, no lift. */
.kpi::after { display: none; }
.kpi.warn, .kpi.flag { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.kpi:hover, .tile:hover { transform: none; }
.auth-card { box-shadow: none; border-color: var(--line); border-radius: 10px; }
.chip { border-radius: 4px; }
.chip.accent, .role-owner { color: var(--fg); background: var(--surface-2); border-color: var(--line-2); }

/* Page titles sit on a rule, like a document. */
.page-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.page-head h1 { font-weight: 750; letter-spacing: -.02em; }
:root[lang="fa"] .page-head h1 { letter-spacing: 0; }
th { background: transparent; border-bottom-color: var(--line-2); }

/* Menu: the open page is an ink label on a quiet plate, with a short
   orange mark at its edge. */
.nav a.on, .nav a.on .i { color: var(--fg); }
.nav a.on .i { color: var(--accent); }
.nav a:hover .i { transform: none; }
.nav a.on { background: var(--surface-2); }
.nav a.on::before, .nav-pill::before { inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; box-shadow: none; }
@supports (anchor-name: --a) and (top: anchor(top)) {
  .nav a.on { background: transparent; }
  .nav:has(a.on) .nav-pill { background: var(--surface-2); border-radius: 6px; }
}
.me:hover, .me.on { background: var(--surface-2); }

/* Settings choices: the picked one has an ink edge and an orange tick. */
.choice:has(input:checked) { border-color: var(--fg); background: var(--surface); box-shadow: none; }
.choice:hover { transform: none; }
.settings-jump a:hover { transform: none; border-color: var(--fg); color: var(--fg); }
.settings-jump a:hover .i { color: var(--fg); }
.lang:hover { border-color: var(--fg); color: var(--fg); }
html.leaving body::before { height: 2px; }
.search > .i { color: var(--muted); }
.search:focus-within > .i { color: var(--fg); }

/* ---- dashboard: what needs you, then the business, then the rest ------- */
.section-label { margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
:root[lang="fa"] .section-label { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.todo { margin-bottom: 30px; }
.todo-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.todo-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.todo-list li:last-child { border-bottom: 0; }
.todo-list b { display: block; font-weight: 650; }
.todo-list small { display: block; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.todo-list a { font-weight: 600; font-size: .88rem; white-space: nowrap; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 6px; text-decoration: none; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.todo-list a:hover { border-color: var(--fg); color: var(--fg); background: var(--surface-2); }
/* A small square light, like a radio's: amber for "look", red for "broken". */
.led { width: 8px; height: 8px; border-radius: 1px; background: var(--warn); }
.todo-list li.bad .led { background: var(--bad); animation: blink 1.6s ease-in-out infinite; }
.todo-none { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--muted); }
.todo-none .i { color: var(--good); }
.kpi.lead-kpi { border-color: var(--fg); }
.kpi.lead-kpi .kpi-sub + .kpi-sub { margin-top: 8px; }
.delta.down { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.dash-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .dash-main { grid-template-columns: minmax(0, 1fr); } }
.rows-h { margin: 20px 0 4px; font-size: .8rem; font-weight: 700; color: var(--muted); }
details.more { margin-top: 8px; }
details.more > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--fg); transition: border-color .18s ease, background-color .18s ease; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { border-color: var(--fg); background: var(--surface-2); }
details.more > summary .i { width: 16px; height: 16px; transition: rotate .3s var(--ease); }
details.more[open] > summary .i { rotate: 180deg; }
details.more[open] > section { animation: rise .35s var(--ease) both; }
@media (max-width: 640px) {
  .todo-list li { grid-template-columns: auto minmax(0, 1fr); }
  .todo-list a { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .todo-list li.bad .led, details.more[open] > section { animation: none; }
  details.more > summary .i { transition: none; }
}

/* ---- page changes without jumps -----------------------------------------
   A page reached by a page transition does not also build itself up piece
   by piece: the content arrives as one sheet (a short fade and a 10px
   slide in the menu's direction) and everything in it is already in place.
   The first load and the sign-in steps keep their entrance. */
main.content { view-transition-name: content; }
.vt-in main.content > :not(.toast), .vt-in .page-icon, .vt-in .hero-icon, .vt-in .avatar.xl, .vt-in .kpi .big, .vt-in .bar, .vt-in .meter span,
.vt-in .nil-tile, .vt-in .drawn > *, .vt-in .nil-title, .vt-in .nil-hint, .vt-in .finder .scene, .vt-in .finder h2, .vt-in .finder-x, .vt-in .finder-q,
.vt-in .finder-ways li, .vt-in .finder-tips li, .vt-in table.events tbody tr, .vt-in .nav-pill::before { animation-name: none; }
::view-transition-old(content) { animation: vt-out .16s ease both; }
::view-transition-new(content) { animation: vt-sheet .3s var(--ease) both; }
html[data-way="up"]::view-transition-new(content) { animation-name: vt-sheet-down; }
html[data-way="same"]::view-transition-new(content) { animation: vt-fade .16s ease both; }
::view-transition-old(content), ::view-transition-new(content) { height: auto; }
::view-transition-group(content) { animation-duration: .3s; }
@keyframes vt-sheet { from { opacity: 0; transform: translateY(10px); } }
@keyframes vt-sheet-down { from { opacity: 0; transform: translateY(-10px); } }
/* The root now holds only the background: no fade, so nothing flickers. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(root) { display: none; }