/*
  Authria UI v3 — Full rebuild
  - Modern app shell w/ sidebar
  - Accent themes + light/dark
  - Clean components (cards/buttons/forms/tables)
  - Zero external dependencies
*/

/* ========== Reset ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; min-height: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:root{
  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Radii / spacing */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-lg: 0 24px 70px rgba(0,0,0,.45);
  --shadow-md: 0 10px 28px rgba(0,0,0,.35);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.28);

  /* Default (dark) palette */
  --bg0: #070712;
  --bg1: #0b0b18;
  --bg2: rgba(255,255,255,.04);
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted2: rgba(255,255,255,.54);
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.14);

  /* Accents (violet default) */
  --a1: #8b5cf6; /* primary */
  --a2: #22d3ee; /* secondary */
  --a3: #fb7185; /* highlight */

  /* Derived */
  --focus: color-mix(in oklab, var(--a2) 70%, white 30%);
  --danger: #fb7185;
  --warn: #fbbf24;
  --ok: #34d399;

  --max: 1180px;
}

/* Accent themes */
html[data-accent="heirloom"]{ --a1:#2AAE9B; --a2:#D98C5F; --a3:#F3E7CF; }
html[data-accent="neonwave"]{ --a1:#ff4fd8; --a2:#22d3ee; --a3:#a78bfa; }
html[data-accent="violet"]{ --a1:#8b5cf6; --a2:#22d3ee; --a3:#fb7185; }
html[data-accent="ocean"]{ --a1:#3b82f6; --a2:#22d3ee; --a3:#60a5fa; }
html[data-accent="emerald"]{ --a1:#10b981; --a2:#22d3ee; --a3:#34d399; }
html[data-accent="sunset"]{ --a1:#fb7185; --a2:#f59e0b; --a3:#f97316; }

/* Heirloom surfaces (warm paper + teal + coral) */
html[data-accent="heirloom"][data-mode="light"]{
  --bg0:#F3E7CF;
  --bg1:#FFF7E6;
  --bg2: rgba(255,255,255,.58);
  --card: rgba(255,255,255,.70);
  --card2: rgba(255,255,255,.78);
  --text: rgba(24,30,29,.92);
  --muted: rgba(24,30,29,.68);
  --muted2: rgba(24,30,29,.54);
  --border: rgba(42,174,155,.22);
  --border2: rgba(42,174,155,.30);
}
html[data-accent="heirloom"][data-mode="dark"]{
  --bg0:#061614;
  --bg1:#041210;
  --bg2: rgba(243,231,207,.06);
  --card: rgba(243,231,207,.06);
  --card2: rgba(243,231,207,.08);
  --border: rgba(42,174,155,.16);
  --border2: rgba(217,140,95,.18);
}

/* Light mode */
html[data-mode="light"]{
  --bg0:#f8fafc;
  --bg1:#ffffff;
  --bg2: rgba(2,6,23,.04);
  --card: rgba(2,6,23,.04);
  --card2: rgba(2,6,23,.06);
  --text: rgba(2,6,23,.92);
  --muted: rgba(2,6,23,.68);
  --muted2: rgba(2,6,23,.54);
  --border: rgba(2,6,23,.12);
  --border2: rgba(2,6,23,.16);
  --shadow-lg: 0 24px 70px rgba(2,6,23,.10);
  --shadow-md: 0 10px 28px rgba(2,6,23,.10);
  --shadow-sm: 0 6px 18px rgba(2,6,23,.10);
}

/* ========== Appearance modes (extra "modes") ========== */
/* Arcade : subtle retro glow + scanline texture (pairs nicely with Neonwave) */
html[data-appearance="arcade"]{
  --card: rgba(255,255,255,.075);
  --card2: rgba(255,255,255,.095);
  --border: rgba(255,255,255,.14);
  --border2: rgba(255,255,255,.20);
}

/* Glass+ : punchier translucency + brighter borders */
html[data-appearance="glass"]{
  --card: rgba(255,255,255,.085);
  --card2: rgba(255,255,255,.11);
  --border: rgba(255,255,255,.16);
  --border2: rgba(255,255,255,.22);
}

/* OLED : deeper blacks, softer highlights */
html[data-appearance="oled"]{
  --bg0:#000000;
  --bg1:#05060f;
  --bg2: rgba(255,255,255,.035);
  --card: rgba(255,255,255,.05);
  --card2: rgba(255,255,255,.07);
  --border: rgba(255,255,255,.09);
  --border2: rgba(255,255,255,.13);
}

/* High contrast : stronger text + borders, reduced overlays */
html[data-appearance="contrast"]{
  --text: rgba(255,255,255,.98);
  --muted: rgba(255,255,255,.86);
  --muted2: rgba(255,255,255,.74);
  --border: rgba(255,255,255,.30);
  --border2: rgba(255,255,255,.38);
  --card: rgba(255,255,255,.09);
  --card2: rgba(255,255,255,.12);
}

/* Reduced motion (toggle) */
html[data-motion="reduced"] *{
  transition: none !important;
  animation: none !important;
}

/* ========== Base ========== */
/*
  Background is rendered on a fixed layer to avoid "scroll banding" / color
  mismatch when the page height changes.
*/
body{
  font-family: var(--font);
  background: transparent;
  color: var(--text);
  position: relative;
  /* Create a stacking context so our negative z-index layers behave consistently */
  isolation: isolate;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 800px at 20% 10%, color-mix(in oklab, var(--a1) 22%, transparent) 0%, transparent 70%),
    radial-gradient(1000px 700px at 90% 15%, color-mix(in oklab, var(--a2) 18%, transparent) 0%, transparent 68%),
    radial-gradient(900px 650px at 70% 90%, color-mix(in oklab, var(--a3) 14%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  /* Reduce perceived seams on some GPUs */
  transform: translateZ(0);
}

.bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background:
    linear-gradient(to right, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 1200px 600px, 38px 38px;
  mix-blend-mode: overlay;
  filter: blur(.2px);
}

/* Tune overlays for style modes */
html[data-appearance="arcade"] .bg{
  opacity: .72;
  mix-blend-mode: soft-light;
  filter: blur(.15px) saturate(1.1);
  background:
    radial-gradient(circle at 15% 20%, color-mix(in oklab, var(--a1) 22%, transparent), transparent 55%),
    radial-gradient(circle at 85% 30%, color-mix(in oklab, var(--a2) 18%, transparent), transparent 60%),
    linear-gradient(to right, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  background-size: auto, auto, 1200px 600px;
}

html[data-appearance="arcade"] .bg::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.14) 0px,
    rgba(255,255,255,.14) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 5px
  );
}

html[data-appearance="oled"] .bg{ opacity: .38; }
html[data-appearance="contrast"] .bg{ opacity: .18; mix-blend-mode: normal; filter: none; }
html[data-appearance="contrast"] body::before{
  background:
    radial-gradient(1200px 800px at 20% 10%, color-mix(in oklab, var(--a1) 12%, transparent) 0%, transparent 70%),
    radial-gradient(1000px 700px at 90% 15%, color-mix(in oklab, var(--a2) 10%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
html[data-appearance="contrast"] .sidebar,
html[data-appearance="contrast"] .topbar{ backdrop-filter: none; }

.mono{ font-family: var(--mono); }
.muted{ color: var(--muted); }

.gradient-text{
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kbd{
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg2);
}

/* ========== Shells ========== */
.public-shell{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 18px 60px;
}

.public-content{
  padding-top: 14px;
}

.app-shell{
  display: grid;
  grid-template-columns: 290px 1fr;
  min-height: 100vh;
}

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg1) 70%, transparent);
  backdrop-filter: blur(16px);
}

.main{
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg1) 76%, transparent);
  backdrop-filter: blur(16px);
}

.topbar-spacer{ flex: 1; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }

.topbar-title{
  font-weight: 820;
  letter-spacing: .01em;
  padding-left: 6px;
  color: var(--text);
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

@media (max-width: 720px){
  .topbar-title{ display:none; }
}

.content{
  padding: 18px 18px 48px;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

@media (max-width: 980px){
  .app-shell{ grid-template-columns: 1fr; }
  .sidebar{
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
    z-index: 30;
  }
  body.sidebar-open .sidebar{ transform: translateX(0); }
  body.sidebar-open::after{
    content:"";
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
  }
  .content{ max-width: 100%; }
}

/* Desktop sidebar collapse (toggle button in topbar) */
@media (min-width: 981px){
  body.sidebar-collapsed .app-shell{ grid-template-columns: 92px 1fr; }
  body.sidebar-collapsed .sidebar{ padding: 16px 12px; }
  body.sidebar-collapsed .brand-copy{ display:none; }
  body.sidebar-collapsed .sidebar-footer{ display:none; }
  body.sidebar-collapsed .snav-link{ justify-content:center; padding: 10px; }
  body.sidebar-collapsed .snav-link > span:not(.snav-ic){ display:none; }
  body.sidebar-collapsed .snav-ic{ width:auto; }
  body.sidebar-collapsed .snav-divider{ margin: 10px 0; }
}

/* ========== Nav / Brand ========== */
.nav{
  position: relative;
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.brand-mark{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid color-mix(in oklab, var(--a1) 55%, var(--border));
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--a1) 38%, transparent), transparent 65%),
              linear-gradient(180deg, color-mix(in oklab, var(--card2) 70%, transparent), color-mix(in oklab, var(--card) 70%, transparent));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Brand logo (accent-reactive) */
.brand-logo{ width: 24px; height: 24px; }
.brand-logo path{ fill:none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.brand-logo .logo-a1{ stroke: var(--a1); }
.brand-logo .logo-a2{ stroke: var(--a2); }
.brand-logo .logo-a3{ stroke: color-mix(in oklab, var(--a3) 82%, transparent); opacity: .95; stroke-width: 3; }

.brand-mark span{
  font-weight: 800;
  letter-spacing: .02em;
}

.brand-copy{ min-width: 0; }
.brand-name{ font-weight: 800; letter-spacing: .01em; }
.brand-sub{ font-size: 12px; color: var(--muted2); margin-top: 1px; }

.navlinks{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; justify-content:flex-end; }

/* ========== Sidebar nav ========== */
.snav{ margin-top: 18px; display:flex; flex-direction:column; gap: 6px; }
.snav-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--muted);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  background: transparent;
  width: 100%;
  text-align: left;
}
.snav-link:hover{ background: color-mix(in oklab, var(--card) 85%, transparent); color: var(--text); }
.snav-link.active{
  color: var(--text);
  border-color: color-mix(in oklab, var(--a1) 30%, var(--border));
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 18%, transparent), transparent 65%);
}
.snav-link.danger{ color: color-mix(in oklab, var(--danger) 75%, var(--muted)); }
.snav-link.danger:hover{ background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }
.snav-ic{ width: 22px; display:inline-flex; justify-content:center; opacity: .9; }
.snav-divider{ height: 1px; background: var(--border); margin: 10px 0; }

.sidebar-footer{ margin-top: auto; padding-top: 14px; }
.sidebar-hint{ margin-top: 10px; font-size: 12px; color: var(--muted2); }

.iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.iconbtn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--card2) 85%, transparent); }

/* Command palette trigger */
.cmdk-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cmdk-btn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--card2) 86%, transparent); border-color: var(--border2); }
.cmdk-ic{ opacity:.9; }
.cmdk-label{ font-size: 13px; color: var(--text); }
.cmdk-kbd{ opacity: .75; }
@media (max-width: 720px){
  .cmdk-label, .cmdk-kbd{ display:none; }
  .cmdk-btn{ width: 42px; justify-content:center; padding:0; }
}

/* Page entrance */
.content, .public-content{
  animation: pageIn .34s ease both;
}
@keyframes pageIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Command palette */
.cmdk{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}
.cmdk.show{ display:block; }
.cmdk-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
html[data-mode="light"] .cmdk-overlay{ background: rgba(2,6,23,.20); }

.cmdk-panel{
  position:absolute;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 28px));
  border-radius: 22px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg1) 86%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.cmdk-head{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 10%, transparent), transparent 60%);
}
.cmdk-search{ opacity:.85; }
.cmdk-input{
  flex: 1;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  padding: 0 12px;
  outline: none;
}
.cmdk-input:focus{ border-color: color-mix(in oklab, var(--focus) 55%, var(--border2)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus) 18%, transparent); }

.cmdk-close{
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  cursor:pointer;
  color: var(--muted);
}
.cmdk-close:hover{ color: var(--text); }

.cmdk-meta{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--muted2);
  font-size: 12px;
}
.cmdk-hint{ margin-right: 4px; }

.cmdk-list{
  padding: 10px;
  max-height: min(52vh, 520px);
  overflow: auto;
}
.cmdk-item{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  text-align:left;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  color: var(--text);
  transition: transform .10s ease, background .10s ease, border-color .10s ease;
}
.cmdk-item:hover{ background: color-mix(in oklab, var(--card) 86%, transparent); transform: translateY(-1px); }
.cmdk-item.active{
  border-color: color-mix(in oklab, var(--a1) 34%, var(--border));
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 16%, transparent), transparent 62%);
}
.cmdk-item-kind{
  font-size: 12px;
  color: var(--muted2);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg2) 80%, transparent);
}
.cmdk-empty{
  padding: 18px 14px;
  color: var(--muted);
}

/* ========== Theme bar ========== */
.themebar{ display:flex; align-items:center; gap: 10px; }
.themebar-sub{ margin-top: 10px; }
.themebar-inline{ padding: 6px 8px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 82%, transparent); }
.theme-label{ font-size: 12px; color: var(--muted2); }
.mode-dot{ width:10px; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--a1), var(--a2)); display:inline-block; margin-right: 6px; }
.mode-text{ font-size: 12px; color: var(--muted); }

html[data-motion="reduced"] #motionToggle .mode-dot{ background: linear-gradient(90deg, var(--warn), var(--a1)); }

/* Accent theme picker (custom dropdown) */
.tpk{ position: relative; display:inline-flex; align-items:center; }
.tpk-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.tpk-btn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--card2) 86%, transparent); border-color: var(--border2); }
.tpk-swatch{ width: 12px; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--a1), var(--a2)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bg1) 60%, transparent); }
.tpk-value{ font-size: 13px; color: var(--text); }
.tpk-chev{ opacity:.75; font-size: 12px; }

.tpk-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg1) 92%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
  display: none;
  z-index: 2000;
}
.tpk.open .tpk-menu{ display:block; }

.tpk-opt{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.tpk-opt:hover{ background: color-mix(in oklab, var(--card) 85%, transparent); border-color: var(--border); transform: translateY(-1px); }
.tpk-opt:active{ transform: translateY(0); }

.tpk-left{ display:flex; align-items:center; gap: 10px; }
.tpk-dot{ width: 10px; height: 10px; border-radius: 999px; }
.tpk-dot.heirloom{ background: linear-gradient(90deg, #F3E7CF, #2AAE9B); box-shadow: 0 0 16px rgba(42,174,155,.18); }
.tpk-dot.neonwave{ background: linear-gradient(90deg, #ff4fd8, #22d3ee); box-shadow: 0 0 16px rgba(255,79,216,.22); }
.tpk-dot.violet{ background: linear-gradient(90deg, #8b5cf6, #22d3ee); }
.tpk-dot.ocean{ background: linear-gradient(90deg, #3b82f6, #22d3ee); }
.tpk-dot.emerald{ background: linear-gradient(90deg, #10b981, #22d3ee); }
.tpk-dot.sunset{ background: linear-gradient(90deg, #fb7185, #f59e0b); }

/* Style mode dots */
.tpk-dot.mode-default{ background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); border: 1px solid var(--border2); }
.tpk-dot.mode-arcade{ background: linear-gradient(90deg, #ff4fd8, #22d3ee); border: 1px solid color-mix(in oklab, var(--a1) 40%, var(--border2)); box-shadow: 0 0 16px rgba(255,79,216,.20); }
.tpk-dot.mode-glass{ background: linear-gradient(90deg, color-mix(in oklab, var(--a2) 55%, rgba(255,255,255,.18)), rgba(255,255,255,.10)); border: 1px solid color-mix(in oklab, var(--a2) 35%, var(--border2)); }
.tpk-dot.mode-oled{ background: linear-gradient(90deg, #000, #111); border: 1px solid rgba(255,255,255,.35); }
.tpk-dot.mode-contrast{ background: linear-gradient(90deg, #fff, #cbd5e1); border: 1px solid rgba(0,0,0,.25); }
.tpk-dot.mode-compact{ background: repeating-linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,255,255,.36) 2px, rgba(255,255,255,.10) 2px, rgba(255,255,255,.10) 5px); border: 1px solid var(--border2); }

.tpk-check{ opacity: 0; }
.tpk-opt[aria-selected="true"]{ border-color: color-mix(in oklab, var(--a1) 35%, var(--border)); background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 14%, transparent), color-mix(in oklab, var(--a2) 10%, transparent)); }
.tpk-opt[aria-selected="true"] .tpk-check{ opacity: 1; }

/* ========== Layout helpers ========== */
.grid{ display:grid; gap: 16px; }
.row{ display:flex; gap: 12px; align-items:center; flex-wrap: wrap; }

/* ========== Cards ========== */
.card{
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 88%, transparent);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

.card.soft{
  background: color-mix(in oklab, var(--card2) 76%, transparent);
}

.card.hero{
  padding: 22px;
  border-color: color-mix(in oklab, var(--a1) 28%, var(--border));
  background: radial-gradient(900px 420px at 10% 0%, color-mix(in oklab, var(--a1) 16%, transparent), transparent 60%),
              radial-gradient(900px 420px at 90% 30%, color-mix(in oklab, var(--a2) 12%, transparent), transparent 65%),
              color-mix(in oklab, var(--card) 88%, transparent);
}

/* ========== Text ========== */
h1,h2,h3,h4{ margin: 0; letter-spacing: -.01em; }
h1{ font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; }
h2{ font-size: 22px; }
h3{ font-size: 18px; }
h4{ font-size: 14px; color: var(--muted); font-weight: 700; }

p{ color: var(--muted); line-height: 1.7; margin: 10px 0 0; }

/* ========== Buttons ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--card2) 86%, transparent); border-color: var(--border2); }
.btn:active{ transform: translateY(0); }
.btn:disabled{ opacity: .5; cursor:not-allowed; transform:none; }

/* Spacing fixes for buttons and cards */
.card + .btn,
.card + .row .btn { margin-top: 20px; }
form .btn[type="submit"],
form button[type="submit"] { margin-top: 16px; }
.grid > .card + .card { margin-top: 4px; }

.btn.primary{
  border-color: color-mix(in oklab, var(--a1) 35%, var(--border));
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 55%, transparent), color-mix(in oklab, var(--a2) 45%, transparent));
}
.btn.primary:hover{ border-color: color-mix(in oklab, var(--a1) 55%, var(--border)); }

.btn.primary.billing-cta{
  width: 100%;
  min-height: 52px;
  font-weight: 800;
  box-shadow: 0 12px 26px color-mix(in oklab, var(--a1) 18%, transparent), inset 0 1px 0 color-mix(in oklab, white 12%, transparent);
}
.btn.primary.billing-cta:hover{
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 64%, transparent), color-mix(in oklab, var(--a2) 54%, transparent));
}

.btn.ghost{ background: transparent; }
.btn.ghost:hover{ background: color-mix(in oklab, var(--card) 80%, transparent); }

.btn.danger{
  border-color: color-mix(in oklab, var(--danger) 40%, var(--border));
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  color: color-mix(in oklab, var(--danger) 78%, var(--text));
}
.btn.danger:hover{ background: color-mix(in oklab, var(--danger) 20%, transparent); }

.btn.small, .btn.sm{ padding: 7px 10px; font-size: 13px; }

/* ========== Form controls ========== */
.form{ display:flex; flex-direction:column; gap: 12px; }
label{ display:block; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted2); margin-bottom: 6px; }

input, select, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg2) 60%, transparent);
  outline: none;
}
textarea{ min-height: 110px; resize: vertical; }

input:focus, select:focus, textarea:focus{ border-color: color-mix(in oklab, var(--focus) 70%, var(--border)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus) 24%, transparent); }

.select{ width:auto; }
.select.sm{ padding: 8px 10px; border-radius: 999px; font-size: 13px; }

.input-row{ display:flex; gap: 10px; align-items:center; }
.input-row > *{ flex:1; }

.field-inline{
  display:flex;
  gap: 10px;
  align-items: center;
}

.field-inline .btn{ white-space: nowrap; }

/* ========== Tables ========== */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--card) 90%, transparent);
}

.table thead th{
  position: sticky;
  top: 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 12px;
  background: color-mix(in oklab, var(--bg1) 76%, transparent);
  border-bottom: 1px solid var(--border);
}

.table tbody td{
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.table tbody tr:hover td{ background: color-mix(in oklab, var(--card2) 78%, transparent); }
.table tbody tr:last-child td{ border-bottom: 0; }

/* scrolling helpers */
.scrollbox{ overflow: hidden; }
.scroll-body{ overflow: auto; max-height: 520px; }
.panel-scroll{ overflow: auto; max-height: 540px; }

/* ========== Badges / pills ========== */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 70%, transparent);
  font-size: 12px;
  color: var(--muted);
}
.badge.ok{ border-color: color-mix(in oklab, var(--ok) 35%, var(--border)); color: color-mix(in oklab, var(--ok) 70%, var(--text)); background: color-mix(in oklab, var(--ok) 12%, transparent); }
.badge.warn{ border-color: color-mix(in oklab, var(--warn) 38%, var(--border)); color: color-mix(in oklab, var(--warn) 85%, var(--text)); background: color-mix(in oklab, var(--warn) 12%, transparent); }
.badge.danger{ border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); color: color-mix(in oklab, var(--danger) 75%, var(--text)); background: color-mix(in oklab, var(--danger) 12%, transparent); }

.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  color: var(--muted);
  font-size: 13px;
}

.chip-soft{ background: color-mix(in oklab, var(--a2) 10%, transparent); border-color: color-mix(in oklab, var(--a2) 25%, var(--border)); }

/* ========== Stats ========== */
.statgrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.stat{
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 72%, transparent);
  padding: 14px;
}

.stat .k{ color: var(--muted2); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.stat .v{ font-size: 26px; font-weight: 800; margin-top: 6px; }

@media (max-width: 900px){
  .statgrid{ grid-template-columns: 1fr; }
}

/* ========== Auth shell ========== */
.auth-shell{ display:flex; justify-content:center; padding: 24px 0; }
.auth-shell .card{ width: 100%; max-width: 540px; }
.auth-title{ font-size: 26px; margin-bottom: 6px; }
.auth-sub{ color: var(--muted); margin: 0 0 14px; }

/* ========== Subnav / Tabs ========== */
.subnav{
  display:flex;
  margin-top: 12px;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 82%, transparent);
}
.subnav-link{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid transparent;
}
.subnav-link:hover{ color: var(--text); background: color-mix(in oklab, var(--card2) 78%, transparent); }
.subnav-link.active{
  color: var(--text);
  border-color: color-mix(in oklab, var(--a1) 35%, var(--border));
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 18%, transparent), color-mix(in oklab, var(--a2) 12%, transparent));
}

/* ========== Switches (settings toggles) ========== */
.settings-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.setting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 70%, transparent);
}
.setting-title{ font-weight: 800; }

.switch{ position: relative; display:inline-flex; align-items:center; }
.switch input{ position:absolute; opacity:0; pointer-events:none; }
.switch-ui{
  width: 54px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg2) 70%, transparent);
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.switch-ui::after{
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in oklab, white 65%, var(--card2));
  position:absolute;
  left: 3px;
  top: 2px;
  transition: transform .16s ease;
}
.switch input:checked + .switch-ui{
  border-color: color-mix(in oklab, var(--a2) 40%, var(--border));
  background: color-mix(in oklab, var(--a2) 18%, transparent);
}
.switch input:checked + .switch-ui::after{ transform: translateX(22px); }

@media (max-width: 900px){
  .settings-grid{ grid-template-columns: 1fr; }
}

/* ========== Codebox ========== */
.codebox{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--bg1) 80%, transparent);
  overflow: hidden;
}
.codebox pre{
  margin: 0;
  padding: 14px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--text) 92%, white 8%);
  white-space: pre;
  overflow: auto;
}

.codehead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 70%, transparent);
}

/* ========== Choice grid (create app) ========== */
.choice-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.choice-input{ position:absolute; opacity:0; pointer-events:none; }
.choice-card{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  background: color-mix(in oklab, var(--card2) 74%, transparent);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  min-height: 96px;
}
.choice-card:hover{ transform: translateY(-1px); border-color: var(--border2); }
.choice-ic{ font-size: 18px; }
.choice-title{ font-weight: 900; margin-top: 10px; }
.choice-desc{ color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.4; }
.choice-check{
  position: absolute;
  right: 12px;
  top: 12px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg1) 70%, transparent);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .12s ease, transform .12s ease;
}
.choice-input:checked + .choice-card{
  border-color: color-mix(in oklab, var(--a1) 40%, var(--border));
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 14%, transparent), color-mix(in oklab, var(--a2) 10%, transparent));
}
.choice-input:checked + .choice-card .choice-check{ opacity: 1; transform: scale(1); }

@media (max-width: 900px){
  .choice-grid{ grid-template-columns: 1fr; }
}

/* ========== Search bar ========== */
.searchbar{ display:flex; gap: 10px; align-items:center; }
.searchbar input{ border-radius: 999px; }

/* ========== Pager ========== */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 14px;
}
.pager-center{ color: var(--muted); font-size: 13px; }
.pill{ /* already */ }

/* ========== Footer note ========== */
.footer-note{
  margin-top: 12px;
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.6;
}

.page-legal{
  margin-top: 18px;
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--border);
  background: color-mix(in oklab, var(--card2) 60%, transparent);
}

/* ========== Segmented tabs (examples) ========== */
.seg-tabs{ display:flex; flex-wrap:wrap; gap: 8px; padding: 10px; border-radius: var(--r-xl); border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 82%, transparent); }
.seg-tabs-compact{ padding: 8px; }
.seg-tab{ padding: 8px 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor:pointer; }
.seg-tab:hover{ background: color-mix(in oklab, var(--card2) 78%, transparent); color: var(--text); }
.seg-tab.active{ border-color: color-mix(in oklab, var(--a1) 30%, var(--border)); background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 14%, transparent), color-mix(in oklab, var(--a2) 10%, transparent)); color: var(--text); }
.seg-pane{ display:none; }
.seg-pane.active{ display:block; }

/* ========== Hints (examples) ========== */
.hintcard{ border:1px solid var(--border); border-radius: var(--r-lg); padding: 14px; background: color-mix(in oklab, var(--card2) 70%, transparent); }
.hinttitle{ font-weight: 900; margin-bottom: 10px; }
.hintlist{ margin:0; padding-left: 18px; color: var(--muted); line-height: 1.75; }

/* ========== ToS checkbox row (register) ========== */
.tos-row{ display:flex; gap: 10px; align-items:flex-start; margin-top: 8px; }
.tos-check{ display:flex; gap: 10px; align-items:flex-start; cursor:pointer; }
.tos-check input{ width: 18px; height: 18px; margin-top: 2px; }
.tos-copy{ color: var(--muted); font-size: 13px; line-height: 1.6; }
.tos-link{ color: color-mix(in oklab, var(--a2) 80%, var(--text)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ========== Modals ========== */
.modal{ position: fixed; inset: 0; display:none; align-items:center; justify-content:center; z-index: 60; padding: 18px; }
.modal.show{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.modal-card{
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg1) 88%, transparent);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}
.modal-title{ font-weight: 900; font-size: 18px; }
.modal-text{ color: var(--muted); margin-top: 10px; line-height: 1.65; }

/* OTP / verification code input */
.otp-input{
  font-size: 20px;
  letter-spacing: .28em;
  text-align: center;
  font-weight: 900;
}

/* ========== Flash toasts ========== */
.flashwrap{
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 9000;
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-width: min(520px, calc(100vw - 36px));
}

.flash{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content:space-between;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg1) 84%, transparent);
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.flash.show{ transform: translateY(0); opacity: 1; }

.flash.ok{ border-color: color-mix(in oklab, var(--ok) 35%, var(--border)); }
.flash.error, .flash.danger{ border-color: color-mix(in oklab, var(--danger) 35%, var(--border)); }
.flash.warn{ border-color: color-mix(in oklab, var(--warn) 35%, var(--border)); }

.flash-msg{ color: var(--text); line-height: 1.45; }
.flash-close{ background: transparent; border: 0; cursor:pointer; font-size: 18px; line-height: 1; opacity: .75; padding: 0 4px; }
.flash-close:hover{ opacity: 1; }

/* ========== Keys footer helpers ========== */
.keys-footer{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-top: 10px; color: var(--muted2); font-size: 13px; }

/* ========== Small utilities ========== */
.sm{ font-size: 13px; }
.small{ font-size: 13px; }

/* prevent overly wide monos */
.mono{ word-break: break-word; }

/* ========== Compact mode tweaks ========== */
html[data-appearance="compact"] .content{ padding: 14px 14px 40px; }
html[data-appearance="compact"] .grid{ gap: 12px; }
html[data-appearance="compact"] .row{ gap: 10px; }
html[data-appearance="compact"] .card{ padding: 14px; border-radius: 24px; }
html[data-appearance="compact"] .card.hero{ padding: 18px; }
html[data-appearance="compact"] .btn{ padding: 8px 12px; }
html[data-appearance="compact"] .btn.sm, html[data-appearance="compact"] .btn.small{ padding: 6px 10px; }
html[data-appearance="compact"] input, html[data-appearance="compact"] select, html[data-appearance="compact"] textarea{ padding: 10px 10px; border-radius: 14px; }
html[data-appearance="compact"] .table thead th{ padding: 10px; }
html[data-appearance="compact"] .table tbody td{ padding: 10px; }

/* ========== Billing / pricing ========== */
.pricing-grid,
.account-grid,
.billing-grid,
.checkout-grid,
.usage-grid,
.register-grid{
  display:grid;
  gap: 16px;
}

.pricing-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-grid{ grid-template-columns: 1fr 1fr; }
.billing-grid{ grid-template-columns: 1.15fr 0.85fr; }
.checkout-grid{ grid-template-columns: 1.05fr 0.95fr; }
.usage-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.register-grid{ grid-template-columns: 1.05fr 0.95fr; }

.pricing-card{
  position: relative;
  display:flex;
  flex-direction:column;
  gap: 12px;
  min-height: 100%;
}

.pricing-card.featured{
  border-color: color-mix(in oklab, var(--a1) 36%, var(--border));
  background: radial-gradient(700px 260px at 0% 0%, color-mix(in oklab, var(--a1) 16%, transparent), transparent 60%), color-mix(in oklab, var(--card2) 80%, transparent);
}

.plan-heading{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.plan-name{ font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.plan-copy{ color: var(--muted); margin-top: 6px; }
.price-row{ display:flex; align-items:flex-end; gap: 8px; }
.price-num{ font-size: 34px; line-height: 1; font-weight: 900; }
.price-sub{ color: var(--muted); font-size: 14px; }
.feature-list, .soft-list{ margin:0; padding-left: 18px; color: var(--muted); line-height: 1.8; }
.mini-note{ color: var(--muted2); font-size: 13px; line-height: 1.6; }

.info-banner{
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 72%, transparent);
  color: var(--muted);
}
.info-banner.warn{
  border-color: color-mix(in oklab, var(--warn) 38%, var(--border));
  background: color-mix(in oklab, var(--warn) 10%, transparent);
  color: color-mix(in oklab, var(--warn) 70%, var(--text));
}
.info-banner.ok{
  border-color: color-mix(in oklab, var(--ok) 36%, var(--border));
  background: color-mix(in oklab, var(--ok) 10%, transparent);
  color: color-mix(in oklab, var(--ok) 70%, var(--text));
}

.usage-card{
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 72%, transparent);
  padding: 14px;
}
.usage-top{ display:flex; justify-content:space-between; align-items:center; gap: 12px; }
.usage-k{ color: var(--muted2); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.usage-v{ font-size: clamp(24px, 3vw, 40px); font-weight: 900; line-height: 1.15; overflow-wrap:anywhere; word-break:break-word; }
.usagebar{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in oklab, var(--bg2) 78%, transparent);
  border: 1px solid var(--border);
}
.usagebar > span{
  display:block;
  height:100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--a1), var(--a2));
}

.checkout-qr-card{ display:flex; align-items:center; justify-content:center; }
.qr-shell{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap: 12px; width:100%; max-width: 360px; margin-inline:auto; }
.qr-frame{
  width: min(100%, 332px);
  height: 332px;
  margin-inline: auto;
  padding: 0;
  border-radius: calc(var(--r-xl) + 4px);
  border: 1px solid color-mix(in oklab, var(--a1) 20%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg1) 90%, transparent), color-mix(in oklab, var(--card2) 84%, transparent));
  box-shadow: 0 18px 40px color-mix(in oklab, black 18%, transparent), inset 0 1px 0 color-mix(in oklab, white 10%, transparent);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.qr-frame img{
  display:block;
  width: 118%;
  max-width: none;
  margin: 0;
  border-radius: 18px;
  transform: translate(16px, 10px);
}
.network-note{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--a1) 20%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--card2) 86%, transparent), color-mix(in oklab, var(--bg2) 82%, transparent));
  color: var(--muted);
  font-size: 13px;
}
.checkout-amount{ font-size: clamp(38px, 5vw, 54px); line-height: 1; font-weight: 900; }
.checkout-meta{ color: var(--muted); font-size: 14px; }
.step-list{ margin:0; padding-left: 18px; color: var(--muted); line-height: 1.9; }
.stack{ display:flex; flex-direction:column; gap: 12px; }
.empty-state{
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--border);
  background: color-mix(in oklab, var(--card2) 62%, transparent);
  color: var(--muted);
}
.inline-metrics{ display:flex; flex-wrap:wrap; gap: 8px; }
.inline-metrics .pill{ font-size: 12px; }

@media (max-width: 1000px){
  .pricing-grid,
  .account-grid,
  .billing-grid,
  .checkout-grid,
  .usage-grid,
  .register-grid{ grid-template-columns: 1fr; }
}


/* ========== Billing network picker ========== */
.network-picker{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.network-option{
  position: relative;
  display:block;
  cursor:pointer;
}
.network-option input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.network-option-ui{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 62px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--a1) 22%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card2) 88%, transparent), color-mix(in oklab, var(--bg2) 86%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 7%, transparent),
    0 10px 24px color-mix(in oklab, black 16%, transparent);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.network-option:hover .network-option-ui{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--a1) 40%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 9%, transparent),
    0 14px 32px color-mix(in oklab, black 22%, transparent);
}
.network-option input:checked + .network-option-ui{
  border-color: color-mix(in oklab, var(--a1) 62%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--a1) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in oklab, var(--card2) 96%, transparent), color-mix(in oklab, var(--bg2) 88%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 10%, transparent),
    0 0 0 3px color-mix(in oklab, var(--a1) 18%, transparent),
    0 16px 36px color-mix(in oklab, black 24%, transparent);
}
.network-option input:focus-visible + .network-option-ui{
  outline: 0;
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--focus) 28%, transparent),
    0 16px 36px color-mix(in oklab, black 24%, transparent);
}
.network-icon{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  font-size: 17px;
  color: color-mix(in oklab, var(--a1) 78%, white);
  background: linear-gradient(135deg, color-mix(in oklab, var(--a1) 24%, transparent), color-mix(in oklab, var(--a2) 18%, transparent));
  border: 1px solid color-mix(in oklab, var(--a1) 24%, var(--border));
  flex: 0 0 auto;
}
.network-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.network-copy strong{
  font-size: 13px;
  letter-spacing: .01em;
}
.network-copy small{
  color: var(--muted2);
  font-size: 12px;
}
@media (max-width: 640px){
  .network-picker{ grid-template-columns: 1fr; }
}


/* ========== Modern checkbox tiles ========== */
.check-tile{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--card2) 82%, transparent), color-mix(in oklab, var(--bg1) 90%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.check-tile:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--a1) 24%, var(--border));
  box-shadow: 0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
.check-tile.is-disabled{ opacity: .7; cursor: not-allowed; }
.check-tile-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.check-tile-box{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, white 4%);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:flex;
  align-items:center;
  justify-content:center;
  color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: all .16s ease;
}
.check-tile-box svg{ width: 15px; height: 15px; }
.check-tile-label{
  color: var(--text);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
}
.check-tile-input:checked + .check-tile-box{
  color: #fff;
  border-color: color-mix(in oklab, var(--a1) 56%, var(--a2));
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--a1) 18%, transparent), 0 10px 22px color-mix(in oklab, var(--a1) 20%, transparent);
}
.check-tile-input:checked ~ .check-tile-label{ color: #f6fbfa; }
.check-tile:has(.check-tile-input:checked){
  border-color: color-mix(in oklab, var(--a1) 42%, var(--border));
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 18%, transparent), color-mix(in oklab, var(--a2) 13%, transparent));
}
.check-tile:has(.check-tile-input:focus-visible){
  outline: 2px solid color-mix(in oklab, var(--a1) 45%, white 5%);
  outline-offset: 2px;
}

/* ========== Goal-first cockpit / modern marketing ========== */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted2);
}
.eyebrow::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--a1) 14%, transparent);
}

.cockpit-hero,
.billing-hero,
.forum-hero,
.forum-thread-hero,
.marketing-hero{
  overflow:hidden;
}

.cockpit-top,
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.section-head-spacious{ margin-bottom: 18px; }
.cockpit-actions,
.inline-action-row,
.forum-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.inline-action-row.tight{ gap:10px; }

.cockpit-statgrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top: 18px;
}
.cockpit-stat{
  padding:16px;
  border-radius: 22px;
  border:1px solid color-mix(in oklab, var(--a1) 18%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card2) 88%, transparent), color-mix(in oklab, var(--bg2) 84%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 7%, transparent);
}
.cockpit-stat .k{ color: var(--muted2); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.cockpit-stat .v{ font-size: clamp(24px, 3vw, 34px); line-height:1.05; font-weight: 900; margin-top:6px; }

.focus-card-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top: 18px;
}
.focus-card-grid.static{ margin-top:0; }
.focus-form{ margin:0; }
.focus-card-btn{
  width:100%;
  text-align:left;
  padding:18px;
  border-radius: 26px;
  border:1px solid color-mix(in oklab, var(--border2) 90%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card2) 92%, transparent), color-mix(in oklab, var(--bg2) 88%, transparent));
  color: var(--text);
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 8%, transparent);
}
.focus-card-btn:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--a1) 24%, var(--border));
  box-shadow: 0 18px 34px color-mix(in oklab, black 14%, transparent), inset 0 1px 0 color-mix(in oklab, white 8%, transparent);
}
.focus-card-btn.active{
  border-color: color-mix(in oklab, var(--a1) 42%, var(--border));
  background:
    radial-gradient(700px 220px at 0% 0%, color-mix(in oklab, var(--a1) 18%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in oklab, var(--card2) 94%, transparent), color-mix(in oklab, var(--bg2) 88%, transparent));
}
.focus-card-btn.ok.active,
.focus-card-btn.ok.static{
  border-color: color-mix(in oklab, var(--ok) 42%, var(--border));
}
.focus-card-btn.warn.active,
.focus-card-btn.warn.static{
  border-color: color-mix(in oklab, var(--warn) 42%, var(--border));
}
.focus-card-btn.static{ cursor: default; }
.focus-card-btn.static:hover{ transform:none; }
.focus-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.focus-icon{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: color-mix(in oklab, var(--a1) 14%, transparent);
  font-size:22px;
}
.focus-name{ font-size: 22px; font-weight: 900; letter-spacing:-.02em; }
.focus-eyebrow{ color: var(--muted2); font-size:12px; text-transform: uppercase; letter-spacing:.08em; }
.focus-copy{ color: var(--muted); line-height: 1.65; }
.focus-points{ display:flex; flex-wrap:wrap; gap:8px; }
.focus-points .pill{ padding:6px 10px; font-size:12px; }

.overview-two-col,
.forum-grid{
  display:grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap:16px;
}
.overview-panel{ min-height:100%; }
.checklist-grid{
  display:grid;
  gap:12px;
}
.check-item{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius: 20px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 72%, transparent);
}
.check-item.done{
  border-color: color-mix(in oklab, var(--ok) 28%, var(--border));
  background: color-mix(in oklab, var(--ok) 10%, transparent);
}
.check-icon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--a1) 30%, var(--border));
  background: color-mix(in oklab, var(--a1) 12%, transparent);
  font-weight: 900;
}
.check-item.done .check-icon{
  border-color: color-mix(in oklab, var(--ok) 35%, var(--border));
  background: color-mix(in oklab, var(--ok) 16%, transparent);
}
.check-title,
.signal-title,
.surface-box-title,
.forum-post-title{
  font-weight: 800;
  color: var(--text);
}
.mini-kpi-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.security-grid{ margin-bottom: 14px; }
.mini-kpi{
  padding:14px;
  border-radius: 20px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 72%, transparent);
}
.mini-kpi .k{ color: var(--muted2); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.mini-kpi .v{ font-size: clamp(22px, 2.8vw, 32px); font-weight:900; margin-top:6px; }
.surface-box{
  padding:16px;
  border-radius: 22px;
  border:1px solid color-mix(in oklab, var(--a1) 18%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card2) 88%, transparent), color-mix(in oklab, var(--bg2) 84%, transparent));
}
.surface-box.compact{ padding:14px; }
.signal-list{
  display:grid;
  gap:10px;
  margin-top: 14px;
}
.signal-list.compact{ margin-top: 12px; }
.signal-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-radius: 20px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 72%, transparent);
}
.signal-row.link-row{
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.signal-row.link-row:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--a1) 26%, var(--border));
  background: color-mix(in oklab, var(--card2) 80%, transparent);
}

/* Billing modern cards */
.pricing-grid-modern .pricing-card{ gap:16px; }
.billing-price-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.billing-price-card{
  padding:14px;
  border-radius: 22px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 76%, transparent);
}
.billing-price-card.yearly{
  border-color: color-mix(in oklab, var(--a1) 28%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--a1) 12%, transparent), color-mix(in oklab, var(--card2) 80%, transparent));
}
.billing-price-label{
  color: var(--muted2);
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.billing-secondary-cta{
  width:100%;
  min-height: 48px;
}
.network-note.yearly{
  border-color: color-mix(in oklab, var(--a2) 20%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--a2) 8%, transparent), color-mix(in oklab, var(--bg2) 82%, transparent));
}

/* Forum */
.forum-shell{ gap:16px; }
.forum-head,
.forum-section-head{ margin-bottom: 18px; }
.forum-toolbar{ justify-content:flex-end; }
.btn.forum-refresh{
  border-color: color-mix(in oklab, var(--a2) 28%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--card2) 80%, transparent), color-mix(in oklab, var(--a2) 8%, transparent));
}
.btn.forum-refresh:hover{
  background: linear-gradient(180deg, color-mix(in oklab, var(--card2) 86%, transparent), color-mix(in oklab, var(--a2) 14%, transparent));
}
.btn.forum-create{
  border-color: color-mix(in oklab, var(--a1) 40%, var(--border));
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 54%, transparent), color-mix(in oklab, var(--a2) 44%, transparent));
  box-shadow: 0 14px 28px color-mix(in oklab, var(--a1) 16%, transparent), inset 0 1px 0 color-mix(in oklab, white 10%, transparent);
}
.btn.forum-create:hover{
  border-color: color-mix(in oklab, var(--a1) 55%, var(--border));
}
.forum-list-card,
.forum-compose-card,
.forum-thread-card{ min-height:100%; }
.forum-post-list{
  display:grid;
  gap:12px;
}
.forum-post-item{
  padding:16px;
  border-radius: 22px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--card2) 72%, transparent);
}
.forum-post-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.forum-post-title{ font-size: 20px; line-height:1.25; margin-bottom: 10px; }
.forum-post-title a{ color: inherit; }
.forum-post-preview{
  color: var(--muted);
  line-height:1.72;
}
.forum-post-actions{ margin-top: 14px; }
.forum-empty{
  padding:24px;
  border-radius: 24px;
  border:1px dashed color-mix(in oklab, var(--a1) 20%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--card2) 74%, transparent), color-mix(in oklab, var(--bg2) 84%, transparent));
  color: var(--muted);
}
.forum-empty.compact{ padding:16px; border-radius:20px; }
.forum-guidelines{ margin-bottom: 14px; }
.forum-post-body{
  white-space: pre-wrap;
  line-height: 1.82;
  color: var(--text);
  font-size: 15px;
}

/* Responsive */
@media (max-width: 1100px){
  .cockpit-statgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus-card-grid{ grid-template-columns: 1fr; }
  .overview-two-col,
  .forum-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 800px){
  .cockpit-top,
  .section-head{ flex-direction:column; }
  .cockpit-actions,
  .forum-toolbar{ width:100%; justify-content:flex-start; }
  .cockpit-statgrid,
  .mini-kpi-grid,
  .billing-price-grid{ grid-template-columns: 1fr; }
}
.signal-row.link-row{ text-decoration:none; color: inherit; }
.forum-post-title a{ text-decoration:none; }
.focus-card-btn{ font: inherit; }


/* WRGA spacing hotfix */
.overview-panel .checklist-grid + .inline-action-row{
  margin-top: 20px;
}
.overview-panel .inline-action-row{
  gap: 14px;
}
.overview-panel .mini-kpi-grid + .surface-box{
  margin-top: 16px;
}
.overview-panel .surface-box + .signal-list.compact,
.overview-panel .surface-box + .forum-empty.compact{
  margin-top: 16px;
}
.overview-panel .signal-list.compact{
  margin-top: 16px;
}
.overview-panel .forum-empty.compact{
  margin-top: 16px;
}
.table-wrap{
  overflow-x: auto;
}
.btn.sm{
  min-height: 36px;
  padding: 8px 12px;
}
.btn.sm.ok{
  border-color: color-mix(in oklab, var(--ok) 38%, var(--border));
  background: color-mix(in oklab, var(--ok) 14%, transparent);
}
.btn.sm.danger,
.btn.danger{
  border-color: color-mix(in oklab, var(--danger) 42%, var(--border));
  background: color-mix(in oklab, var(--danger) 14%, transparent);
}
@media (max-width: 800px){
  .overview-panel .checklist-grid + .inline-action-row{
    margin-top: 22px;
  }
  .overview-panel .inline-action-row{
    gap: 12px;
  }
}


/* WRGA fancy selectors and billing polish */
.fancy-choice-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.role-choice-grid{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.fancy-choice-card{
  min-height: 118px;
  padding: 16px 16px 15px;
  border-radius: 22px;
  border: 1px solid color-mix(in oklab, var(--a1) 20%, var(--border));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--a1) 12%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in oklab, var(--card2) 88%, transparent), color-mix(in oklab, var(--bg2) 82%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 8%, transparent);
}
.choice-input:checked + .fancy-choice-card{
  border-color: color-mix(in oklab, var(--a1) 42%, var(--border));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--a1) 20%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in oklab, var(--a1) 12%, transparent), color-mix(in oklab, var(--card2) 88%, transparent));
  box-shadow:
    0 16px 34px color-mix(in oklab, black 14%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 10%, transparent),
    0 0 0 1px color-mix(in oklab, var(--a2) 18%, transparent);
}
.choice-input:focus-visible + .fancy-choice-card{
  outline: 2px solid color-mix(in oklab, var(--focus) 68%, transparent);
  outline-offset: 2px;
}
.fancy-choice-card .choice-title{
  font-size: 18px;
  line-height: 1.15;
  font-weight: 850;
  margin-bottom: 8px;
}
.fancy-choice-card .choice-desc{
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}
.automation-actions-row{
  margin-top: 10px;
}

.overview-panel .checklist-grid + .inline-action-row{
  margin-top: 22px;
}
.overview-panel .inline-action-row{
  gap: 14px;
}
.overview-panel .surface-box + .surface-box,
.overview-panel .surface-box + .forum-empty.compact,
.overview-panel .mini-kpi-grid + .surface-box,
.overview-panel .signal-list.compact + .surface-box{
  margin-top: 18px;
}

.billing-price-grid{
  align-items: stretch;
  gap: 14px;
}
.billing-price-card{
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
}
.billing-price-row{
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
}
.billing-price-num{
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: .95;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.billing-price-sub{
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 15px;
  padding-bottom: 5px;
}
.billing-price-card .mini-note{
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.plan-copy{
  max-width: 30ch;
  line-height: 1.6;
}
.plan-heading{
  gap: 16px;
}
.pricing-card{
  overflow: hidden;
}
.pricing-card .stack{
  gap: 12px;
}

.qr-frame-polished{
  width: min(100%, 356px);
  padding: 18px;
}
.qr-image-shell{
  width: min(100%, 286px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow:
    0 14px 30px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(0,0,0,.04);
}
.qr-image-polished{
  width: 112%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  transform: translateY(-1px);
  object-fit: cover;
  display: block;
}

.btn.sm{
  min-height: 38px;
  padding: 8px 12px;
}

@media (max-width: 900px){
  .billing-price-card{
    min-height: 154px;
    padding: 16px;
  }
  .billing-price-row{
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .billing-price-sub{
    padding-bottom: 0;
  }
  .fancy-choice-grid,
  .role-choice-grid{
    grid-template-columns: 1fr;
  }
  .qr-image-shell{
    width: min(100%, 260px);
  }
}


/* WRGA billing hard fix */
.pricing-grid-modern{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}
.pricing-card{
  overflow:hidden;
}
.plan-heading{
  gap:16px;
  align-items:flex-start;
}
.plan-copy{
  max-width:26ch;
  line-height:1.55;
}
.billing-price-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}
.billing-price-card-polished{
  min-width:0;
  min-height:176px;
  padding:18px 16px;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
  overflow:hidden;
}
.billing-price-label{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted2);
}
.billing-price-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.billing-price-num{
  font-size:clamp(28px, 3.1vw, 46px);
  line-height:.92;
  letter-spacing:-.04em;
  white-space:nowrap;
  flex:0 1 auto;
  min-width:0;
}
.billing-price-sub{
  white-space:nowrap;
  font-size:15px;
  color:var(--muted);
  padding-bottom:4px;
}
.billing-price-card-polished .mini-note{
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

.checkout-qr-card{
  display:flex;
  align-items:center;
  justify-content:center;
}
.qr-shell{
  width:100%;
  max-width:380px;
  margin-inline:auto;
}
.qr-frame-polished{
  width:min(100%, 360px);
  padding:14px;
  margin-inline:auto;
}
.qr-crop-shell{
  width:292px;
  height:292px;
  margin-inline:auto;
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.04);
}
.qr-image-polished{
  width:118%;
  max-width:none;
  display:block;
  margin:0;
  transform:translate(0, -1px);
  object-fit:cover;
  object-position:center center;
}

@media (max-width: 980px){
  .pricing-grid-modern{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .billing-price-grid{
    grid-template-columns:1fr;
  }
  .billing-price-card-polished{
    min-height:unset;
  }
  .billing-price-num{
    font-size:clamp(30px, 8vw, 42px);
  }
  .qr-crop-shell{
    width:min(100%, 264px);
    height:min(100%, 264px);
  }
}




/* WRGA billing + QR final override */
.pricing-grid-modern .pricing-card{
  overflow:hidden;
}
.pricing-grid-modern .billing-price-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}
.pricing-grid-modern .billing-price-card,
.pricing-grid-modern .billing-price-card.yearly,
.billing-price-card-polished{
  min-width:0 !important;
  min-height:168px !important;
  padding:18px 16px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:12px !important;
}
.pricing-grid-modern .billing-price-label{
  margin-bottom:6px !important;
}
.pricing-grid-modern .price-row,
.pricing-grid-modern .billing-price-row{
  display:flex !important;
  align-items:flex-end !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  min-width:0 !important;
}
.pricing-grid-modern .price-num,
.pricing-grid-modern .billing-price-num{
  font-size:clamp(24px, 2.5vw, 36px) !important;
  line-height:.92 !important;
  letter-spacing:-.04em !important;
  white-space:nowrap !important;
  flex:0 1 auto !important;
  min-width:0 !important;
}
.pricing-grid-modern .price-sub,
.pricing-grid-modern .billing-price-sub{
  font-size:14px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  padding-bottom:3px !important;
}
.pricing-grid-modern .billing-price-card .mini-note,
.pricing-grid-modern .billing-price-card-polished .mini-note{
  font-size:13px !important;
  line-height:1.45 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  max-width:100% !important;
}
.pricing-grid-modern .plan-copy{
  max-width:28ch !important;
}

.checkout-qr-card{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.checkout-qr-card .qr-shell{
  width:100% !important;
  max-width:380px !important;
  margin-inline:auto !important;
  align-items:center !important;
}
.checkout-qr-card .qr-frame,
.checkout-qr-card .qr-frame-polished{
  width:min(100%, 360px) !important;
  padding:16px !important;
  margin-inline:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.checkout-qr-card .qr-frame img,
.checkout-qr-card .qr-image-polished{
  display:block !important;
  width:121% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:44% 50% !important;
  transform:translateX(-8px) translateY(-1px) !important;
}
.checkout-qr-card .qr-crop-shell,
.checkout-qr-card .qr-image-shell{
  width:292px !important;
  height:292px !important;
  margin-inline:auto !important;
  border-radius:26px !important;
  overflow:hidden !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

@media (max-width: 760px){
  .pricing-grid-modern .billing-price-grid{
    grid-template-columns:1fr !important;
  }
  .pricing-grid-modern .billing-price-card,
  .pricing-grid-modern .billing-price-card.yearly,
  .billing-price-card-polished{
    min-height:auto !important;
  }
  .pricing-grid-modern .price-num,
  .pricing-grid-modern .billing-price-num{
    font-size:clamp(28px, 8vw, 38px) !important;
  }
  .checkout-qr-card .qr-crop-shell,
  .checkout-qr-card .qr-image-shell{
    width:min(100%, 268px) !important;
    height:min(100%, 268px) !important;
  }
}


/* WRGA final QR + price correction */
.pricing-grid-modern .billing-price-grid,
.billing-price-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}
.pricing-grid-modern .billing-price-card,
.pricing-grid-modern .billing-price-card.yearly,
.billing-price-card,
.billing-price-card-polished{
  min-width:0 !important;
  min-height:170px !important;
  padding:16px 14px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:10px !important;
}
.pricing-grid-modern .price-row,
.pricing-grid-modern .billing-price-row,
.billing-price-row{
  display:flex !important;
  align-items:flex-end !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}
.pricing-grid-modern .price-num,
.pricing-grid-modern .billing-price-num,
.billing-price-num{
  font-size:clamp(22px, 2.2vw, 34px) !important;
  line-height:.92 !important;
  letter-spacing:-.04em !important;
  white-space:nowrap !important;
  max-width:100% !important;
}
.pricing-grid-modern .price-sub,
.pricing-grid-modern .billing-price-sub,
.billing-price-sub{
  font-size:13px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  padding-bottom:3px !important;
}
.pricing-grid-modern .billing-price-card .mini-note,
.billing-price-card .mini-note,
.billing-price-card-polished .mini-note{
  font-size:13px !important;
  line-height:1.42 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
.plan-copy{
  max-width:24ch !important;
}

.checkout-qr-card,
.qr-shell,
.qr-frame,
.qr-frame-polished{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.qr-frame,
.qr-frame-polished{
  width:min(100%, 372px) !important;
  padding:14px !important;
  margin-inline:auto !important;
}
.qr-crop-shell,
.qr-image-shell{
  width:304px !important;
  height:304px !important;
  margin-inline:auto !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.qr-frame img,
.qr-image-polished{
  width:126% !important;
  max-width:none !important;
  display:block !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:translateX(50%) translateY(0px) !important;
}

@media (max-width: 760px){
  .pricing-grid-modern .billing-price-grid,
  .billing-price-grid{
    grid-template-columns:1fr !important;
  }
  .pricing-grid-modern .price-num,
  .pricing-grid-modern .billing-price-num,
  .billing-price-num{
    font-size:clamp(28px, 8vw, 36px) !important;
  }
  .qr-crop-shell,
  .qr-image-shell{
    width:min(100%, 276px) !important;
    height:min(100%, 276px) !important;
  }
}

/* QR shift exact */

.qr-frame img,
.qr-image-polished{
  transform: translateX(50%) translateY(15%) !important;
}



/* FORCE QR MOVE EXACT */
.qr-frame img,
.qr-frame-polished img,
.qr-crop-shell img,
.qr-image-shell img,
img.qr-image-polished,
.checkout-qr-card img,
[class*="qr"] img{
  position: relative !important;
  transform: translate(50%, 15%) !important;
}

/* app keys: compact modern cards */
.keys-layout{
  display:grid;
  grid-template-columns:minmax(300px, 360px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.keys-panel{
  overflow:hidden;
}

.keys-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.keys-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.keys-searchbar{
  width:min(100%, 430px);
  min-width:min(430px, 100%);
}

.keys-card-list{
  display:grid;
  gap:14px;
  max-height:560px;
  overflow:auto;
  padding-right:4px;
}

.key-card-modern{
  border:1px solid color-mix(in oklab, var(--border) 90%, transparent);
  background:linear-gradient(180deg, color-mix(in oklab, var(--card2) 92%, transparent), color-mix(in oklab, var(--card) 96%, transparent));
  border-radius:20px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.key-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.key-card-main{
  min-width:0;
}

.key-code{
  font-size:clamp(18px, 2vw, 26px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}

.key-note-chip{
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--brand) 28%, var(--border));
  background:color-mix(in oklab, var(--brand) 14%, transparent);
  color:color-mix(in oklab, var(--brand) 72%, white);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.key-meta{
  margin-top:8px;
  color:var(--muted2);
  font-size:12px;
  line-height:1.5;
}

.key-detail-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}

.key-detail{
  padding:12px;
  border-radius:16px;
  border:1px solid color-mix(in oklab, var(--border) 88%, transparent);
  background:color-mix(in oklab, var(--card2) 64%, transparent);
  min-width:0;
}

.key-detail-label{
  color:color-mix(in oklab, var(--brand) 58%, var(--muted));
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}

.key-detail-value{
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.key-detail-sub{
  margin-top:6px;
  color:var(--muted2);
  font-size:12px;
  font-weight:500;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.key-status-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.key-hold-note{
  border-color:color-mix(in oklab, var(--warn) 35%, var(--border));
  background:color-mix(in oklab, var(--warn) 12%, transparent);
  color:color-mix(in oklab, var(--warn) 72%, var(--text));
}

.key-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

@media (max-width: 1180px){
  .keys-layout{
    grid-template-columns:1fr;
  }

  .key-detail-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .keys-toolbar-actions{
    width:100%;
    justify-content:stretch;
  }

  .keys-searchbar{
    width:100%;
    min-width:0;
  }

  .key-card-head{
    flex-direction:column;
    align-items:stretch;
  }

  .key-detail-grid{
    grid-template-columns:1fr;
  }

  .key-actions{
    justify-content:flex-start;
  }
}

/* compact keys layout */
.keys-layout{
  display:grid;
  grid-template-columns:minmax(300px, 360px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.keys-panel{overflow:hidden}
.keys-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.keys-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.keys-searchbar{
  width:min(100%, 430px);
  min-width:min(430px, 100%);
}
.keys-card-list{
  display:grid;
  gap:14px;
  max-height:560px;
  overflow:auto;
  padding-right:4px;
}
.key-card-modern{
  border:1px solid color-mix(in oklab, var(--border) 90%, transparent);
  background:linear-gradient(180deg, color-mix(in oklab, var(--card2) 92%, transparent), color-mix(in oklab, var(--card) 96%, transparent));
  border-radius:20px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.key-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.key-card-main{min-width:0}
.key-code{
  font-size:clamp(18px, 2vw, 26px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.key-note-chip{
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--brand) 28%, var(--border));
  background:color-mix(in oklab, var(--brand) 14%, transparent);
  color:color-mix(in oklab, var(--brand) 72%, white);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.key-meta{
  margin-top:8px;
  color:var(--muted2);
  font-size:12px;
  line-height:1.5;
}
.key-detail-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}
.key-detail{
  padding:12px;
  border-radius:16px;
  border:1px solid color-mix(in oklab, var(--border) 88%, transparent);
  background:color-mix(in oklab, var(--card2) 64%, transparent);
  min-width:0;
}
.key-detail-label{
  color:color-mix(in oklab, var(--brand) 58%, var(--muted));
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.key-detail-value{
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.key-detail-sub{
  margin-top:6px;
  color:var(--muted2);
  font-size:12px;
  font-weight:500;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.key-status-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.key-hold-note{
  border-color:color-mix(in oklab, var(--warn) 35%, var(--border));
  background:color-mix(in oklab, var(--warn) 12%, transparent);
  color:color-mix(in oklab, var(--warn) 72%, var(--text));
}
.key-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
@media (max-width: 1180px){
  .keys-layout{grid-template-columns:1fr}
  .key-detail-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 760px){
  .keys-toolbar-actions{width:100%;justify-content:stretch}
  .keys-searchbar{width:100%;min-width:0}
  .key-card-head{flex-direction:column;align-items:stretch}
  .key-detail-grid{grid-template-columns:1fr}
  .key-actions{justify-content:flex-start}
}