/* ==========================================================================
   PayPanel — futuristic / holographic design system
   Concept "aurora-glass" (mockup-1) + borrowed refinements from mockups 2 & 3.
   Deep-navy base, PayPal-blue accents, glassmorphism, subtle holo grid/particles.
   Fully responsive (sidebar -> bottom tab bar < 768px, works to 360px),
   respects prefers-reduced-motion.
   ========================================================================== */

/* ============================ Tokens ============================ */
:root {
  color-scheme: dark;

  /* base surfaces */
  --bg0: #070b1f;
  --bg1: #0b1230;
  --bg2: #081026;

  /* ink — solid hex tokens with measured WCAG ratios (vs. the effective
     glass-card surface ~#0d1540 / page navy #0b1230), per mockup-3's
     contrast-engineered approach. No low-alpha text over the aurora.
       --ink    #e9f0ff  →  15.3:1 card / 16.1:1 page
       --ink-2  #aab6d8  →   8.7:1 card /  9.1:1 page
       --ink-3  #8fa0c8  →   6.7:1 card /  7.0:1 page  (11–12px captions,
                             table headers, axis labels — AA with margin)
       --ink-4  decorative only (em-dash placeholders, input placeholders) */
  --ink:   #e9f0ff;
  --ink-2: #aab6d8;
  --ink-3: #8fa0c8;
  --ink-4: #66739a;
  --grad-text: linear-gradient(120deg, #7cc9ff 0%, #45c6f5 45%, #a8b4ff 100%);

  /* PayPal brand + holographic accents */
  --pp:    #0070ba;
  --pp2:   #009cde;
  --pp3:   #003087;
  --cyan:  #38d6ff;
  --violet:#7b5cff;

  /* glass + hairlines */
  --glass:   rgba(13, 22, 52, .55);
  --glass-2: rgba(11, 18, 46, .68);
  --line:    rgba(140, 190, 255, .16);
  --line-2:  rgba(150, 200, 255, .32);

  /* semantic */
  --good: #5ee2a0;
  --warn: #ffcf6e;
  --bad:  #ff8296;

  /* geometry */
  --r:   18px;
  --r-sm: 12px;
  --sidebar-w: 250px;
  --content-max: 1180px;
}

/* ============================ Reset / base ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg0), var(--bg1) 60%, var(--bg2));
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  animation: pageIn .7s ease both;
}
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

a { color: #7fd4ff; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.01em; }

svg { display: block; }
code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

:focus-visible {
  outline: 2px solid rgba(0, 156, 222, .9);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: rgba(0, 156, 222, .32); }

/* ============================ Background ============================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg::after { /* faint starfield */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(230, 240, 255, .5), transparent 100%),
    radial-gradient(1px 1px at 34% 62%, rgba(230, 240, 255, .35), transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 28%, rgba(200, 230, 255, .4), transparent 100%),
    radial-gradient(1px 1px at 76% 74%, rgba(230, 240, 255, .35), transparent 100%),
    radial-gradient(1px 1px at 90% 40%, rgba(230, 240, 255, .45), transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 86%, rgba(200, 230, 255, .3), transparent 100%);
}
.bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(74px);
  opacity: .5;
  will-change: transform;
}
.bg__blob--1 {
  width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax;
  background: radial-gradient(circle at 35% 35%, rgba(0, 112, 186, .55), transparent 62%);
  animation: drift1 34s ease-in-out infinite alternate;
}
.bg__blob--2 {
  width: 52vmax; height: 52vmax; right: -16vmax; top: 6vmax;
  background: radial-gradient(circle at 60% 40%, rgba(0, 156, 222, .42), transparent 62%);
  animation: drift2 28s ease-in-out infinite alternate;
}
.bg__blob--3 {
  width: 56vmax; height: 56vmax; left: 22vmax; bottom: -32vmax;
  background: radial-gradient(circle at 50% 50%, rgba(123, 92, 255, .32), transparent 64%);
  animation: drift3 40s ease-in-out infinite alternate;
}
.bg__blob--4 {
  width: 40vmax; height: 40vmax; right: 6vmax; bottom: -12vmax;
  background: radial-gradient(circle at 50% 50%, rgba(0, 48, 135, .55), transparent 66%);
  animation: drift1 46s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 { from { transform: translate(0, 0) scale(1); }    to { transform: translate(9vmax, 6vmax) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-8vmax, 9vmax) scale(.92); } }
@keyframes drift3 { from { transform: translate(0, 0) scale(.95); }  to { transform: translate(6vmax, -8vmax) scale(1.1); } }

/* Subtle perspective holo-grid floor + rising particles (borrowed from mockup 2,
   dialled way down so it reads as "holographic" without overwhelming the aurora). */
.bg__grid {
  position: absolute;
  left: -40vw; right: -40vw; bottom: -6vh;
  height: 56vh;
  background-image:
    linear-gradient(rgba(0, 156, 222, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 156, 222, .08) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(640px) rotateX(64deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 48%);
  mask-image: linear-gradient(to bottom, transparent 4%, #000 48%);
  opacity: .7;
  animation: gridFlow 9s linear infinite;
}
@keyframes gridFlow { to { background-position: 0 48px, 0 0; } }
.bg__dots {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 30%, rgba(0, 156, 222, .5), transparent 55%),
    radial-gradient(1.4px 1.4px at 62% 20%, rgba(123, 92, 255, .45), transparent 55%),
    radial-gradient(1.6px 1.6px at 84% 66%, rgba(0, 156, 222, .4), transparent 55%),
    radial-gradient(1.3px 1.3px at 40% 78%, rgba(56, 214, 255, .4), transparent 55%);
  background-size: 1200px 900px;
  animation: dotsRise 46s linear infinite;
}
@keyframes dotsRise { to { background-position: 0 -900px; } }

/* ============================ App shell ============================ */
.app { position: relative; z-index: 1; min-height: 100vh; }

.app--authed {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: 1fr;
}

.content {
  min-width: 0;
  padding: 34px 34px 56px;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}
.app--guest .content {
  padding: 0;
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Guest flash (logout notice, «Неверный логин или пароль», CSRF/session
   expiry, registration success) sits above the centered auth panel. Constrain
   its width, center it and keep it off the viewport edges so the glass card's
   rounded border and hairline are not clipped flush against the screen. */
.app--guest .flash-list { width: min(440px, 100%); margin: 22px auto 0; padding: 0 20px; }

/* ============================ Sidebar ============================ */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
  border-right: 1px solid var(--line);
  background: rgba(9, 15, 38, .55);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.sidebar__brand,
.brand { display: inline-flex; align-items: center; gap: 11px; }
.sidebar__brand { padding: 2px 10px 20px; }
.brand__logo { display: inline-flex; }
.brand__name { font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.brand__name b { color: #7fd4ff; font-weight: 800; }

.sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 550;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background-color .25s ease, color .25s ease,
    border-color .25s ease, box-shadow .3s ease;
}
.nav-item__icon { display: inline-flex; flex: none; }
.nav-item__icon svg { width: 19px; height: 19px; }
.nav-item__label { white-space: nowrap; }
.nav-item:hover { color: var(--ink); background: rgba(0, 140, 222, .1); text-decoration: none; }
.nav-item--active {
  color: #eaf7ff;
  background: linear-gradient(120deg, rgba(0, 112, 186, .32), rgba(0, 156, 222, .16));
  border-color: rgba(0, 156, 222, .38);
  box-shadow: 0 0 22px -10px rgba(0, 156, 222, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.nav-form { display: flex; margin-top: auto; }
.nav-item--logout { color: var(--ink-2); }
.nav-item--logout:hover { color: #ffc4ce; background: rgba(255, 90, 115, .1); }

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 8px 4px;
  border-top: 1px solid var(--line);
}
.side-user__avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--pp3), var(--pp2));
  box-shadow: 0 0 14px -4px rgba(0, 156, 222, .7);
}
.side-user__meta { display: flex; flex-direction: column; min-width: 0; }
.side-user__name { font-size: 13.5px; font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.side-user__role { font-size: 11.5px; color: var(--ink-3); }

/* Mobile top bar (hidden on desktop) */
.topbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 15, 38, .6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar .brand__name { font-size: 15.5px; }

/* ============================ Page head ============================ */
.page-head { margin-bottom: 24px; }
.page-head__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head__title { font-size: clamp(21px, 3vw, 26px); font-weight: 750; }
.page-head__subtitle { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* current-date chip in the dashboard header (borrowed from mockup 2);
   filled by JS, so it only shows once the .js class is present */
.date-chip {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #a8dcff;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 156, 222, .3);
  background: rgba(0, 112, 186, .1);
  white-space: nowrap;
}
.js .date-chip { display: inline-flex; }
.date-chip svg { width: 15px; height: 15px; flex: none; opacity: .8; }

/* ============================ Glass + lift ============================ */
.glass {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 14px 38px -22px rgba(0, 30, 110, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* premium diagonal sheen swipe on hover (borrowed from mockup 2) */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(0, 156, 222, .08) 46%,
    rgba(123, 92, 255, .09) 54%, transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
}
.lift { transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease; }
.lift:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 22px 46px -22px rgba(0, 60, 160, .65),
    0 0 26px -10px rgba(0, 156, 222, .5),
    inset 0 1px 0 rgba(255, 255, 255, .09);
}
.glass.lift:hover::before { animation: sheen 1.1s ease forwards; }
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -40% 0; } }

/* ============================ Buttons ============================ */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition: transform .25s ease, box-shadow .3s ease,
    background-color .25s ease, border-color .25s ease, filter .25s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
/* liquid-sheen swipe (borrowed from mockup 3) */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn--primary {
  background: linear-gradient(135deg, var(--pp3), var(--pp) 45%, var(--pp2));
  background-size: 170% 170%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 156, 222, .4), 0 10px 26px -10px rgba(0, 140, 220, .65);
  transition: transform .25s ease, box-shadow .3s ease, background-position .45s ease,
    border-color .25s ease, filter .25s ease;
}
/* gradient position glides on hover (borrowed from mockup 3) */
.btn--primary:hover {
  background-position: 90% 50%;
  box-shadow: 0 0 0 1px rgba(0, 180, 255, .6),
    0 12px 30px -8px rgba(0, 156, 222, .75),
    0 0 34px -6px rgba(0, 156, 222, .55);
}
.btn--ghost {
  background: rgba(0, 112, 186, .1);
  border-color: rgba(140, 190, 255, .22);
  color: #c9e6ff;
}
.btn--ghost:hover {
  background: rgba(0, 140, 222, .18);
  border-color: rgba(0, 156, 222, .5);
  box-shadow: 0 0 20px -8px rgba(0, 156, 222, .6);
}
.btn--danger {
  background: rgba(255, 90, 115, .08);
  border-color: rgba(255, 120, 145, .28);
  color: var(--bad);
}
.btn--danger:hover {
  background: rgba(255, 90, 115, .16);
  border-color: rgba(255, 130, 150, .55);
  box-shadow: 0 0 20px -8px rgba(255, 100, 130, .5);
}
.btn--sm { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
.btn--block { width: 100%; }

/* ============================ Badges / status ============================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge--live { color: var(--good); background: rgba(70, 220, 150, .1); border-color: rgba(94, 226, 160, .32); }
.badge--sandbox { color: var(--warn); background: rgba(255, 200, 90, .1); border-color: rgba(255, 207, 110, .32); }
.badge--demo {
  color: #7fd4ff;
  border: 1px dashed rgba(0, 156, 222, .55);
  background: rgba(0, 112, 186, .1);
  text-transform: none;
  letter-spacing: .04em;
  font-weight: 600;
}
.badge--demo .dot { animation: blink 2.4s ease-in-out infinite; }
.badge--admin { color: #a8dcff; background: rgba(0, 156, 222, .12); border-color: rgba(0, 156, 222, .4); }
.badge--user  { color: var(--ink-2); background: rgba(170, 182, 216, .08); border-color: rgba(170, 182, 216, .28); }

/* shared LED blink — frozen by the global prefers-reduced-motion rule */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 550; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status--active { color: #a9f0cd; }
.status--active .dot { background: var(--good); box-shadow: 0 0 10px rgba(94, 226, 160, .8); animation: blink 2.8s ease-in-out infinite; }
.status--disabled { color: var(--ink-3); }
.status--disabled .dot { background: rgba(233, 240, 255, .35); }

.muted { color: var(--ink-4); }

/* monospace credential chip */
code.mono {
  font-size: 12.5px;
  color: #a8dcff;
  background: rgba(0, 112, 186, .14);
  border: 1px solid rgba(0, 156, 222, .25);
  border-radius: 7px;
  padding: 2px 8px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ============================ Stat tiles ============================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.stat-tile {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 16px;
  border-radius: var(--r);
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 14px 38px -22px rgba(0, 30, 110, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* top gradient accent bar revealed on hover (borrowed from mockup 3) */
.stat-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pp2), var(--violet));
  opacity: 0;
  transition: opacity .3s ease;
}
.stat-tile:hover::before { opacity: 1; }
.stat-tile::after { /* soft corner glow */
  content: "";
  position: absolute;
  right: -32px; top: -32px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 156, 222, .2), transparent 70%);
  pointer-events: none;
}
.stat-tile__icon {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  color: #8fd6ff;
  background: linear-gradient(140deg, rgba(0, 112, 186, .28), rgba(0, 156, 222, .12));
  border: 1px solid rgba(0, 156, 222, .22);
  margin-bottom: 14px;
}
.stat-tile__icon svg { width: 20px; height: 20px; }
.stat-tile__label { display: block; font-size: 12.5px; color: var(--ink-2); letter-spacing: .02em; margin-bottom: 8px; overflow-wrap: break-word; }
.stat-tile__value {
  display: block;
  font-size: 34px;
  font-weight: 680;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; /* keep counter width stable during count-up */
}
/* gradient-fill real values (borrowed from mockup 3) */
.stat-tile--real .stat-tile__value {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-tile__value--stub { color: var(--ink-3); font-weight: 500; }
/* small "скоро" pill inside stub values (borrowed from mockup 2) */
.soon {
  display: inline-block;
  vertical-align: 6px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .05em;
  color: #c3b4ff;
  border: 1px solid rgba(123, 92, 255, .4);
  background: rgba(123, 92, 255, .1);
}
.stat-tile__hint,
.stat-tile__sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
  min-width: 0;
  overflow-wrap: break-word;
}
.stat-tile__sub .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px rgba(94, 226, 160, .8); flex: none; }

/* ============================ Chart placeholder ============================ */
.chart-card { padding: 4px 4px 8px; margin-bottom: 20px; }
.chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 6px;
}
.chart-card__title { font-size: 15.5px; font-weight: 680; }
.chart-card__sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.chart-placeholder { position: relative; height: 236px; margin: 6px 14px 2px; }
.chart-placeholder__grid {
  position: absolute; inset: 10px 6px 30px;
  background-image: linear-gradient(rgba(150, 200, 255, .09) 1px, transparent 1px);
  background-size: 100% 25%;
  border-bottom: 1px solid rgba(150, 200, 255, .22);
  pointer-events: none;
}
.chart-placeholder__bars {
  position: absolute; inset: 22px 10px 31px;
  display: flex; align-items: flex-end; gap: 9px;
}
.chart-placeholder__bar {
  flex: 1;
  min-width: 6px;
  height: var(--bar-h);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, rgba(0, 156, 222, .9), rgba(0, 112, 186, .38));
  box-shadow: 0 0 16px -5px rgba(0, 156, 222, .55);
  transform-origin: bottom;
  /* one-shot grow-in on load, staggered — replaces the old infinite pulse */
  animation: barGrow .9s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* per-bar hover glow (borrowed from mockup 2) */
.chart-placeholder__bar { transition: filter .25s ease; }
.chart-placeholder__bar:hover { filter: brightness(1.3) saturate(1.15); }

.chart-placeholder__wave { position: absolute; inset: 8px 10px 31px; overflow: hidden; pointer-events: none; }
.chart-placeholder__wave svg { width: 100%; height: 100%; }
.chart-placeholder__area { fill: url(#ppWaveArea); }
.chart-placeholder__line {
  fill: none;
  stroke: url(#ppWaveLine);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* draw-in on load */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: waveDraw 2s .5s ease forwards;
}
@keyframes waveDraw { to { stroke-dashoffset: 0; } }
.chart-placeholder__dot {
  fill: var(--cyan);
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
  animation: fadeDot .5s 2.2s ease forwards;
}
@keyframes fadeDot { to { opacity: 1; } }
.chart-placeholder__x {
  display: flex;
  justify-content: space-between;
  padding: 4px 24px 12px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}

/* ============================ Data tables ============================ */
.ops-card { padding: 4px 4px 8px; margin-bottom: 20px; }
.ops-card__head { padding: 18px 20px 6px; }
.ops-card__title { font-size: 15.5px; font-weight: 680; }

.table-scroll { overflow-x: auto; padding: 6px 8px 10px; }
.data-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table td { padding: 12px; color: var(--ink-2); border-bottom: 1px solid rgba(140, 190, 255, .08); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table__empty-row td {
  text-align: center;
  padding: 30px 14px;
  color: var(--ink-3);
}
.empty-inner { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; }
.empty-inner svg { width: 26px; height: 26px; opacity: .6; flex: none; }

/* ============================ Accounts ============================ */
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.account-card {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 16px;
  border-radius: var(--r);
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 14px 38px -22px rgba(0, 30, 110, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.account-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pp2), var(--violet));
  opacity: 0;
  transition: opacity .3s ease;
}
.account-card:hover::before { opacity: 1; }
/* visually mute disabled accounts (borrowed from mockup 3) */
.account-card--disabled { opacity: .62; }
.account-card--disabled:hover,
.account-card--disabled:focus-within { opacity: 1; }
.account-card__head { display: flex; align-items: center; gap: 12px; }
.account-card__ava {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 16px;
  background: linear-gradient(135deg, var(--pp3), var(--pp2));
  box-shadow: 0 6px 16px -6px rgba(0, 112, 186, .7);
}
.account-card__ava--dim { background: linear-gradient(135deg, #52607a, #76859d); box-shadow: none; }
.account-card__titles { min-width: 0; }
.account-card__title { font-size: 16px; font-weight: 680; line-height: 1.25; }
.account-card__badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.account-card__meta { display: grid; gap: 8px; }
.account-card__meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.account-card__meta-row dt { color: var(--ink-3); }
.account-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.account-card__actions .btn { flex: 1; min-width: 86px; }
.inline-form { display: inline-flex; }
.account-card__actions .inline-form { flex: 1; min-width: 86px; }
.account-card__actions .inline-form .btn { width: 100%; }

.empty-state {
  text-align: center;
  padding: 60px 24px;
  border-radius: var(--r);
  border: 1.5px dashed rgba(0, 156, 222, .32);
  background: rgba(0, 112, 186, .05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.empty-state__icon { color: #8fd6ff; opacity: .8; }
.empty-state__icon svg { width: 40px; height: 40px; }
.empty-state__text { color: var(--ink-2); font-size: 15px; }

/* ============================ Detail ============================ */
.detail-card { padding: 22px 24px; margin-top: 20px; }
.detail-card__title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.detail-list { display: grid; gap: 2px; }
.detail-list__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(140, 190, 255, .1);
}
.detail-list__row:last-child { border-bottom: 0; }
.detail-list__row dt { color: var(--ink-3); font-size: 13px; }
.detail-list__row dd { color: var(--ink); font-size: 13.5px; word-break: break-word; }

/* ============================ Forms ============================ */
.form-card { padding: 26px 26px 24px; max-width: 640px; margin-top: 20px; }
.form { display: grid; gap: 4px; }
.field { margin-bottom: 16px; }
.field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
  letter-spacing: .02em;
}
.field__input {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: rgba(7, 12, 32, .55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease;
}
select.field__input { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237fd4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
textarea.field__input { resize: vertical; min-height: 84px; }
.field__input::placeholder { color: var(--ink-4); }
.field__input:focus {
  outline: none;
  border-color: rgba(0, 156, 222, .75);
  box-shadow: 0 0 0 3px rgba(0, 156, 222, .16), 0 0 22px -6px rgba(0, 156, 222, .55);
}
.field__hint { display: block; margin-top: 7px; font-size: 12px; color: var(--ink-3); }

/* input with leading icon (borrowed from mockup 2) */
.control { position: relative; }
.control > svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  opacity: .6;
  pointer-events: none;
  color: #9cc7ff;
}
.control .field__input { padding-left: 42px; }

.form__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ============================ Auth (login / register) ============================ */
.auth-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 48px 20px;
}
.auth-panel {
  position: relative;
  width: min(420px, 100%);
  padding: 38px 34px 30px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(20, 30, 66, .68), rgba(11, 16, 38, .82));
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(2, 5, 22, .8),
    0 0 60px -20px rgba(0, 156, 222, .3),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: panelIn .8s .1s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.auth-panel::before { /* top hairline glow */
  content: "";
  position: absolute;
  left: 14%; right: 14%; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
  filter: drop-shadow(0 0 6px rgba(0, 156, 222, .8));
}
.auth-panel__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 6px; }
.auth-panel__brand .brand__name { font-size: 24px; font-weight: 800; }
.auth-panel__title { text-align: center; font-size: 20px; font-weight: 720; margin-top: 4px; }
.auth-panel__tagline { text-align: center; color: var(--ink-3); font-size: 13px; margin-bottom: 24px; margin-top: 6px; }
.auth-form { margin-top: 8px; }
.auth-form .btn--block { margin-top: 6px; }
.auth-alt {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* ============================ Admin ============================ */
.admin-section { margin-bottom: 26px; }
.admin-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.admin-section__title { font-size: 17px; font-weight: 700; }

/* prominent "show invite code once" block */
.new-code-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  margin-bottom: 24px;
  border-radius: var(--r);
  background: linear-gradient(130deg, rgba(0, 112, 186, .2), rgba(123, 92, 255, .14));
  border: 1px solid rgba(0, 156, 222, .45);
  box-shadow: 0 0 40px -14px rgba(0, 156, 222, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: bannerPop .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes bannerPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.new-code-banner__label { font-size: 12.5px; font-weight: 650; letter-spacing: .04em; color: #bfe4ff; text-transform: uppercase; }
.new-code-banner__code {
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: .12em;
  color: #eaf7ff;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(7, 12, 32, .5);
  border: 1px solid rgba(0, 156, 222, .35);
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
}

/* generic table card wrapper for admin tables (glass) */
.table-card { padding: 4px 4px 8px; }

/* ============================ Flash messages ============================ */
.flash-list { display: grid; gap: 10px; margin-bottom: 22px; }
.flash {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  border: 1px solid var(--line);
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -18px rgba(0, 20, 80, .8);
  transition: opacity .4s ease, transform .4s ease;
}
.flash::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: currentColor; }
.flash__icon { display: inline-flex; flex: none; }
.flash__icon svg { width: 18px; height: 18px; }
.flash__msg { color: var(--ink); }
.flash--success { color: var(--good); }
.flash--error   { color: var(--bad); }
.flash--info    { color: var(--cyan); }
.flash--warning { color: var(--warn); }
.flash.is-hiding { opacity: 0; transform: translateY(-6px); }

/* ============================ Error page ============================ */
.error-stage { min-height: 80vh; display: grid; place-items: center; padding: 40px 20px; }
.error-card { text-align: center; padding: 44px 40px; max-width: 440px; }
.error-card__code {
  font-size: clamp(56px, 12vw, 88px);
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, #f2f7ff, #8fd6ff 55%, #b6a4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.error-card__message { color: var(--ink-2); margin: 14px 0 26px; font-size: 15px; }

/* ============================ Reveal on load ============================ */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.js .reveal.in { opacity: 1; transform: none; }
/* stagger within a grid/row */
.js .stats-grid .reveal:nth-child(2) { transition-delay: .06s; }
.js .stats-grid .reveal:nth-child(3) { transition-delay: .12s; }
.js .stats-grid .reveal:nth-child(4) { transition-delay: .18s; }
.js .account-grid .reveal:nth-child(2) { transition-delay: .05s; }
.js .account-grid .reveal:nth-child(3) { transition-delay: .1s; }
.js .account-grid .reveal:nth-child(4) { transition-delay: .15s; }

/* Tablet band (768–1080px): the fixed 250px desktop sidebar is still present,
   so a 4-column stat grid leaves each tile ~100px wide and hard-clips the
   Russian labels. Drop to 2 columns until the sidebar collapses at 767px. */
@media (min-width: 768px) and (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   RESPONSIVE — sidebar becomes a detached bottom tab bar below 768px.
   This @media block is the single source of truth for the mobile nav layout
   (the app has no forced-mobile preview frame, so the rules live in exactly
   one place — nothing to duplicate / drift).
   ========================================================================== */
@media (max-width: 767px) {
  .app--authed {
    display: block;
  }
  .topbar { display: flex; }

  .content { padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* sidebar -> floating, rounded, blurred bottom tab bar;
     lifted above the iOS home indicator via safe-area inset */
  .sidebar {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    top: auto;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 7px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: rgba(8, 13, 34, .9);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 12px 34px -10px rgba(0, 15, 60, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
    z-index: 30;
  }
  .sidebar__brand,
  .sidebar__user { display: none; }
  .sidebar__nav { flex-direction: row; width: 100%; gap: 2px; }
  .nav-form { flex: 1; margin-top: 0; }
  .nav-item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 2px 6px;
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    border-radius: 12px;
  }
  .nav-item__icon svg { width: 21px; height: 21px; }
  .nav-item__label { font-size: 10.5px; }

  .page-head__row { gap: 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-tile { padding: 15px 15px 13px; }
  .stat-tile__value { font-size: 27px; }
  .stat-tile__icon { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 10px; }

  .chart-placeholder { height: 200px; margin: 6px 8px 2px; }
  .chart-placeholder__bars { gap: 6px; }
  .chart-placeholder__x { padding: 4px 16px 12px; }
  .chart-placeholder__x span:nth-child(even) { display: none; }

  .account-grid { grid-template-columns: 1fr; }
  .detail-list__row { grid-template-columns: 1fr; gap: 4px; }
  .form-card { padding: 22px 18px; }
  .auth-panel { padding: 30px 22px 26px; }

  /* iOS Safari auto-zooms focused inputs whose font-size is < 16px —
     keep form fields at 16px on small screens to prevent it. */
  .field__input { font-size: 16px; }
}

@media (max-width: 420px) {
  .content { padding-left: 12px; padding-right: 12px; }
  .stat-tile__value { font-size: 24px; }
  .btn { padding: 9px 14px; }
  .account-card__actions .btn,
  .account-card__actions .inline-form { min-width: 72px; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1; }
}

/* ==========================================================================
   Add-account WIZARD — «Liquid Rail» (concept A + grafts B/C)
   A slide filmstrip with a holographic top progress bar whose plasma fill +
   leading spark charge toward a locked «Вход» milestone. All enhanced layout
   is gated behind `.js .wz.is-enhanced`; without JS the three steps stack as a
   plain submittable form (progress/nav/check/proxy chrome hidden).
   ========================================================================== */
.wz { max-width: 720px; margin: 0 auto; padding: clamp(18px, 3vw, 30px); }

/* --- no-JS / pre-enhance defaults: plain stacked form --- */
.wz-progress, .wz-checkrow, .wz-proxy,
[data-wz-next], [data-wz-prev] { display: none; }
.wz-viewport { overflow: visible; }
.wz-track2 { display: block; }
.wz-slide { display: block; margin-bottom: 22px; }
.wz-ghostnum, .wz-future, .wz-summary, .wz-progress__caption { display: none; }

/* --- ENHANCED (JS wired) --- */
.js .wz.is-enhanced .wz-progress { display: block; }
.js .wz.is-enhanced .wz-checkrow { display: block; }
.js .wz.is-enhanced [data-wz-next],
.js .wz.is-enhanced [data-wz-prev] { display: inline-flex; }
.js .wz.is-enhanced .wz-future,
.js .wz.is-enhanced .wz-summary,
.js .wz.is-enhanced .wz-ghostnum { display: block; }
.js .wz.is-enhanced .wz-viewport {
  position: relative; overflow: hidden;
  transition: height .5s cubic-bezier(.22, 1, .36, 1);
}
.js .wz.is-enhanced .wz-viewport.wz-noanim { transition: none; } /* graft B3: first-frame guard */
.js .wz.is-enhanced .wz-track2 {
  display: flex;
  align-items: flex-start; /* keep each slide's natural height so per-step height tween works */
  transform: translateX(calc(var(--i, 0) * -100%));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
/* padding lets focus rings / glows breathe past the viewport's overflow:hidden */
.js .wz.is-enhanced .wz-slide { flex: 0 0 100%; min-width: 0; margin: 0; padding: 6px; }
.js .wz.is-enhanced .wz-slide__inner { max-width: 560px; margin: 0 auto; }
.js .wz.is-enhanced .wz-slide.is-current .wz-slide__inner {
  animation: wzIn .45s cubic-bezier(.22, 1, .36, 1) both;
}
.js .wz.is-enhanced.wz[data-dir="back"] .is-current .wz-slide__inner { animation-name: wzInBack; }

/* ---- Progress bar (centerpiece) ---- */
.wz-progress {
  position: relative; padding: 20px 26px; margin: 0 0 22px;
  border-radius: var(--r); background: rgba(7, 12, 32, .5);
  border: 1px solid var(--line); overflow: hidden;
}
.wz-progress::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
  filter: drop-shadow(0 0 6px rgba(0, 156, 222, .8));
}
.wz-track { position: relative; height: 46px; }
.wz-rail {
  position: absolute; left: 0; right: 0; top: 15px; height: 4px;
  border-radius: 999px; background: rgba(7, 12, 32, .7);
  box-shadow: inset 0 0 0 1px var(--line);
}
.wz-rail__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--p, 12.5%);
  border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, var(--pp3), var(--pp) 30%, var(--cyan) 70%, var(--violet));
  box-shadow: 0 0 12px -1px rgba(56, 214, 255, .7), 0 0 24px -6px rgba(123, 92, 255, .5);
  transition: width .8s cubic-bezier(.65, 0, .35, 1);
}
/* liquid highlight — TRANSFORM only, never background-position (GPU-cheap) */
.wz-rail__fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-120%); animation: wzFlow 2.8s linear infinite;
}
.wz-rail__tease {
  position: absolute; left: 62.5%; right: 12.5%; top: 15px; height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 214, 255, .14), rgba(123, 92, 255, .05));
  animation: wzTease 2.5s ease-in-out infinite;
}
.wz-rail__spark {
  position: absolute; top: 17px; left: var(--p, 12.5%); width: 14px; height: 14px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #eaf7ff 0%, var(--cyan) 42%, rgba(56, 214, 255, 0) 72%);
  box-shadow: 0 0 10px 2px rgba(56, 214, 255, .9), 0 0 22px 7px rgba(123, 92, 255, .45);
  transition: left .8s cubic-bezier(.65, 0, .35, 1);
  animation: wzSpark 1.8s ease-in-out infinite;
}
/* comet tail — graft B2 */
.wz-rail__spark::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 34px; height: 4px;
  margin-top: -2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(56, 214, 255, .55));
  transform: translateY(-50%) scaleX(0); transform-origin: right center;
  transition: transform .3s;
}
.wz.is-moving .wz-rail__spark::after { transform: translateY(-50%) scaleX(1); }
.wz-node {
  position: absolute; top: 17px; left: var(--nx); transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg1); border: 1.5px solid var(--line-2);
  transition: transform .3s, background .3s, border-color .3s, box-shadow .3s;
}
.wz-node.is-active { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(56, 214, 255, .16), 0 0 14px rgba(56, 214, 255, .6); }
.wz-node.is-done { background: linear-gradient(135deg, var(--cyan), var(--pp2)); border-color: transparent; animation: wzPop .3s cubic-bezier(.2, .7, .3, 1); }
.wz-node.is-done::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--cyan); opacity: 0; animation: wzRing .5s ease-out; }
.wz-node.is-locked { background: rgba(150, 200, 255, .14); border-color: var(--line); }
.wz-node .wz-lock { position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; stroke: var(--ink-4); stroke-width: 2; fill: none; }
.wz-labels { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); }
.wz-labels > span:first-child { justify-self: start; }
.wz-labels > span:last-child { justify-self: end; }
.wz-labels > span:nth-child(2), .wz-labels > span:nth-child(3) { justify-self: center; }
.wz-labels > .is-done { color: var(--ink-2); }
.wz-labels > .is-active { color: #eaf7ff; }
.wz-lab-lock { color: var(--ink-4); display: inline-flex; align-items: center; gap: 6px; }
.wz-progress__caption { display: none; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }

/* ---- Step layouts ---- */
.wz-slide__inner { position: relative; padding: clamp(20px, 5vh, 44px) 4px; }
.wz-ghostnum { position: absolute; top: -6px; right: 0; font-size: 120px; font-weight: 800; line-height: 1; color: rgba(140, 190, 255, .05); pointer-events: none; z-index: 0; }
.wz-eyebrow { position: relative; z-index: 1; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 8px; }
.wz-h {
  position: relative; z-index: 1; font-size: clamp(22px, 4vw, 30px); font-weight: 800;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; margin-bottom: 22px;
}
.wz-h:focus { outline: none; }
.wz-field { position: relative; z-index: 1; }
.wz-input--hero { font-size: 20px; padding: 18px 18px 18px 46px; border-radius: 14px; }
.wz-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; padding-left: 42px; }
.wz-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wz-checkrow { position: relative; z-index: 1; margin-top: 14px; }
.wz-actions { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; }
.wz-invalid { border-color: rgba(255, 130, 150, .7) !important; box-shadow: 0 0 0 3px rgba(255, 130, 150, .16) !important; animation: wzShake .4s; }
.wz-summary { background: rgba(7, 12, 32, .5); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 18px; }
.wz-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.wz-summary__row + .wz-summary__row { border-top: 1px solid rgba(140, 190, 255, .08); }
.wz-summary dt { color: var(--ink-3); font-size: 13px; }
.wz-summary dd { color: var(--ink); font-size: 13.5px; text-align: right; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wz-future { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px dashed rgba(123, 92, 255, .4); border-radius: var(--r-sm); background: rgba(123, 92, 255, .06); opacity: .85; margin-top: 18px; }
.wz-future svg { width: 20px; height: 20px; stroke: var(--ink-3); fill: none; flex: none; margin-top: 2px; }
.wz-future b { color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.wz-future p { color: var(--ink-4); font-size: 12.5px; margin-top: 2px; }

/* ---- Proxy result card ---- */
.wz-proxy { position: relative; overflow: hidden; margin-top: 14px; padding: 16px 18px; border-radius: var(--r-sm); background: rgba(7, 12, 32, .5); border: 1px solid var(--line); animation: wzCardIn .3s ease both; }
.wz-proxy__head { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.wz-proxy__orb { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wz-proxy__head .badge { margin-left: auto; }
.wz-proxy__head .badge b { font-variant-numeric: tabular-nums; }
.wz-proxy__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.wz-proxy__facts dt { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.wz-proxy__facts dd { color: var(--ink-2); font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-badge--slow { color: var(--bad); background: rgba(255, 130, 150, .1); border-color: rgba(255, 130, 150, .32); }
/* route strip — graft C4 */
.wz-route { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.wz-route b { color: var(--ink-2); }
.wz-route i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px rgba(94, 226, 160, .8); opacity: 0; animation: wzFadeIn .3s forwards; vertical-align: middle; margin-right: 4px; }
.wz-route em { color: var(--ink-4); font-style: normal; }
.wz-route span:nth-of-type(1) i { animation-delay: 0ms; }
.wz-route span:nth-of-type(2) i { animation-delay: 120ms; }
.wz-route span:nth-of-type(3) i { animation-delay: 240ms; }
/* loading */
.wz-proxy.is-loading .wz-proxy__orb { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.wz-proxy__scan { position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, rgba(56, 214, 255, .18), transparent); transform: translateX(-100%); animation: wzScan 1.2s linear infinite; pointer-events: none; }
.wz-skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(140, 190, 255, .08), rgba(140, 190, 255, .16), rgba(140, 190, 255, .08)); background-size: 200% 100%; animation: wzShimmer 1.3s linear infinite; margin-top: 10px; }
/* ok */
.wz-proxy.is-ok { border-color: rgba(94, 226, 160, .4); box-shadow: 0 0 30px -12px rgba(94, 226, 160, .5); }
.wz-proxy.is-ok .wz-proxy__orb { background: var(--good); box-shadow: 0 0 10px rgba(94, 226, 160, .8); animation: blink 2.8s ease-in-out infinite; }
.wz-proxy.is-ok .wz-proxy__head { color: var(--good); }
/* fail */
.wz-proxy.is-fail { border-color: rgba(255, 130, 150, .4); box-shadow: 0 0 30px -12px rgba(255, 130, 150, .5); animation: wzShake .4s; }
.wz-proxy.is-fail .wz-proxy__orb { background: var(--bad); box-shadow: 0 0 10px rgba(255, 130, 150, .8); }
.wz-proxy.is-fail .wz-proxy__head { color: var(--bad); }
/* submit surge — graft C5 */
.wz.is-launching .wz-rail__fill { box-shadow: 0 0 18px 0 rgba(56, 214, 255, .9), 0 0 34px -4px rgba(123, 92, 255, .7); }
.wz.is-launching .wz-rail__spark { box-shadow: 0 0 16px 5px rgba(56, 214, 255, 1), 0 0 30px 10px rgba(123, 92, 255, .6); }

/* ---- Keyframes ---- */
@keyframes wzFlow { to { transform: translateX(220%); } }
@keyframes wzSpark { 0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .85; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } }
@keyframes wzTease { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
@keyframes wzPop { from { transform: translate(-50%, -50%) scale(.6); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes wzRing { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes wzIn { from { opacity: 0; transform: translateY(10px) translateX(8px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes wzInBack { from { opacity: 0; transform: translateY(10px) translateX(-8px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes wzCardIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wzScan { to { transform: translateX(350%); } }
@keyframes wzShimmer { to { background-position: -200% 0; } }
@keyframes wzShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes wzFadeIn { to { opacity: 1; } }

/* ---- Wizard responsive ---- */
@media (max-width: 560px) {
  .wz-labels { display: none; }
  .js .wz.is-enhanced .wz-progress__caption { display: block; }
  .wz-node { width: 9px; height: 9px; }
  .wz-actions { flex-direction: column-reverse; }
  .wz-actions .btn { width: 100%; }
  .wz-actions > span { display: none; }
  .wz-input--hero { font-size: 18px; }
  .wz-ghostnum { font-size: 84px; }
  .js .wz.is-enhanced .wz-slide__inner { max-width: none; }
}
@media (max-width: 360px) {
  .wz-progress { padding: 16px 16px; }
  .wz-h { margin-bottom: 16px; }
}

/* ============================ Performance guards ============================ */
/* JS adds .bg-paused to <body> while the tab is hidden — the heavy blurred
   aurora blobs and looping background layers stop burning GPU offscreen. */
.bg-paused .bg__blob,
.bg-paused .bg__grid,
.bg-paused .bg__dots,
.bg-paused .status--active .dot,
.bg-paused .badge--demo .dot { animation-play-state: paused; }

/* No backdrop-filter support (old browsers / weak GPUs): swap translucent
   glass for near-opaque surfaces so text stays readable, and drop the
   blurred aurora blobs entirely. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bg__blob { display: none; }
  .glass, .stat-tile, .account-card { background: rgba(13, 21, 48, .96); }
  .sidebar, .topbar { background: rgba(9, 15, 38, .97); }
  .auth-panel { background: linear-gradient(165deg, rgba(20, 30, 66, .97), rgba(11, 16, 38, .98)); }
  .flash { background: rgba(11, 18, 46, .97); }
  /* wizard root extends .glass; inner panels are already opaque, no nested blur */
  .wz { background: rgba(13, 21, 48, .96); }
}

/* ============================ Reduced motion ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* explicit freezes on top of the global rule */
  .bg__blob, .bg__grid, .bg__dots { animation: none; }
  .status--active .dot, .badge--demo .dot { animation: none; opacity: 1; }
  .chart-placeholder__bar { animation: none; transform: none; }
  .chart-placeholder__line { stroke-dashoffset: 0; animation: none; }
  .chart-placeholder__dot { opacity: 1; animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  /* wizard: freeze all looping/entrance animation, snap slide + progress */
  .wz-rail__fill::after, .wz-rail__tease, .wz-proxy__scan, .wz-skel,
  .wz-slide__inner { animation: none !important; }
  .wz-rail__spark, .wz-node, .wz-proxy.is-ok .wz-proxy__orb { animation: none !important; opacity: 1; }
  .wz-route i { opacity: 1; }
  .js .wz.is-enhanced .wz-track2,
  .js .wz.is-enhanced .wz-viewport,
  .wz-rail__fill, .wz-rail__spark { transition: none !important; }
}