/* ============================================================================
   Anomalie — Boutique design system (premium dark / sci-fi).
   Shared by the landing, admin, and checkout pages. Tokens -> base -> components.
   Built per ui-ux-pro-max guidance: semantic tokens, 4/8 spacing, AA contrast,
   150-300ms motion, SVG icons, consistent elevation. Fonts via Google Fonts.
   ============================================================================ */

:root {
    /* ── color: base surfaces (dark) ── */
    --bg:        #06080f;
    --bg-2:      #080b14;
    --surface:   #0e1320;          /* cards */
    --surface-2: #121a2b;          /* elevated / inputs */
    --surface-3: #18213400;
    --line:      rgba(140, 170, 220, 0.12);
    --line-2:    rgba(140, 170, 220, 0.20);

    /* ── color: text ── */
    --text:      #eef1f8;
    --text-2:    #b7c0d4;
    --muted:     #8a93a8;
    --faint:     #5e6678;

    /* ── color: brand accent (used sparingly) ── */
    --accent:    #54d6e8;
    --accent-2:  #8b7cff;
    --accent-grad: linear-gradient(135deg, #8b7cff 0%, #54d6e8 100%);
    --accent-soft: rgba(84, 214, 232, 0.12);

    /* ── color: semantic ── */
    --good:   #45d6a0;
    --danger: #ff6b6b;
    --warn:   #f5b544;

    /* back-compat aliases (older inline styles / pages) */
    --panel: var(--surface);
    --panel-2: var(--bg-2);

    /* ── type ── */
    --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ── radius ── */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

    /* ── shadow / elevation ── */
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 6px 20px -8px rgba(0,0,0,.55);
    --sh-3: 0 18px 50px -16px rgba(0,0,0,.7);
    --glow: 0 10px 34px -12px rgba(124,124,255,.65);

    /* ── motion ── */
    --t-fast: .14s ease;
    --t: .2s cubic-bezier(.4,.0,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    font-feature-settings: "cv02","cv03","cv04";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── buttons ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1;
    padding: 12px 20px; border-radius: var(--r-md); border: 1px solid transparent;
    cursor: pointer; white-space: nowrap; transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t); user-select: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--accent-grad); color: #060912; box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(124,124,255,.8); }
.btn-ghost { background: rgba(255,255,255,.03); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: var(--line-2); }
.btn-danger { background: transparent; border-color: rgba(255,107,107,.4); color: var(--danger); }
.btn-danger:hover { background: rgba(255,107,107,.1); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-lg { padding: 15px 26px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* ── surfaces ──────────────────────────────────────────────────────────────── */
.card {
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.glass { background: rgba(14,19,32,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); }

/* ── pills / badges ────────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-2); background: rgba(255,255,255,.02); white-space: nowrap; }
.pill.published,.pill.paid,.pill.succeeded,.pill.completed,.pill.delivered,.pill.active { color: var(--good); border-color: rgba(69,214,160,.35); background: rgba(69,214,160,.08); }
.pill.draft,.pill.pending,.pill.awaiting_payment,.pill.scheduled { color: var(--muted); }
.pill.hidden,.pill.archived,.pill.failed,.pill.cancelled,.pill.refunded,.pill.revoked { color: var(--danger); border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.07); }

/* ── form fields ───────────────────────────────────────────────────────────── */
label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 6px; }
.input, input[type=text], input[type=number], input[type=email], input:not([type]), select, textarea {
    width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
    border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 14px; transition: border-color var(--t), box-shadow var(--t);
}
.input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled, select:disabled { opacity: .55; }
textarea { resize: vertical; min-height: 54px; }
::placeholder { color: var(--faint); }

/* ── tables ────────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
tbody td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: rgba(255,255,255,.02); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--text-2); }

/* ── ambient background (radial accent glows + faint grid) ─────────────────── */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(820px 460px at 78% -8%, rgba(139,124,255,.16), transparent 60%),
        radial-gradient(680px 480px at 8% 2%, rgba(84,214,232,.12), transparent 55%),
        linear-gradient(180deg, var(--bg-2), var(--bg)); }
.bg-fx::after { content:""; position:absolute; inset:0;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 48px 48px; mask-image: radial-gradient(1100px 720px at 62% -5%, #000 28%, transparent 76%); opacity: .45; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }