/* ==========================================================
   RepriBot — HUX Guardians Design System v1
   Light-first, dark-capable. No framework, pure CSS.
   ========================================================== */

/* ───── Fonts ───── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ───── Reset ───── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{min-height:100vh;min-height:100dvh;font-family:var(--font-body);font-size:15px;line-height:1.65;color:var(--hux-text);background:var(--hux-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .25s ease,color .25s ease}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--primary);text-decoration:none;transition:color .15s}
a:hover{color:var(--primary-strong)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
::selection{background:var(--primary);color:#fff}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.2}

/* ───── Design tokens — LIGHT (default) ───── */
:root{
    /* Palette */
    --bg:#F8FAFC;
    --surface:#FFFFFF;
    --surface-2:#F1F5F9;
    --surface-3:#E2E8F0;
    --border:#CBD5E1;
    --border-strong:#94A3B8;
    --text:#0F172A;
    --text-muted:#475569;
    --text-subtle:#64748B;

    --hux-bg:#f8fafc;
    --hux-surface:#ffffff;
    --hux-surface-soft:#f1f5f9;
    --hux-text:#0f172a;
    --hux-text-muted:#475569;
    --hux-border:#cbd5e1;

    --primary:#6D4AFF;
    --primary-strong:#5937E6;
    --primary-soft:#EFEAFF;
    --primary-glow:rgba(109,74,255,.18);
    --accent:#00C9BD;
    --accent-soft:#D6FBF8;

    --success:#16A34A;
    --success-soft:#DCFCE7;
    --warning:#D97706;
    --warning-soft:#FEF3C7;
    --danger:#E11D48;
    --danger-soft:#FFE4E8;
    --info:#2563EB;
    --info-soft:#DBEAFE;

    /* Gradients */
    --aurora:linear-gradient(135deg,#6D4AFF 0%,#8B6BFF 45%,#00E0D1 100%);
    --aurora-soft:linear-gradient(135deg,rgba(109,74,255,.10) 0%,rgba(0,224,209,.10) 100%);

    /* Elevation */
    --shadow-xs:0 1px 2px rgba(11,11,18,.04);
    --shadow-sm:0 2px 8px rgba(11,11,18,.06);
    --shadow-md:0 8px 24px rgba(11,11,18,.08);
    --shadow-lg:0 20px 48px rgba(11,11,18,.12);
    --shadow-glow:0 8px 32px rgba(109,74,255,.25);

    /* Radius */
    --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-full:999px;

    /* Legacy aliases (for views predating rebrand) */
    --radius:var(--r-md);
    --radius-sm:var(--r-sm);
    --bg-card:var(--surface);
    --bg-input:var(--surface-2);
    --bg-sidebar:var(--surface);
    --border-focus:var(--primary);

    /* Typography */
    --font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

    /* Motion */
    --ease:cubic-bezier(.22,1,.36,1);
    --ease-bounce:cubic-bezier(.34,1.56,.64,1);
    --d-fast:.18s;
    --d-base:.28s;
    --d-slow:.42s;

    /* Layout */
    --sidebar-w:240px;
    --topbar-h:60px;
    --container:none;
    --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ───── Design tokens — DARK ───── */
[data-theme="dark"],.dark{
    --bg:#0B0B12;
    --surface:#14141F;
    --surface-2:#1C1C2A;
    --surface-3:#262636;
    --border:#262636;
    --border-strong:#353548;
    --text:#EDEDF5;
    --text-muted:#9494AD;
    --text-subtle:#6B6B80;

    --hux-bg:#020617;
    --hux-surface:#0f172a;
    --hux-surface-soft:#111827;
    --hux-text:#f8fafc;
    --hux-text-muted:#cbd5e1;
    --hux-border:#334155;

    --primary:#8B6BFF;
    --primary-strong:#A18BFF;
    --primary-soft:rgba(139,107,255,.12);
    --primary-glow:rgba(139,107,255,.32);
    --accent:#00E0D1;
    --accent-soft:rgba(0,224,209,.12);

    --success:#22C55E;
    --success-soft:rgba(34,197,94,.12);
    --warning:#FBBF24;
    --warning-soft:rgba(251,191,36,.12);
    --danger:#FB7185;
    --danger-soft:rgba(251,113,133,.12);
    --info:#60A5FA;
    --info-soft:rgba(96,165,250,.12);

    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow-sm:0 2px 8px rgba(0,0,0,.35);
    --shadow-md:0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:0 20px 48px rgba(0,0,0,.55);
    --shadow-glow:0 8px 32px rgba(139,107,255,.35);
}

/* ───── Layout primitives ───── */
.container{width:100%;max-width:none;margin:0;padding:0 1.5rem}
.section{padding:5rem 1.5rem}
.section-sm{padding:3rem 1.5rem}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;background:var(--primary-soft);color:var(--primary);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-full);margin-bottom:1.25rem}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);animation:pulse 2.4s var(--ease) infinite}

.gradient-text{background:var(--aurora);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ───── Buttons ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.25rem;font-family:var(--font-body);font-size:.9rem;font-weight:600;letter-spacing:-.005em;line-height:1;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;transition:all var(--d-fast) var(--ease);min-height:42px;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-xs)}
.btn-primary:hover{background:var(--primary-strong);box-shadow:var(--shadow-glow);color:#fff}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{color:var(--text);background:var(--surface-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(.92);color:#fff}
.btn-danger-outline{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn-danger-outline:hover{background:var(--danger);color:#fff}
.btn-sm{padding:.5rem .85rem;font-size:.8rem;min-height:34px}
.btn-lg{padding:.95rem 1.75rem;font-size:1rem;min-height:50px}
.btn-block{width:100%}
.btn .icon{width:18px;height:18px;flex-shrink:0}

/* ───── Cards ───── */
.card{width:100%;max-width:100%;background:var(--hux-surface);color:var(--hux-text);border:1px solid var(--hux-border);border-radius:var(--r-sm);padding:1.25rem;box-shadow:var(--shadow-sm);transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.card-hover:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.card-padded{padding:2rem}
.card-compact{padding:1rem}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.card-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.card-subtitle{font-size:.85rem;color:var(--text-muted);margin-top:.15rem}

/* ───── Stats ───── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.stat-card{background:var(--hux-surface);color:var(--hux-text);border:1px solid var(--hux-border);border-radius:var(--r-sm);padding:1.25rem 1.4rem;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.stat-card::before{content:'';position:absolute;inset:0;background:var(--aurora-soft);opacity:0;transition:opacity var(--d-base) var(--ease);pointer-events:none}
.stat-card:hover::before{opacity:1}
.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:.5rem}
.stat-value{font-family:var(--font-display);font-weight:700;font-size:1.9rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-detail{font-size:.78rem;color:var(--text-muted);margin-top:.25rem}
.stat-value.mono{font-family:var(--font-mono);font-size:1.6rem}

.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-info{color:var(--info)}.text-muted{color:var(--text-muted)}

/* ───── Forms ───── */
.form-group{margin-bottom:1.25rem}
.form-label{display:block;margin-bottom:.4rem;font-size:.82rem;font-weight:500;color:var(--text)}
.form-label .hint{color:var(--text-muted);font-weight:400;margin-left:.35rem}
.form-input,.form-select,.form-textarea{width:100%;padding:.7rem .95rem;background:var(--hux-surface);border:1px solid var(--hux-border);border-radius:var(--r-sm);color:var(--hux-text);font-size:.9rem;transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease);min-height:44px;outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--hux-text-muted)}
.form-input:disabled,.form-select:disabled,.form-textarea:disabled{opacity:.75;background:var(--hux-surface-soft);color:var(--hux-text-muted)}
.form-input.is-invalid{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}
.form-textarea{min-height:110px;resize:vertical;font-family:var(--font-body)}
.form-error{color:var(--danger);font-size:.78rem;margin-top:.3rem;display:flex;align-items:center;gap:.3rem}
.form-hint{color:var(--text-muted);font-size:.78rem;margin-top:.3rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.form-select{cursor:pointer;appearance:none;padding-right:2.5rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .85rem center}
.form-check{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.form-check input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.form-check label{font-size:.9rem;cursor:pointer}

/* ───── Badges ───── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;font-size:.72rem;font-weight:600;letter-spacing:.02em;border-radius:var(--r-full);white-space:nowrap;border:1px solid transparent}
.badge-primary{background:var(--primary-soft);color:var(--primary)}
.badge-success{background:var(--success-soft);color:var(--success)}
.badge-warning{background:var(--warning-soft);color:var(--warning)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-muted{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.badge-accent{background:var(--accent-soft);color:var(--accent)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ───── Alerts ───── */
.alert{padding:.85rem 1.15rem;border-radius:var(--r-sm);font-size:.88rem;display:flex;align-items:flex-start;gap:.65rem;border:1px solid transparent;margin-bottom:1rem}
.alert .icon{width:18px;height:18px;flex-shrink:0;margin-top:.1rem}
.alert-success{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 20%,transparent)}
.alert-warning{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 20%,transparent)}
.alert-danger{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 20%,transparent)}
.alert-info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 20%,transparent)}

/* ───── Tables ───── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hux-border);border-radius:var(--r-sm);background:var(--hux-surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;min-width:560px}
th{text-align:left;padding:.75rem 1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--hux-text-muted);border-bottom:1px solid var(--hux-border);font-weight:700;white-space:nowrap;background:var(--hux-surface-soft)}
td{padding:.85rem 1rem;border-bottom:1px solid var(--hux-border);font-size:.88rem;color:var(--hux-text)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--d-fast)}
tbody tr:hover{background:var(--surface-2)}
td.mono,th.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

[data-theme="dark"] .bg-white,.dark .bg-white{background-color:var(--hux-surface)!important}
[data-theme="dark"] .bg-slate-50,.dark .bg-slate-50,
[data-theme="dark"] .bg-slate-100,.dark .bg-slate-100{background-color:var(--hux-surface-soft)!important}
[data-theme="dark"] .border-slate-100,.dark .border-slate-100,
[data-theme="dark"] .border-slate-200,.dark .border-slate-200,
[data-theme="dark"] .border-slate-300,.dark .border-slate-300{border-color:var(--hux-border)!important}
[data-theme="dark"] .text-slate-900,.dark .text-slate-900,
[data-theme="dark"] .text-slate-800,.dark .text-slate-800,
[data-theme="dark"] .text-slate-700,.dark .text-slate-700{color:var(--hux-text)!important}
[data-theme="dark"] .text-slate-600,.dark .text-slate-600,
[data-theme="dark"] .text-slate-500,.dark .text-slate-500{color:var(--hux-text-muted)!important}
[data-theme="dark"] input,.dark input,
[data-theme="dark"] select,.dark select,
[data-theme="dark"] textarea,.dark textarea{background-color:var(--hux-surface)!important;color:var(--hux-text)!important;border-color:var(--hux-border)!important}
[data-theme="dark"] input::placeholder,.dark input::placeholder,
[data-theme="dark"] textarea::placeholder,.dark textarea::placeholder{color:var(--hux-text-muted)!important}
[data-theme="dark"] table,.dark table{background:var(--hux-surface);color:var(--hux-text)}
[data-theme="dark"] th,.dark th{background:var(--hux-surface-soft)!important;color:var(--hux-text-muted)!important;border-color:var(--hux-border)!important}
[data-theme="dark"] td,.dark td{color:var(--hux-text)!important;border-color:var(--hux-border)!important}
[data-theme="dark"] tbody tr:hover,.dark tbody tr:hover{background:var(--hux-surface-soft)!important}
[data-theme="dark"] .badge-muted,.dark .badge-muted{background:var(--hux-surface-soft);color:var(--hux-text);border-color:var(--hux-border)}
[data-theme="dark"] .badge-primary,.dark .badge-primary{background:rgba(129,140,248,.16);color:#c7d2fe}
[data-theme="dark"] .badge-success,.dark .badge-success{background:rgba(34,197,94,.16);color:#bbf7d0}
[data-theme="dark"] .badge-warning,.dark .badge-warning{background:rgba(251,191,36,.16);color:#fde68a}
[data-theme="dark"] .badge-danger,.dark .badge-danger{background:rgba(244,63,94,.16);color:#fecdd3}
[data-theme="dark"] .badge-info,.dark .badge-info{background:rgba(96,165,250,.16);color:#bfdbfe}
[data-theme="dark"] .bg-indigo-50,.dark .bg-indigo-50{background-color:rgba(99,102,241,.16)!important}
[data-theme="dark"] .text-indigo-700,.dark .text-indigo-700,
[data-theme="dark"] .text-indigo-800,.dark .text-indigo-800{color:#c7d2fe!important}
[data-theme="dark"] .ring-indigo-200,.dark .ring-indigo-200{--tw-ring-color:rgba(165,180,252,.35)!important}
[data-theme="dark"] .bg-emerald-50,.dark .bg-emerald-50{background-color:rgba(16,185,129,.16)!important}
[data-theme="dark"] .text-emerald-600,.dark .text-emerald-600,
[data-theme="dark"] .text-emerald-700,.dark .text-emerald-700,
[data-theme="dark"] .text-emerald-800,.dark .text-emerald-800{color:#bbf7d0!important}
[data-theme="dark"] .ring-emerald-200,.dark .ring-emerald-200{--tw-ring-color:rgba(167,243,208,.35)!important}
[data-theme="dark"] .bg-amber-50,.dark .bg-amber-50{background-color:rgba(245,158,11,.18)!important}
[data-theme="dark"] .text-amber-600,.dark .text-amber-600,
[data-theme="dark"] .text-amber-700,.dark .text-amber-700,
[data-theme="dark"] .text-amber-800,.dark .text-amber-800,
[data-theme="dark"] .text-amber-900,.dark .text-amber-900{color:#fde68a!important}
[data-theme="dark"] .ring-amber-200,.dark .ring-amber-200{--tw-ring-color:rgba(253,230,138,.35)!important}
[data-theme="dark"] .bg-rose-50,.dark .bg-rose-50{background-color:rgba(244,63,94,.16)!important}
[data-theme="dark"] .text-rose-600,.dark .text-rose-600,
[data-theme="dark"] .text-rose-700,.dark .text-rose-700,
[data-theme="dark"] .text-rose-800,.dark .text-rose-800{color:#fecdd3!important}
[data-theme="dark"] .ring-rose-200,.dark .ring-rose-200{--tw-ring-color:rgba(254,205,211,.35)!important}
[data-theme="dark"] .bg-sky-50,.dark .bg-sky-50,
[data-theme="dark"] .bg-cyan-50,.dark .bg-cyan-50{background-color:rgba(14,165,233,.16)!important}
[data-theme="dark"] .text-sky-600,.dark .text-sky-600,
[data-theme="dark"] .text-sky-700,.dark .text-sky-700,
[data-theme="dark"] .text-cyan-700,.dark .text-cyan-700,
[data-theme="dark"] .text-cyan-800,.dark .text-cyan-800{color:#bae6fd!important}

/* ───── Empty state ───── */
.empty-state{text-align:center;padding:3.5rem 1.5rem}
.empty-icon{width:56px;height:56px;margin:0 auto 1rem;padding:1rem;border-radius:var(--r-full);background:var(--primary-soft);color:var(--primary)}
.empty-state h3{font-size:1.15rem;margin-bottom:.4rem}
.empty-state p{color:var(--text-muted);max-width:420px;margin:0 auto 1.5rem}

/* ───── Pagination ───── */
.pagination{display:flex;justify-content:center;gap:.35rem;margin-top:1.5rem;flex-wrap:wrap}
.pagination a,.pagination span{padding:.5rem .85rem;border-radius:var(--r-sm);font-size:.82rem;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);min-height:36px;display:inline-flex;align-items:center;transition:all var(--d-fast)}
.pagination a:hover{border-color:var(--primary);color:var(--primary)}
.pagination .active span{background:var(--primary);border-color:var(--primary);color:#fff}
.pagination .disabled span{opacity:.4}

/* ───── Progress ───── */
.progress{height:6px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden}
.progress-bar{height:100%;background:var(--aurora);transition:width var(--d-slow) var(--ease);border-radius:var(--r-full)}
.progress-bar.success{background:var(--success)}
.progress-bar.warning{background:var(--warning)}
.progress-bar.danger{background:var(--danger)}

/* ───── Motion ───── */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.2)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes gridShift{0%{transform:translate(0,0)}100%{transform:translate(40px,40px)}}
@keyframes drawLine{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}

.reveal{opacity:0;animation:fadeUp .7s var(--ease) forwards}
.reveal-delay-1{animation-delay:.1s}
.reveal-delay-2{animation-delay:.2s}
.reveal-delay-3{animation-delay:.3s}
.reveal-delay-4{animation-delay:.4s}
.reveal-delay-5{animation-delay:.5s}

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

/* ───── Plans grid (landing + /plans logged-in page) ───── */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem 1.75rem;display:flex;flex-direction:column;position:relative;transition:all var(--d-base) var(--ease)}
.plan:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.plan.featured{border-color:var(--primary);box-shadow:var(--shadow-glow)}
.plan.featured::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-lg);background:var(--aurora);z-index:-1;opacity:.25}
.plan-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--aurora);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35rem 1rem;border-radius:var(--r-full);white-space:nowrap}
.plan-name{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin-bottom:.35rem}
.plan-desc{font-size:.85rem;color:var(--text-muted);margin-bottom:1.25rem;min-height:2.5em}
.plan-price{font-family:var(--font-display);font-weight:700;font-size:2.8rem;letter-spacing:-.03em;line-height:1}
.plan-price small{font-size:.85rem;font-weight:400;color:var(--text-muted);margin-left:.25rem}
.plan-features{list-style:none;padding:0;margin:1.5rem 0;flex:1}
.plan-features li{display:flex;align-items:flex-start;gap:.65rem;padding:.4rem 0;font-size:.88rem}
.plan-features svg{width:16px;height:16px;color:var(--primary);flex-shrink:0;margin-top:.22rem}
.plan .btn{width:100%}

@media(max-width:900px){ .plans-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto} }

/* ───── Plan selection cards (compat: used in registration/plans) ───── */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.85rem}
.plan-option{position:relative}
.plan-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.plan-option .plan-card{display:flex;flex-direction:column;align-items:center;padding:1.2rem .9rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all var(--d-fast) var(--ease);text-align:center;position:static}
.plan-option input:checked+.plan-card{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 4px var(--primary-glow)}
.plan-option .plan-card:hover{border-color:var(--border-strong)}
.plan-option .plan-card-name{font-weight:700;font-size:.95rem;font-family:var(--font-display)}
.plan-option .plan-card-price{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.plan-option .plan-card-price small{font-size:.7rem;font-weight:400;color:var(--text-muted)}
.plan-option .plan-card-limit{font-size:.75rem;color:var(--text-muted);margin-top:.2rem}

/* ───── Connection cards (compat) ───── */
.conn-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.conn-card{padding:1.75rem;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);transition:all var(--d-fast) var(--ease)}
.conn-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.conn-logo{font-size:2rem;margin-bottom:.6rem}
.conn-name{font-family:var(--font-display);font-weight:700;margin-bottom:.25rem}
.conn-status{margin-bottom:1rem}

/* ───── Compatibility aliases (for existing views) ───── */
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-logout{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:var(--r-sm);cursor:pointer;font-size:.82rem;font-weight:500;transition:all var(--d-fast);min-height:36px}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}

/* ───── Auth (register/login) ───── */
.auth-wrapper{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:2rem 1.25rem;background:var(--bg);position:relative;overflow:hidden}
.auth-wrapper::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:120%;height:70%;background:radial-gradient(ellipse at center,var(--primary-glow) 0%,transparent 60%);opacity:.6;pointer-events:none}
.auth-container{width:100%;max-width:460px;position:relative;z-index:1}
.auth-header{text-align:center;margin-bottom:2rem}
.auth-header h1{font-size:1.9rem;margin-bottom:.35rem}
.auth-header p{color:var(--text-muted);font-size:.95rem}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;box-shadow:var(--shadow-sm)}
.auth-footer{text-align:center;margin-top:1.5rem;font-size:.875rem;color:var(--text-muted)}

/* ───── Hero (compat for pages using .hero class) ───── */
.hero-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ───── Responsive ───── */
@media(max-width:768px){
    .section{padding:3.5rem 1.25rem}
    .form-row,.form-row-3{grid-template-columns:1fr}
    table{min-width:640px}
    .conn-grid{grid-template-columns:1fr}
    .plan-grid{grid-template-columns:1fr}
    .hero-cta{flex-direction:column;align-items:stretch}
    .hero-cta .btn{width:100%}
}

/* ==========================================================
   RepriBot Premium System v2
   Token layer aligned with the neon landing and global motion bg.
   ========================================================== */
:root{
    --hux-bg:#f8fafc;
    --hux-bg-soft:#eef2ff;
    --hux-surface:#ffffff;
    --hux-surface-2:#f8fafc;
    --hux-text:#0f172a;
    --hux-text-strong:#020617;
    --hux-text-muted:#475569;
    --hux-border:#e2e8f0;
    --hux-border-strong:#cbd5e1;
    --hux-primary:#7c3aed;
    --hux-primary-2:#2563eb;
    --hux-cyan:#06b6d4;
    --hux-success:#16a34a;
    --hux-warning:#d97706;
    --hux-danger:#dc2626;
    --hux-shadow:0 10px 25px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.04);
    --hux-shadow-strong:0 24px 70px rgba(15,23,42,.14),0 1px 0 rgba(255,255,255,.8) inset;
    --hux-ring:0 0 0 4px rgba(124,58,237,.14);
    --hux-gradient:linear-gradient(135deg,var(--hux-primary),var(--hux-primary-2) 56%,var(--hux-cyan));
    --bg:var(--hux-bg);
    --surface:var(--hux-surface);
    --surface-2:var(--hux-surface-2);
    --border:var(--hux-border);
    --border-strong:var(--hux-border-strong);
    --text:var(--hux-text);
    --text-muted:var(--hux-text-muted);
    --text-subtle:var(--hux-text-muted);
    --primary:var(--hux-primary);
    --primary-strong:var(--hux-primary-2);
    --success:var(--hux-success);
    --warning:var(--hux-warning);
    --danger:var(--hux-danger);
    --info:var(--hux-primary-2);
    --shadow-sm:var(--hux-shadow);
    --shadow-md:var(--hux-shadow-strong);
}

[data-theme="dark"],.dark{
    --hux-bg:#020617;
    --hux-bg-soft:#07111f;
    --hux-surface:#0f172a;
    --hux-surface-2:#111827;
    --hux-text:#f8fafc;
    --hux-text-strong:#ffffff;
    --hux-text-muted:#cbd5e1;
    --hux-border:#334155;
    --hux-border-strong:#475569;
    --hux-primary:#a78bfa;
    --hux-primary-2:#60a5fa;
    --hux-cyan:#22d3ee;
    --hux-success:#4ade80;
    --hux-warning:#fbbf24;
    --hux-danger:#f87171;
    --hux-shadow:0 22px 60px rgba(0,0,0,.45);
    --hux-shadow-strong:0 30px 90px rgba(0,0,0,.62);
    --hux-ring:0 0 0 4px rgba(167,139,250,.2);
    --hux-gradient:linear-gradient(135deg,var(--hux-primary),var(--hux-primary-2) 52%,var(--hux-cyan));
}

body,
.hux-page{
    background:var(--hux-bg);
    color:var(--hux-text);
}

.hux-page{min-height:100vh;min-height:100dvh}
.hux-heading{color:var(--hux-text-strong);font-weight:700;letter-spacing:-.025em}
.hux-muted{color:var(--hux-text-muted);opacity:.92}
.hux-surface{
    background:var(--hux-surface);
    color:var(--hux-text);
    border:1px solid var(--hux-border);
}
.hux-card,
.card,
.stat-card,
.auth-card{
    background:var(--hux-surface);
    color:var(--hux-text);
    border:1px solid var(--hux-border);
    box-shadow:var(--hux-shadow);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
}
.hux-card{
    width:100%;
    max-width:100%;
    border-radius:12px;
    padding:1.25rem;
    overflow:hidden;
}
.hux-card-glow{
    position:relative;
    overflow:hidden;
}
.hux-card-glow::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(124,58,237,.28),transparent 35%,rgba(6,182,212,.22));
    opacity:.42;
    pointer-events:none;
}
.hux-card-glow>*{position:relative;z-index:1}

.hux-input,
.form-input,
.form-select,
.form-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea{
    background:var(--hux-surface)!important;
    color:var(--hux-text)!important;
    border:1px solid var(--hux-border)!important;
    box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.hux-input:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
select:focus,
textarea:focus{
    border-color:var(--hux-primary)!important;
    box-shadow:var(--hux-ring)!important;
    outline:none!important;
}
input::placeholder,
textarea::placeholder{color:var(--hux-text-muted)!important;opacity:.78}

.hux-button-primary,
.btn-primary,
.bg-indigo-600,
.bg-slate-900{
    background:var(--hux-gradient)!important;
    color:#fff!important;
    border-color:transparent!important;
    box-shadow:0 14px 32px rgba(37,99,235,.22),0 0 0 1px rgba(255,255,255,.08) inset!important;
}
.hux-button-primary:hover,
.btn-primary:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-slate-800:hover{
    filter:saturate(1.08) brightness(1.05);
    transform:translateY(-1px);
    box-shadow:0 20px 46px rgba(124,58,237,.26),0 0 0 1px rgba(255,255,255,.12) inset!important;
}
.hux-button-secondary,
.btn-secondary,
.btn-outline{
    background:color-mix(in srgb,var(--hux-surface) 92%,transparent)!important;
    color:var(--hux-text)!important;
    border-color:var(--hux-border)!important;
}
.hux-button-secondary:hover,
.btn-secondary:hover,
.btn-outline:hover{
    background:var(--hux-surface-2)!important;
    border-color:var(--hux-border-strong)!important;
    color:var(--hux-text-strong)!important;
}
.btn-ghost{color:var(--hux-text-muted)}
.btn-ghost:hover{background:var(--hux-surface-2);color:var(--hux-text-strong)}
.hux-button-primary:disabled,
.btn-primary:disabled,
button:disabled{
    opacity:.68!important;
    filter:saturate(.82)!important;
    transform:none!important;
    box-shadow:none!important;
}

.hux-badge,
.badge{
    border:1px solid transparent;
    font-weight:700;
}
.badge-primary,.hux-badge-primary{background:rgba(124,58,237,.12);color:var(--hux-primary);border-color:rgba(124,58,237,.22)}
.badge-success,.hux-badge-success{background:rgba(22,163,74,.12);color:var(--hux-success);border-color:rgba(22,163,74,.25)}
.badge-warning,.hux-badge-warning{background:rgba(217,119,6,.14);color:var(--hux-warning);border-color:rgba(217,119,6,.26)}
.badge-danger,.hux-badge-danger{background:rgba(220,38,38,.12);color:var(--hux-danger);border-color:rgba(220,38,38,.22)}
.badge-info,.hux-badge-info{background:rgba(6,182,212,.12);color:var(--hux-cyan);border-color:rgba(6,182,212,.24)}
.badge-muted,.hux-badge-muted{background:var(--hux-surface-2);color:var(--hux-text-muted);border-color:var(--hux-border)}

.hux-table,
.table-wrap{
    background:var(--hux-surface);
    border:1px solid var(--hux-border);
    box-shadow:var(--hux-shadow);
}
.hux-table table,
.table-wrap table,
.ui-table{
    color:var(--hux-text);
}
.hux-table th,
.table-wrap th,
.ui-table th{
    background:var(--hux-surface-2)!important;
    color:var(--hux-text-muted)!important;
    border-color:var(--hux-border)!important;
}
.hux-table td,
.table-wrap td,
.ui-table td{
    color:var(--hux-text)!important;
    border-color:var(--hux-border)!important;
}
.hux-table tbody tr:hover,
.table-wrap tbody tr:hover,
.ui-table tbody tr:hover{
    background:var(--hux-surface-2)!important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .auth-card,
.dark .card,
.dark .stat-card,
.dark .auth-card{
    background:rgba(15,23,42,.88);
    border-color:rgba(71,85,105,.72);
    box-shadow:var(--hux-shadow),0 1px 0 rgba(255,255,255,.04) inset;
}
[data-theme="dark"] .bg-gradient-to-br,
.dark .bg-gradient-to-br{
    background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(17,24,39,.88))!important;
}
[data-theme="light"] .bg-gradient-to-br{
    background:
        linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.78)),
        linear-gradient(135deg,#6366f1,#7c3aed)!important;
}
[data-theme="dark"] .text-white,
.dark .text-white{color:#fff!important}
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-lg,
.dark .shadow-sm,
.dark .shadow,
.dark .shadow-lg{box-shadow:var(--hux-shadow)!important}

.sidebar{
    background:color-mix(in srgb,var(--hux-surface) 96%,transparent)!important;
    border-color:var(--hux-border)!important;
}
.topbar{
    background:color-mix(in srgb,var(--hux-surface) 88%,transparent)!important;
    border-color:var(--hux-border)!important;
}
[data-theme="dark"] .sidebar,
.dark .sidebar{
    background:rgba(15,23,42,.94)!important;
    border-color:rgba(51,65,85,.9)!important;
}
[data-theme="dark"] .topbar,
.dark .topbar{
    background:rgba(15,23,42,.82)!important;
    border-color:rgba(51,65,85,.9)!important;
}
.nav-link.active{
    background:rgba(124,58,237,.12)!important;
    color:var(--hux-primary)!important;
}
[data-theme="dark"] .nav-link.active,
.dark .nav-link.active{
    background:rgba(167,139,250,.16)!important;
    color:var(--hux-primary)!important;
}

@media(max-width:768px){
    .hux-card,.card,.stat-card{border-radius:10px}
    .btn,.hux-button-primary,.hux-button-secondary{min-height:44px}
    body{overflow-x:hidden}
}