:root {
    --bg: #0a0d0c; --panel: #0f1413; --line: #1d2725;
    --fg: #cfe8d8; --phosphor: #7af0a0;
  }
  html, body {
    background: var(--bg); color: var(--fg);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: "ss01","ss02","cv01","calt";
    -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  }
  body {
    background-image:
      linear-gradient(rgba(122,240,160,.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(122,240,160,.022) 1px, transparent 1px),
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(122,240,160,.07), transparent 60%);
    background-size: 32px 32px, 32px 32px, auto;
  }
  .scanlines::before {
    content:""; position: fixed; inset: 0;
    background: repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.013) 0, rgba(255,255,255,0.013) 1px,
      transparent 1px, transparent 3px);
    pointer-events: none; z-index: 60; mix-blend-mode: screen;
  }
  .vignette::after {
    content:""; position: fixed; inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%);
    pointer-events: none; z-index: 59;
  }
  .crt-flicker { animation: flicker 7s infinite; }
  @keyframes flicker { 0%,99%,100% { opacity: 1; } 99.5% { opacity: .96; } }
  .blink { animation: blink 1.05s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .caret {
    display: inline-block; width: .55ch; height: 1em;
    background: var(--phosphor); transform: translateY(.18em);
    box-shadow: 0 0 6px rgba(122,240,160,.6);
  }
  .glow-text { text-shadow: 0 0 10px rgba(122,240,160,.35); }
  /* Brand mark — paper-airplane SVG ships emerald gradient (#10b981 family).
     The page accent is phosphor (#7af0a0); a soft phosphor halo harmonizes
     the two greens without recoloring the SVG itself. */
  .brand-mark { filter: drop-shadow(0 0 6px rgba(122,240,160,.45)); }
  .hairline { border-color: #1d2725; }
  .hairline-strong { border-color: #28342f; }
  ::selection { background: rgba(122,240,160,.35); color: #061008; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: #0a0d0c; }
  ::-webkit-scrollbar-thumb { background: #1d2725; border: 2px solid #0a0d0c; }
  ::-webkit-scrollbar-thumb:hover { background: #28342f; }

  /* === buttons: terminal-outline with phosphor accent === */
  .btn-term {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.05rem;
    color: var(--phosphor);
    background: rgba(122,240,160,.06);
    border: 1px solid rgba(122,240,160,.45);
    transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    font-weight: 600; letter-spacing: .02em;
  }
  .btn-term::before { content:"["; color: rgba(122,240,160,.55); font-weight: 600; }
  .btn-term::after  { content:"]"; color: rgba(122,240,160,.55); font-weight: 600; }
  .btn-term:hover {
    background: rgba(122,240,160,.14);
    border-color: var(--phosphor);
    box-shadow: 0 0 0 1px var(--phosphor), 0 10px 28px -14px rgba(122,240,160,.45);
  }
  .btn-term:active { transform: translateY(1px); }
  .btn-term .kbd { color: rgba(122,240,160,.6); font-size: 10px; padding: 0 5px; border: 1px solid rgba(122,240,160,.35); border-bottom-width: 2px; margin-left: .15rem; }

  /* solid variant for one-and-only primary call */
  .btn-solid {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.05rem;
    color: #06120a;
    background: var(--phosphor);
    border: 1px solid var(--phosphor);
    transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
    font-weight: 700; letter-spacing: .02em;
  }
  .btn-solid::before { content:"["; color: rgba(6,18,10,.6); font-weight: 700; }
  .btn-solid::after  { content:"]"; color: rgba(6,18,10,.6); font-weight: 700; }
  .btn-solid:hover { filter: brightness(1.08); box-shadow: 0 10px 32px -12px rgba(122,240,160,.55); }
  .btn-solid:active { transform: translateY(1px); }
  .btn-solid .kbd { color: rgba(6,18,10,.55); font-size: 10px; padding: 0 5px; border: 1px solid rgba(6,18,10,.35); border-bottom-width: 2px; margin-left: .15rem; }

  .btn-ghost {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.05rem; border: 1px solid #28342f;
    color: #cfe8d8; background: transparent;
    transition: all .15s ease;
    font-weight: 500; letter-spacing: .02em;
  }
  .btn-ghost::before { content:"["; color:#5a6a64; }
  .btn-ghost::after  { content:"]"; color:#5a6a64; }
  .btn-ghost:hover { border-color: var(--phosphor); color: var(--phosphor); }
  .btn-ghost:hover::before, .btn-ghost:hover::after { color: var(--phosphor); }

  .btn-term.btn-sm, .btn-ghost.btn-sm, .btn-solid.btn-sm { padding: .45rem .8rem; font-size: 11px; }

  /* === sticky header shell === */
  .header-shell {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10,13,12,.82);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    transition: box-shadow .2s ease, border-color .2s ease;
  }
  .header-shell.scrolled {
    box-shadow: 0 1px 0 #28342f, 0 16px 24px -22px rgba(0,0,0,.9);
  }
  .header-shell.scrolled .top-status { height: 0; opacity: 0; pointer-events: none; overflow: hidden; }
  .top-status { height: 36px; transition: height .25s ease, opacity .2s ease; }

  /* progress bar inside header */
  .scroll-progress { height: 1px; background: var(--phosphor); width: 0%; transition: width .08s linear; box-shadow: 0 0 8px rgba(122,240,160,.55); }

  .leader { flex: 1; border-bottom: 1px dotted #28342f; transform: translateY(-.35em); margin: 0 .6rem; }

  .prompt-sym { color: var(--phosphor); }
  .flag { color: #f0c674; }
  .str  { color: #b48ead; }
  .num  { color: #7af0a0; }
  .com  { color: #5a6a64; }

  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .chev { transform: rotate(90deg); }
  .chev { transition: transform .15s ease; display: inline-block; }

  .marquee { display: flex; width: max-content; animation: marq 40s linear infinite; }
  @keyframes marq { from { transform: translateX(0);} to { transform: translateX(-50%);} }

  .gutter { color:#28342f; user-select:none; padding-right: 1rem; text-align: right; }

  .navlink { color:#8aa39a; white-space: nowrap; }
  .navlink:hover { color: var(--phosphor); }
  .navlink::before { content:"› "; color:#28342f; }
  .navlink:hover::before { color: var(--phosphor); }
  .navlink-active { color: var(--phosphor); }
  .navlink-active::before { color: var(--phosphor); }

  .lang-btn { color:#8aa39a; cursor: pointer; transition: color .15s; font-family: inherit; white-space: nowrap; }
  .lang-btn:hover { color: var(--fg); }
  .lang-btn.active { color: var(--phosphor); }

  /* — RU translations are 30%+ wider than EN. Lock every header / footer
       button so labels never wrap onto two lines. The kbd badge inside
       buttons is a separate inline-block; keep it from being orphaned. — */
  .btn-term, .btn-ghost, .btn-solid { white-space: nowrap; }
  .btn-term .kbd, .btn-ghost .kbd, .btn-solid .kbd { white-space: nowrap; flex-shrink: 0; }

  /* Brand wordmark + // wallet-aml.daemon comment must stay on one line
     even when the nav row gets cramped by Russian labels. */
  .header-shell a[href="./"] > div { flex-wrap: nowrap; white-space: nowrap; }

  .verdict { position: relative; border: 1px solid #28342f; padding: 1rem; background: #0f1413; transition: all .15s; display:block; }
  .verdict::after {
    content: "open ↗";
    position: absolute; right: .75rem; bottom: .65rem;
    font-size: 10px; color: #5a6a64; letter-spacing: .06em;
    opacity: 0; transition: opacity .15s;
  }
  .verdict:hover { transform: translateY(-2px); }
  .verdict:hover::after { opacity: 1; }
  .v-low      { border-color: rgba(122,240,160,.5); box-shadow: inset 0 0 0 1px rgba(122,240,160,.08); }
  .v-low:hover{ box-shadow: inset 0 0 0 1px rgba(122,240,160,.18), 0 0 24px -8px rgba(122,240,160,.4); }
  .v-mid      { border-color: rgba(240,198,116,.5); }
  .v-mid:hover{ box-shadow: 0 0 24px -8px rgba(240,198,116,.4); }
  .v-high     { border-color: rgba(255,107,107,.55); }
  .v-high:hover{ box-shadow: 0 0 24px -8px rgba(255,107,107,.4); }
  .v-crit     { border-color: rgba(255,107,107,.85); box-shadow: inset 0 0 0 1px rgba(255,107,107,.12); }
  .v-crit:hover{ box-shadow: inset 0 0 0 1px rgba(255,107,107,.25), 0 0 28px -6px rgba(255,107,107,.45); }

  .badge { display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; border: 1px solid currentColor; }
  .b-low  { color: #7af0a0; background: rgba(122,240,160,.08); }
  .b-mid  { color: #f0c674; background: rgba(240,198,116,.08); }
  .b-high { color: #ff6b6b; background: rgba(255,107,107,.08); }
  .b-crit { color: #ff6b6b; background: rgba(255,107,107,.18); }

  .vim-status {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    height: 28px; background: #121a18; border-top: 1px solid #28342f;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; font-size: 11px; color: #8aa39a;
  }
  .vim-mode { background: var(--phosphor); color: #061008; padding: 1px 8px; font-weight: 700; letter-spacing: .08em; }

  .chip { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid #28342f; padding: 1px 6px; font-size: 10px; color: #8aa39a; background: transparent; }
  button.chip { cursor: pointer; }
  button.chip:hover { color: var(--phosphor); border-color: var(--phosphor); }

  .term-select {
    appearance: none; background: transparent; color: var(--fg);
    border: none; outline: none; font-family: inherit; font-size: 13px;
    padding-right: 18px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--phosphor) 50%),
                      linear-gradient(135deg, var(--phosphor) 50%, transparent 50%);
    background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
  }
  .term-select option { background: #0f1413; color: var(--fg); }

  .input-line {
    width: 100%; background: transparent; border: none; outline: none;
    color: var(--fg); font-family: inherit; font-size: 14px; padding: .9rem 0;
  }
  .input-line::placeholder { color: #5a6a64; }

  .spark { font-family: inherit; letter-spacing: -1px; }
  .bar { letter-spacing: -1px; }
  /* Authed-state cabinet button — replaces the `log in` chip in the
     top-right after shell.js confirms /api/v1/me. Rendered as a
     bordered phosphor capsule (button, not a link) with the user's
     email on the left and a monogram disk on the right. The capsule
     itself carries the accent so the affordance reads as a button —
     this is THE entry point back to the cabinet and the ambient
     "you are signed in" indicator. On /me/* pages the button fills
     solid phosphor so the user sees at any time they are inside the
     authenticated area.

     Sizing matches the right-side `run a check` btn-term so both
     primary controls share the same vertical rhythm. The inner
     monogram disk is 24×24, slightly inset into the capsule's
     right edge for a tight chip-on-button look. */
  .shell-cab-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px;
    padding: 0 4px 0 12px;
    border: 1px solid var(--phosphor);
    background: rgba(122,240,160,.06);
    color: var(--phosphor);
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none; cursor: pointer; user-select: none;
    transition: background .15s, border-color .15s, color .15s,
                box-shadow .15s, transform .12s;
  }
  .shell-cab-btn:hover {
    background: rgba(122,240,160,.14);
    box-shadow: 0 0 0 1px rgba(122,240,160,.35),
                0 0 18px -4px rgba(122,240,160,.55);
    transform: translateY(-1px);
  }
  .shell-cab-btn:active { transform: translateY(0); }
  .shell-cab-btn:focus-visible {
    outline: 2px solid var(--phosphor);
    outline-offset: 2px;
  }
  .shell-cab-btn .shell-avatar-ident {
    color: inherit; opacity: .92;
    font-size: 11.5px; font-weight: 500;
    letter-spacing: 0.02em; line-height: 1;
    /* Keep the email from pushing the disk off the row when the
       address is long — JS truncates to 24 chars + ellipsis, but
       cap visual width too as belt-and-braces. */
    max-width: 22ch; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .shell-cab-btn .shell-cab-disk {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: var(--phosphor);
    color: #061008;
    font-size: 12px; font-weight: 800;
    letter-spacing: 0;
  }

  /* Active variant — currently inside /me/*. Capsule fills with
     phosphor; ident text flips to dark-on-phosphor; disk inverts
     to dark with phosphor glyph. Halo + brighter hover keep it
     eye-catching as the "you are here" anchor. */
  .shell-cab-btn-active {
    background: var(--phosphor);
    color: #061008;
    box-shadow: 0 0 0 2px rgba(122,240,160,.20),
                0 0 18px -2px rgba(122,240,160,.55);
  }
  .shell-cab-btn-active:hover {
    background: #9af6b8;
    box-shadow: 0 0 0 2px rgba(122,240,160,.32),
                0 0 22px -2px rgba(122,240,160,.7);
  }
  .shell-cab-btn-active .shell-avatar-ident { opacity: 1; }
  .shell-cab-btn-active .shell-cab-disk {
    background: #061008; color: var(--phosphor);
  }
