/* ============================================================
   AeroVPN — Minimal / premium redesign layer
   Loaded LAST (after theme_aurora.css). Visual only: no markup,
   class-name, route, or logic changes. Aesthetic target:
   Tailscale / Vercel / Linear — neutral, tech-forward, calm.

   Strategy: (1) define the new design tokens, (2) REMAP the
   legacy aurora tokens (--c-*, --aero-*, --au-radius-*, --wc-*,
   --shadow-*, --accent) onto them so every component that reads a
   var() adopts the new palette, (3) targeted !important overrides
   for components that hard-code gradients / pills / colors.
   Theme switch is `html[data-aurora-scheme="light"|"dark"]`
   (default dark); tokens live on `.aurora-body`.
   Remove this single <link> to fully revert.
   ============================================================ */

/* ================= 1. DESIGN TOKENS + LEGACY REMAP ================= */

/* Dark (default) — slate palette */
.aurora-body {
  --bg-page: #070D0C;
  --bg-sidebar: #0C1412;
  --bg-card: #111A18;
  --bg-input: rgba(1, 8, 7, 0.62);
  --bg-section: #0F1917;
  --border-default: #1D312D;
  --border-input: #243A35;
  --border-input-focus: #4CDDCE;
  --text-primary: #F0FFFE;
  --text-secondary: #8FB8B4;
  --text-muted: #5A8480;
  --text-label: #B8D4D1;
  --brand: #4CDDCE;
  --brand-hover: #2DD4BF;
  --brand-glow: rgba(76,221,206,0.18);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-elevated: 0 4px 32px rgba(0,0,0,0.40);
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --radius-badge: 6px;

  /* remap legacy aurora tokens → new palette */
  --c-bg: var(--bg-page); --c-bg-1: var(--bg-page); --c-bg-2: var(--bg-page);
  --c-surface: var(--bg-card); --c-surface-2: var(--bg-input); --c-surface-3: var(--bg-input);
  --c-border: var(--border-default); --c-border-2: var(--border-input); --c-border-3: var(--border-default);
  --c-text: var(--text-primary); --c-text-2: var(--text-secondary); --c-text-3: var(--text-muted); --c-text-muted: var(--text-secondary);
  --accent: var(--brand); --accent-2: var(--brand-hover); --accent-3: var(--brand-hover);
  --accent-glow: var(--brand-glow);
  --success: #14B8A6; --success-bg: rgba(20,184,166,0.12);
  --shadow-glow: none;
  --au-shadow-card: var(--shadow-card); --au-shadow-card-light: var(--shadow-card);
  --au-shadow-button: none;
  --au-radius-xs: 8px; --au-radius-sm: 10px; --au-radius-md: var(--radius-card); --au-radius-lg: var(--radius-card);
  --r-sm: 8px; --r-md: var(--radius-btn); --r-lg: var(--radius-card); --r-xl: var(--radius-card); --r-2xl: var(--radius-card);
  --aero-bg: var(--bg-page); --aero-bg-soft: var(--bg-page); --aero-surface: var(--bg-card);
  --aero-panel: var(--bg-card); --aero-panel-2: var(--bg-input); --aero-field: var(--bg-input);
  --aero-text: var(--text-primary); --aero-muted: var(--text-secondary); --aero-dim: var(--text-muted);
  --aero-accent: var(--brand); --aero-accent-hover: var(--brand-hover); --aero-accent-active: var(--brand-hover);
  --aero-link: var(--brand); --aero-outline: var(--border-default); --aero-divider: var(--border-default);
}

/* Light */
html[data-aurora-scheme="light"] .aurora-body {
  --bg-page: #F8FAFB;
  --bg-sidebar: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-input: #F9FAFB;
  --bg-section: #F0FDFA;
  --border-default: #E5E7EB;
  --border-input: #D1D5DB;
  --border-input-focus: #2DD4BF;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-label: #6B7280;
  --brand: #2DD4BF;
  --brand-hover: #14B8A6;
  --brand-glow: rgba(45,212,191,0.18);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-elevated: 0 4px 24px rgba(0,0,0,0.09);

  --aero-accent-hover: #14B8A6;
}

/* legacy --wc-* (some .wc-neo-* components) */
:root {
  --wc-text: #111827; --wc-muted: #6B7280;
  --wc-line: #E5E7EB; --wc-card: #FFFFFF;
  --wc-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --wc-radius-xl: 16px; --wc-radius-lg: 14px;
}

/* ================= 2. GLOBAL BACKGROUND ================= */
.aurora-body {
  background: var(--bg-page) !important;
  color: var(--text-primary);
}
/* kill ambient blobs + grid for a flat, premium surface */
.aurora-bg, .aurora-blob, .aurora-grid { display: none !important; }

/* ================= 3. CARDS / PANELS ================= */
.au-card, .m2-card, .reviews-card, .au-router-card, .ref-card,
.au-key-card, .au-metric, .au-section, .au-tariff-card,
.au-bypass-managed-card, .au-traffic-card,
.wc-neo-card, .panel, .card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}
/* nested cards: flatten so we never get block-in-block */
.au-card .au-card, .m2-card .m2-card, .au-card .m2-card, .m2-card .au-card,
.au-card .au-metric, .m2-card .au-metric, .au-card .au-key-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.au-card:hover, .m2-card:hover, .au-metric:hover,
.au-key-card:hover, .au-tariff-card:hover {
  transform: none !important;
  box-shadow: var(--shadow-card) !important;
  border-color: var(--border-default) !important;
}

/* ================= 4. BUTTONS ================= */
/* primary */
.au-btn, .m2-btn-primary, button.m2-btn-primary, a.m2-btn-primary,
button[type="submit"].au-btn:not(.au-btn-ghost),
button[type="submit"].m2-btn:not(.m2-btn-secondary) {
  background: var(--brand) !important;
  background-image: none !important;
  color: #04201C !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: background-color .15s ease, transform .15s ease !important;
}
.au-btn:hover, .m2-btn-primary:hover, button.m2-btn-primary:hover, a.m2-btn-primary:hover {
  background: var(--brand-hover) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
  box-shadow: none !important;
}
/* secondary / ghost / outline */
.au-btn-ghost, .m2-btn-secondary, button.m2-btn-secondary, a.m2-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.au-btn-ghost:hover, .m2-btn-secondary:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: transparent !important;
}
/* any remaining generic buttons: unify radius (no pills) */
.m2-btn, button.m2-btn, a.m2-btn { border-radius: var(--radius-btn) !important; }

/* Telegram auth button — same .au-btn form, but keeps the Telegram-blue surface
   so it's clearly the Telegram entry. This selector mirrors aurora's specificity
   (0,2,1) and loads later, so it must carry the light blue shadow/hover (not
   flatten them) to keep the button shaped like the other .au-btn primaries. */
.aurora-body a.auth-telegram-btn,
.aurora-body .auth-telegram-btn {
  min-height: 44px !important;   /* match .au-btn rendered height */
  box-shadow: rgba(34, 158, 217, .35) 0 4px 14px !important;   /* light Telegram-blue shadow, .au-btn weight */
}
.aurora-body a.auth-telegram-btn:hover,
.aurora-body .auth-telegram-btn:hover {
  transform: translateY(-1px) !important;   /* same lift as .au-btn:hover */
  filter: brightness(1.1) !important;       /* same brightness boost as .au-btn:hover */
  box-shadow: rgba(34, 158, 217, .5) 0 6px 20px !important;   /* stronger blue shadow on hover */
}

/* ================= 5. INPUTS ================= */
.m2-input, .au-input,
.aurora-body input[type="text"], .aurora-body input[type="email"],
.aurora-body input[type="password"], .aurora-body input[type="number"],
.aurora-body input[type="search"], .aurora-body input[type="tel"],
.aurora-body textarea, .aurora-body select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-input) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  /* Same subtle top highlight as the typeless "Логин" field so every input matches. */
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset !important;
}
/* iOS zooms the page on focus when an input's font-size < 16px. Force 16px on
   mobile so Safari/Chrome leave the viewport scale alone. */
@media (max-width: 900px) {
  .m2-input, .au-input,
  .aurora-body input[type="text"],
  .aurora-body input[type="email"],
  .aurora-body input[type="password"],
  .aurora-body input[type="number"],
  .aurora-body input[type="search"],
  .aurora-body input[type="tel"],
  .aurora-body textarea,
  .aurora-body select {
    font-size: 16px !important;
  }
}
.m2-input:focus, .au-input:focus,
.aurora-body input:focus, .aurora-body textarea:focus, .aurora-body select:focus {
  border-color: var(--border-input-focus) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
  outline: none !important;
}
.aurora-body input::placeholder, .aurora-body textarea::placeholder { color: var(--text-muted) !important; }
/* Browser autofill: keep the field's own (dark) background instead of the UA
   light/blue fill, so autofilled inputs match the rest. The long transition
   suppresses Chromium's autofill background paint; var() keeps it theme-aware. */
.aurora-body input:-webkit-autofill,
.aurora-body input:-webkit-autofill:hover,
.aurora-body input:-webkit-autofill:focus,
.aurora-body input:-webkit-autofill:active,
.aurora-body textarea:-webkit-autofill,
.aurora-body select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}

/* ================= 6. TYPOGRAPHY ================= */
.au-eyebrow, .au-overline, .au-section-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.au-muted, .m2-muted, .ref-muted { color: var(--text-secondary) !important; }
.aurora-content a:not(.au-btn):not(.m2-btn):not(.m2-btn-primary):not(.m2-btn-secondary):not(.au-btn-ghost) {
  color: var(--brand) !important;
  text-decoration: none !important;
}
.aurora-content a:not(.au-btn):not(.m2-btn):not(.m2-btn-primary):not(.m2-btn-secondary):not(.au-btn-ghost):hover {
  text-decoration: none !important;
}

/* ================= 7. SIDEBAR ================= */
.aurora-sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-default) !important;
  box-shadow: none !important;
}
.aurora-brand { border-bottom: 1px solid var(--border-default); padding-bottom: 18px; margin-bottom: 8px; }
.aurora-brand-name { color: var(--text-primary) !important; }
.aurora-nav-section {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em !important;
  text-transform: uppercase !important; color: var(--text-muted) !important;
}
/* High specificity to beat theme_aurora's `html .aurora-body .aurora-sidebar ...` rules */
html .aurora-body .aurora-sidebar .aurora-nav-link,
html[data-aurora-scheme="light"] .aurora-body .aurora-sidebar .aurora-nav-link {
  color: var(--text-secondary) !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html .aurora-body .aurora-sidebar .aurora-nav-link .aurora-nav-icon,
html .aurora-body .aurora-sidebar .aurora-nav-link svg { color: var(--text-muted) !important; }
html .aurora-body .aurora-sidebar .aurora-nav-link:hover {
  background: rgba(255,255,255,0.05) !important; color: var(--text-primary) !important;
}
html[data-aurora-scheme="light"] .aurora-body .aurora-sidebar .aurora-nav-link:hover {
  background: rgba(0,0,0,0.04) !important; color: var(--text-primary) !important;
}
/* active: NO pill — transparent bg, brand text, left accent bar */
html .aurora-body .aurora-sidebar .aurora-nav-link.is-active,
html[data-aurora-scheme="light"] .aurora-body .aurora-sidebar .aurora-nav-link.is-active {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--brand) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}
html .aurora-body .aurora-sidebar .aurora-nav-link.is-active .aurora-nav-icon,
html .aurora-body .aurora-sidebar .aurora-nav-link.is-active svg,
html[data-aurora-scheme="light"] .aurora-body .aurora-sidebar .aurora-nav-link.is-active svg { color: var(--brand) !important; }
html .aurora-body .aurora-sidebar .aurora-nav-link.is-active::before,
html .aurora-body .aurora-sidebar .aurora-nav-link.is-active::after,
html[data-aurora-scheme="light"] .aurora-body .aurora-sidebar .aurora-nav-link.is-active::before {
  display: none !important; content: none !important;
}
/* user block */
.aurora-user-card { background: transparent !important; border: none !important; box-shadow: none !important; }
.aurora-user-ava { background: var(--brand) !important; color: #fff !important; }
.aurora-user-name { color: var(--text-primary) !important; }
.aurora-logout-btn {
  background: transparent !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: none !important;
}
.aurora-logout-btn:hover { border-color: var(--brand) !important; color: var(--brand) !important; }

/* ================= 8. TOPBAR ================= */
.aurora-topbar {
  background: var(--bg-sidebar) !important;
  border-bottom: 1px solid var(--border-default) !important;
  box-shadow: none !important;
}
.aurora-topbar-title h1, .aurora-topbar-title { color: var(--text-primary) !important; }
.aurora-theme-toggle {
  background: transparent !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: none !important;
}
.aurora-theme-toggle:hover { border-color: var(--brand) !important; color: var(--brand) !important; }

/* ================= 9. MOBILE TAB BAR ================= */
.aurora-mobile-tabbar {
  background: rgba(19,21,26,0.90) !important;
  border-top: 1px solid var(--border-default) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: none !important;
}
html[data-aurora-scheme="light"] .aurora-mobile-tabbar { background: rgba(255,255,255,0.90) !important; }
.aurora-mobile-tabbar a { color: var(--text-muted) !important; background: transparent !important; }
.aurora-mobile-tabbar a.is-active,
.aurora-mobile-tabbar a.is-active svg,
.aurora-mobile-tabbar a.is-active .aurora-nav-icon {
  color: var(--brand) !important;
  font-weight: 600 !important;
  background: transparent !important;
}
.aurora-mobile-tabbar a.is-active::before, .aurora-mobile-tabbar a.is-active::after { display: none !important; }

/* ================= 10. FLOATING CHAT BUTTON ================= */
.wc-support-fab {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--brand) !important;
  box-shadow: var(--shadow-elevated) !important;
}
.wc-support-fab:hover { background: var(--brand) !important; color: #fff !important; }
.wc-support-fab-icon, .wc-support-fab svg { color: inherit !important; }

/* ================= 11. MODALS ================= */
.au-modal, .m2-modal, .wc-identity-modal-overlay, .au-modal-overlay {
  background: rgba(0,0,0,0.40) !important;
  backdrop-filter: blur(4px) !important;
}
.au-modal-box, .au-setup-modal-box, .au-qr-modal-box, .au-connect-modal-box,
.m2-connect-modal-box, .m2-keys-modal-box, .wc-identity-modal {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-elevated) !important;
}
/* BUG 2: long modal titles ("Подключённые устройства") were truncated by
   white-space:nowrap — allow them to wrap instead of clipping. */
.au-modal-title, .au-setup-modal-title, .m2-modal-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ================= 12. HERO CTA + ACTIVE SUBSCRIPTION HERO ================= */
.au-sub-buy-hero,
.au-sub-hero {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-default) !important;
  border-left: 3px solid var(--brand) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}
.au-sub-hero.is-expired { border-left-color: #EF4444 !important; }
.au-sub-hero.is-expiring { border-left-color: #F59E0B !important; }
/* status badge — clean pill */
.au-sub-status-badge {
  background: rgba(16,185,129,0.12) !important; color: #10B981 !important;
  border: none !important; border-radius: 9999px !important;
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important;
}
.au-sub-status-badge.is-expired { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; }
.au-sub-status-badge.is-warning { background: rgba(245,158,11,0.12) !important; color: #F59E0B !important; }

/* ============ 12b. SUBSCRIPTION HERO (keys page) ============ */
/* title was clamp(26px,3vw,40px) — cap to the spec's 20px / 600 */
.au-sub-tariff-name {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}
/* unify the action buttons (Подключить / Продлить / Устройства / Докупить):
   one radius, primary = teal, ghost = outline secondary */
.au-sub-hero-btn { border-radius: var(--radius-btn) !important; font-weight: 600 !important; }
.au-sub-hero-btn:not(.au-sub-hero-btn--ghost) {
  background: var(--brand) !important; background-image: none !important;
  color: #04201C !important; border: 1px solid transparent !important; box-shadow: none !important;
}
.au-sub-hero-btn:not(.au-sub-hero-btn--ghost):hover { background: var(--brand-hover) !important; }
.au-sub-hero-btn--ghost {
  background: transparent !important; border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important; box-shadow: none !important;
}
.au-sub-hero-btn--ghost:hover { border-color: var(--brand) !important; color: var(--brand) !important; }

/* ================= 13. PUBLIC / AUTH PAGES ================= */
/* The sidebar-foot Войти/Регистрация buttons are the primary CTA for guests, so
   they stay visible on public pages (body.wc-public-shell). On auth-form pages
   (body.wc-guest-auth-page) the whole sidebar is hidden via
   .aurora-app.aurora-guest-auth .aurora-sidebar { display: none }, so no rule is
   needed here. They are naturally absent for logged-in users, who don't render
   this foot. */
/* "или" divider between login + Telegram */
.aurora-auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted) !important; font-size: 12px !important;
  margin: 20px 0 !important;
}
.aurora-auth-divider::before, .aurora-auth-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border-default);
}

/* ============ 13b. MINIMALIST REFINEMENTS (priority list) ============ */

/* page content shows the neutral page bg (no teal tint behind cards) */
.aurora-main, .aurora-content { background: transparent !important; }

/* (1) header theme / language toggles — light, icon-first, no heavy pill */
.aurora-theme-toggle, .aurora-locale-btn, .aurora-locale-wrap > button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  color: var(--text-secondary) !important;
}
.aurora-theme-toggle:hover, .aurora-locale-btn:hover { color: var(--text-primary) !important; background: rgba(0,0,0,0.05) !important; }
html .aurora-body .aurora-theme-toggle:hover, html .aurora-body .aurora-locale-btn:hover { background: rgba(255,255,255,0.06) !important; }
.aurora-theme-toggle-label { display: none !important; }  /* keep sun/moon icon only */

/* (2) sidebar logout — tidy danger/ghost button, centered icon+label.
   margin:0 so spacing comes only from .aurora-sidebar-foot's gap (~8px).
   The red palette reads on both light and dark sidebars. */
html .aurora-body .aurora-sidebar .aurora-logout-btn,
.aurora-logout-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #ef4444 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: .15s !important;
}
html .aurora-body .aurora-sidebar .aurora-logout-btn:hover,
.aurora-logout-btn:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}

/* (3) Profile section eyebrows are shown on every profile page (so /profile and
   /profile/settings match). The .au-profile-subpage override below is no longer
   needed. */
.au-profile-section-head .au-eyebrow { display: block !important; }

/* (4) heading weight/size — bold not black, calmer sizes */
.aurora-content h1, .aurora-topbar-title h1 { font-weight: 700 !important; }
.aurora-content h2, .au-card h2, .au-profile-info-card h2 { font-weight: 600 !important; font-size: 18px !important; }

/* (5) account data rows: spacing between rows (was glued — gap:0 forced them together) */
.au-props-stack { gap: 8px !important; }
/* profile info/support cards: flex column with uniform spacing for head/list/button */
.au-profile-info-card, .au-profile-support-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.au-profile-info-card .au-profile-section-head,
.au-profile-support-card .au-profile-section-head { margin-bottom: 0 !important; }
.au-profile-info-card .au-profile-actions,
.au-profile-support-card .au-profile-actions { margin-top: 0 !important; }
.au-prop-row {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
}

/* (Быстрые действия) flat tiles inside the single card — no "card-in-card".
   Strip the per-tile bg/border/shadow so the nav links read as flat tiles;
   subtle hover + soft "current" highlight. Icon badge is kept. */
.au-profile-action {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}
/* Accent (brand #4CDDCE) hover instead of a flat grey fill. Hardcoded rgba to
   match the project's prevailing convention and the tested DevTools values. */
.aurora-body .au-profile-action:hover {
  background: linear-gradient(135deg, rgba(76,221,206,0.10), rgba(76,221,206,0.05)) !important;
  border-color: rgba(76,221,206,0.40) !important;
  box-shadow: 0 8px 22px rgba(76,221,206,0.12) !important;
  transform: translateY(-1px) !important;
}
html[data-aurora-scheme="light"] .aurora-body .au-profile-action:hover {
  background: linear-gradient(135deg, rgba(76,221,206,0.16), rgba(76,221,206,0.06)) !important;
  border-color: rgba(76,221,206,0.45) !important;
  box-shadow: 0 8px 20px rgba(76,221,206,0.15) !important;
  transform: translateY(-1px) !important;
}
.au-profile-action.is-current {
  background: var(--accent-muted) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.au-profile-action.is-current b { color: var(--accent-text) !important; }

/* (7) "Привязать почту" → brand outline (less weight than filled) */
.au-btn--brand-outline {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
  box-shadow: none !important;
}
.au-btn--brand-outline:hover { background: rgba(45,212,191,0.08) !important; }

/* (8) CTA "Пробный период" — not full width (inline width:100% overridden) */
.au-sub-buy-hero form { display: flex !important; }
.au-sub-buy-hero form .m2-btn {
  width: auto !important;
  max-width: 320px !important;
  align-self: flex-start !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
/* compact "add email/password" notice — thin left-accent strip, not full banner */
.au-sub-backup-notice, .au-keys-backup-banner {
  border: none !important;
  border-left: 4px solid #10B981 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}

/* (9) referral stat cards — no per-card border, just bg + shadow */
.au-ref-stat-grid > * {
  border: none !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-card) !important;
}

/* ============ 13c. ACCOUNT SETTINGS PAGE ============ */
/* visually-hidden label (kept for screen readers; placeholder is the visible cue) */
.au-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
/* span both columns of the 2-col settings form grid (email row + submit) */
.au-profile-subpage .m2-form-grid .au-form-full { grid-column: 1 / -1 !important; }

/* Unify the two notification buttons with the reference submit button
   (.m2-btn.au-form-full "Сохранить email и пароль"): same border-radius / weight /
   height. Gradient background, font-size and padding are left untouched.
   ID selectors (1,0,0) beat theme_aurora's class rules that set radius 15 / weight 800 / 36px. */
#push-enable-btn,
#notification-settings-save-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  height: 44px !important;
}
/* The push enable/disable buttons live inside the flex ctrl row (align-items:center),
   but `.m2-card .m2-btn { margin-top: 8px }` (style.css) pushed them down, breaking
   vertical centering with the badge. Zero it only for the inline ctrl buttons —
   the standalone "Сохранить настройки" button keeps its spacing. */
.au-notif-item__ctrl .m2-btn { margin-top: 0 !important; }
/* push explanation → quiet small text under the row title (keeps list rhythm) */
.au-push-status-detail { font-size: 12px !important; color: var(--text-muted) !important; line-height: 1.4 !important; }

/* ============ 15. UNIFIED TOKENS + COMPONENT POLISH ============ */
/* spec token aliases mapped onto the existing brand/radius system */
.aurora-body {
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 9999px;
  --accent: var(--brand);
  --accent-muted: rgba(45,212,191,0.14);
  --accent-border: var(--brand);
  --accent-text: #5EEAD4;            /* bright teal text on dark */
  --btn-subtle-bg: rgba(45,212,191,0.10);
  --btn-subtle-border: rgba(45,212,191,0.22);
  --btn-subtle-color: #5EEAD4;
  --modal-radius: var(--radius-lg);
  --card-radius: var(--radius-lg);
}
html[data-aurora-scheme="light"] .aurora-body {
  --accent-text: #0E9789;            /* dark teal text on light */
  --btn-subtle-color: #25504B;
}

/* (1,2) one modal style — extend to the wc-identity dialog (was radius 28px) */
.wc-identity-modal__dialog {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-elevated) !important;
}

/* (3,4) renew duration + device buttons — unified accent, consistent active text */
.au-renew-duration-btn, .au-renew-device-btn {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-default) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
}
.au-renew-duration-btn:not(.is-active):hover,
.au-renew-device-btn:not(.is-active):hover {
  background: var(--accent-muted) !important;
  border-color: rgba(45,212,191,0.5) !important;
}
.au-renew-duration-btn.is-active, .au-renew-device-btn.is-active {
  background: var(--accent-muted) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-text) !important;
}
.au-renew-duration-btn.is-active .au-rdur-label,
.au-renew-duration-btn.is-active .au-rdur-price { color: var(--accent-text) !important; }

/* (7) subscription-link card radius 18px → 16px */
.au-sub-link-card { border-radius: var(--radius-lg) !important; }

/* (9) subscription-link: link pill + grouped copy/QR icon buttons.
   Soft muted-teal border (not the bright brand line), brighter readable text,
   gentle glow on hover/focus. */
.au-sub-link-field {
  background: rgba(45,212,191,0.07) !important;
  border: 1px solid rgba(45,212,191,0.25) !important;
  color: rgba(220,245,240,0.9) !important;
  border-radius: var(--radius-md) !important;
}
.au-sub-link-field:hover,
.au-sub-link-field:focus-visible {
  border-color: rgba(45,212,191,0.5) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.10), 0 6px 18px rgba(45,212,191,0.12) !important;
}
/* Success flash when copying via the field (emerald-teal); higher specificity
   than the base rule so it wins over the !important defaults. */
.au-sub-link-field.is-flash {
  background: rgba(16,185,129,0.18) !important;
  border-color: rgba(16,185,129,0.55) !important;
}
html[data-aurora-scheme="light"] .au-sub-link-field {
  background: rgba(45,212,191,0.10) !important;
  border-color: rgba(45,212,191,0.32) !important;
  color: #14534c !important;
}
html[data-aurora-scheme="light"] .au-sub-link-field.is-flash {
  background: rgba(16,185,129,0.14) !important;
  border-color: rgba(16,185,129,0.45) !important;
}
.au-sub-link-btn {
  background: var(--btn-subtle-bg) !important;
  border: 1px solid var(--btn-subtle-border) !important;
  color: var(--btn-subtle-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
.au-sub-link-btn:hover {
  background: rgba(45,212,191,0.20) !important;
  border-color: rgba(45,212,191,0.5) !important;
  color: var(--accent-text) !important;
  box-shadow: 0 4px 14px rgba(45,212,191,0.18) !important;
}
/* Success: emerald-teal accent (the ✓ glyph + press scale come from theme_aurora) */
.au-sub-link-btn.is-copied {
  background: rgba(16,185,129,0.20) !important;
  border-color: rgba(16,185,129,0.6) !important;
  color: #6EE7B7 !important;
}
html[data-aurora-scheme="light"] .au-sub-link-btn.is-copied {
  background: rgba(16,185,129,0.14) !important;
  border-color: rgba(16,185,129,0.45) !important;
  color: #0a7f5f !important;
}

/* (10) ghost hero button hover */
.au-sub-hero-btn--ghost:hover {
  background: rgba(45,212,191,0.07) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-text) !important;
}

/* (6) settings page typography: cap huge h1 → 20px (eyebrow visibility is now
   handled globally by rule (3) above, so the per-subpage override was removed). */
.au-profile-subpage .au-profile-section-head h1,
.au-profile-subpage .m2-card h1 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}

/* ============ 16. REVIEW FORM ("Оставить отзыв") ============ */
.au-review-form-v2 { display: flex; flex-direction: column; gap: 20px; }
.au-review-form-v2 .m2-label { font-weight: 600 !important; color: var(--text-label) !important; }
.au-form-row { display: flex; flex-direction: column; gap: 8px; }

/* interactive star rating (radio inputs reversed 5→1 + row-reverse) */
.au-rating-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.au-star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.au-star-rating input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.aurora-body .au-star-rating .au-star {
  font-size: 30px; line-height: 1; color: rgba(148,163,184,0.45) !important;
  cursor: pointer; padding: 0 3px; transition: color .12s ease, transform .12s ease;
}
.aurora-body .au-star-rating .au-star:hover { transform: scale(1.15); }
/* specificity ladder so each state wins over the previous:
   base(0,3,0) < checked-fill(0,4,1) < hover-reset(0,5,1) < hover-fill(0,6,0) */
.aurora-body .au-star-rating input:checked ~ .au-star { color: #FFB800 !important; }
.aurora-body .au-star-rating:hover input:checked ~ .au-star { color: rgba(148,163,184,0.45) !important; }
.aurora-body .au-star-rating:hover .au-star.au-star:hover,
.aurora-body .au-star-rating:hover .au-star:hover ~ .au-star.au-star { color: #FFB800 !important; }
.au-star-caption { font-size: 14px; font-weight: 600; color: var(--text-secondary); }

/* textarea + character counter */
.au-textarea-wrap { position: relative; }
.au-review-textarea {
  min-height: 120px !important;
  resize: vertical !important;
  padding-bottom: 28px !important;
}
.au-char-counter {
  position: absolute; right: 12px; bottom: 9px;
  font-size: 12px; color: var(--text-muted); pointer-events: none;
  background: var(--bg-input); padding-left: 6px; border-radius: 4px;
}

/* hints: bonus pill + char-limit note */
.au-review-hints { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.au-bonus-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(45,212,191,0.14); color: var(--accent-text, #0E9789);
  border-radius: 9999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}
.au-review-limit { font-size: 12px !important; }

/* submit button: icon + click feedback (hover lift comes from m2-btn-primary) */
.au-review-submit { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
.au-review-submit:active { transform: scale(0.98) !important; }
.au-review-submit-icon { transform: translateY(-1px); }

@media (max-width: 560px) {
  .au-star-rating .au-star { font-size: 34px; padding: 0 5px; }
}

/* ============ 17. PAYMENTS EMPTY STATE (no card-in-card) ============ */
/* The empty-state already lives inside .au-card, but theme_aurora gave it its
   own border/radius/bg/shadow → "card in a card". Strip the card chrome so it
   reads as plain content. Grid layout + ₽ icon (::before) are untouched. */
html .aurora-body .au-payments-clean .au-empty-state,
html .aurora-body .au-payments-clean__empty,
html[data-aurora-scheme="light"] .aurora-body .au-payments-clean__empty {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ================= 14. NOTICES / BADGES / PILLS ================= */
.au-notice { box-shadow: none !important; border-radius: var(--radius-input) !important; }
.au-pill, .au-badge, .m2-badge { border-radius: var(--radius-badge) !important; }
.au-pill-green { background: rgba(20,184,166,0.14) !important; color: var(--brand) !important; border-color: rgba(20,184,166,0.30) !important; }

/* ================= 15. UNIFIED AUTH ALERTS =================
   One alert language for /login, /register, /forgot-password, /reset-password.
   Merges the two legacy components — `.auth-form-alert` (JS-driven error box on
   login/register/forgot/reset) and `.au-notice` + variants (server-rendered
   notices) — into a single look: soft tinted background + 3px left accent bar +
   icon + text (design Option A). Loads last (theme_minimal), so it owns these.
   Scoped to .aurora-body + the alert classes only — nothing else is touched. */

/* --- Shared structure (scheme-agnostic; not re-coloured by aurora rules).
   html[data-aurora-scheme] prefix => specificity (0,3,1), which clears the
   legacy card-scoped `.aurora-body .aurora-auth-card .au-notice` (0,3,0). --- */
html[data-aurora-scheme] .aurora-body .auth-form-alert:not([hidden]),
html[data-aurora-scheme] .aurora-body .au-notice:not([hidden]) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  animation: au-alert-in .25s ease-out both !important;
}

/* Icon sizing/alignment shared by inline SVGs and the ::before glyph icon */
html[data-aurora-scheme] .aurora-body .au-notice > svg,
html[data-aurora-scheme] .aurora-body .auth-form-alert::before {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin-top: 1px !important;
}

/* Replace the legacy "!" square badge with a real circle-x icon (no HTML change).
   See note below for the optional inline-SVG alternative. */
.aurora-body .auth-form-alert::before {
  content: '' !important;
  display: inline-block !important;
  border-radius: 0 !important;
  background: center / 16px 16px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E") !important;
}

/* --- ERROR — `.auth-form-alert`, `.au-notice-error` (soft coral, not harsh red) --- */
html[data-aurora-scheme] .aurora-body .auth-form-alert,
html[data-aurora-scheme] .aurora-body .au-notice-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: rgb(254, 202, 202) !important;
}
html[data-aurora-scheme] .aurora-body .au-notice-error > svg {
  stroke: rgb(239, 68, 68) !important;
}
/* Light scheme: dark readable text on the tint */
html[data-aurora-scheme="light"] .aurora-body .auth-form-alert,
html[data-aurora-scheme="light"] .aurora-body .au-notice-error {
  background: rgba(239, 68, 68, 0.07) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: rgb(185, 28, 28) !important;
}
html[data-aurora-scheme="light"] .aurora-body .au-notice-error > svg {
  stroke: rgb(220, 38, 38) !important;
}

/* --- SUCCESS — `.au-notice-success` (brand teal, the quality reference) --- */
html[data-aurora-scheme] .aurora-body .au-notice-success {
  background: rgba(76, 221, 206, 0.1) !important;
  border-color: rgba(76, 221, 206, 0.22) !important;
  color: #BFF6EF !important;
}
html[data-aurora-scheme] .aurora-body .au-notice-success > svg {
  stroke: #2FE0D0 !important;
}
html[data-aurora-scheme="light"] .aurora-body .au-notice-success {
  background: rgba(20, 184, 166, 0.08) !important;
  border-color: rgba(20, 184, 166, 0.22) !important;
  color: #0B5E50 !important;
}
html[data-aurora-scheme="light"] .aurora-body .au-notice-success > svg {
  stroke: #14B8A6 !important;
}

/* --- INFO — `.au-notice-info` and plain `.au-notice` (calm teal) --- */
html[data-aurora-scheme] .aurora-body .au-notice-info,
html[data-aurora-scheme] .aurora-body .au-notice:not(.au-notice-error):not(.au-notice-success) {
  background: rgba(76, 221, 206, .10) !important;
  border-color: rgba(76, 221, 206, .24) !important;
  border-left-color: #4CDDCE !important;
  color: #CFEFF1 !important;
}
html[data-aurora-scheme] .aurora-body .au-notice-info > svg {
  stroke: #4CDDCE !important;
}
html[data-aurora-scheme="light"] .aurora-body .au-notice-info,
html[data-aurora-scheme="light"] .aurora-body .au-notice:not(.au-notice-error):not(.au-notice-success) {
  background: rgba(76, 221, 206, .12) !important;
  border-color: rgba(8, 145, 136, .22) !important;
  border-left-color: #0FB5AC !important;
  color: #0B5057 !important;
}
html[data-aurora-scheme="light"] .aurora-body .au-notice-info > svg {
  stroke: #0FB5AC !important;
}

/* --- Entrance animation + accessibility --- */
@keyframes au-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-body .auth-form-alert,
  .aurora-body .au-notice {
    animation: none !important;
  }
}