/* ==========================================================================
   Express Proxy — design tokens & components
   Visual system ported from lili.cloud (sticker / neo-brutalist):
   pink ground, cream surfaces, 2px ink borders, hard offset shadows,
   skewed display type, yellow badges, Caveat handwritten accents.
   ========================================================================== */

:root {
  color-scheme: light;
  --c-bg: #ffeff6;
  --c-bg-soft: #fbe4ee;
  --c-surface: #fff;
  --c-surface-2: #fffcf3;
  --c-surface-light: #fffcf3;
  --c-pink: #ff2e88;
  --c-pink-light: #ff2e88;
  --c-pink-dark: #ff2e88;
  --c-pink-soft: #ffd2e5;
  --c-yellow: #ffd31a;
  --c-yellow-soft: #ffe54c;
  --c-sun: #ffc300;
  --c-green: #6da92a;
  --c-green-light: #8fcb43;
  --c-footer: #6da92a;
  --c-cream: #fffcf3;
  --c-on-accent: #1b1108;
  --c-ink: #1b1108;
  --c-ink-contrast: #fffcf3;
  --c-text: #1b1108;
  --c-logo: #1b1108;
  --c-hero-text: #1b1108;
  --c-border: #1b1108;
  --c-border-cream: #fffcf3;
  --c-shadow: #1b1108;
  --c-ink-a7: #1b110812;
  --c-ink-a8: #1b110814;
  --c-ink-a10: #1b11081a;
  --c-ink-a15: #1b110826;
  --c-ink-a20: #1b110833;
  --c-ink-a25: #1b110840;
  --c-ink-a28: #1b110847;
  --c-ink-a30: #1b11084d;
  --c-ink-a35: #1b110859;
  --c-ink-a40: #1b110866;
  --c-ink-a45: #1b110873;
  --c-ink-a50: #1b110880;
  --c-ink-a55: #1b11088c;
  --c-ink-a60: #1b110899;
  --c-ink-a65: #1b1108a6;
  --c-ink-a70: #1b1108b3;
  --c-ink-a75: #1b1108bf;
  --c-bg-alpha: #1b110859;
  --t-red: #e03333;
  --t-red-strong: #b32020;
  --t-red-fill: #ff4747;
  --t-red-fill-soft: #ffb3b3;
  --t-red-bg: #ffe3e3;
  --t-red-bg-soft: #fff5f5;
  --t-green-fg: #2f9e57;
  --t-green-strong: #1f7a41;
  --t-green-bg: #e4f5d0;
  --t-warn: #8a5c00;
  --t-warn-accent: #e0a12a;
  --t-warn-bg: #fff4e0;
  --t-warn-bg-strong: #fff0c2;
  --t-blue: #7ec4ff;
  --t-cyan: #7fe3f0;
  --t-gray-bg: #e8e2da;
  --t-gray-fg: #c9c2b8;
  --t-pink-tint: #ffc0dc;
  --c-moon: #2a3046;
  --c-moon-rim: #1e212d;
  --c-moon-crater: #464a63;
  --c-moon-crater-rim: #3b3f55;
  --wave-hero: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 34'><path fill='%236DA92A' d='M0.0,11.0L7.5,7.6L15.0,4.6L22.5,2.7L30.0,2.0L37.5,2.7L45.0,4.6L52.5,7.6L60.0,11.0L67.5,14.4L75.0,17.4L82.5,19.3L90.0,20.0L97.5,19.3L105.0,17.4L112.5,14.4L120.0,11.0L127.5,7.6L135.0,4.6L142.5,2.7L150.0,2.0L157.5,2.7L165.0,4.6L172.5,7.6L180.0,11.0L187.5,14.4L195.0,17.4L202.5,19.3L210.0,20.0L217.5,19.3L225.0,17.4L232.5,14.4L240.0,11.0L240.0,23.0L232.5,26.4L225.0,29.4L217.5,31.3L210.0,32.0L202.5,31.3L195.0,29.4L187.5,26.4L180.0,23.0L172.5,19.6L165.0,16.6L157.5,14.7L150.0,14.0L142.5,14.7L135.0,16.6L127.5,19.6L120.0,23.0L112.5,26.4L105.0,29.4L97.5,31.3L90.0,32.0L82.5,31.3L75.0,29.4L67.5,26.4L60.0,23.0L52.5,19.6L45.0,16.6L37.5,14.7L30.0,14.0L22.5,14.7L15.0,16.6L7.5,19.6L0.0,23.0Z'/></svg>");
  --wave-footer: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 56'><path fill='%238FCB43' d='M0.0,25.0L15.0,21.2L30.0,17.9L45.0,15.8L60.0,15.0L75.0,15.8L90.0,17.9L105.0,21.2L120.0,25.0L135.0,28.8L150.0,32.1L165.0,34.2L180.0,35.0L195.0,34.2L210.0,32.1L225.0,28.8L240.0,25.0L255.0,21.2L270.0,17.9L285.0,15.8L300.0,15.0L315.0,15.8L330.0,17.9L345.0,21.2L360.0,25.0L375.0,28.8L390.0,32.1L405.0,34.2L420.0,35.0L435.0,34.2L450.0,32.1L465.0,28.8L480.0,25.0L480,56L0,56Z'/><path fill='%236DA92A' d='M0.0,34.0L15.0,38.6L30.0,42.5L45.0,45.1L60.0,46.0L75.0,45.1L90.0,42.5L105.0,38.6L120.0,34.0L135.0,29.4L150.0,25.5L165.0,22.9L180.0,22.0L195.0,22.9L210.0,25.5L225.0,29.4L240.0,34.0L255.0,38.6L270.0,42.5L285.0,45.1L300.0,46.0L315.0,45.1L330.0,42.5L345.0,38.6L360.0,34.0L375.0,29.4L390.0,25.5L405.0,22.9L420.0,22.0L435.0,22.9L450.0,25.5L465.0,29.4L480.0,34.0L480,56L0,56Z'/></svg>");
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0c151e;
  --c-bg-soft: #151e32;
  --c-surface: #253856;
  --c-surface-2: #1e314d;
  --c-surface-light: #4372c9;
  --c-pink: #4372c9;
  --c-pink-light: #e4e7ff;
  --c-pink-dark: #3740a1;
  --c-pink-soft: #2e358b;
  --t-pink-tint: #2e358b;
  --c-yellow: #3740a1;
  --c-yellow-soft: #3740a1;
  --c-sun: #ffc300;
  --c-green: #7880db;
  --c-green-light: #3740a1;
  --c-footer: #3740a1;
  --c-cream: #e4e7ff;
  --c-on-accent: #e4e7ff;
  --c-ink: #e4e7ff;
  --c-ink-contrast: #1b1108;
  --c-text: #e4e7ff;
  --c-logo: #fff;
  --c-hero-text: #dfe5ff;
  --c-border: #172a3f;
  --c-border-cream: #efe4ec;
  --c-shadow: #172a3f;
  --c-ink-a7: #f4ecf812;
  --c-ink-a8: #f4ecf814;
  --c-ink-a10: #f4ecf81a;
  --c-ink-a15: #f4ecf829;
  --c-ink-a20: #f4ecf838;
  --c-ink-a25: #f4ecf845;
  --c-ink-a28: #f4ecf84d;
  --c-ink-a30: #f4ecf852;
  --c-ink-a35: #f4ecf866;
  --c-ink-a40: #f4ecf873;
  --c-ink-a45: #f4ecf880;
  --c-ink-a50: #f4ecf88c;
  --c-ink-a55: #f4ecf89e;
  --c-ink-a60: #f4ecf8ad;
  --c-ink-a65: #f4ecf8b8;
  --c-ink-a70: #f4ecf8c7;
  --c-ink-a75: #f4ecf8d1;
  --c-bg-alpha: #15121666;
  --t-red: #b84dd5;
  --t-red-strong: #ffb0b0;
  --t-red-fill: #9737b2;
  --t-red-fill-soft: #a83b3b;
  --t-red-bg: #2e2542;
  --t-red-bg-soft: #381e2a;
  --t-green-fg: #7ee0a4;
  --t-green-strong: #9deebb;
  --t-green-bg: #2a2447;
  --t-warn: #ff58f4;
  --t-warn-accent: #ff5eef;
  --t-warn-bg: #2e2542;
  --t-warn-bg-strong: #2e358b;
  --t-blue: #422f69;
  --t-cyan: #422f69;
  --t-gray-bg: #4d3c7d;
  --t-gray-fg: #8a80a3;
  --wave-hero: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 34'><path fill='%234372C9' d='M0.0,11.0L7.5,7.6L15.0,4.6L22.5,2.7L30.0,2.0L37.5,2.7L45.0,4.6L52.5,7.6L60.0,11.0L67.5,14.4L75.0,17.4L82.5,19.3L90.0,20.0L97.5,19.3L105.0,17.4L112.5,14.4L120.0,11.0L127.5,7.6L135.0,4.6L142.5,2.7L150.0,2.0L157.5,2.7L165.0,4.6L172.5,7.6L180.0,11.0L187.5,14.4L195.0,17.4L202.5,19.3L210.0,20.0L217.5,19.3L225.0,17.4L232.5,14.4L240.0,11.0L240.0,23.0L232.5,26.4L225.0,29.4L217.5,31.3L210.0,32.0L202.5,31.3L195.0,29.4L187.5,26.4L180.0,23.0L172.5,19.6L165.0,16.6L157.5,14.7L150.0,14.0L142.5,14.7L135.0,16.6L127.5,19.6L120.0,23.0L112.5,26.4L105.0,29.4L97.5,31.3L90.0,32.0L82.5,31.3L75.0,29.4L67.5,26.4L60.0,23.0L52.5,19.6L45.0,16.6L37.5,14.7L30.0,14.0L22.5,14.7L15.0,16.6L7.5,19.6L0.0,23.0Z'/></svg>");
  --wave-footer: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 56'><path fill='%232e358b' d='M0.0,25.0L15.0,21.2L30.0,17.9L45.0,15.8L60.0,15.0L75.0,15.8L90.0,17.9L105.0,21.2L120.0,25.0L135.0,28.8L150.0,32.1L165.0,34.2L180.0,35.0L195.0,34.2L210.0,32.1L225.0,28.8L240.0,25.0L255.0,21.2L270.0,17.9L285.0,15.8L300.0,15.0L315.0,15.8L330.0,17.9L345.0,21.2L360.0,25.0L375.0,28.8L390.0,32.1L405.0,34.2L420.0,35.0L435.0,34.2L450.0,32.1L465.0,28.8L480.0,25.0L480,56L0,56Z'/><path fill='%233740A1' d='M0.0,34.0L15.0,38.6L30.0,42.5L45.0,45.1L60.0,46.0L75.0,45.1L90.0,42.5L105.0,38.6L120.0,34.0L135.0,29.4L150.0,25.5L165.0,22.9L180.0,22.0L195.0,22.9L210.0,25.5L225.0,29.4L240.0,34.0L255.0,38.6L270.0,42.5L285.0,45.1L300.0,46.0L315.0,45.1L330.0,42.5L345.0,38.6L360.0,34.0L375.0,29.4L390.0,25.5L405.0,22.9L420.0,22.0L435.0,22.9L450.0,25.5L465.0,29.4L480.0,34.0L480,56L0,56Z'/></svg>");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html[lang="en"] [data-lang="ru"], html[lang="ru"] [data-lang="en"] { display: none !important; }

html, body {
  background-color: var(--c-bg);
  color: var(--c-text);
  margin: 0;
  padding: 0;
  font-family: Geologica, sans-serif;
  overflow-x: clip;
}

body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }

a { color: inherit; }
button { font-family: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.wl { width: 100%; max-width: 1800px; margin: 0 auto; }

.ic { width: var(--icon-size, 20px); height: var(--icon-size, 20px); flex-shrink: 0; display: inline-flex; }
.ic svg { width: 100%; height: 100%; display: block; }
.ic-svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-svg.filled { fill: currentColor; stroke: none; }

.sr-only, .skip:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  background: var(--c-yellow); color: var(--c-on-accent);
  border: 2px solid var(--c-border); border-radius: 10px;
  padding: 8px 14px; font-weight: 700; text-decoration: none;
  box-shadow: 3px 3px 0 1px var(--c-shadow);
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo {
  color: var(--c-logo);
  align-items: center;
  gap: 8px;
  text-decoration: none;
  display: inline-flex;
}
.logo-mark {
  width: 34px; height: 34px;
  color: var(--c-pink);
  display: inline-flex;
  transform: rotate(-8deg);
}
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-text {
  letter-spacing: -.5px;
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  transform: skew(-6deg);
  white-space: nowrap;
}
.logo-text b { color: var(--c-pink); font-weight: 800; }
:root[data-theme="dark"] .logo-text b { color: var(--c-pink-light); }
:root[data-theme="dark"] .logo-mark { color: var(--c-surface-light); }
.logo.big .logo-mark { width: 44px; height: 44px; }
.logo.big .logo-text { font-size: 30px; }
.logo.cream { color: var(--c-cream); }
.logo.cream .logo-text b { color: var(--c-yellow-soft); }
.logo.cream .logo-mark { color: var(--c-yellow-soft); }

/* --------------------------------------------------------------------------
   Header (landing)
   -------------------------------------------------------------------------- */
.header {
  z-index: 100;
  justify-content: center;
  align-items: center;
  height: 100px;
  display: flex;
  position: fixed;
  top: 0; left: 0; right: 0;
}
.header-inner {
  width: min(1800px, 100% - 40px);
  background-color: var(--c-bg);
  border: 2px solid #0000;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px 10px;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
  display: flex;
}
.header-inner.scrolled {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: 4px 4px 0 1px var(--c-shadow);
}
.header-right { align-items: center; gap: 12px; display: flex; }
.header-logo { display: inline-flex; }
main.landing { padding-top: 100px; }

/* Soft pushable button ("Личный кабинет") */
.btn {
  background: var(--c-pink-soft);
  border-top: 2px solid var(--c-border);
  border-left: 2px solid var(--c-border);
  border-right: 2px solid var(--c-border);
  border-bottom: 0;
  box-shadow: 0 6px 0 1px var(--c-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-clip: padding-box;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  height: 45px;
  padding: 5px 20px;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  transition: translate .1s, box-shadow .1s, background .15s;
}
.btn .label {
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  transform: skew(-3deg);
}
.btn:hover { background: var(--t-pink-tint); }
.btn:active { box-shadow: 0 2px 0 1px var(--c-shadow); translate: 0 4px; }
.btn:focus-visible { outline: 2px solid var(--c-border); outline-offset: 4px; }
.btn.pink { background: var(--c-pink); }
.btn.pink .label { color: var(--c-cream); }
.btn.pink:hover { background: var(--c-pink-dark); }
@media (width <= 560px) {
  .btn { height: 40px; padding: 8px 20px; }
  .btn .label { font-size: 16px; }
}

/* Theme toggle */
.theme-toggle {
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background-clip: padding-box;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: background-color .15s, box-shadow .1s, translate .1s;
  display: flex;
}
.theme-toggle .ico { width: 22px; height: 22px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.theme-toggle.landing {
  border-top: 2px solid var(--c-border);
  border-left: 2px solid var(--c-border);
  border-right: 2px solid var(--c-border);
  border-bottom: 0;
  width: 52px; height: 45px;
  box-shadow: 0 6px 0 1px var(--c-shadow);
  border-radius: 10px;
}
.theme-toggle.landing:hover { background: var(--c-pink-soft); }
.theme-toggle.landing:active { box-shadow: 0 2px 0 1px var(--c-shadow); transform: translateY(4px); }
.theme-toggle.landing:focus-visible { outline: 2px solid var(--c-border); outline-offset: 4px; }
.theme-toggle.panel {
  border: 2px solid var(--c-border);
  width: 38px; height: 38px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  background: var(--c-surface);
  border-radius: 11px;
}
.theme-toggle.panel .ico { width: 19px; height: 19px; }
.theme-toggle.panel:hover { background: var(--c-pink-soft); }
.theme-toggle.panel:active { box-shadow: 0 0 0 1px var(--c-shadow); translate: 2px 2px; }
.theme-toggle.panel:focus-visible { outline: 2px solid var(--c-border); outline-offset: 3px; }
.lang-toggle { width: auto; padding: 0 14px; }
.lang-toggle .lang-label { font-size: 14px; font-weight: 800; letter-spacing: .6px; transform: skew(-4deg); }
.theme-toggle.panel.lang-toggle { padding: 0 10px; }
.theme-toggle.panel.lang-toggle .lang-label { font-size: 13px; }
.auth-tools { position: fixed; top: 20px; right: 20px; z-index: 10; gap: 10px; display: flex; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: 40px 20px 80px; }
.hero-top { flex-wrap: wrap; align-items: center; gap: 30px; display: flex; }
.hero-left { flex: 480px; min-width: 0; }
.hero-title {
  letter-spacing: -1px;
  color: var(--c-hero-text);
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.5vw, 7.25rem);
  font-weight: 700;
  line-height: 1.04;
  transform: skew(-6deg) rotate(-1deg);
}
.hero-title > span { display: block; }
.hero-wave {
  background-image: var(--wave-hero);
  background-repeat: repeat-x;
  background-size: 240px 34px;
  max-width: 820px;
  height: 34px;
  margin-top: 22px;
  animation: 3.2s linear infinite wave-flow;
  transform: skew(6deg) rotate(1deg);
}
@keyframes wave-flow { to { background-position-x: 240px; } }
.hero-sub { flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; display: flex; }
.hero-badge {
  background: var(--c-yellow-soft);
  border: 4px solid var(--c-border);
  box-shadow: 3px 3px 0 1px var(--c-shadow);
  color: var(--c-text);
  white-space: nowrap;
  background-clip: padding-box;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1;
  transform: rotate(-2deg);
}
.hero-tagline {
  color: var(--c-pink);
  margin-top: -20px;
  font-family: Caveat, cursive;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  transform: rotate(-2deg);
}
.hero-right {
  flex: 420px;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 560px;
  display: flex;
  overflow: visible;
}
.hero-sun { width: min(540px, 92%); position: relative; overflow: visible; container-type: inline-size; }
.orb { aspect-ratio: 555 / 552; width: 100%; position: relative; }
.orb .sun, .orb .moon { will-change: transform; animation: 140s linear infinite spin; position: absolute; inset: 0; }
.orb .moon, :root[data-theme="dark"] .orb .sun { display: none; }
:root[data-theme="dark"] .orb .moon { display: block; }
.orb svg { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.orb .glow { filter: blur(42px); }
.orb .moon .glow { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

.tag {
  background: var(--c-surface-light);
  border: 2px solid var(--c-border);
  box-shadow: 3px 3px 0 1px var(--c-shadow);
  animation: 4s ease-in-out infinite bob;
  animation-delay: var(--delay, 0s);
  will-change: transform;
  background-clip: padding-box;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  display: inline-flex;
}
.tag .ic { color: var(--c-text); }
.tag .text { color: var(--c-text); white-space: nowrap; font-size: 15px; line-height: 1.2; }
:root[data-theme="dark"] .tag .text, :root[data-theme="dark"] .tag .ic { color: #fff; }
@keyframes bob {
  0%, to { transform: rotate(var(--rot, 0deg)) translateY(0); }
  50% { transform: rotate(var(--rot, 0deg)) translateY(-9px); }
}
.hero-sun .hero-tag {
  z-index: 2;
  border-radius: clamp(10px, 2.2cqw, 13px);
  gap: clamp(7px, 1.8cqw, 10px);
  padding: clamp(12px, 1.5cqw, 15px) clamp(10px, 2.6cqw, 14px);
  position: absolute;
}
.hero-sun .hero-tag .ic { --icon-size: clamp(13px, 3cqw, 16px); }
.hero-sun .hero-tag .text { font-size: clamp(11px, 2.4cqw, 13px); }
.hero-sun .t1 { --delay: 0s; top: 26%; left: 2%; }
.hero-sun .t2 { --delay: .8s; top: 26%; left: 52%; }
.hero-sun .t3 { --delay: 1.6s; top: 40%; left: -10%; }
.hero-sun .t4 { --delay: .4s; top: 40%; left: 32%; }
.hero-sun .t5 { --delay: 1.2s; top: 40%; left: 69%; }
.hero-sun .t6 { --delay: 2s; top: 54%; left: 25%; }
.hero-actions { flex-basis: 100%; justify-content: center; margin-top: 30px; display: flex; }
.hero-marquee { flex-basis: 100%; display: none; }
.hero-marquee-track { will-change: transform; width: max-content; animation: 26s linear infinite tag-marquee; display: flex; }
.hero-marquee-row { align-items: center; gap: 14px; padding-right: 14px; display: flex; }
@keyframes tag-marquee { to { transform: translate(-50%); } }

@media (width <= 960px) {
  .hero-top { flex-direction: column; gap: 20px; }
  .hero-right { flex-basis: auto; order: -1; width: 100%; min-height: 420px; }
  .hero-left { flex-basis: auto; width: 100%; }
  .hero-actions { margin-top: 20px; }
}
@media (width <= 560px) {
  .hero { padding: 20px 16px 60px; }
  .hero-title { font-size: clamp(2.4rem, 10vw, 4.6rem); }
  .header-inner { padding: 5px 12px 10px; }
  .header-right { gap: 8px; }
  .header-right .btn { padding: 8px 16px; }
  .logo-text { font-size: 18px; }
  .logo-mark { width: 28px; height: 28px; }
  .hero-right { min-height: 320px; }
  .hero-sun { width: min(340px, 78%); }
  .hero-sun .hero-tag { display: none; }
  .tag { animation: none; }
  .hero-marquee {
    width: calc(100% + 32px);
    margin: 6px -16px 0;
    padding: 10px 0;
    display: block;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 24px calc(100% - 24px), #0000);
    mask-image: linear-gradient(90deg, #0000, #000 24px calc(100% - 24px), #0000);
  }
  .hero-marquee .marquee-tag { border-radius: 12px; padding: 10px 16px; }
  .hero-marquee .marquee-tag .text { font-size: 13.5px; }
  .hero-wave { margin-top: 16px; }
}

/* Big CTA */
.big-btn {
  border: 6px solid var(--c-border);
  box-shadow: 9px 9px 0 1px var(--c-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  padding: 26px 56px;
  font-family: inherit;
  text-decoration: none;
  transition: translate .12s, box-shadow .12s;
  display: inline-flex;
  transform: rotate(-2deg) skew(-3deg);
}
.big-btn.pink { background: var(--c-pink-dark); color: var(--c-on-accent); background-clip: padding-box; }
.big-btn.pink .label { color: var(--c-cream); }
.big-btn.yellow { background: var(--c-yellow); color: var(--c-on-accent); background-clip: padding-box; }
.big-btn.yellow .label { color: var(--c-text); }
.big-btn .label { text-align: center; white-space: nowrap; font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.1; }
.big-btn:hover { box-shadow: 7px 7px 0 1px var(--c-shadow); translate: 2px 2px; }
.big-btn:active { box-shadow: 2px 2px 0 1px var(--c-shadow); translate: 7px 7px; }
.big-btn:focus-visible { outline: 3px solid var(--c-border); outline-offset: 5px; }
@media (width <= 520px) {
  .big-btn { box-shadow: 6px 6px 0 1px var(--c-shadow); border-width: 5px; border-radius: 24px; padding: 18px 36px; }
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */
.block { padding: 70px 20px 90px; }
.head { flex-direction: column; gap: 10px; display: flex; }
.title {
  letter-spacing: -1px;
  color: var(--c-text);
  font-size: 36px;
  font-weight: 700;
  transform: skew(-6deg) rotate(-1deg);
}
.subtitle { color: var(--c-text); font-size: 22px; font-weight: 400; }
@media (width <= 560px) { .block { padding: 56px 16px 70px; } }

/* --------------------------------------------------------------------------
   Services (plans)
   -------------------------------------------------------------------------- */
.service-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 26px;
  padding: 70px 20px 0;
  display: flex;
}
.service-picker { flex-wrap: wrap; align-items: center; gap: 14px; display: flex; }
.service-filters {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-top: 34px;
  padding: 0 20px;
  display: flex;
}
.service-cards {
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 34px;
  margin-top: 46px;
  padding: 0 20px 90px;
  display: flex;
}
@media (width <= 960px) { .service-header { padding-top: 56px; } }
@media (width <= 640px) { .service-cards .card { width: 100%; } }
@media (width <= 560px) {
  .service-header, .service-filters, .service-cards { padding-left: 16px; padding-right: 16px; }
}

/* Tab button (pink) */
.tab-btn {
  background: var(--c-pink-soft);
  border-top: 2px solid var(--c-border);
  border-left: 2px solid var(--c-border);
  border-right: 2px solid var(--c-border);
  border-bottom: 0;
  box-shadow: 0 6px 0 1px var(--c-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-clip: padding-box;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  height: 46px;
  padding: 10px 24px;
  transition: translate .1s, box-shadow .1s, background .15s;
  display: inline-flex;
  text-decoration: none;
}
.tab-btn .label { color: var(--c-text); text-align: center; white-space: nowrap; font-size: 16px; font-weight: 400; line-height: normal; transform: skew(-3deg); }
.tab-btn.active { background: var(--c-pink); color: var(--c-on-accent); transform: rotate(-2deg); }
.tab-btn.active .label { color: var(--c-cream); font-weight: 600; }
.tab-btn:hover:not(.active) { background: var(--t-pink-tint); color: var(--c-on-accent); }
.tab-btn:active { box-shadow: 0 2px 0 1px var(--c-shadow); translate: 0 4px; }
.tab-btn:focus-visible { outline: 2px solid var(--c-border); outline-offset: 4px; }

/* Pill filter */
.filters { flex-wrap: wrap; align-items: center; gap: 10px; display: flex; }
.pill {
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-clip: padding-box;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  transition: translate .1s, box-shadow .1s, background .15s;
  display: inline-flex;
  text-decoration: none;
}
.pill .label { color: var(--c-text); text-align: center; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1; }
.pill.small .label { letter-spacing: .4px; font-size: 13px; }
.pill.active { background: var(--c-yellow); color: var(--c-on-accent); transform: rotate(-2deg); }
.pill:hover:not(.active) { background: var(--t-warn-bg-strong); color: var(--c-on-accent); }
.pill:active { box-shadow: 0 0 0 1px var(--c-shadow); translate: 2px 2px; }
.pill:focus-visible { outline: 2px solid var(--c-border); outline-offset: 3px; }
.pill.pinkish.active { background: var(--c-pink); }
.pill.pinkish.active .label { color: var(--c-cream); }

/* Plan card */
.card {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  width: min(376px, 100%);
  min-height: 520px;
  box-shadow: 6px 6px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 25px;
  flex-direction: column;
  padding: 24px 28px 30px;
  display: flex;
  position: relative;
}
.card .flag {
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
  width: 40px; height: 40px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 12px; right: 16px;
  font-size: 13px;
  font-weight: 800;
  color: var(--c-on-accent);
}
.card .flag.yellow { background: var(--c-yellow); }
.card .flag img { width: 100%; height: 100%; display: block; }
.card .flag:has(img) { padding: 0; overflow: hidden; isolation: isolate; background: var(--c-surface); }
.card .name { color: var(--c-text); font-size: 32px; font-weight: 600; line-height: 1.1; }
.card .price { margin-top: 10px; font-size: 20px; line-height: 1.4; }
.card .amount { color: var(--c-text); font-weight: 600; }
.card .period { color: var(--c-ink-a50); font-weight: 300; }
.card .features { flex-direction: column; gap: 20px; margin-top: 26px; padding-bottom: 26px; display: flex; }
.feature { align-items: center; gap: 14px; display: flex; }
.feature .icon {
  background: var(--c-yellow);
  border: 2px solid var(--c-border);
  width: 40px; height: 40px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-on-accent);
  background-clip: padding-box;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}
.feature .icon .ic { --icon-size: 20px; }
.feature .texts { flex-direction: column; min-width: 0; display: flex; }
.feature .label { color: var(--c-ink-a50); font-size: 15px; font-weight: 300; line-height: 1.5; }
.feature .value { color: var(--c-text); font-size: 15px; font-weight: 600; line-height: 1.5; }
.buy {
  background: var(--c-pink);
  border: 3px solid var(--c-border);
  width: 100%;
  height: 58px;
  box-shadow: 3px 3px 0 1px var(--c-shadow);
  color: var(--c-cream);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-clip: padding-box;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  transition: translate .1s, box-shadow .1s;
  display: inline-flex;
}
.buy:hover { box-shadow: 2px 2px 0 1px var(--c-shadow); translate: 1px 1px; }
.buy:active { box-shadow: 0 0 0 1px var(--c-shadow); translate: 3px 3px; }
.buy:focus-visible { outline: 2px solid var(--c-border); outline-offset: 3px; }
.buy:disabled { background: var(--c-pink-soft); color: var(--c-ink-a45); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Why us
   -------------------------------------------------------------------------- */
.why-grid { flex-wrap: wrap; justify-content: center; gap: 26px; margin-top: 46px; display: flex; }
.why-item {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  max-width: 380px;
  box-shadow: 6px 6px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 25px;
  flex-direction: column;
  flex: 300px;
  gap: 10px;
  padding: 26px 28px;
  display: flex;
}
.why-item .icon {
  background: var(--c-yellow);
  border: 2px solid var(--c-border);
  width: 56px; height: 56px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-on-accent);
  background-clip: padding-box;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: flex;
  transform: rotate(-4deg);
}
.why-item .icon .ic { --icon-size: 26px; }
.why-item .item-title { color: var(--c-text); font-size: 22px; font-weight: 700; }
.why-item .item-text { color: var(--c-ink-a60); font-size: 15px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */
.strip { flex-wrap: wrap; justify-content: center; gap: 26px; padding: 0 20px 70px; display: flex; }
.stat {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  max-width: 330px;
  box-shadow: 6px 6px 0 1px var(--c-shadow);
  transform: rotate(var(--rot, 0deg));
  background-clip: padding-box;
  border-radius: 25px;
  flex-direction: column;
  flex: 240px;
  gap: 8px;
  padding: 26px 30px;
  display: flex;
}
.stat .value { letter-spacing: -1px; color: var(--c-pink-light); font-size: 42px; font-weight: 700; line-height: 1; }
.stat .label { color: var(--c-ink-a60); font-size: 15px; line-height: 1.4; }
@media (width <= 560px) {
  .strip { gap: 18px; padding: 50px 16px; }
  .stat { flex-basis: 100%; max-width: none; }
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
.reviews-grid { flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 30px; margin-top: 46px; display: flex; }
.review {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  max-width: 400px;
  box-shadow: 6px 6px 0 1px var(--c-shadow);
  transform: rotate(var(--rot, 0deg));
  background-clip: padding-box;
  border-radius: 25px;
  flex-direction: column;
  flex: 300px;
  gap: 14px;
  margin: 0;
  padding: 28px 30px;
  display: flex;
}
.review .stars { color: var(--c-sun); gap: 6px; display: flex; }
.review .stars .ic { --icon-size: 18px; }
.review .stars .dim { color: var(--c-ink-a20); }
.review .text { color: var(--c-text); margin: 0; font-size: 16px; line-height: 1.55; }
.review .author {
  color: var(--c-pink-light);
  margin-top: auto;
  font-family: Caveat, cursive;
  font-size: 24px;
  font-weight: 700;
  transform: rotate(-1deg);
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.steps { flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 34px; margin-top: 56px; display: flex; }
.step {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  max-width: 400px;
  box-shadow: 6px 6px 0 1px var(--c-shadow);
  transform: rotate(var(--rot, 0deg));
  background-clip: padding-box;
  border-radius: 25px;
  flex-direction: column;
  flex: 280px;
  gap: 10px;
  padding: 44px 30px 30px;
  display: flex;
  position: relative;
}
.step .num {
  background: var(--c-pink);
  border: 2px solid var(--c-border);
  width: 56px; height: 56px;
  box-shadow: 3px 3px 0 1px var(--c-shadow);
  color: var(--c-cream);
  background-clip: padding-box;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: -26px; left: 24px;
}
.step .step-title { color: var(--c-text); font-size: 22px; font-weight: 700; }
.step .step-text { color: var(--c-ink-a60); font-size: 15px; line-height: 1.5; }
.steps-block { padding-bottom: 76px; }

/* --------------------------------------------------------------------------
   Promo banner
   -------------------------------------------------------------------------- */
.promo { padding: 80px 20px; }
.banner {
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  box-shadow: 10px 10px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 30px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 50px 60px;
  display: flex;
  transform: rotate(-1deg);
}
.banner .texts { flex-direction: column; gap: 10px; display: flex; }
.banner .kicker {
  background: var(--c-green-light);
  border: 2px solid var(--c-border);
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-on-accent);
  background-clip: padding-box;
  border-radius: 999px;
  align-self: flex-start;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 700;
  transform: rotate(-2deg);
}
.banner .banner-title {
  letter-spacing: -1px;
  color: var(--c-text);
  text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  transform: skew(-6deg);
}
.banner .note { color: var(--c-pink-light); font-family: Caveat, cursive; font-size: 30px; font-weight: 700; }
.banner .action { transform: rotate(2deg); }
@media (width <= 720px) {
  .promo { padding: 60px 16px 150px; }
  .banner { padding: 36px 26px; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 1000px; margin: 0 auto; padding: 70px 20px 170px; }
.faq-list { flex-direction: column; gap: 16px; margin-top: 40px; display: flex; }
.faq-item {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  box-shadow: 4px 4px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 18px;
}
.faq-item summary {
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-size: 17px;
  font-weight: 700;
  list-style: none;
  display: flex;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus {
  background: var(--c-yellow);
  border: 2px solid var(--c-border);
  width: 30px; height: 30px;
  box-shadow: 1px 1px 0 1px var(--c-shadow);
  color: var(--c-on-accent);
  background-clip: padding-box;
  border-radius: 999px;
  flex-shrink: 0;
  transition: rotate .15s;
  position: relative;
}
.faq-item .plus::before, .faq-item .plus::after {
  content: "";
  background: var(--c-ink);
  border-radius: 2px;
  width: 12px; height: 3px;
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
}
.faq-item .plus::after { rotate: 90deg; }
.faq-item[open] .plus { rotate: 45deg; }
.faq-item .answer { color: var(--c-ink-a65); padding: 0 22px 20px; font-size: 15px; line-height: 1.6; }
@media (width <= 560px) { .faq { padding: 56px 16px 70px; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { flex-shrink: 0; }
.footer-wave {
  z-index: 1;
  background-image: var(--wave-footer);
  background-repeat: repeat-x;
  background-size: 480px 56px;
  height: 56px;
  margin-top: -56px;
  position: relative;
}
.footer-body { background: var(--c-footer); color: var(--c-cream); padding: 40px 20px 50px; }
.footer-inner { flex-direction: column; gap: 50px; display: flex; }
.footer-top { flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; display: flex; }
.footer-brand { flex-direction: column; gap: 24px; display: flex; }
.footer-legal { flex-direction: column; gap: 4px; font-size: 18px; line-height: 1.4; display: flex; }
.footer-nav { flex-wrap: wrap; gap: 40px 70px; display: flex; }
.footer-col { flex-direction: column; gap: 10px; display: flex; }
.footer-col-title { color: var(--c-cream); margin-bottom: 6px; font-size: 17px; font-weight: 700; }
.footer-link { color: var(--c-cream); opacity: .8; font-size: 15px; text-decoration: none; transition: opacity .15s, translate .15s; }
.footer-link:hover { opacity: 1; translate: 3px; }
.footer-bottom { opacity: .85; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; display: flex; }
.footer-tagline { font-family: Caveat, cursive; font-size: 26px; font-weight: 700; transform: rotate(-2deg); }
.social-links { flex-wrap: wrap; gap: 12px; display: flex; --link-size: 40px; --icon-size: 18px; }
.social-link {
  width: var(--link-size); height: var(--link-size);
  background: var(--c-cream);
  color: var(--c-footer);
  border: 2px solid var(--c-border-cream);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: translate .15s, box-shadow .15s, background-color .15s;
  display: inline-flex;
  box-shadow: 2px 2px #00000026;
}
.social-link:hover { background: var(--c-yellow); color: var(--c-on-accent); translate: 2px 2px; box-shadow: 0 0 #00000026; }
.social-link:focus-visible { outline: 2px solid var(--c-border-cream); outline-offset: 3px; }
@media (width <= 700px) {
  .footer-body { padding: 30px 16px 40px; }
  .footer-nav { gap: 30px 40px; }
  .footer-bottom { text-align: center; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { flex-direction: column; gap: 6px; min-width: 0; display: flex; }
.flabel { color: var(--c-text); font-size: 13.5px; font-weight: 600; }
.flabel .req { color: var(--c-pink); margin-left: 2px; }
.input-wrap { align-items: center; display: flex; position: relative; }
/* z-index: a focused .input gets `translate`, i.e. its own stacking context, and would paint over the icon */
.input-wrap .lead { color: var(--c-ink-a45); pointer-events: none; z-index: 1; display: flex; position: absolute; left: 14px; --icon-size: 18px; }
.input {
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
  width: 100%;
  height: 46px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-text);
  border-radius: 12px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  background-clip: padding-box;
  transition: translate .1s, box-shadow .1s, background-color .15s;
}
.input::placeholder { color: var(--c-ink-a45); }
.input-wrap .lead + .input { padding-left: 42px; }
.input:hover { background: var(--c-surface); }
.input:focus { background: var(--c-surface); outline: none; box-shadow: 1px 1px 0 1px var(--c-shadow); translate: 1px 1px; }
.input:focus-visible { outline: none; }

.select {
  appearance: none;
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
  width: 100%;
  height: 42px;
  box-shadow: 3px 3px 0 1px var(--c-shadow);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  background-clip: padding-box;
  border-radius: 12px;
  padding: 0 44px 0 14px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  transition: translate .1s, box-shadow .1s, background-color .15s;
}
.select:hover { background: var(--c-surface); box-shadow: 2px 2px 0 1px var(--c-shadow); translate: 1px 1px; }
.select:focus { background: var(--c-surface); outline: none; }
.select:focus-visible { outline: none; }
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap .chev {
  background: var(--c-pink-soft);
  border: 2px solid var(--c-border);
  width: 26px; height: 26px;
  color: var(--c-text);
  pointer-events: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  right: 8px;
  --icon-size: 14px;
}

/* Primary form button */
.form-btn {
  background: var(--c-pink);
  border: 2px solid var(--c-border);
  width: 100%;
  height: 46px;
  box-shadow: 0 5px 0 1px var(--c-shadow);
  color: var(--c-cream);
  cursor: pointer;
  user-select: none;
  background-clip: padding-box;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: translate .1s, box-shadow .1s, background .15s;
  display: inline-flex;
}
.form-btn:hover { background: var(--c-pink-dark); }
.form-btn:active { box-shadow: 0 1px 0 1px var(--c-shadow); translate: 0 4px; }
.form-btn:focus-visible { outline: 2px solid var(--c-border); outline-offset: 3px; }
.form-btn:disabled { background: var(--c-pink-soft); color: var(--c-ink-a45); cursor: not-allowed; }
.form-btn.ghost { background: var(--c-surface); color: var(--c-text); box-shadow: 3px 3px 0 1px var(--c-shadow); }
.form-btn.ghost:hover { background: var(--c-pink-soft); }
.form-btn.ghost:active { box-shadow: 0 0 0 1px var(--c-shadow); translate: 3px 3px; }
.form-btn.yellow { background: var(--c-yellow); color: var(--c-on-accent); }
.form-btn.yellow:hover { background: var(--c-yellow-soft); }
.form-btn .ic { --icon-size: 18px; }

/* --------------------------------------------------------------------------
   Auth page
   -------------------------------------------------------------------------- */
main.auth-main { justify-content: center; align-items: center; padding: 40px 20px; }
/* fixed-width column: otherwise a long line of text stretches it and the card drifts off-centre */
main.auth-main > div { width: min(445px, 100%); }
.auth-card {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  width: min(445px, 100%);
  box-shadow: 8px 8px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 20px;
  flex-direction: column;
  gap: 18px;
  padding: 30px 30px 28px;
  display: flex;
}
.auth-logo { justify-content: center; display: flex; }
.auth-title { text-align: center; color: var(--c-text); font-size: 22px; font-weight: 700; transform: skew(-4deg); }
.segmented {
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  display: flex;
}
.segmented button {
  flex: 1;
  height: 36px;
  border: 2px solid #0000;
  border-radius: 8px;
  background: none;
  color: var(--c-ink-a55);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s, color .15s, box-shadow .1s;
}
.segmented button.active {
  background: var(--c-pink);
  border-color: var(--c-border);
  color: var(--c-cream);
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  background-clip: padding-box;
}
.segmented button:hover:not(.active) { color: var(--c-text); background: var(--c-pink-soft); }
.auth-form { flex-direction: column; gap: 14px; display: flex; }
.auth-form[hidden] { display: none; }
.auth-link { color: var(--c-pink); text-align: center; font-size: 14px; font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.divider { color: var(--c-ink-a45); align-items: center; gap: 12px; font-size: 13px; display: flex; }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: var(--c-ink-a15); border-radius: 2px; }
.auth-back {
  color: var(--c-ink-a55);
  margin-top: 18px;
  font-family: Caveat, cursive;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  transform: rotate(-2deg);
  display: inline-block;
}
.auth-back:hover { color: var(--c-pink); }
.auth-hint { color: var(--c-ink-a50); font-size: 12.5px; line-height: 1.4; }
.auth-link.as-button { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.tg-logo { color: #2AABEE; --icon-size: 22px; }
.tg-wait { align-items: center; text-align: center; padding-top: 6px; }
.tg-wait .tg-pulse { --icon-size: 56px; animation: 1.6s ease-in-out infinite tg-pulse; }
.tg-wait-text { color: var(--c-text); font-size: 15px; line-height: 1.45; margin: 0; }
.tg-wait-bot { color: var(--c-ink-a60); font-size: 14px; font-weight: 700; margin: 0; }
.tg-wait .form-btn { width: 100%; }
@keyframes tg-pulse { 50% { transform: scale(1.1); } }
/* email steps: code from the letter, link confirmation, password reset */
.mail-step { align-items: center; text-align: center; padding-top: 6px; }
.mail-step .field, .mail-step .form-btn { width: 100%; }
.mail-step .flabel { text-align: left; }
.mail-badge {
  --icon-size: 28px;
  background: var(--c-yellow);
  border: 2px solid var(--c-border);
  width: 58px; height: 58px;
  box-shadow: 3px 3px 0 1px var(--c-shadow);
  color: var(--c-on-accent);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  rotate: -6deg;
}
.mail-badge.tg-pulse { animation: 1.6s ease-in-out infinite tg-pulse; }
.code-input {
  height: 58px;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 12px;
  padding: 0 4px 0 16px;
  font-variant-numeric: tabular-nums;
}
.code-input::placeholder { letter-spacing: 10px; font-weight: 400; }
.auth-hint.center { text-align: center; }
.auth-link.muted { color: var(--c-ink-a55); }
.auth-link:disabled { color: var(--c-ink-a45); cursor: default; text-decoration: none; }
.form-ok {
  background: var(--t-green-bg);
  border: 2px solid var(--c-border);
  color: var(--t-green-strong);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
:root[data-theme="dark"] .form-ok { background: var(--c-surface-2); color: var(--c-text); }
.demo-note { font-size: 14px; margin: 24px 0 0; }
.form-error { color: var(--t-red); font-size: 13px; font-weight: 600; min-height: 0; }
.form-error:empty { display: none; }
.auth-theme { position: fixed; top: 20px; right: 20px; z-index: 10; }

/* --------------------------------------------------------------------------
   Panel (dashboard)
   -------------------------------------------------------------------------- */
.panel-header { padding: 20px 20px 0; }
.panel-bar {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  box-shadow: 4px 4px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 24px;
  padding: 12px 18px;
  display: flex;
}
.panel-bar-left { align-items: center; gap: 24px; display: flex; flex-wrap: wrap; }
.panel-nav { gap: 6px; display: flex; flex-wrap: wrap; }
.panel-nav a {
  color: var(--c-ink-a60);
  border: 2px solid #0000;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.panel-nav a:hover { background: var(--c-pink-soft); color: var(--c-text); }
.panel-nav a.active { background: var(--c-yellow); color: var(--c-on-accent); border-color: var(--c-border); box-shadow: 2px 2px 0 1px var(--c-shadow); background-clip: padding-box; transform: rotate(-2deg); }
.panel-bar-right { align-items: center; gap: 12px; display: flex; flex-wrap: wrap; }

.user-chip {
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 14px;
  display: flex;
}
.avatar {
  background: var(--c-yellow);
  border: 2px solid var(--c-border);
  width: 34px; height: 34px;
  color: var(--c-on-accent);
  background-clip: padding-box;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  transform: rotate(-6deg);
}
.nick { color: var(--c-text); font-size: 15px; font-weight: 700; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance {
  background: var(--c-pink);
  border: 2px solid var(--c-border);
  color: var(--c-cream);
  background-clip: padding-box;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.icon-btn {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  width: 38px; height: 38px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-text);
  cursor: pointer;
  background-clip: padding-box;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  transition: background .15s, box-shadow .1s, translate .1s;
  --icon-size: 18px;
}
.icon-btn:hover { background: var(--c-pink-soft); }
.icon-btn:active { box-shadow: 0 0 0 1px var(--c-shadow); translate: 2px 2px; }
.icon-btn:focus-visible { outline: 2px solid var(--c-border); outline-offset: 3px; }
.user-chip .icon-btn {
  width: 34px; height: 34px;
  border-radius: 999px;
  box-shadow: none;
  background: var(--c-yellow);
  --icon-size: 16px;
}
.user-chip .icon-btn:hover { background: var(--c-yellow-soft); }
.user-chip .icon-btn:active { translate: 0; transform: scale(.94); }

.panel-main { padding: 34px 20px 90px; }
.panel-head { flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; display: flex; }
.panel-tabs { margin-top: 30px; }
.panel-tabs .filters { gap: 10px; }

/* Data card + table (ported from lili's domains table) */
.dcard {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  width: 100%;
  box-shadow: 6px 6px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 25px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
  margin-top: 30px;
}
.toolbar { flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 22px 26px 20px; display: flex; }
.search { flex-direction: column; gap: 8px; display: flex; }
.search-label { color: var(--c-text); font-size: 15px; font-weight: 600; }
.search .input { width: min(320px, 100%); }
.pickers { flex-wrap: wrap; align-items: flex-end; gap: 12px; display: flex; }
.pickers .picker { width: min(220px, 100%); }
.filter-fields { flex: 1 1 100%; }
.filter-fields .picker { width: min(200px, 100%); }
.filter-fields .picker.narrow { width: min(140px, 100%); }
.filter-fields .input { height: 42px; box-shadow: 3px 3px 0 1px var(--c-shadow); font-size: 14.5px; }
.pickers .flabel { font-size: 15px; font-weight: 600; }
.count { color: var(--c-ink-a50); white-space: nowrap; padding-bottom: 4px; font-size: 14px; }
.table-wrap { border-top: 2px solid var(--c-border); overflow: auto; }
.pager { border-top: 2px solid var(--c-border); flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 16px 18px; display: flex; }
.perpage { align-items: center; gap: 12px; display: flex; flex-wrap: wrap; }
.perpage-label { color: var(--c-ink-a60); font-size: 14px; white-space: nowrap; }
@media (width <= 720px) { .pager { justify-content: center; } }
table.ptable { border-collapse: collapse; width: 100%; min-width: 980px; }
.ptable thead th {
  z-index: 1;
  background: var(--c-yellow);
  border-bottom: 2px solid var(--c-border);
  letter-spacing: .4px;
  text-align: left;
  text-transform: uppercase;
  color: var(--c-on-accent);
  white-space: nowrap;
  padding: 14px 14px;
  font-size: 14px;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.ptable thead th.sortable { cursor: pointer; user-select: none; }
.ptable thead th.sortable:hover { background: var(--c-yellow-soft); }
.ptable thead th .sort { opacity: .5; margin-left: 4px; font-size: 11px; }
.ptable thead th.sorted .sort { opacity: 1; }
.ptable tbody td {
  border-bottom: 1px solid var(--c-ink-a10);
  color: var(--c-text);
  padding: 12px 14px;
  font-size: 15px;
  white-space: nowrap;
}
.ptable thead th:first-child, .ptable tbody td:first-child { padding-left: 22px; }
.ptable thead th:last-child, .ptable tbody td:last-child { padding-right: 22px; text-align: right; }
.ptable tbody tr:nth-child(2n) { background: var(--c-bg); }
.ptable tbody tr:hover { background: var(--c-pink-soft); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable .ip { font-weight: 700; font-variant-numeric: tabular-nums; }
.ptable .domain { color: var(--c-ink-a65); font-size: 14px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
@media (width <= 1280px) { .ptable .per { display: none; } .ptable .domain { max-width: 200px; } }
.ptable .price { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.ptable .per { color: var(--c-ink-a45); margin-left: 6px; font-size: 13px; font-weight: 300; }
.ptable .empty { text-align: center; color: var(--c-ink-a55); font-weight: 400; padding: 40px 18px !important; }
.ptable .empty .note { color: var(--c-pink); font-family: Caveat, cursive; font-size: 34px; font-weight: 700; display: block; transform: rotate(-1deg); }
.ping { align-items: center; gap: 8px; display: inline-flex; font-variant-numeric: tabular-nums; }
.ping::before { content: ""; width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--c-border); background: var(--t-green-fg); }
.ping.mid::before { background: var(--c-yellow); }
.ping.slow::before { background: var(--t-red-fill); }
.type {
  border: 2px solid var(--c-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  background-clip: padding-box;
  display: inline-block;
  transform: rotate(-2deg);
  color: var(--c-on-accent);
}
.type.isp { background: var(--t-green-bg); }
.type.mob { background: var(--t-warn-bg-strong); }
.type.ispmob { background: var(--c-pink-soft); }
.type.com { background: var(--t-cyan); }
.type.org { background: var(--t-gray-bg); }
:root[data-theme="dark"] .type { color: var(--c-text); }
.row-buy {
  background: var(--c-pink);
  border: 2px solid var(--c-border);
  height: 34px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-cream);
  cursor: pointer;
  background-clip: padding-box;
  border-radius: 10px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  transition: translate .1s, box-shadow .1s;
  display: inline-flex;
  align-items: center;
}
.row-buy:hover { box-shadow: 1px 1px 0 1px var(--c-shadow); translate: 1px 1px; }
.row-buy:active { box-shadow: 0 0 0 1px var(--c-shadow); translate: 2px 2px; }
@media (width <= 720px) {
  .ptable thead th, .ptable tbody td { padding: 10px 12px; font-size: 13px; }
  .ptable .per { display: none; }
  .toolbar { padding: 18px 16px 16px; }
}
@media (width <= 560px) {
  .panel-header { padding: 16px 16px 0; }
  .panel-main { padding: 26px 16px 70px; }
  .panel-bar-left, .panel-bar-right { width: 100%; }
  .panel-bar-right { justify-content: space-between; flex-wrap: nowrap; }
  .user-chip { flex: 1; min-width: 0; }
  .nick { flex: 1; max-width: none; }
}

/* Location picker */
.locs { margin-top: 30px; }
.locs-body { display: flex; align-items: stretch; }
.locs-regions {
  flex: 0 0 230px;
  border-right: 2px solid var(--c-border);
  padding: 14px;
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.region-btn {
  background: none;
  border: 2px solid #0000;
  border-radius: 10px;
  color: var(--c-ink-a65);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  display: flex;
  transition: background .15s, color .15s;
}
.region-btn .n { color: var(--c-ink-a45); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.region-btn:hover:not(.active) { background: var(--c-pink-soft); color: var(--c-text); }
.region-btn.active {
  background: var(--c-yellow);
  color: var(--c-on-accent);
  border-color: var(--c-border);
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  background-clip: padding-box;
  transform: rotate(-1.5deg);
}
.region-btn.active .n { color: var(--c-on-accent); }
.locs-grid {
  flex: 1;
  min-width: 0;
  max-height: 330px;
  overflow: auto;
  padding: 14px 18px;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  display: flex;
}
.locs-grid::-webkit-scrollbar { width: 8px; }
.locs-grid::-webkit-scrollbar-thumb { background: var(--c-ink-a28); border-radius: 999px; }
.loc-chip {
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-text);
  cursor: pointer;
  background-clip: padding-box;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px 0 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  transition: translate .1s, box-shadow .1s, background .15s;
}
.loc-chip .flag { width: 18px; height: 18px; border-radius: 999px; display: block; }
.loc-chip .n { color: var(--c-ink-a50); font-weight: 500; font-variant-numeric: tabular-nums; }
.loc-chip:hover:not(.active) { background: var(--t-warn-bg-strong); }
.loc-chip:active { box-shadow: 0 0 0 1px var(--c-shadow); translate: 2px 2px; }
.loc-chip.active { background: var(--c-pink); color: var(--c-cream); transform: rotate(-2deg); }
.loc-chip.active .n { color: var(--c-cream); opacity: .85; }
.loc-chip:focus-visible { outline: 2px solid var(--c-border); outline-offset: 3px; }
.locs-footer {
  border-top: 2px solid var(--c-border);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  display: flex;
}
.locs-summary { color: var(--c-ink-a60); font-size: 14px; }
#toggle-filters .ic:last-child { transition: transform .15s; }
#toggle-filters.active .ic:last-child { transform: rotate(180deg); }
@media (width <= 720px) {
  .locs-body { flex-direction: column; }
  .locs-regions { flex: none; border-right: 0; border-bottom: 2px solid var(--c-border); flex-direction: row; flex-wrap: wrap; }
  .region-btn { padding: 6px 10px; font-size: 13px; }
  .locs-grid { max-height: 240px; padding: 12px; }
}

/* Pagination */
.pagination { flex-wrap: wrap; align-items: center; gap: 6px; display: flex; }
.pg {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  min-width: 34px; height: 34px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-text);
  cursor: pointer;
  background-clip: padding-box;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  transition: translate .1s, box-shadow .1s, background-color .12s;
  display: inline-flex;
}
.pg:hover:not(:disabled):not(.active) { background: var(--c-pink-soft); }
.pg:active:not(:disabled) { box-shadow: 0 0 0 1px var(--c-shadow); translate: 2px 2px; }
.pg.active { background: var(--c-pink); color: var(--c-cream); cursor: default; }
.pg:disabled { opacity: .4; cursor: not-allowed; }
.dots { color: var(--c-ink-a50); padding: 0 3px; font-weight: 700; }

/* Empty states for non-implemented tabs */
.empty-state { text-align: center; flex-direction: column; align-items: center; gap: 8px; margin-top: 46px; padding: 60px 20px 90px; display: flex; transform: rotate(-1deg); }
.empty-note { color: var(--c-pink); font-family: Caveat, cursive; font-size: 40px; font-weight: 700; }
.empty-hint { color: var(--c-ink-a55); font-size: 17px; }

/* --------------------------------------------------------------------------
   Document pages (terms & conditions)
   -------------------------------------------------------------------------- */
.doc { padding: 20px 20px 150px; }
.doc-head { margin-bottom: 34px; }
.doc-updated {
  background: var(--c-yellow-soft);
  border: 2px solid var(--c-border);
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-on-accent);
  background-clip: padding-box;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 700;
  transform: rotate(-1deg);
}
.doc-layout { align-items: flex-start; gap: 30px; display: flex; }
.doc-toc {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  box-shadow: 4px 4px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 18px;
  flex: 0 0 280px;
  padding: 14px;
  position: sticky;
  top: 120px;
}
.doc-toc-title { color: var(--c-ink-a50); text-transform: uppercase; letter-spacing: .4px; padding: 4px 10px 10px; font-size: 12.5px; font-weight: 700; }
.doc-toc a {
  color: var(--c-ink-a65);
  border: 2px solid #0000;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: block;
  transition: background .15s, color .15s;
}
.doc-toc a:hover { background: var(--c-pink-soft); color: var(--c-text); }
.doc-toc a.active {
  background: var(--c-yellow);
  color: var(--c-on-accent);
  border-color: var(--c-border);
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  background-clip: padding-box;
  transform: rotate(-1deg);
}
.doc-body {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  box-shadow: 6px 6px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 25px;
  flex: 1;
  min-width: 0;
  padding: 40px 44px;
  font-size: 15.5px;
  line-height: 1.6;
}
.doc-body section + section { border-top: 2px dashed var(--c-ink-a15); margin-top: 44px; padding-top: 36px; }
.doc-body h2 {
  letter-spacing: -.5px;
  color: var(--c-text);
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: 700;
  scroll-margin-top: 120px;
  transform: skew(-6deg) rotate(-1deg);
  transform-origin: left center;
}
.doc-body h3 { color: var(--c-text); margin: 24px 0 10px; font-size: 18px; font-weight: 700; }
.doc-body p { color: var(--c-text); margin: 0 0 12px; }
.doc-body ul { margin: 0 0 14px; padding: 0; }
.doc-body ul li { position: relative; padding-left: 26px; margin: 6px 0; }
.doc-body ul li::before {
  content: "";
  background: var(--c-yellow);
  border: 2px solid var(--c-border);
  width: 10px; height: 10px;
  border-radius: 999px;
  position: absolute;
  left: 4px; top: .5em;
}
.doc-body ul.no li::before { background: var(--t-red-fill); }
.doc-body ul.ok li::before { background: var(--c-green-light); }
.doc-body ul.devices li { padding-left: 46px; margin: 10px 0; }
.doc-body ul.devices li::before { display: none; }
.doc-body .dev {
  background: var(--c-yellow);
  border: 2px solid var(--c-border);
  width: 32px; height: 32px;
  box-shadow: 2px 2px 0 1px var(--c-shadow);
  color: var(--c-on-accent);
  background-clip: padding-box;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  left: 0; top: -2px;
  transform: rotate(-4deg);
  --icon-size: 16px;
}
.doc-body ol { margin: 0 0 14px; padding-left: 24px; }
.doc-body ol li { padding-left: 4px; margin: 6px 0; }
.doc-body code {
  background: var(--c-bg);
  border: 1px solid var(--c-ink-a15);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .92em;
}
.callout {
  background: var(--c-pink-soft);
  border: 2px solid var(--c-border);
  box-shadow: 3px 3px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 14px;
  margin: 16px 0;
  padding: 14px 18px;
}
.callout b { font-weight: 800; }
.doc-table { border-collapse: collapse; width: 100%; margin: 10px 0 16px; font-size: 14.5px; }
.doc-table th {
  background: var(--c-yellow);
  border: 2px solid var(--c-border);
  color: var(--c-on-accent);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
}
.doc-table td { border: 2px solid var(--c-border); padding: 8px 12px; vertical-align: middle; }
.doc-table tr:nth-child(2n) td { background: var(--c-bg); }
.doc-table .type { transform: none; }
.doc-body .type { background: var(--t-gray-bg); }
.doc-body .type.isp { background: var(--t-green-bg); }
.doc-body .type.mob { background: var(--t-warn-bg-strong); }
.doc-body .type.ispmob { background: var(--c-pink-soft); }
.doc-body .type.com { background: var(--t-cyan); }
.doc-body .type.org { background: var(--t-gray-bg); }
.doc-faq { margin-top: 0; }
.doc-faq .faq-item summary { font-size: 15.5px; }
.doc-sign {
  color: var(--c-pink-light);
  margin-top: 40px;
  font-family: Caveat, cursive;
  font-size: 28px;
  font-weight: 700;
  transform: rotate(-1deg);
}
@media (width <= 960px) {
  .doc-layout { flex-direction: column; }
  .doc-toc { flex: none; width: 100%; position: static; }
  .doc-toc a { display: inline-block; margin: 2px; }
  .doc-body { padding: 26px 20px; }
  .doc-body h2 { font-size: 24px; }
}
@media (width <= 560px) { .doc { padding: 10px 16px 120px; } }

/* --------------------------------------------------------------------------
   Modal & toast
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--c-bg-alpha); }
.modal.open { display: flex; }
.modal-card {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  width: min(440px, 100%);
  box-shadow: 8px 8px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 22px;
  flex-direction: column;
  gap: 16px;
  padding: 26px 28px;
  display: flex;
  transform: rotate(-.5deg);
}
.modal-title { color: var(--c-text); font-size: 24px; font-weight: 700; transform: skew(-4deg); }
.modal-text { color: var(--c-ink-a65); font-size: 15px; line-height: 1.5; }
.modal-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 10px 0; border-bottom: 1px solid var(--c-ink-a10); }
.modal-row:last-of-type { border-bottom: 0; }
.modal-row b { font-weight: 700; }
.modal-actions { display: flex; gap: 12px; margin-top: 6px; }
.modal-actions .form-btn { flex: 1; }
.amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  z-index: 400;
  translate: -50% 0;
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  box-shadow: 4px 4px 0 1px var(--c-shadow);
  background-clip: padding-box;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  display: none;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
}
.toast.show { display: flex; }
.toast .ic { color: var(--t-green-fg); --icon-size: 18px; }
.toast.err .ic { color: var(--t-red); }

/* --------------------------------------------------------------------------
   Tickets
   -------------------------------------------------------------------------- */
.tk-layout { align-items: flex-start; gap: 30px; margin-top: 30px; display: flex; }
.tk-form-card { flex: 0 0 420px; margin-top: 0; }
.tk-list-card { flex: 1; min-width: 0; margin-top: 0; }
.tk-form { flex-direction: column; gap: 14px; padding: 24px 26px 26px; display: flex; }
.tk-h2 { color: var(--c-text); font-size: 22px; font-weight: 700; transform: skew(-4deg); margin-bottom: 4px; }
.tk-textarea { height: auto; min-height: 130px; padding: 12px 16px; resize: vertical; line-height: 1.45; }
.tk-list-head { color: var(--c-ink-a50); text-transform: uppercase; letter-spacing: .4px; font-size: 12.5px; font-weight: 700; padding: 18px 22px 0; }
.tk-list { flex-direction: column; gap: 12px; padding: 14px 22px 22px; display: flex; }
.tk-item { background: var(--c-surface-2); border: 2px solid var(--c-border); box-shadow: 3px 3px 0 1px var(--c-shadow); background-clip: padding-box; border-radius: 14px; }
.tk-item summary { cursor: pointer; list-style: none; align-items: center; gap: 12px; padding: 14px 18px; display: flex; flex-wrap: wrap; }
.tk-item summary::-webkit-details-marker { display: none; }
.tk-id { color: var(--c-ink-a45); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-subject { color: var(--c-text); font-size: 15px; font-weight: 700; flex: 1; min-width: 160px; }
.tk-date { color: var(--c-ink-a50); font-size: 13px; white-space: nowrap; }
.tk-status { border: 2px solid var(--c-border); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; background-clip: padding-box; white-space: nowrap; }
.tk-status.open { background: var(--c-yellow); color: var(--c-on-accent); }
.tk-status.answered { background: var(--t-green-bg); color: var(--c-text); }
.tk-status.closed { background: var(--t-gray-bg); color: var(--c-text); }
.tk-thread { border-top: 2px dashed var(--c-ink-a15); flex-direction: column; gap: 10px; padding: 14px 18px 18px; display: flex; }
.tk-msg { background: var(--c-surface); border: 2px solid var(--c-border); border-radius: 12px; padding: 10px 14px; max-width: 85%; align-self: flex-start; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.tk-msg.support { background: var(--c-pink-soft); align-self: flex-end; }
.tk-msg .who { color: var(--c-ink-a50); font-size: 12px; font-weight: 700; margin-bottom: 4px; display: block; }
.tk-reply { gap: 8px; margin-top: 4px; display: flex; }
.tk-reply .input { flex: 1; height: 42px; }
.tk-reply .form-btn { width: auto; height: 42px; padding: 0 16px; }
.tk-empty { color: var(--c-ink-a55); padding: 10px 0 6px; font-size: 15px; }
@media (width <= 960px) { .tk-layout { flex-direction: column; } .tk-form-card { flex: none; width: 100%; } }

/* --------------------------------------------------------------------------
   Admin
   -------------------------------------------------------------------------- */
.adm-strip { margin-top: 30px; padding: 0; justify-content: flex-start; }
.adm-strip .stat { flex: 200px; max-width: 260px; padding: 20px 24px; }
.adm-strip .stat .value { font-size: 34px; }
.adm-grid { flex-direction: column; gap: 30px; margin-top: 30px; display: flex; }
.adm-grid .dcard { width: 100%; margin-top: 0; }
.adm-card-title { color: var(--c-ink-a50); text-transform: uppercase; letter-spacing: .4px; font-size: 12.5px; font-weight: 700; padding: 18px 22px 12px; }
table.ptable.adm-table { min-width: 0; }
.adm-table tbody td { white-space: normal; }
.adm-toolbar { flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 22px; display: flex; }
.adm-toolbar .input { width: min(360px, 100%); }
.adm-tk-user { color: var(--c-ink-a55); font-size: 13px; white-space: nowrap; }
.adm-tk-actions { gap: 8px; margin-top: 4px; display: flex; flex-wrap: wrap; }
.adm-tk-actions .tk-textarea { min-height: 80px; flex: 1 1 100%; }
.adm-tk-actions .form-btn { width: auto; height: 42px; padding: 0 16px; }
.amount-pos { color: var(--t-green-strong); font-weight: 700; }
.amount-neg { color: var(--t-red); font-weight: 700; }