/* ===================================================================
   Studio Dark — Vaure design system
   =================================================================== */

/* ---- Tokens ---- */
:root {
  --sd-bg:          oklch(0.16 0.015 55);
  --sd-bg-soft:     oklch(0.185 0.018 55);
  --sd-panel:       oklch(0.21 0.02 55);
  --sd-panel2:      oklch(0.25 0.022 55);
  --sd-panel3:      oklch(0.29 0.022 55);
  --sd-cream:       oklch(0.95 0.012 80);
  --sd-cream-soft:  oklch(0.82 0.015 75);
  --sd-muted:       oklch(0.62 0.015 70);
  --sd-faint:       oklch(0.42 0.015 60);
  --sd-rule:        oklch(0.32 0.02 55);
  --sd-vaure:       #b24900;
  --sd-vaure-soft:  oklch(0.55 0.13 45);
  --sd-vaure-glow:  oklch(0.7 0.18 45);
  --sd-good:        oklch(0.68 0.17 145);
  --sd-good-bg:     oklch(0.32 0.07 145);
  --sd-warn:        oklch(0.78 0.16 75);
  --sd-warn-bg:     oklch(0.28 0.07 75);
  --sd-tg:          #26a5e4;

  /* System font stack: SF Pro on iOS/macOS, Segoe UI on Windows, Roboto on Android.
     No webfont download — feels native on every platform. */
  --sd-font:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", "Roboto", Arial, sans-serif;
  --sd-mono:  ui-monospace, "SF Mono", "Menlo", "Consolas", "Roboto Mono", "Cascadia Code", monospace;
  --sd-r-card: 24px;
  --sd-r-btn:  14px;
  --sd-r-sm:   10px;
  --sd-px:     32px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--sd-bg);
  color: var(--sd-cream);
  font-family: var(--sd-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { margin: 0; min-height: 100vh; background: var(--sd-bg); }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
img { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; background: transparent; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }

/* ---- Typography helpers ---- */
.sd-display {
  font-family: var(--sd-font);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.sd-mono {
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sd-cream  { color: var(--sd-cream); }
.sd-muted  { color: var(--sd-muted); }
.sd-glow   { color: var(--sd-vaure-glow); }
.sd-good   { color: var(--sd-good); }
.sd-vaure  { color: var(--sd-vaure); }

/* ---- Layout ---- */
.sd-page { display: flex; flex-direction: column; min-height: 100vh; }
.sd-main { flex: 1; }
.sd-section { padding: 56px var(--sd-px) 0; }
.sd-section--sm { padding: 24px var(--sd-px) 0; }
.sd-section--last { padding-bottom: 56px; }
.sd-gap { height: 14px; }

/* ---- Kicker ---- */
.sd-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-vaure-glow);
}
.sd-kicker__n { color: var(--sd-faint); }
.sd-kicker__line {
  flex: 0 0 28px;
  height: 1px;
  background: var(--sd-vaure-glow);
}

/* ---- Card ---- */
.sd-card {
  background: var(--sd-panel);
  border: 1px solid var(--sd-rule);
  border-radius: var(--sd-r-card);
}
.sd-card--soft {
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  border-radius: 18px;
}
.sd-card--accent {
  background: var(--sd-vaure);
  border: 1px solid var(--sd-vaure);
  border-radius: var(--sd-r-card);
  color: var(--sd-cream);
}

/* ---- Buttons ---- */
.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  border-radius: var(--sd-r-btn);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.sd-btn:disabled { opacity: 0.45; cursor: default; }
.sd-btn--primary { background: var(--sd-vaure); color: var(--sd-cream); }
.sd-btn--ghost   { border: 1px solid var(--sd-rule); color: var(--sd-cream); }
.sd-btn--tg      { background: var(--sd-tg); color: #fff; box-shadow: 0 12px 30px -10px rgba(38,165,228,.35); }
.sd-btn--apple   { background: #000; color: #fff; border: 1px solid #000; gap: 10px; }
.sd-btn--apple:hover { background: #1a1a1a; }
.sd-btn--sm      { padding: 12px 18px; font-size: 14px; font-weight: 500; }
.sd-btn--mono    {
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: 999px;
}
.sd-btn--pill    { padding: 10px 16px; border-radius: 999px; }
.sd-btn--block   { display: flex; width: 100%; }

/* ---- Pill / tag ---- */
.sd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--sd-rule);
  border-radius: 999px;
  color: var(--sd-muted);
}
.sd-pill--active { background: var(--sd-good-bg); color: var(--sd-good); border-color: transparent; }
.sd-pill--glow   { color: var(--sd-vaure-glow); border-color: var(--sd-vaure-glow); }

/* ---- Form fields ---- */
.sd-field { display: flex; flex-direction: column; gap: 8px; }
.sd-field__label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-field__input {
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  border-radius: var(--sd-r-btn);
  padding: 16px 18px;
  font-size: 16px;
  color: var(--sd-cream);
  width: 100%;
  transition: border-color 0.15s;
}
.sd-field__input:focus { outline: none; border-color: var(--sd-vaure-soft); }
.sd-field__input--textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.sd-field__input--select { appearance: none; cursor: pointer; }
.sd-field__hint { font-size: 13px; color: var(--sd-muted); line-height: 1.5; }

/* ---- Divider ---- */
.sd-rule { border: 0; border-top: 1px solid var(--sd-rule); margin: 0; }

/* ---- Status dot ---- */
.sd-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ---- Inline code pill ---- */
.sd-code {
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  color: var(--sd-vaure-glow);
}

/* ================================================================
   HEADER
   ================================================================ */
.sd-header {
  padding: 22px var(--sd-px);
  border-bottom: 1px solid var(--sd-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sd-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.sd-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sd-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.sd-header__logo-img { width: 34px; height: 34px; display: block; }
.sd-header__name {
  font-family: var(--sd-font);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.sd-header__nav {
  display: flex;
  gap: 4px;
  background: var(--sd-panel);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--sd-rule);
}
.sd-header__nav-item {
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--sd-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sd-header__nav-item:hover { color: var(--sd-cream-soft); }
.sd-header__nav-item.is-active {
  background: var(--sd-vaure);
  color: var(--sd-cream);
}
.sd-header__actions { display: flex; gap: 8px; align-items: center; }
.sd-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.sd-header__btn--ghost   { border: 1px solid var(--sd-rule); color: var(--sd-cream); }
.sd-header__btn--primary { background: var(--sd-vaure); color: var(--sd-cream); }
.sd-header__btn--appstore {
  background: var(--sd-cream);
  color: oklch(0.18 0.01 55);
  gap: 8px;
  padding: 0 14px 0 12px;
}
.sd-header__btn--appstore:hover { background: #fff; }
.sd-header__btn-glyph { width: 12px; height: 14px; display: block; }
@media (max-width: 700px) {
  .sd-header__btn--appstore span { display: none; }
  .sd-header__btn--appstore { padding: 0 12px; }
}

/* ================================================================
   FOOTER
   ================================================================ */
.sd-footer {
  border-top: 1px solid var(--sd-rule);
  padding: 22px var(--sd-px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--sd-muted);
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 14px;
}
.sd-footer__left { display: flex; align-items: center; gap: 12px; }
.sd-footer__right { display: flex; gap: 18px; align-items: center; }
.sd-footer__logo-img { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.sd-footer__sep { color: var(--sd-faint); }
.sd-footer__link { color: inherit; }
.sd-footer__link--glow { color: var(--sd-vaure-glow); }

/* ================================================================
   HOME — HERO
   ================================================================ */
.sd-hero {
  padding: 56px var(--sd-px) 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}
.sd-hero__h1 {
  font-family: var(--sd-font);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(60px, 8vw, 104px);
  line-height: 0.95;
  margin: 22px 0 18px;
}
.sd-hero__h1-accent { color: var(--sd-vaure); }
.sd-hero__lede { font-size: 18px; line-height: 1.55; color: var(--sd-cream-soft); max-width: 560px; }
.sd-hero__ctas { display: flex; gap: 10px; margin-top: 36px; align-items: center; flex-wrap: wrap; }
.sd-hero__pills { display: flex; gap: 18px; margin-top: 24px; flex-wrap: wrap; font-family: var(--sd-font); font-size: 13px; color: var(--sd-cream-soft); list-style: none; padding: 0; }
.sd-hero__pills li { display: inline-flex; align-items: center; gap: 7px; }
.sd-hero__pills li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sd-vaure-glow); flex-shrink: 0; }

/* ---- Mobile phone carousel (hidden on desktop) ---- */
.sd-hero-mobile-card  { display: none; }
.sd-hero-carousel     { display: none; }

.sd-hero-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  /* horizontal: center first/last slide. vertical: room for active scale+shadow */
  padding: 16px calc(50% - 120px);
}
.sd-hero-carousel__track::-webkit-scrollbar { display: none; }

.sd-hero-carousel__slide {
  scroll-snap-align: center;
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sd-hero-carousel__phone {
  width: 220px;
  height: 450px; /* matches screenshot aspect 1290:2640 — no cropping */
  border-radius: 40px;
  background: #080808;
  border: 1.5px solid rgba(255,255,255,0.15);
  position: relative;
  box-shadow: 0 24px 60px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sd-hero-carousel__slide.is-active .sd-hero-carousel__phone {
  box-shadow: 0 32px 72px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,0.10);
  transform: scale(1.02);
}
.sd-hero-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.sd-hero-carousel__notch {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 24px;
  border-radius: 99px;
  background: #000;
  z-index: 2;
  pointer-events: none;
}
.sd-hero-carousel__home-bar {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.25);
  z-index: 2;
  pointer-events: none;
}

.sd-hero-carousel__label {
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-muted);
  transition: color 0.25s;
}
.sd-hero-carousel__slide.is-active .sd-hero-carousel__label {
  color: var(--sd-vaure-glow);
}

.sd-hero-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.sd-hero-carousel__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sd-rule);
  transition: background 0.25s, transform 0.25s;
}
.sd-hero-carousel__dot.is-active {
  background: var(--sd-vaure-glow);
  transform: scale(1.4);
}

/* Mobile now-playing card: hidden on desktop, shown on mobile */
.sd-hero-mobile-card { display: none; }

/* Phone mockup stack — 3 phones, overlapping fan composition
   Container fixed 580px so layout is screen-width independent. */
.sd-hero__phones {
  position: relative;
  width: 580px;
  max-width: 100%;
  height: 600px;
  overflow: visible; /* allow now-playing (left:-20px) and drop float (right:-16px) to show */
}
.sd-hero__phone {
  position: absolute;
  background: #080808;
  border: 1.5px solid rgba(255,255,255,0.14);
  overflow: hidden;
  cursor: default;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.25s ease,
    box-shadow 0.4s ease;
  will-change: transform;
}
/* Left phone */
.sd-hero__phone--a {
  left: 0; top: 50px; width: 210px; height: 430px;
  border-radius: 34px;
  transform: rotate(-5deg);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.7);
  z-index: 1;
}
/* Center phone */
.sd-hero__phone--b {
  left: 168px; top: 0; width: 248px; height: 496px;
  border-radius: 40px;
  transform: rotate(0.5deg);
  background: var(--sd-panel2);
  box-shadow: 0 32px 80px -16px rgba(0,0,0,.85);
  z-index: 3;
}
/* Right phone */
.sd-hero__phone--c {
  left: 358px; top: 44px; width: 210px; height: 430px;
  border-radius: 34px;
  transform: rotate(5deg);
  background: var(--sd-panel);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.65);
  z-index: 2;
}

/* Hover: hovered phone scales up, others dim slightly */
.sd-hero__phones:hover .sd-hero__phone { opacity: 0.55; }
.sd-hero__phones .sd-hero__phone:hover { opacity: 1; z-index: 10; }
.sd-hero__phone--a:hover { transform: rotate(-5deg) scale(1.10) translateY(-10px); box-shadow: 0 32px 70px -14px rgba(0,0,0,.8); }
.sd-hero__phone--b:hover { transform: rotate(0.5deg) scale(1.08) translateY(-12px); box-shadow: 0 40px 90px -12px rgba(0,0,0,.9); }
.sd-hero__phone--c:hover { transform: rotate(5deg) scale(1.10) translateY(-10px); box-shadow: 0 32px 70px -14px rgba(0,0,0,.75); }

.sd-hero__phone-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.sd-hero__phone-cap {
  position: absolute;
  font-family: var(--sd-mono);
  font-size: 8px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--sd-bg);
  border: 1px solid var(--sd-rule);
}
.sd-hero__phone-cap--a { left: 12px; bottom: 14px; color: var(--sd-muted); }
.sd-hero__phone-cap--b { left: 50%; transform: translateX(-50%); bottom: 16px; color: var(--sd-vaure-glow); }
.sd-hero__phone-cap--c { right: 12px; bottom: 14px; color: var(--sd-muted); }
.sd-hero__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sd-hero__now-playing {
  background: var(--sd-panel2);
  border: 1px solid var(--sd-rule);
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
}
@keyframes sd-now-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  65%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.sd-hero__now-playing {
  cursor: pointer;
  user-select: none;
}
.sd-hero__now-cover {
  width: 38px; height: 38px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  background: var(--sd-vaure);
  transition: box-shadow 0.25s ease;
}
.sd-hero__now-playing.is-playing .sd-hero__now-cover {
  box-shadow: 0 0 0 2px var(--sd-vaure), 0 0 0 4px oklch(0.16 0.015 55);
}
.sd-hero__now-btn {
  font-family: var(--sd-mono);
  color: var(--sd-vaure-glow);
  margin-left: auto;
  transition: color 0.2s;
  display: inline-block;
}
.sd-hero__now-playing.is-playing .sd-hero__now-btn {
  animation: sd-now-pulse 0.38s ease-out;
}
.sd-hero__now-title { font-weight: 600; letter-spacing: -0.02em; font-size: 14px; }
.sd-hero__now-meta { font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); margin-top: 2px; }
.sd-hero__drop-float {
  position: absolute;
  right: -16px; top: -12px;
  background: var(--sd-panel2);
  border: 1px solid var(--sd-rule);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-cream);
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.6);
  z-index: 3;
}

/* ================================================================
   HOME — BENEFITS
   ================================================================ */
.sd-benefits__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--sd-rule);
  padding-top: 28px;
}
.sd-benefits__sub { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); max-width: 300px; text-align: right; }
.sd-benefits__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.sd-benefit {
  background: var(--sd-panel);
  border: 1px solid var(--sd-rule);
  border-radius: var(--sd-r-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sd-benefit__meta { display: flex; justify-content: space-between; align-items: center; }
.sd-benefit__n { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-benefit__tag { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--sd-rule); border-radius: 999px; color: var(--sd-cream-soft); }
.sd-benefit__title {
  font-weight: 600; letter-spacing: -0.02em; font-size: 30px; line-height: 1.1;
  margin-top: auto;  /* pushes title to same baseline when cards are equal height */
  padding-top: 24px;
  padding-bottom: 16px;
}
.sd-benefit__desc { font-size: 15px; line-height: 1.55; color: var(--sd-cream-soft); max-width: 520px; }

/* ================================================================
   HOME — VIBE SECTION
   ================================================================ */
.sd-vibe {
  background: var(--sd-panel);
  border: 1px solid var(--sd-rule);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sd-vibe__left { padding: 44px; }
.sd-vibe__h3 { font-weight: 600; letter-spacing: -0.03em; font-size: 72px; line-height: 0.95; margin: 18px 0 14px; }
.sd-vibe__lede { font-size: 16px; line-height: 1.55; color: var(--sd-cream-soft); max-width: 480px; }
.sd-vibe__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.sd-vibe__card { background: var(--sd-bg-soft); border: 1px solid var(--sd-rule); border-radius: 14px; padding: 16px 18px; }
.sd-vibe__card-title { font-weight: 600; letter-spacing: -0.02em; font-size: 18px; }
.sd-vibe__card-desc { font-size: 13px; color: var(--sd-muted); margin-top: 6px; line-height: 1.55; }
.sd-vibe__pills { font-family: var(--sd-font); font-size: 13px; color: var(--sd-cream-soft); margin-top: 24px; display: flex; gap: 18px; flex-wrap: wrap; list-style: none; padding: 0; }
.sd-vibe__pills li { display: inline-flex; align-items: center; gap: 7px; }
.sd-vibe__pills li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sd-vaure-glow); flex-shrink: 0; }

.sd-vibe__right {
  background: var(--sd-bg);
  border-left: 1px solid var(--sd-rule);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
}
.sd-vibe__viz-header { display: flex; justify-content: space-between; align-items: center; }
.sd-vibe__viz-title { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-vibe__viz-scan { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-vibe__bars { margin-top: 18px; display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.sd-vibe__bar { flex: 1; border-radius: 2px; }
.sd-vibe__bar-labels { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); }
.sd-vibe__sug-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); margin-bottom: 10px; }
@keyframes sd-track-select {
  0%   { background: oklch(0.42 0.16 45); }
  55%  { background: oklch(0.28 0.09 45); }
  100% { background: oklch(0.24 0.07 45); }
}
.sd-vibe__track { display: grid; grid-template-columns: 28px 1fr 110px 24px; gap: 12px; align-items: center; padding: 10px 0; cursor: pointer; border-radius: 8px; transition: background 0.2s ease; }
.sd-vibe__track.is-playing { background: oklch(0.24 0.07 45); animation: sd-track-select 0.45s ease-out forwards; }
.sd-vibe__track:hover .sd-vibe__track-title { color: var(--sd-cream); }
.sd-vibe__track:hover .sd-vibe__track-play--idle { color: var(--sd-cream-soft); }
.sd-vibe__track + .sd-vibe__track { border-top: 1px solid var(--sd-rule); }
.sd-vibe__track-cover { width: 28px; height: 28px; border-radius: 6px; background: var(--sd-panel2) center / cover no-repeat; flex-shrink: 0; transition: box-shadow 0.2s; }
.sd-vibe__track-cover--active { box-shadow: 0 0 0 2px var(--sd-vaure), 0 0 0 4px var(--sd-bg); }
.sd-vibe__track-title { font-weight: 600; letter-spacing: -0.02em; font-size: 14px; }
.sd-vibe__track-meta { font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); margin-top: 2px; }
.sd-vibe__track-fmt { font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); text-align: right; }
.sd-vibe__track-play { font-family: var(--sd-mono); font-size: 12px; }
.sd-vibe__track-play--active { color: var(--sd-vaure-glow); }
.sd-vibe__track-play--idle { color: var(--sd-muted); }

/* ================================================================
   HOME — DROP TEASER
   ================================================================ */
.sd-drop-teaser {
  background: var(--sd-panel);
  border: 1px solid var(--sd-rule);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sd-drop-teaser__left { padding: 40px; }
.sd-drop-teaser__h3 { font-weight: 600; letter-spacing: -0.03em; font-size: 56px; line-height: 1; margin: 16px 0 12px; }
.sd-drop-teaser__lede { font-size: 16px; line-height: 1.55; color: var(--sd-cream-soft); max-width: 520px; }
.sd-drop-teaser__hint { font-size: 14px; line-height: 1.55; color: var(--sd-muted); max-width: 520px; margin-top: 14px; }
.sd-drop-teaser__actions { display: flex; gap: 10px; margin-top: 24px; align-items: center; }
.sd-drop-teaser__incl { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-drop-teaser__right {
  position: relative;
  background: var(--sd-bg);
  border-left: 1px solid var(--sd-rule);
  min-height: 380px;
}
.sd-drop-teaser__placeholder {
  position: absolute;
  inset: 24px;
  border-radius: 18px;
  border: 1px dashed var(--sd-rule);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 10px), rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
}
.sd-drop-teaser__placeholder--wip { font-size: 13px; letter-spacing: 0.06em; border-style: solid; color: var(--sd-faint); padding: 14px; overflow: hidden; }
/* When the placeholder holds the demo gif, ditch absolute positioning so it shrinks to the image */
.sd-drop-teaser__placeholder:has(.sd-drop-teaser__demo) {
  position: relative;
  inset: auto;
  margin: 24px auto;
  padding: 10px;
  width: max-content;
  max-width: calc(100% - 48px);
  background: var(--sd-bg-soft);
  border-style: solid;
}
.sd-drop-teaser__demo {
  display: block;
  width: clamp(180px, 40vw, 260px);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45);
}
.sd-drop-teaser__foot { position: absolute; left: 24px; bottom: 24px; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }

/* ================================================================
   HOME — NEARBY FEATURE CARDS
   ================================================================ */
.sd-nearby-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.sd-nearby-card {
  background: var(--sd-panel);
  border: 1px solid var(--sd-rule);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.sd-wip {
  position: relative;
  pointer-events: none;
  user-select: none;
}
.sd-wip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(0.16 0.015 55 / 0.75);
  border-radius: inherit;
  z-index: 9;
}
.sd-wip::after {
  content: "в разработке";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
  background: var(--sd-bg);
  border: 1px solid var(--sd-rule);
  border-radius: 99px;
  padding: 4px 14px;
  white-space: nowrap;
  z-index: 10;
}
.sd-nearby-card__badge {
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-vaure-glow);
  border: 1px solid oklch(0.38 0.10 45);
  background: oklch(0.22 0.05 45);
  border-radius: 99px;
  padding: 3px 10px;
  align-self: flex-start;
}
.sd-nearby-card__name {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  margin-top: 6px;
}
.sd-nearby-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sd-cream-soft);
  flex: 1;
}
.sd-nearby-card__tag {
  display: block;
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-muted);
  margin-top: 8px;
}
.sd-nearby-card__offline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sd-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sd-good);
  background: var(--sd-good-bg);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  margin-top: 8px;
  align-self: flex-start;
}
.sd-nearby-card__offline::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ================================================================
   HOME — PRICING
   ================================================================ */
.sd-pricing__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.sd-pricing__h2 { font-weight: 600; letter-spacing: -0.03em; font-size: 44px; margin-top: 14px; }
.sd-pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-pricing__plan { background: var(--sd-panel); border: 1px solid var(--sd-rule); border-radius: var(--sd-r-card); padding: 32px; }
.sd-pricing__plan--plus { background: var(--sd-vaure); border-color: var(--sd-vaure); }
.sd-pricing__tier { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-pricing__plan--plus .sd-pricing__tier { color: oklch(0.95 0.05 60); }
.sd-pricing__plan-name { font-weight: 600; letter-spacing: -0.03em; font-size: 54px; margin-top: 8px; }
.sd-pricing__plan-sub { font-size: 14px; color: var(--sd-muted); margin-top: 4px; }
.sd-pricing__plan--plus .sd-pricing__plan-sub { opacity: 0.85; color: var(--sd-cream); }
.sd-pricing__list { margin-top: 24px; display: grid; gap: 10px; font-size: 14px; }
.sd-pricing__item { display: flex; gap: 10px; align-items: flex-start; }
.sd-pricing__item-plus { color: var(--sd-vaure-glow); }
.sd-pricing__plan--plus .sd-pricing__item-plus { color: var(--sd-cream); }
.sd-pricing__item-text { color: var(--sd-cream-soft); }
.sd-pricing__plan--plus .sd-pricing__item-text { color: var(--sd-cream); }

/* ================================================================
   ACCOUNT PAGE
   ================================================================ */
.sd-account-page { padding: 40px var(--sd-px) 0; }
.sd-account-page__breadcrumb { display: flex; gap: 10px; align-items: center; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-account-page__breadcrumb-sep { color: var(--sd-faint); }
.sd-account-page__breadcrumb-current { color: var(--sd-cream); }

/* Auth view (login) */
.sd-auth { padding: 24px var(--sd-px) 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.sd-auth__card { padding: 44px 48px 40px; }
.sd-auth__kicker { margin-bottom: 18px; }
.sd-auth__h1 { font-weight: 600; letter-spacing: -0.03em; font-size: 64px; line-height: 1; }
.sd-auth__lede { font-size: 16px; color: var(--sd-cream-soft); margin-top: 14px; max-width: 520px; line-height: 1.55; }
.sd-auth__apple-btn { margin-top: 32px; font-size: 17px; font-weight: 600; }
.sd-auth__apple-glyph { width: 18px; height: 21px; display: block; margin-top: -2px; }
.sd-auth__tg-btn { margin-top: 10px; font-size: 17px; }
.sd-auth__tg-glyph {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sd-tg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.sd-auth__tg-hint { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.sd-auth__apple-hint { font-family: var(--sd-font); font-size: 12px; font-weight: 400; opacity: 0.7; }
.sd-auth__tg-only-existing {
  display: block;
  margin: 12px auto 0;
  padding: 8px 14px;
  text-align: center;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-warn);
  background: var(--sd-warn-bg);
  border: 1px solid var(--sd-warn);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  line-height: 1.3;
}
.sd-auth__tg-note { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); text-align: center; margin-top: 14px; line-height: 1.6; }
/* Auth: signup button directly under TG button */
.sd-auth__signup-btn { margin-top: 10px; font-size: 15px; }

.sd-auth__tg-spoiler { margin-top: 18px; border-top: 1px solid var(--sd-rule); padding-top: 14px; }
.sd-auth__tg-summary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted); cursor: pointer; user-select: none;
  padding: 4px 0;
  list-style: none;
}
.sd-auth__tg-summary::-webkit-details-marker { display: none; }
.sd-auth__tg-summary::before {
  content: "▾"; color: var(--sd-vaure-glow); transition: transform 0.15s;
  display: inline-block; font-size: 10px;
}
.sd-auth__tg-spoiler[open] .sd-auth__tg-summary::before { transform: rotate(180deg); }
.sd-auth__tg-summary:hover { color: var(--sd-cream); }
.sd-auth__tg-spoiler-body { margin-top: 12px; }
.sd-auth__tg-btn--compact { font-size: 14px; padding: 12px 18px; margin-top: 0; }
.sd-auth__tg-btn--compact .sd-auth__tg-glyph { width: 22px; height: 22px; font-size: 12px; }
.sd-auth__upsell-btn { background: none; border: 0; cursor: pointer; padding: 0; font: inherit; color: var(--sd-vaure-glow); }

/* =================================================================
   Drop confirm view — protocol picker + cert fingerprint
   ================================================================= */
.sd-drop-confirm { padding: 44px 48px 40px; max-width: 720px; }
.sd-drop-confirm__h1 { font-weight: 600; letter-spacing: -0.03em; font-size: 44px; line-height: 1.05; margin-top: 18px; }
.sd-drop-confirm__desc { font-size: 15px; line-height: 1.6; color: var(--sd-cream-soft); margin-top: 14px; max-width: 580px; }
.sd-drop-confirm__ip-inline { font-family: var(--sd-mono); font-size: 13px; color: var(--sd-cream); background: var(--sd-bg-soft); border: 1px solid var(--sd-rule); border-radius: 8px; padding: 3px 8px; margin-left: 4px; }

.sd-drop-confirm__modes { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
.sd-drop-mode {
  text-align: left;
  background: var(--sd-bg-soft);
  border: 1.5px solid var(--sd-rule);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
  position: relative;
}
.sd-drop-mode:hover:not(:disabled) { border-color: var(--sd-vaure-soft); }
.sd-drop-mode.is-active { border-color: var(--sd-vaure); background: oklch(0.22 0.05 45); }
.sd-drop-mode--secondary { opacity: 0.55; }
.sd-drop-mode--secondary:hover, .sd-drop-mode--secondary.is-active { opacity: 1; }
.sd-drop-mode__head { display: flex; align-items: center; gap: 10px; }
.sd-drop-mode__badge { font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--sd-rule); }
.sd-drop-mode__badge--fast   { color: var(--sd-vaure-glow); border-color: var(--sd-vaure-soft); background: oklch(0.26 0.06 50); }
.sd-drop-mode__badge--secure { color: var(--sd-good); border-color: var(--sd-good); background: var(--sd-good-bg); }
.sd-drop-mode__title { font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: var(--sd-cream); }
.sd-drop-mode__sub   { font-size: 13px; color: var(--sd-cream-soft); line-height: 1.45; }
.sd-drop-mode__note  { font-size: 12px; line-height: 1.45; color: var(--sd-muted); padding-top: 4px; border-top: 1px dashed var(--sd-rule); margin-top: 4px; }

.sd-drop-mode__countdown {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--sd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-vaure-glow);
}
.sd-drop-mode__countdown.is-paused { color: var(--sd-faint); }
.sd-drop-mode__countdown-num { font-size: 18px; font-weight: 600; color: var(--sd-vaure-glow); }
.sd-drop-mode__countdown.is-paused .sd-drop-mode__countdown-num { color: var(--sd-faint); }

.sd-drop-confirm__vpn {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sd-drop-confirm__vpn-icon { font-family: var(--sd-mono); color: var(--sd-vaure-glow); font-size: 12px; padding-top: 2px; }
.sd-drop-confirm__vpn-text { font-size: 13px; line-height: 1.5; color: var(--sd-cream-soft); }

.sd-drop-confirm__actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.sd-drop-confirm__actions .sd-btn--primary { margin-left: auto; }

/* Cert warning modal */
.sd-modal__box--narrow { max-width: 560px; }
.sd-cert-modal__browsers { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.sd-cert-modal__browsers li { font-size: 14px; line-height: 1.55; color: var(--sd-cream-soft); padding-left: 14px; position: relative; }
.sd-cert-modal__browsers li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--sd-vaure-glow); }
.sd-cert-modal__browsers strong { color: var(--sd-cream); font-weight: 600; }
.sd-modal__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sd-rule); }

@media (max-width: 700px) {
  .sd-drop-confirm { padding: 28px 22px 26px; }
  .sd-drop-confirm__h1 { font-size: 32px; }
  .sd-drop-confirm__actions { flex-direction: column-reverse; align-items: stretch; }
  .sd-drop-confirm__actions .sd-btn--primary { margin-left: 0; }
  .sd-drop-mode__head { flex-wrap: wrap; }
  .sd-drop-mode__countdown { margin-left: 0; }
}

/* Modal (signup instructions) */
.sd-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sd-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sd-modal__box {
  position: relative;
  background: var(--sd-panel);
  border: 1px solid var(--sd-rule);
  border-radius: 24px;
  padding: 40px 44px;
  max-width: 880px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8);
}
.sd-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  color: var(--sd-cream);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.sd-modal__close:hover { background: var(--sd-panel2); }
.sd-modal__title { font-weight: 600; letter-spacing: -0.03em; font-size: 36px; line-height: 1.05; margin: 0; }
.sd-modal__desc { font-size: 15px; line-height: 1.55; color: var(--sd-cream-soft); margin: 14px 0 0; max-width: 620px; }
.sd-modal__cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sd-rule); font-size: 16px; justify-content: center; }

/* Signup carousel — single slide at a time with arrows + dots */
.sd-signup-carousel {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
}
.sd-signup-carousel__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  color: var(--sd-cream);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.sd-signup-carousel__arrow:hover { background: var(--sd-panel2); border-color: var(--sd-vaure-soft); }
.sd-signup-carousel__viewport {
  position: relative;
  min-height: 460px;
}
.sd-signup-slide {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 28px;
}
.sd-signup-slide.is-active {
  display: flex;
  animation: sd-signup-fade 0.32s ease;
}
@keyframes sd-signup-fade {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sd-signup-slide__phone {
  width: 220px;
  flex-shrink: 0;
  aspect-ratio: 220 / 450;
  border-radius: 28px;
  background: #080808;
  border: 1.5px solid rgba(255,255,255,0.12);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sd-signup-slide__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.sd-signup-slide__num { font-family: var(--sd-mono); font-size: 64px; color: var(--sd-faint); letter-spacing: -0.02em; }
.sd-signup-slide__caption { flex: 1; min-width: 0; }
.sd-signup-slide__step { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); margin-bottom: 10px; }
.sd-signup-slide__title { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }
.sd-signup-slide__desc { font-size: 14px; line-height: 1.55; color: var(--sd-cream-soft); margin: 12px 0 0; max-width: 380px; }

.sd-signup-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.sd-signup-carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sd-rule);
  border: 0; padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.sd-signup-carousel__dot.is-active { background: var(--sd-vaure-glow); transform: scale(1.3); }

/* Lock body scroll while modal is open */
body.sd-modal-open { overflow: hidden; }

.sd-auth__steps { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--sd-rule); }
.sd-auth__steps-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); margin-bottom: 14px; }
.sd-auth__steps-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sd-auth__step { background: var(--sd-bg-soft); border: 1px solid var(--sd-rule); border-radius: 14px; padding: 16px 18px; }
.sd-auth__step-n { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-auth__step-title { font-weight: 600; letter-spacing: -0.02em; font-size: 15px; margin-top: 6px; }
.sd-auth__step-desc { font-size: 12px; color: var(--sd-muted); margin-top: 4px; line-height: 1.5; }
.sd-auth__sidebar { display: grid; gap: 14px; }
.sd-auth__why { padding: 20px 22px; }
.sd-auth__why-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-auth__why-list { margin-top: 10px; display: grid; gap: 10px; font-size: 13px; color: var(--sd-cream-soft); line-height: 1.55; }
.sd-auth__why-item { display: flex; gap: 10px; }
.sd-auth__why-plus { color: var(--sd-vaure-glow); }
.sd-auth__what { padding: 20px 22px; }
.sd-auth__what-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-auth__what-list { margin-top: 10px; display: grid; gap: 8px; font-size: 13px; color: var(--sd-cream-soft); }
.sd-auth__what-item { display: flex; gap: 8px; }
.sd-auth__upsell { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; }
.sd-auth__upsell-text { font-size: 14px; color: var(--sd-muted); }
.sd-auth__upsell-link { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }

/* Waiting view */
.sd-waiting { padding: 24px var(--sd-px) 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.sd-waiting__card { padding: 44px 48px 40px; }
.sd-waiting__h1 { font-weight: 600; letter-spacing: -0.03em; font-size: 56px; line-height: 1; margin-top: 18px; }
.sd-waiting__lede { font-size: 16px; color: var(--sd-cream-soft); margin-top: 14px; max-width: 520px; line-height: 1.55; }
.sd-waiting__status {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  border-radius: 999px;
}
.sd-waiting__dot { width: 10px; height: 10px; position: relative; }
.sd-waiting__dot-inner { position: absolute; inset: 0; border-radius: 50%; background: var(--sd-vaure-glow); animation: sd-pulse 1.5s ease-in-out infinite; }
.sd-waiting__dot-ring { position: absolute; inset: -4px; border-radius: 50%; background: var(--sd-vaure-glow); opacity: 0.2; }
@keyframes sd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.sd-waiting__status-text { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-waiting__actions { margin-top: 28px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sd-waiting__hint { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); margin-top: 24px; }

/* TG chat mockup */
.sd-tg-chat { overflow: hidden; }
.sd-tg-chat__header { padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--sd-rule); background: var(--sd-bg-soft); }
.sd-tg-chat__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sd-tg); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; flex-shrink: 0; }
.sd-tg-chat__name { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.sd-tg-chat__handle { font-family: var(--sd-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); }
.sd-tg-chat__status { font-family: var(--sd-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); margin-left: auto; }
.sd-tg-chat__messages { padding: 22px 20px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--sd-bg); min-height: 280px; }
.sd-tg-chat__time { font-family: var(--sd-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); text-align: center; }
.sd-tg-chat__bubble { align-self: flex-start; max-width: 86%; background: var(--sd-panel); border: 1px solid var(--sd-rule); border-radius: 16px 16px 16px 4px; padding: 14px 16px; }
.sd-tg-chat__bubble-text { font-size: 14px; line-height: 1.5; }
.sd-tg-chat__bubble-sub { font-size: 13px; color: var(--sd-muted); margin-top: 6px; line-height: 1.5; }
.sd-tg-chat__btns { margin-top: 14px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 6px; }
.sd-tg-chat__btn-confirm { background: var(--sd-tg); color: #fff; padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sd-tg-chat__btn-cancel { background: var(--sd-bg-soft); color: var(--sd-cream-soft); padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; border: 1px solid var(--sd-rule); }
.sd-tg-chat__bubble-hint { font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: none; color: var(--sd-muted); margin-top: 10px; }
.sd-tg-chat__prompt { font-family: var(--sd-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); text-align: center; margin-top: 8px; }

/* Account dashboard */
.sd-account { padding: 24px var(--sd-px) 0; }
.sd-account__header { display: flex; justify-content: space-between; align-items: flex-end; }
.sd-account__h1 { font-weight: 600; letter-spacing: -0.03em; font-size: 56px; line-height: 1; margin-top: 14px; }
.sd-account__sub { font-size: 15px; color: var(--sd-muted); margin-top: 8px; }

.sd-sub-card { padding: 32px; }
.sd-sub-card__top { display: flex; justify-content: space-between; align-items: center; }
.sd-sub-card__label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-sub-card__body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; margin-top: 18px; align-items: end; }
.sd-sub-card__name { font-weight: 600; letter-spacing: -0.03em; font-size: 72px; line-height: 1; }
.sd-sub-card__detail { font-size: 15px; color: var(--sd-cream-soft); margin-top: 12px; max-width: 520px; }
.sd-sub-card__actions { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.sd-sub-card__cycle { background: var(--sd-bg-soft); border: 1px solid var(--sd-rule); border-radius: 18px; padding: 22px 24px; }
.sd-sub-card__cycle-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-sub-card__cycle-val { font-weight: 600; letter-spacing: -0.02em; font-size: 28px; margin-top: 6px; }
.sd-sub-card__bar-track { height: 6px; background: var(--sd-panel2); border-radius: 99px; margin-top: 14px; overflow: hidden; }
.sd-sub-card__bar-fill { height: 100%; background: var(--sd-vaure); border-radius: 99px; }
.sd-sub-card__bar-labels { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }

/* Devices table */
.sd-table { overflow: hidden; }
.sd-table__header { padding: 18px 24px; border-bottom: 1px solid var(--sd-rule); display: flex; justify-content: space-between; align-items: center; }
.sd-table__label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-table__title { font-weight: 600; letter-spacing: -0.02em; font-size: 20px; margin-top: 4px; }
.sd-table__count { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-table__row { padding: 18px 24px; display: grid; grid-template-columns: 22px 1.2fr 1fr 1fr 1fr 110px; gap: 14px; align-items: center; border-top: 1px solid var(--sd-rule); }
.sd-table__row--add { background: var(--sd-bg-soft); }
.sd-table__dot { width: 10px; height: 10px; border-radius: 50%; }
.sd-table__dot--online { background: var(--sd-good); }
.sd-table__dot--offline { background: var(--sd-muted); }
.sd-table__device-name { font-weight: 600; letter-spacing: -0.02em; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.sd-table__device-meta { font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); margin-top: 2px; }
.sd-table__cell-mono { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-cream-soft); }
.sd-table__cell-muted { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }
.sd-table__action { text-align: right; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.sd-table__action--add { color: var(--sd-vaure-glow); }
.sd-table__action--revoke { color: var(--sd-cream-soft); cursor: pointer; }
.sd-table__action--revoke:hover { color: var(--sd-cream); }

/* History panels */
.sd-history-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.sd-history__row { padding: 14px 24px; border-top: 1px solid var(--sd-rule); font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: grid; gap: 14px; align-items: center; color: var(--sd-cream-soft); }
.sd-history__row--drop { grid-template-columns: 1.2fr 1.8fr 0.8fr 0.8fr 80px; }
.sd-history__row--billing { grid-template-columns: 1.3fr 0.6fr 1fr 0.7fr; }
.sd-history__row-title { text-transform: none; letter-spacing: 0; font-family: var(--sd-font); font-size: 14px; color: var(--sd-cream); }

/* Promo code */
.sd-promo { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--sd-rule); }
.sd-promo__label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); margin-bottom: 10px; }
.sd-promo__row { display: flex; gap: 8px; }
.sd-promo__input { flex: 1; font-family: var(--sd-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* Promo suggestions carousel */
.sd-promo-suggestions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.sd-promo-suggestions::-webkit-scrollbar { display: none; }
.sd-promo-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 9px 14px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 120px;
}
.sd-promo-chip:hover { border-color: var(--sd-vaure-soft); background: oklch(0.22 0.05 45); }
.sd-promo-chip__code { font-family: var(--sd-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-promo-chip__meta { font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sd-muted); }

/* LK history grid (drop + billing side-by-side) */
.sd-lk-history-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 14px; }
#sd-drop-history-card .sd-table__row { grid-template-columns: 22px 1.1fr 1.8fr 0.7fr 0.7fr 90px; }
#sd-drop-history-card .sd-table__row--head { background: var(--sd-bg-soft); }
#sd-billing-history-card .sd-table__row { grid-template-columns: 22px 1.4fr 0.7fr 90px; }
#sd-billing-history-card .sd-table__row--head { background: var(--sd-bg-soft); }
.sd-table__row--head { font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }
.sd-table__mono { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--sd-cream-soft); }
.sd-table__mono--good  { color: var(--sd-good); }
.sd-table__mono--muted { color: var(--sd-muted); }
.sd-table__mono--glow  { color: var(--sd-vaure-glow); }
.sd-table__text { font-size: 14px; color: var(--sd-cream); letter-spacing: 0; text-transform: none; font-family: var(--sd-font); }
.sd-table__footer { padding: 14px 24px; border-top: 1px solid var(--sd-rule); text-align: center; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }
.sd-history__row-amount { color: var(--sd-cream); }
.sd-history__status--ok { color: var(--sd-good); }
.sd-history__status--cancel { color: var(--sd-muted); }
.sd-history__status--first { color: var(--sd-vaure-glow); }
.sd-history__more { padding: 14px 24px; border-top: 1px solid var(--sd-rule); text-align: center; }
.sd-history__more-link { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }

/* Checkout form within account */
.sd-checkout { padding: 24px var(--sd-px) 32px; display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start; }
.sd-checkout__card { padding: 36px 40px 40px; }
.sd-checkout__h2 { font-weight: 600; letter-spacing: -0.03em; font-size: 32px; margin-top: 14px; }
.sd-checkout__sub { font-size: 14px; color: var(--sd-muted); margin-top: 6px; max-width: 520px; }
.sd-checkout__steps-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 24px; }
.sd-checkout__step { background: var(--sd-bg-soft); border: 1px solid var(--sd-rule); border-radius: 14px; padding: 16px 18px; }
.sd-checkout__step-n { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-checkout__step-title { font-weight: 600; letter-spacing: -0.02em; font-size: 15px; margin-top: 6px; }
.sd-checkout__step-desc { font-size: 12px; color: var(--sd-muted); margin-top: 4px; line-height: 1.5; }
.sd-checkout__note { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); text-align: center; margin-top: 14px; line-height: 1.6; }
.sd-checkout__summary { position: sticky; top: 80px; }
.sd-checkout__summary-card { padding: 28px; }
.sd-checkout__summary-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-checkout__summary-name { font-weight: 600; letter-spacing: -0.03em; font-size: 32px; margin-top: 8px; }
.sd-checkout__summary-sub { font-size: 14px; color: var(--sd-muted); margin-top: 4px; }
.sd-checkout__summary-list { margin-top: 22px; display: grid; gap: 10px; font-size: 13px; color: var(--sd-cream-soft); }
.sd-checkout__summary-item { display: flex; gap: 10px; }
.sd-checkout__summary-item-plus { color: var(--sd-vaure-glow); }
.sd-checkout__price-row { display: flex; justify-content: space-between; color: var(--sd-cream-soft); font-size: 14px; }
.sd-checkout__price-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.sd-checkout__price-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-checkout__price-val { font-weight: 600; letter-spacing: -0.03em; font-size: 36px; }
.sd-checkout__assurance { padding: 18px 20px; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); line-height: 1.6; }

/* Agree checkbox */
.sd-agree { display: flex; align-items: flex-start; gap: 12px; }
.sd-agree__box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--sd-vaure);
  background: var(--sd-vaure);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-cream);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.sd-agree__text { font-size: 13px; color: var(--sd-cream-soft); line-height: 1.5; }
.sd-agree__link { color: var(--sd-vaure-glow); }

/* ================================================================
   SUPPORT PAGE
   ================================================================ */
.sd-support-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
.sd-support-hero__h1 { font-weight: 600; letter-spacing: -0.03em; font-size: 80px; line-height: 1; margin-top: 18px; }
.sd-support-hero__lede { font-size: 17px; color: var(--sd-cream-soft); margin-top: 14px; max-width: 560px; }
.sd-support-hero__status { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); text-align: right; }

.sd-support-channels { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.sd-support-channel { border-radius: var(--sd-r-card); padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.sd-support-channel--primary { background: var(--sd-vaure); color: var(--sd-cream); }
.sd-support-channel--card { background: var(--sd-panel); border: 1px solid var(--sd-rule); }
.sd-support-channel__meta { display: flex; justify-content: space-between; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.sd-support-channel__label { opacity: 0.9; }
.sd-support-channel__time { opacity: 0.8; }
.sd-support-channel--card .sd-support-channel__label { color: var(--sd-muted); }
.sd-support-channel__name { font-weight: 600; letter-spacing: -0.02em; font-size: 32px; line-height: 1.1; }
.sd-support-channel--card .sd-support-channel__name { font-size: 24px; color: var(--sd-cream); }
.sd-support-channel__desc { font-size: 14px; margin-top: 8px; opacity: 0.9; max-width: 420px; }
.sd-support-channel--card .sd-support-channel__desc { color: var(--sd-muted); }

.sd-support-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }

/* FAQ */
.sd-faq { overflow: hidden; }
.sd-faq__header { padding: 22px 28px; border-bottom: 1px solid var(--sd-rule); display: flex; justify-content: space-between; align-items: baseline; }
.sd-faq__title { font-weight: 600; letter-spacing: -0.02em; font-size: 28px; margin-top: 6px; }
.sd-faq__updated { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-faq__item { padding: 18px 28px; border-top: 1px solid var(--sd-rule); }
.sd-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 14px; cursor: pointer; }
.sd-faq__q-inner { display: flex; gap: 14px; align-items: center; }
.sd-faq__n { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); flex-shrink: 0; }
.sd-faq__qtext { font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.sd-faq__toggle { font-family: var(--sd-mono); font-size: 14px; color: var(--sd-muted); }
.sd-faq__a { font-size: 14px; line-height: 1.6; color: var(--sd-cream-soft); margin-top: 12px; margin-left: 46px; max-width: 680px; display: none; }
.sd-faq__item.is-open .sd-faq__a { display: block; }
.sd-faq__item.is-open .sd-faq__toggle { content: "−"; }

/* Support form */
.sd-support-form { padding: 28px; }
.sd-support-form__title { font-weight: 600; letter-spacing: -0.02em; font-size: 28px; margin-top: 6px; }
.sd-support-form__sub { font-size: 14px; color: var(--sd-muted); margin-top: 6px; }
.sd-support-form__fields { margin-top: 22px; display: grid; gap: 14px; }
.sd-support-form__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-support-form__chip {
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--sd-rule);
  color: var(--sd-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sd-support-form__chip.is-active {
  border-color: var(--sd-vaure-soft);
  background: oklch(0.25 0.04 50);
  color: var(--sd-cream);
}
.sd-support-form__notice { background: var(--sd-bg-soft); border: 1px solid var(--sd-rule); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.sd-support-form__notice-icon { color: var(--sd-vaure-glow); font-family: var(--sd-mono); font-size: 11px; }
.sd-support-form__notice-text { font-size: 13px; color: var(--sd-cream-soft); line-height: 1.5; }
.sd-support-form__char-count { text-align: right; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-muted); }
.sd-support-form__attach { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }

/* Status strip */
.sd-status-strip { background: var(--sd-bg-soft); border: 1px solid var(--sd-rule); border-radius: 18px; padding: 20px 24px; display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; gap: 24px; align-items: center; }
.sd-status-strip__label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-status-strip__service { display: flex; align-items: center; gap: 10px; }
.sd-status-strip__service-name { font-weight: 600; letter-spacing: -0.02em; font-size: 14px; }
.sd-status-strip__service-status { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-good); margin-left: 6px; }
.sd-status-strip__history { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); text-align: right; }

/* ================================================================
   STATE: hidden
   ================================================================ */
.sd-hidden { display: none !important; }
[hidden] { display: none !important; }

/* Status messages */
.sd-status-msg {
  margin-top: 14px;
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-muted);
  min-height: 18px;
}
.sd-status-msg.ok    { color: var(--sd-good); }
.sd-status-msg.error { color: oklch(0.65 0.18 25); }

/* ================================================================
   DROP PAGE — CODE ENTRY
   ================================================================ */
.sd-drop-page { padding: 40px var(--sd-px) 0; }
.sd-drop-page__breadcrumb { display: flex; gap: 10px; align-items: center; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-drop-page__breadcrumb-sep { color: var(--sd-faint); }
.sd-drop-page__breadcrumb-current { color: var(--sd-cream); }

.sd-drop-layout { padding: 24px var(--sd-px) 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }

/* Code entry card */
.sd-drop-entry { padding: 44px 48px 40px; }
.sd-drop-entry__h1 { font-weight: 600; letter-spacing: -0.03em; font-size: 64px; line-height: 1; margin-top: 18px; }
.sd-drop-entry__lede { font-size: 16px; color: var(--sd-cream-soft); margin-top: 14px; max-width: 520px; line-height: 1.55; }

/* Single-field code input */
.sd-code-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); margin-bottom: 14px; margin-top: 36px; }
.sd-code-input-wrap { position: relative; }
.sd-code-input {
  display: block;
  width: 100%;
  background: var(--sd-bg-soft);
  border: 1.5px solid var(--sd-rule);
  border-radius: 16px;
  padding: 22px 26px;
  font-family: var(--sd-mono);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.22em;
  color: var(--sd-cream);
  text-transform: uppercase;
  caret-color: var(--sd-vaure);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.sd-code-input::placeholder {
  color: var(--sd-faint);
  letter-spacing: 0.22em;
  font-weight: 400;
}
.sd-code-input:focus {
  border-color: var(--sd-vaure-soft);
  box-shadow: 0 0 0 4px oklch(0.55 0.13 45 / 0.12);
  background: var(--sd-bg);
}
.sd-code-input.is-valid {
  border-color: var(--sd-vaure);
  box-shadow: 0 0 0 4px oklch(0.55 0.13 45 / 0.16);
}

.sd-code-hint { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }
.sd-code-timer { color: var(--sd-vaure-glow); }

/* Numeric keypad */
.sd-keypad { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; }
.sd-keypad__key {
  padding: 16px 0;
  border-radius: 12px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  text-align: center;
  font-family: var(--sd-font); font-weight: 600; font-size: 22px; letter-spacing: -0.03em;
  color: var(--sd-cream);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.sd-keypad__key:active { background: var(--sd-panel2); }
.sd-keypad__key--func { font-size: 16px; color: var(--sd-muted); background: var(--sd-panel2); }
.sd-keypad__key--func:active { background: var(--sd-panel3); }

.sd-drop-entry__connect { display: flex; gap: 10px; align-items: center; margin-top: 28px; }
.sd-drop-entry__connect-hint { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }

/* Sidebar */
.sd-drop-sidebar { display: grid; gap: 14px; }
.sd-drop-sidebar__where { padding: 24px; }
.sd-drop-sidebar__where-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-drop-sidebar__where-title { font-weight: 600; letter-spacing: -0.02em; font-size: 20px; margin-top: 6px; margin-bottom: 14px; }
.sd-drop-sidebar__phone-placeholder {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sd-bg-soft);
  display: flex; align-items: center; justify-content: center;
}
.sd-drop-sidebar__phone-gif {
  width: 100%; height: auto; display: block; border-radius: 18px;
}

/* Mobile warning */
.sd-drop-mobile-warning { padding: 24px var(--sd-px) 0; }
.sd-drop-mobile-warning__card {
  padding: 40px 36px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.sd-drop-mobile-warning__icon { font-size: 48px; line-height: 1; }
.sd-drop-mobile-warning__title { font-weight: 600; letter-spacing: -0.03em; font-size: 28px; }
.sd-drop-mobile-warning__desc { font-size: 15px; line-height: 1.6; color: var(--sd-cream-soft); max-width: 380px; }

/* Nearby Discovery banner */
.sd-drop-nearby-banner {
  margin: 0 var(--sd-px) 32px;
  background: var(--sd-panel);
  border: 1px solid var(--sd-rule);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: var(--sd-cream-soft); line-height: 1.5;
}
.sd-drop-nearby-banner__tag {
  font-family: var(--sd-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sd-vaure-glow);
  border: 1px solid oklch(0.38 0.10 45); background: oklch(0.22 0.05 45);
  border-radius: 99px; padding: 3px 10px; flex-shrink: 0;
}
.sd-drop-sidebar__where-hint { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); margin-top: 12px; line-height: 1.6; }
.sd-drop-sidebar__where-hint em { color: var(--sd-cream-soft); font-style: normal; }

.sd-drop-sidebar__security { padding: 20px 22px; }
.sd-drop-sidebar__sec-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); margin-bottom: 10px; }
.sd-drop-sidebar__sec-list { display: grid; gap: 10px; font-size: 13px; color: var(--sd-cream-soft); line-height: 1.55; }
.sd-drop-sidebar__sec-item { display: flex; gap: 10px; }
.sd-drop-sidebar__sec-dot { color: var(--sd-vaure-glow); flex-shrink: 0; }

.sd-drop-sidebar__help { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; }
.sd-drop-sidebar__help-label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-drop-sidebar__help-title { font-weight: 600; letter-spacing: -0.02em; font-size: 16px; margin-top: 4px; }
.sd-drop-sidebar__help-arrow { font-family: var(--sd-mono); color: var(--sd-vaure-glow); }

/* ================================================================
   DROP PAGE — TRANSFER ZONE
   ================================================================ */
.sd-drop-transfer { padding: 24px var(--sd-px) 0; }
.sd-drop-transfer__header { display: flex; justify-content: space-between; align-items: flex-end; }
.sd-drop-transfer__h1 { font-weight: 600; letter-spacing: -0.03em; font-size: 64px; line-height: 1; margin-top: 12px; }
.sd-drop-transfer__paired { display: flex; align-items: center; gap: 14px; }
.sd-drop-transfer__body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; margin-top: 24px; }

/* Dropzone */
.sd-dropzone {
  background: var(--sd-panel);
  border: 2px dashed var(--sd-vaure);
  border-radius: 24px;
  padding: 32px;
  min-height: 520px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  transition: background 0.15s;
}
.sd-dropzone.is-over { background: oklch(0.24 0.04 50); }
.sd-dropzone__status-row { display: flex; justify-content: space-between; }
.sd-dropzone__active { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-dropzone__protocol { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-dropzone__center { text-align: center; }
.sd-dropzone__icon-wrap {
  display: inline-flex; padding: 32px;
  border-radius: 999px;
  background: oklch(0.25 0.07 50);
  margin-bottom: 24px;
}
.sd-dropzone__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sd-vaure);
  color: var(--sd-cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}
.sd-dropzone__h2 { font-weight: 600; letter-spacing: -0.03em; font-size: 56px; line-height: 1.05; }
.sd-dropzone__h2-accent { color: var(--sd-vaure); }
.sd-dropzone__formats { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); margin-top: 14px; }
.sd-dropzone__btns { display: flex; gap: 10px; justify-content: center; margin-top: 24px; }
.sd-dropzone__footer { display: flex; justify-content: space-between; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); }

/* Transfer progress + queue */
.sd-drop-right { display: flex; flex-direction: column; gap: 14px; }
.sd-drop-progress { padding: 22px 24px; }
.sd-drop-progress__top { display: flex; justify-content: space-between; align-items: center; }
.sd-drop-progress__label { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-drop-progress__speed { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); }
.sd-drop-progress__count { font-weight: 600; letter-spacing: -0.02em; font-size: 32px; margin-top: 6px; }
.sd-drop-progress__meta { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-cream-soft); }
.sd-drop-progress__bar-track { height: 8px; background: var(--sd-bg-soft); border-radius: 99px; margin-top: 14px; overflow: hidden; display: flex; }
.sd-drop-progress__bar-done { height: 100%; background: var(--sd-vaure-glow); }
.sd-drop-progress__bar-active { height: 100%; background: var(--sd-vaure); }
.sd-drop-progress__pills { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.sd-drop-progress__pill--done { color: var(--sd-muted); }
.sd-drop-progress__pill--active { color: var(--sd-vaure-glow); }
.sd-drop-progress__pill--queue { color: var(--sd-muted); }

.sd-drop-queue { overflow: hidden; flex: 1; }
.sd-drop-queue__header { padding: 12px 22px; border-bottom: 1px solid var(--sd-rule); display: flex; justify-content: space-between; font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted); }
.sd-drop-queue__row { display: grid; grid-template-columns: 1fr 60px 80px 90px; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--sd-rule); font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; align-items: center; }
.sd-drop-queue__name { text-transform: none; letter-spacing: 0; font-family: var(--sd-font); font-size: 13px; color: var(--sd-cream); }
.sd-drop-queue__name--done { color: var(--sd-muted); }
.sd-drop-queue__status--ok     { color: var(--sd-good); text-align: right; }
.sd-drop-queue__status--active { color: var(--sd-vaure-glow); text-align: right; }
.sd-drop-queue__status--queue  { color: var(--sd-muted); text-align: right; }

.sd-drop-footer { padding: 24px var(--sd-px) 32px; }
.sd-drop-footer__notice { background: var(--sd-bg-soft); border: 1px solid var(--sd-rule); border-radius: 18px; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; }
.sd-drop-footer__notice-body { display: flex; align-items: center; gap: 14px; }
.sd-drop-footer__notice-icon { font-family: var(--sd-mono); color: var(--sd-vaure-glow); font-size: 14px; }
.sd-drop-footer__notice-text { font-size: 14px; color: var(--sd-cream-soft); }
.sd-drop-footer__notice-link { font-family: var(--sd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-vaure-glow); white-space: nowrap; }

/* ================================================================
   RESPONSIVE — TABLET  (≤ 900px)
   ================================================================ */
@media (max-width: 900px) {
  :root { --sd-px: 20px; }

  /* --- Header --- */
  .sd-header { padding: 14px var(--sd-px); }
  .sd-header__nav { display: none; }
  .sd-header__actions { gap: 6px; }

  /* --- Hero --- */
  .sd-hero { grid-template-columns: 1fr; padding-top: 36px; }
  .sd-hero__phones { display: none; } /* hidden on tablet/mobile, shown as static card below */
  .sd-hero__ctas { flex-wrap: wrap; }

  /* --- Benefits --- */
  .sd-benefits__header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sd-benefits__sub { text-align: left; max-width: 100%; }
  .sd-benefits__grid { grid-template-columns: 1fr; }
  .sd-benefit__title { font-size: 24px; padding-top: 16px; }

  /* --- Vibe --- */
  .sd-vibe { grid-template-columns: 1fr; }
  .sd-vibe__right { border-left: none; border-top: 1px solid var(--sd-rule); }

  /* --- Drop teaser --- */
  .sd-drop-teaser { grid-template-columns: 1fr; }
  .sd-drop-teaser__right { display: none; }

  /* --- Pricing --- */
  .sd-pricing__grid { grid-template-columns: 1fr; }

  /* --- Account / auth --- */
  .sd-auth { grid-template-columns: 1fr; }
  .sd-waiting { grid-template-columns: 1fr; }
  .sd-account { padding: 24px var(--sd-px) 0; }
  .sd-account__header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sd-sub-card__body { grid-template-columns: 1fr; gap: 20px; }
  .sd-sub-card__name { font-size: 48px; }

  /* --- Tables --- */
  .sd-table__row { grid-template-columns: 22px 1fr 1fr 80px; }
  .sd-table__row > *:nth-child(4),
  .sd-table__row > *:nth-child(5) { display: none; }
  .sd-history-grid { grid-template-columns: 1fr; }

  /* --- Checkout --- */
  .sd-checkout { grid-template-columns: 1fr; }
  .sd-checkout__summary { position: static; }
  .sd-checkout__steps-grid { grid-template-columns: 1fr; }

  /* --- Support --- */
  .sd-support-hero { grid-template-columns: 1fr; }
  .sd-support-hero__status { text-align: left; }
  .sd-support-channels { grid-template-columns: 1fr; }
  .sd-support-content { grid-template-columns: 1fr; }
  .sd-status-strip { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sd-status-strip > *:first-child,
  .sd-status-strip > *:last-child { grid-column: 1 / -1; }

  /* --- Drop page --- */
  .sd-drop-layout { grid-template-columns: 1fr; }
  .sd-drop-transfer__body { grid-template-columns: 1fr; }
  .sd-drop-transfer__header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sd-keypad { max-width: 100%; }
  .sd-dropzone { min-height: 300px; }
  .sd-dropzone__h2 { font-size: 36px; }
}

/* ================================================================
   RESPONSIVE — MOBILE  (≤ 600px / iPhone)
   ================================================================ */
@media (max-width: 600px) {
  :root {
    --sd-px: 16px;
    --sd-r-card: 18px;
    --sd-r-btn: 12px;
  }

  /* Prevent horizontal overflow */
  body { overflow-x: hidden; }
  .sd-page { overflow-x: hidden; }

  /* Modal on mobile */
  .sd-modal { padding: 12px; }
  .sd-modal__box { padding: 24px 18px; border-radius: 20px; max-height: 92vh; }
  .sd-modal__title { font-size: 24px; }
  .sd-modal__desc { font-size: 14px; }

  /* Carousel: stack phone over caption */
  .sd-signup-carousel { grid-template-columns: 36px 1fr 36px; gap: 8px; }
  .sd-signup-carousel__arrow { width: 36px; height: 36px; font-size: 18px; }
  .sd-signup-carousel__viewport { min-height: 0; }
  .sd-signup-slide { flex-direction: column; align-items: center; gap: 18px; text-align: center; }
  .sd-signup-slide__phone { width: 160px; }
  .sd-signup-slide__num { font-size: 44px; }
  .sd-signup-slide__title { font-size: 18px; }
  .sd-signup-slide__desc { font-size: 13px; max-width: 100%; }

  /* --- Header --- */
  .sd-header { padding: 12px var(--sd-px); }
  .sd-header__name { font-size: 17px; }
  .sd-header__logo-img { width: 30px; height: 30px; }
  .sd-header__brand { gap: 10px; }
  /* Compact action buttons on mobile */
  .sd-header__actions .sd-btn--ghost { display: none; } /* hide "войти" — same as "кабинет" in nav */
  .sd-header__actions .sd-btn { padding: 10px 14px; font-size: 10px; }

  /* --- Sections --- */
  .sd-section { padding: 40px var(--sd-px) 0; }
  .sd-section--sm { padding: 14px var(--sd-px) 0; }
  .sd-section--last { padding-bottom: 40px; }

  /* --- Hero --- */
  .sd-hero { padding: 28px var(--sd-px) 0; gap: 28px; }
  .sd-hero__h1 { font-size: clamp(40px, 12vw, 68px); margin: 16px 0 14px; }
  .sd-hero__lede { font-size: 16px; max-width: 100%; }
  .sd-hero__ctas { flex-direction: column; gap: 10px; }
  .sd-hero__ctas .sd-btn { width: 100%; justify-content: center; padding: 18px 20px; font-size: 16px; }
  .sd-hero__pills { gap: 12px; flex-direction: column; }
  .sd-hero-carousel { display: block; margin-top: 32px; }
  .sd-hero-mobile-card { display: block; padding: 0 var(--sd-px); margin-top: 20px; }
  .sd-hero-mobile-card .sd-hero__now-playing {
    position: static;
    min-width: 0;
    box-shadow: none;
    border-radius: 16px;
  }

  /* --- Benefits --- */
  .sd-section .sd-benefits__header h2 { font-size: 32px; }
  .sd-benefit { padding: 22px; }
  .sd-benefit__title { font-size: 22px; padding-top: 14px; padding-bottom: 12px; }
  .sd-benefit__desc { font-size: 14px; }

  /* --- Vibe --- */
  .sd-vibe__left { padding: 24px; }
  .sd-vibe__h3 { font-size: 48px; }
  .sd-vibe__cards { grid-template-columns: 1fr; }
  .sd-vibe__right { padding: 20px; }
  .sd-vibe__bars { height: 80px; }

  /* --- Drop teaser --- */
  .sd-drop-teaser__left { padding: 24px; }
  .sd-drop-teaser__h3 { font-size: 36px; }

  /* --- Nearby cards --- */
  .sd-nearby-cards { grid-template-columns: 1fr; }

  /* --- Pricing --- */
  .sd-pricing__h2 { font-size: 28px; }
  .sd-pricing__plan { padding: 24px; }
  .sd-pricing__plan-name { font-size: 40px; }

  /* --- Footer --- */
  .sd-footer { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px var(--sd-px); }
  .sd-footer__right { flex-wrap: wrap; gap: 12px; }

  /* --- Cards (general) --- */
  .sd-card { border-radius: var(--sd-r-card); }
  .sd-card--soft { border-radius: 14px; }

  /* --- Auth (account) --- */
  .sd-auth { padding: 14px var(--sd-px) 0; }
  .sd-auth__card { padding: 24px 20px 24px; }
  .sd-auth__h1 { font-size: 44px; }
  .sd-auth__tg-btn { padding: 18px 20px; font-size: 16px; }
  .sd-auth__steps-grid { grid-template-columns: 1fr; }
  .sd-waiting { padding: 14px var(--sd-px) 0; }
  .sd-waiting__card { padding: 24px 20px; }
  .sd-waiting__h1 { font-size: 40px; }
  .sd-waiting__actions { flex-direction: column; }
  .sd-waiting__actions .sd-btn { width: 100%; justify-content: center; }

  /* Subscription card */
  .sd-sub-card { padding: 20px; }
  .sd-sub-card__name { font-size: 40px; }
  .sd-sub-card__actions { flex-direction: column; gap: 8px; }
  .sd-sub-card__actions .sd-btn { width: 100%; }

  /* Devices table — simplified */
  .sd-table__row { grid-template-columns: 22px 1fr 80px; padding: 14px 16px; gap: 10px; }
  .sd-table__row > *:nth-child(3),
  .sd-table__row > *:nth-child(4),
  .sd-table__row > *:nth-child(5) { display: none; }
  .sd-table__header { padding: 14px 16px; }

  /* Checkout */
  .sd-checkout { padding: 14px var(--sd-px) 32px; }
  .sd-checkout__card { padding: 20px; }

  /* --- Support --- */
  .sd-support-hero__h1 { font-size: 52px; }
  .sd-support-channel { min-height: 160px; }
  .sd-support-channel__name { font-size: 24px; }
  .sd-faq__item { padding: 14px var(--sd-px); }
  .sd-faq__header { padding: 16px var(--sd-px); }
  .sd-support-form { padding: 20px; }
  .sd-status-strip { grid-template-columns: 1fr; }
  .sd-status-strip > *:first-child,
  .sd-status-strip > *:last-child { grid-column: 1; }

  /* --- Drop code --- */
  .sd-drop-page { padding: 28px var(--sd-px) 0; }
  .sd-drop-layout { padding: 14px var(--sd-px) 0; }
  .sd-drop-entry { padding: 20px; }
  .sd-drop-entry__h1 { font-size: 40px; }
  .sd-code-input {
    padding: 18px 20px;
    font-size: 24px;
    letter-spacing: 0.18em;
  }
  .sd-drop-entry__connect { flex-direction: column; align-items: stretch; }
  .sd-drop-entry__connect .sd-btn { width: 100%; justify-content: center; }
  .sd-drop-transfer { padding: 14px var(--sd-px) 0; }
  .sd-drop-transfer__h1 { font-size: 40px; }
  .sd-dropzone { padding: 20px; min-height: 240px; }
  .sd-dropzone__h2 { font-size: 28px; }
  .sd-dropzone__btns { flex-direction: column; }
  .sd-dropzone__btns label { width: 100%; justify-content: center; }
  .sd-drop-footer { padding: 14px var(--sd-px) 24px; }
  .sd-drop-footer__notice { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* Minimum touch target size (44px) for all interactive elements */
  .sd-btn { min-height: 44px; }
  .sd-header__actions .sd-btn { min-height: 36px; }
  .sd-keypad__key { min-height: 52px; }
  .sd-field__input { min-height: 48px; font-size: 16px; } /* 16px prevents iOS zoom */
  .sd-field__input--textarea { min-height: 120px; }
  select.sd-field__input { min-height: 48px; font-size: 16px; }
}

/* =====================================================================
   Theme accent: live recolor + background glow
   ===================================================================== */

/* Soft radial glow tied to current accent. Sits behind everything. */
.sd-page {
  position: relative;
  isolation: isolate;
}
.sd-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at 12% -10%,
      color-mix(in oklab, var(--sd-vaure-glow) 26%, transparent),
      transparent 60%),
    radial-gradient(48vmax 48vmax at 105% 85%,
      color-mix(in oklab, var(--sd-vaure) 18%, transparent),
      transparent 65%);
  transition: background 600ms ease;
}

/* A subtle local glow on the hero/page title accent so changes feel alive. */
.sd-hero__h1-accent { text-shadow: 0 0 28px color-mix(in oklab, var(--sd-vaure-glow) 50%, transparent); }

/* Smooth tween for accent-driven surfaces. */
.sd-btn--primary,
.sd-header__btn--primary,
.sd-hero__h1-accent,
.sd-glow,
.sd-vaure,
.sd-kicker,
.sd-kicker__line,
.sd-pill--glow,
.sd-footer__link--glow {
  transition: color 350ms ease, background-color 350ms ease,
              border-color 350ms ease, box-shadow 350ms ease,
              text-shadow 350ms ease;
}

/* ----- Theme toggle button (in header actions) ----- */
.sd-theme-toggle {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--sd-rule);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  transition: border-color 200ms ease, transform 150ms ease, box-shadow 250ms ease;
}
.sd-theme-toggle:hover { border-color: var(--sd-vaure-glow); }
.sd-theme-toggle.is-open {
  border-color: var(--sd-vaure-glow);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sd-vaure-glow) 22%, transparent);
}
.sd-theme-toggle__dot {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--sd-vaure);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--sd-cream) 10%, transparent),
    0 0 14px color-mix(in oklab, var(--sd-vaure-glow) 70%, transparent);
  transition: background-color 350ms ease, box-shadow 350ms ease;
}

/* ----- Picker popover ----- */
.sd-theme-picker[hidden] { display: none; }
.sd-theme-picker {
  position: fixed;
  top: 68px; right: 24px;
  z-index: 50;
  width: 240px;
  background: var(--sd-panel);
  border: 1px solid var(--sd-rule);
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    0 18px 50px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in oklab, var(--sd-vaure-glow) 18%, transparent);
  animation: sd-theme-pop 160ms ease-out;
}
@keyframes sd-theme-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sd-theme-picker__title {
  font-family: var(--sd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-muted);
  margin-bottom: 10px;
}
.sd-theme-picker__swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.sd-theme-picker__swatch {
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--sd-cream) 12%, transparent);
  background: var(--c, #999);
  cursor: pointer;
  padding: 0;
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.sd-theme-picker__swatch:hover { transform: scale(1.08); }
.sd-theme-picker__swatch.is-active {
  border-color: var(--sd-cream);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, var(--sd-vaure)) 35%, transparent);
}
.sd-theme-picker__plus {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sd-rule);
  font-size: 12px;
  color: var(--sd-muted);
}
.sd-theme-picker__plus-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--sd-vaure-glow);
  box-shadow: 0 0 10px var(--sd-vaure-glow);
}

@media (max-width: 720px) {
  .sd-theme-picker { right: 12px; top: 64px; width: min(260px, calc(100vw - 24px)); }
}

/* =====================================================================
   Theme picker: full HSV (SV plane + hue strip + hex input)
   ===================================================================== */
.sd-theme-picker { width: 264px; }

.sd-theme-picker__sv {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 10px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  border: 1px solid color-mix(in oklab, var(--sd-cream) 8%, transparent);
  margin-bottom: 12px;
}
.sd-theme-picker__sv-thumb {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sd-theme-picker__hue {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  background: linear-gradient(to right,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%));
  margin-bottom: 12px;
}
.sd-theme-picker__hue-thumb {
  position: absolute;
  top: 50%;
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sd-theme-picker__hex {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.sd-theme-picker__hex-prefix {
  font-family: var(--sd-mono);
  font-size: 12px;
  color: var(--sd-muted);
}
.sd-theme-picker__hex input {
  flex: 1;
  min-width: 0;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-rule);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--sd-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sd-cream);
  text-transform: uppercase;
}
.sd-theme-picker__hex input:focus {
  outline: none;
  border-color: var(--sd-vaure-glow);
}
.sd-theme-picker__preview {
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--sd-cream) 12%, transparent);
  background: var(--sd-vaure);
}