/* experced status — brand E «Пиксель × модерн».
   Tokens mirror lk/frontend/src/styles/tokens.css and the subscription page
   (sub-merger/src/sub-page.ts): paper page, white cards with 2px ink borders,
   square corners, mint accent, blush only for alarms, stepped motion. */

:root {
  --m: #00D6A3; --m2: #00B68A; --k: #0A0A0A; --w: #FFFFFF; --bl: #FF8FB1; --ice-c: #C8F7EA;
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --px: "Pixelify Sans", "Nunito", monospace;
  --band-h: 64px;

  --bg: #F3F3EF; --surface: #FFFFFF; --fg: #0A0A0A; --fg2: #3A3A3E; --muted: #6B6B70;
  --border: #0A0A0A; --line: #E6E6E2; --chrome: #0A0A0A; --chrome-fg: #FFFFFF; --chrome-muted: #CFCFD2;
  --tint: #C8F7EA; --tint-fg: #006B4F;
  --warn-bg: #FFF1DC; --warn-fg: #8A4700;
  --bad-bg: #FFE3EC; --bad-fg: #A3123E;
  --off-bg: #F3F3EF; --off-fg: #6B6B70;
  --day-ok: #00B68A; --day-deg: #E08A00; --day-out: #D42A5B; --day-none: #E3E3DE;
  --skeleton: #E9E9E4;
  --band-down: url("band-light-down.svg"); --band-up: url("band-light-up.svg");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m: #1FB58C; --m2: #189874;
    --bg: #0E0F0F; --surface: #161818; --fg: #E2E4E2; --fg2: #C2C5C3; --muted: #959896;
    --border: #2A2D2D; --line: #242727; --chrome: #1B1E1D; --chrome-fg: #E2E4E2; --chrome-muted: #A9ACAA;
    --tint: #10261F; --tint-fg: #5FD9B3;
    --warn-bg: #3A2A12; --warn-fg: #F2A24B;
    --bad-bg: #3A1623; --bad-fg: #FF8FB1;
    --off-bg: #222524; --off-fg: #9A9D9B;
    --day-ok: #1FB58C; --day-deg: #F2A24B; --day-out: #FF6E96; --day-none: #2A2D2D;
    --skeleton: #202323;
    --band-down: url("band-dark-down.svg"); --band-up: url("band-dark-up.svg");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --m: #1FB58C; --m2: #189874;
  --bg: #0E0F0F; --surface: #161818; --fg: #E2E4E2; --fg2: #C2C5C3; --muted: #959896;
  --border: #2A2D2D; --line: #242727; --chrome: #1B1E1D; --chrome-fg: #E2E4E2; --chrome-muted: #A9ACAA;
  --tint: #10261F; --tint-fg: #5FD9B3;
  --warn-bg: #3A2A12; --warn-fg: #F2A24B;
  --bad-bg: #3A1623; --bad-fg: #FF8FB1;
  --off-bg: #222524; --off-fg: #9A9D9B;
  --day-ok: #1FB58C; --day-deg: #F2A24B; --day-out: #FF6E96; --day-none: #2A2D2D;
  --skeleton: #202323;
  --band-down: url("band-dark-down.svg"); --band-up: url("band-dark-up.svg");
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--chrome); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font: 600 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--m); outline-offset: 2px; }
::selection { background: var(--m); color: var(--k); }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.pc { clip-path: polygon(0 6px,3px 6px,3px 3px,6px 3px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px)); }
.pi { width: 18px; height: 18px; flex: none; fill: currentColor; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--m); color: var(--k); padding: 8px 12px; font-weight: 800; }
.skip:focus { left: 8px; }

/* ── ghost sprite (classes instead of inline fills: CSP-friendly) ── */
.g { shape-rendering: crispEdges; }
.g .b { fill: var(--m); }
.g .e { fill: #0A0A0A; }
.g .s { fill: #FFFFFF; }
.g .p { fill: #FF8FB1; }
.g .i { fill: #C8F7EA; }
.g .o { fill: var(--fg); }
.g .h { fill: #FFFFFF; }
.ghost-lid { opacity: 0; animation: ghost-blink 4.2s steps(1) infinite; }

/* ── header ── */
.top { background: var(--chrome); color: var(--chrome-fg); padding-top: env(safe-area-inset-top); }
.top-in { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.logo-ghost svg { width: 28px; height: 28px; }
.wm { font: 700 20px/1 var(--px); letter-spacing: 0; }
.logo .vpn { font: 800 10px/1 var(--sans); padding: 4px 5px; background: var(--m); color: var(--k); align-self: flex-start; margin-top: 1px; }
.top-r { display: flex; align-items: center; gap: 8px; }
.top-tag { font: 800 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--chrome-muted); }
.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; flex: none; color: var(--chrome-fg); box-shadow: inset 0 0 0 2px #3A3E3D; transition: background .12s steps(2), color .12s steps(2); }
.theme-toggle:hover { background: var(--m); color: var(--k); box-shadow: none; }
.theme-toggle .ti { display: none; width: 18px; height: 18px; fill: currentColor; }
.theme-toggle[data-mode="system"] .ti-system, .theme-toggle[data-mode="light"] .ti-light, .theme-toggle[data-mode="dark"] .ti-dark { display: block; }

/* ── hero ── */
.hero { background: var(--chrome); color: var(--chrome-fg); padding: 20px 0 22px; }
.hero-in { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; }
.hero-ghost svg { width: 96px; height: auto; }
.hero[data-overall="outage"] .hero-ghost svg { filter: saturate(.5); }
.hero[data-overall="unknown"] .hero-ghost svg, .hero[data-overall="loading"] .hero-ghost svg { filter: saturate(.25); }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 800 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--m); }
.eyebrow i { display: inline-grid; grid-template-columns: repeat(3, 5px); gap: 2px; }
.eyebrow i b { width: 5px; height: 5px; background: currentColor; }
.eyebrow i b:nth-child(2n) { opacity: .3; }
.hero[data-overall="degraded"] .eyebrow { color: #F2A24B; }
.hero[data-overall="outage"] .eyebrow { color: var(--bl); }
.hero[data-overall="unknown"] .eyebrow { color: var(--chrome-muted); }
.hero h1 { font: 900 clamp(32px, 7.4vw, 60px)/1 var(--sans); letter-spacing: -.035em; margin: 12px 0 10px; overflow-wrap: anywhere; }
.hero .sub { color: var(--chrome-muted); font-size: 16px; max-width: 640px; }
.hero .sub b { color: var(--chrome-fg); font-weight: 800; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--chrome-muted); }
.live { display: inline-flex; align-items: center; gap: 8px; }
.live i { width: 8px; height: 8px; background: var(--m); animation: dot 2s steps(2) infinite; }
.live.stale i { background: var(--bl); animation: none; }
.online { display: inline-flex; align-items: center; gap: 6px; }
.online b { color: var(--chrome-fg); font-variant-numeric: tabular-nums; }

/* ── dither bands ── */
.dband { height: var(--band-h); background-repeat: repeat-x; background-size: calc(var(--band-h) / 20 * 4) 100%; image-rendering: pixelated; }
.band-down { background-image: var(--band-down); }
.band-up { background-image: var(--band-up); }

/* ── page ── */
.page { padding-top: 8px; padding-bottom: 48px; display: grid; gap: 24px; }
.kicker { font: 800 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 6px; }
h2 { font: 900 clamp(22px, 3vw, 28px)/1.1 var(--sans); letter-spacing: -.02em; }
.card { background: var(--surface); border: 2px solid var(--border); }
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--warn-bg); color: var(--warn-fg); border: 2px solid currentColor; font-weight: 700; }
.banner b { font-weight: 900; }
.banner .mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; background: currentColor; }
.banner .mark span { color: var(--surface); font-weight: 900; font-size: 14px; }

/* groups / rows */
.group-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 18px 20px 14px; border-bottom: 2px solid var(--line); }
.group-uptime { text-align: right; font-size: 13px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.group-uptime b { display: block; color: var(--fg); font: 900 22px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.rows > li + li { border-top: 2px solid var(--line); }
.row { padding: 16px 20px 14px; }
.row.skeleton { height: 92px; background: var(--skeleton); margin: 12px 20px; padding: 0; border: 0 !important; animation: shimmer 1.4s steps(3) infinite; }
.row-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.flag { font-size: 18px; line-height: 1; flex: none; width: 24px; text-align: center; }
.cc { font: 900 10px/1 var(--sans); letter-spacing: .04em; padding: 4px 3px; border: 2px solid var(--line); color: var(--muted); flex: none; }
.name { font-weight: 800; font-size: 16px; min-width: 0; overflow-wrap: anywhere; flex: 1; }
.pct { font: 800 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; font: 900 12px/1.1 var(--sans); white-space: nowrap; flex: none; }
.badge i { width: 8px; height: 8px; background: currentColor; flex: none; }
.badge.operational { background: var(--tint); color: var(--tint-fg); }
.badge.degraded { background: var(--warn-bg); color: var(--warn-fg); }
.badge.outage { background: var(--bad-bg); color: var(--bad-fg); }
.badge.outage i { animation: dead 1.6s steps(1) infinite; }
.badge.unknown { background: var(--off-bg); color: var(--off-fg); }
.row-note { margin: 6px 0 0 34px; font-size: 13px; color: var(--muted); font-weight: 700; }
.row-note.alert { color: var(--bad-fg); }
.row-note.warn { color: var(--warn-fg); }

/* uptime bars — one pixel column per day */
.bars { display: flex; gap: 2px; height: 30px; margin-top: 12px; align-items: flex-end; cursor: crosshair; touch-action: pan-y; }
.bars:focus-visible { outline-offset: 4px; }
.day { flex: 1 1 0; min-width: 0; height: 100%; background: var(--day-ok); }
.day.deg { background-color: var(--day-deg); background-image: conic-gradient(var(--surface) 25%, transparent 0 50%, var(--surface) 0 75%, transparent 0); background-size: 4px 4px; }
.day.out { background: var(--day-out); }
.day.none { background: var(--day-none); height: 34%; }
.day.sel { outline: 2px solid var(--fg); outline-offset: 1px; position: relative; z-index: 1; }
.axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 700; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; color: var(--muted); font-weight: 700; margin-top: -8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .day { display: inline-block; width: 8px; height: 14px; flex: none; }
.legend .day.none { height: 6px; align-self: flex-end; margin-bottom: 4px; }
.legend .legend-note { flex-basis: 100%; font-weight: 600; }

/* tooltip */
.tip { position: fixed; z-index: 20; max-width: 240px; padding: 10px 12px; background: var(--k); color: #FFFFFF; font-size: 13px; line-height: 1.35; font-weight: 700; pointer-events: none; box-shadow: 4px 4px 0 var(--m); }
.tip b { display: block; font-weight: 900; margin-bottom: 2px; }
.tip .t-ok { color: #7FE8C8; } .tip .t-deg { color: #F2A24B; } .tip .t-out { color: #FF8FB1; } .tip .t-none { color: #9A9AA0; }

/* incidents */
.active { display: grid; gap: 16px; }
.inc { background: var(--surface); border: 2px solid var(--border); padding: 18px 20px; position: relative; }
.inc.now { box-shadow: 6px 6px 0 var(--bl); border-color: var(--fg); }
.inc.now.degraded, .inc.now.maintenance { box-shadow: 6px 6px 0 #F2A24B; }
.inc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.inc h3 { font: 900 20px/1.2 var(--sans); letter-spacing: -.01em; flex-basis: 100%; }
.inc-meta { font-size: 13px; color: var(--muted); font-weight: 700; }
.inc-comps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.chip { font-size: 12px; font-weight: 800; padding: 3px 7px; border: 2px solid var(--line); color: var(--fg2); }
.updates { margin-top: 12px; display: grid; gap: 12px; }
.upd { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; }
.upd::before { content: ""; width: 8px; height: 8px; margin-top: 7px; background: var(--muted); }
.upd:first-child::before { background: var(--m); }
.upd p { color: var(--fg2); font-weight: 600; }
.upd .when { display: block; font-size: 12px; color: var(--muted); font-weight: 800; margin-bottom: 2px; }
.past { display: grid; gap: 14px; }
.past details { background: var(--surface); border: 2px solid var(--border); }
.past summary { list-style: none; cursor: pointer; padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.past summary::-webkit-details-marker { display: none; }
.past summary:hover { background: var(--tint); }
.past summary .t { font-weight: 800; }
.past summary .d { font-size: 13px; color: var(--muted); font-weight: 700; grid-column: 1; }
.past summary .plus { grid-row: 1 / span 2; grid-column: 2; font: 900 20px/1 var(--px); color: var(--muted); }
.past details[open] .plus { transform: rotate(45deg); }
.past details .body { padding: 0 18px 16px; }
.empty { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 2px dashed var(--line); color: var(--muted); font-weight: 700; }
.empty svg { width: 48px; height: auto; flex: none; }

/* help card */
.card-ink { background: var(--k); color: #FFFFFF; padding: 22px 20px; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 18px; align-items: start; }
:root[data-theme="dark"] .card-ink { background: #1B1E1D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-ink { background: #1B1E1D; } }
.help-ghost svg { width: 80px; height: auto; }
.help h2 { margin-bottom: 8px; }
.help p { color: #CFCFD2; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 18px; font-weight: 900; font-size: 16px; transition: transform .1s steps(2), background .12s steps(2); }
.btn:active { transform: translateY(2px); }
.btn.mint { background: var(--m); color: var(--k); }
.btn.mint:hover { background: #FFFFFF; }
.btn.line { box-shadow: inset 0 0 0 2px #FFFFFF; color: #FFFFFF; }
.btn.line:hover { background: #FFFFFF; color: var(--k); }

/* footer */
.foot { background: var(--chrome); color: var(--chrome-muted); padding: 8px 0 calc(28px + env(safe-area-inset-bottom)); }
.foot-in { display: grid; gap: 12px; }
.foot-brand { color: var(--chrome-fg); font-weight: 800; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 800; }
.foot nav a:hover { color: var(--m); }
.foot-note { font-size: 13px; }
.noscript { padding: 16px; text-align: center; }
.noscript a { text-decoration: underline; }

@media (max-width: 600px) {
  :root { --band-h: 48px; }
  .hero-in { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
  .hero-ghost svg { width: 64px; }
  .group-head { padding: 16px 16px 12px; }
  .group-uptime b { font-size: 18px; }
  .row { padding: 14px 16px 12px; }
  .row.skeleton { margin: 12px 16px; }
  .row-head { flex-wrap: wrap; row-gap: 6px; }
  .name { flex-basis: calc(100% - 34px); }
  .row-head .pct { margin-left: 34px; }
  .row-head .badge { margin-left: auto; }
  .bars { gap: 2px; height: 28px; }
  .inc { padding: 16px; }
  .card-ink { grid-template-columns: 1fr; padding: 20px 16px; }
  .help-ghost svg { width: 56px; }
  .btn { width: 100%; }
  .top-tag { display: none; }
}

@keyframes ghost-blink { 0%, 86% { opacity: 0 } 87%, 91% { opacity: 1 } 92%, 95% { opacity: 0 } 96%, 98% { opacity: 1 } 99%, 100% { opacity: 0 } }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-2px) } 75% { transform: translateX(2px) } }
@keyframes dead { 0% { opacity: 1 } 50% { opacity: 0 } 70% { opacity: 1 } 80% { opacity: 0 } }
@keyframes dot { 0% { opacity: .25 } 50% { opacity: 1 } }
@keyframes shimmer { 0% { opacity: .55 } 50% { opacity: 1 } 100% { opacity: .55 } }
.anim-bob { animation: bob 1.6s steps(4) infinite; }
.anim-shake { animation: shake .6s steps(4) infinite; animation-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ghost-lid { opacity: 0 !important; }
}