/* Tokens, reset, typography and utilities (docs/17 section 7.2). Logical properties only: the UI flips with dir. */
:root {
  --bg: #040815; --surface: #0a1228; --surface-2: #0f1a36; --line: #1b2a4d;
  --text: #e6eefc; --text-dim: #9db0cf; --text-faint: #7388aa;
  --accent: #35e0ff; --violet: #8a5cff; /* violet: corner brackets, glow, gradient lines, planned frames. Never a state, never text */
  --ok: #34e3a0; --warn: #f6c453; --bad: #ff5c75; --idle: #7f93b3;
  --r: 4px;
  --font: "Vazirmatn", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background-color: var(--bg); color: var(--text);
  font: 14px/1.75 var(--font);
  /* HUD grid: two 1px line gradients and a violet glow, no image file */
  background-image:
    radial-gradient(900px 420px at 85% -80px, rgba(138, 92, 255, .10), transparent 70%),
    linear-gradient(rgba(53, 224, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 224, 255, .028) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
  background-attachment: fixed;
  min-block-size: 100vh;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(53, 224, 255, .3); }
.noscript { padding: 24px; text-align: center; }

/* LTR islands and isolated names */
.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--mono); font-size: .92em; }
.bidi { unicode-bidi: isolate; }
.ltr-text { direction: ltr; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.t-bad-text { color: var(--bad); }
.inline { inline-size: 1em; block-size: 1em; vertical-align: -.15em; }
.ico { inline-size: 20px; block-size: 20px; flex: none; }
.mt { margin-block-start: 16px; }

/* tones: one custom property drives dots, borders and tints */
.t-ok { --tone: var(--ok); } .t-warn { --tone: var(--warn); } .t-bad { --tone: var(--bad); }
.t-idle { --tone: var(--idle); } .t-accent { --tone: var(--accent); } .t-plain { --tone: var(--text-dim); }

/* loading skeleton */
.skel-box { display: grid; gap: 10px; padding-block: 4px; }
.skel { block-size: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--surface-2), #16264d, var(--surface-2)); background-size: 220% 100%; animation: shimmer 1.4s linear infinite; }
.skel:nth-child(3n+2) { inline-size: 82%; } .skel:nth-child(3n) { inline-size: 64%; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}