/* ===========================================================
   PHAZOR panel — visual override layer (panel-theme.css)
   Loaded AFTER styles.css. Re-skins the non-marketing panel
   views to the local site's dark space theme. Pure visual:
   never touches .hidden / display / visibility routing.
   =========================================================== */

/* ---------- 1. token overrides (panel :root -> local palette) ---------- */
:root {
  --void: #07070a;
  --carbon: #0b0b11;
  --obsidian: rgba(255, 255, 255, 0.055);
  --graphite: rgba(255, 255, 255, 0.09);
  --smoke: #6d6d80;
  --ash: #6d6d80;
  --fog: #a7a7b8;
  --mist: #f3f3f7;
  --bone: #f3f3f7;
  --paper: #f3f3f7;
  --lime: #7c5cff;
  --green: #27a644;
  --red: #eb5757;
  --teal: #45e6ff;
  --violet: #7c5cff;
  --midnight: #07070a;
  --frost: #f3f3f7;
  --moon: #a7a7b8;
  --edge: rgba(255, 255, 255, 0.12);
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* extra local-theme tokens used by the overrides below */
  --bg: #07070a;
  --bg-2: #0b0b11;
  --surface: rgba(255, 255, 255, 0.032);
  --surface-2: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --ink: #f3f3f7;
  --ink-2: #a7a7b8;
  --ink-3: #6d6d80;
  --cyan: #45e6ff;
  --magenta: #ff4fd8;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --grad: linear-gradient(100deg, var(--cyan), var(--violet) 45%, var(--magenta));
}

/* ---------- 2. animated background layer + stacking ---------- */
/* injected by panel-theme.js: canvas + aurora + grain behind everything */
#phzField {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.5;
}
.phz-aurora {
  position: fixed; inset: -20% -10% auto -10%; height: 90vh; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 18%, rgba(124, 92, 255, 0.4), transparent 70%),
    radial-gradient(34% 40% at 78% 8%, rgba(255, 79, 216, 0.26), transparent 70%),
    radial-gradient(30% 36% at 52% 40%, rgba(69, 230, 255, 0.18), transparent 70%);
  filter: blur(30px);
  animation: phz-drift 26s var(--ease) infinite alternate;
}
@keyframes phz-drift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, -2%, 0) scale(1.02); }
}
.phz-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* click spark particles */
.phz-spark {
  position: fixed; z-index: 300; width: 5px; height: 5px; border-radius: 50%;
  pointer-events: none; background: #fff;
}
/* keep header above the field and content above both; clicks never blocked */
.site-header { z-index: 100; }
main#content { position: relative; z-index: 2; }
/* let the fixed field show through the app view containers */
.buy-view, .auth-view, .app-view, .admin-view, .media-view { background: transparent; }
.auth-grid { background: linear-gradient(rgba(124,92,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,92,255,.05) 1px, transparent 1px); }
.auth-halo { background: conic-gradient(from 180deg at 50% 50%, transparent 42%, rgba(124,92,255,.32) 49%, rgba(255,79,216,.34) 50%, rgba(69,230,255,.2) 51%, transparent 58%); }

/* ---------- 3. header ---------- */
.site-header { background: rgba(7, 7, 10, 0.55); border-bottom: 1px solid transparent; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.site-header.scrolled { background: rgba(7, 7, 10, 0.72); border-bottom-color: var(--line); }
.brand { color: var(--ink); }
.brand-mark { fill: var(--violet); fill: url(#phzBrandGrad); filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.6)); }
.brand-build { background: var(--surface); color: var(--ink-3); }
.desktop-nav a, .nav-link { color: var(--ink-2); transition: color 0.2s ease; }
.desktop-nav a:hover, .nav-link:hover { color: var(--ink); }
.desktop-nav a::after, .nav-link::after { background: var(--grad); }
.mobile-menu { background: rgba(7, 7, 10, 0.96); border-bottom: 1px solid var(--line); }
.mobile-menu a { color: var(--ink-2); }
.mobile-menu a:hover { color: var(--ink); }

/* ---------- 4. buttons ---------- */
.button { border-radius: 999px; border: 1px solid var(--line-2); }
.button-primary { background: var(--grad); color: #08080c; border-color: transparent; box-shadow: none; }
.button-primary:hover { background: var(--grad); filter: saturate(1.15) brightness(1.06); box-shadow: 0 12px 44px -12px rgba(124, 92, 255, 0.9); }
.button-primary:disabled { background: var(--surface-2); color: var(--ink-3); filter: none; box-shadow: none; }
.button-light { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.button-light:hover { background: var(--surface-2); border-color: var(--line-2); }
.button-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.button-outline:hover { background: var(--surface); border-color: var(--line-2); }
.button-warn { color: #f0b34a; }
.button-danger { color: var(--red); }
.icon-button, .menu-button { color: var(--ink-2); }
.icon-button:hover, .menu-button:hover { background: var(--surface); color: var(--ink); }

/* ---------- 5. buy view ---------- */
.buy-grid { background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); }
.buy-glow-left { background: rgba(124, 92, 255, 0.12); }
.buy-glow-right { background: rgba(255, 79, 216, 0.08); }
.buy-back:hover { color: var(--cyan); }
.buy-kicker i, .checkout-live i { background: var(--cyan); box-shadow: 0 0 0 4px rgba(69, 230, 255, 0.12); }
.tariff-card { border: 1px solid var(--line); border-radius: var(--r, 16px); background: var(--surface); color: var(--ink-2); backdrop-filter: blur(8px); transition: transform 0.35s var(--ease), background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.tariff-card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--surface-2); }
.tariff-card.selected { border-color: transparent; background: rgba(124, 92, 255, 0.1); box-shadow: 0 0 0 1.5px var(--violet), 0 22px 60px -26px rgba(124, 92, 255, 0.85); transform: translateY(-3px); }
.tariff-main b { color: var(--ink); }
.tariff-price { color: var(--ink); }
.tariff-card.selected .tariff-price { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tariff-select { border-color: var(--line-2); }
.tariff-card.selected .tariff-select { border: 6px solid var(--violet); }
.checkout-card { border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 100% 0, rgba(124,92,255,.14), transparent 42%), rgba(255,255,255,.03); backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.checkout-total { border-bottom: 1px solid var(--line); }
.checkout-total strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.buy-promo-control { border: 1px solid var(--line); background: rgba(0,0,0,.2); }
.buy-promo-control:focus-within { border-color: var(--cyan); }
.buy-promo-control span { color: var(--violet); }
.payment-option { border: 1px solid var(--line); border-radius: 999px; }
.payment-option-active { border-color: rgba(124,92,255,.5); background: rgba(124,92,255,.08); }
.payment-option-active:hover { background: rgba(124,92,255,.14); }
.payment-icon { background: var(--surface-2); color: var(--ink-2); }
.funpay-icon { background: var(--grad); color: #08080c; }
.payment-option > b { color: var(--violet); }

/* ---------- 6. auth view ---------- */
.auth-back { color: var(--ink-2); }
.auth-back:hover { color: var(--ink); }
.auth-eyebrow { color: var(--ink-2); }
.auth-eyebrow span { background: linear-gradient(90deg, transparent, var(--line-2)); }
.auth-eyebrow span:last-child { background: linear-gradient(90deg, var(--line-2), transparent); }
.auth-intro h1 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-intro > p { color: var(--ink-2); }
.floating-access-card { background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: 0 16px 32px rgba(0,0,0,.3); }
.floating-access-card b { color: var(--ink); }
.floating-access-card i { background: linear-gradient(90deg, var(--violet) 72%, rgba(255,255,255,.12) 72%); }
.auth-card { border: 1px solid var(--line); background: rgba(11,11,17,.72); backdrop-filter: blur(14px); box-shadow: 0 24px 56px rgba(0,0,0,.5); }
.auth-tabs { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.auth-tabs button { position: relative; color: var(--ink-2); }
.auth-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.auth-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--grad); }
.form-heading span { color: var(--ink); }
.auth-form > label, .settings-form > label, .dialog-input-wrap > span, .redemption-form > label { color: var(--ink-2); }
.auth-submit { background: var(--grad); color: #08080c; }
.auth-submit:hover { filter: saturate(1.12) brightness(1.06); box-shadow: 0 12px 40px -14px rgba(124,92,255,.9); }
.form-error { color: #ff8f94; }
.auth-foot { border-top: 1px solid var(--line); color: var(--ink-3); }

/* ---------- 7. account dashboard ---------- */
.dashboard-sidebar { border-right: 1px solid var(--line); background: rgba(11,11,17,.6); backdrop-filter: blur(14px); }
.side-link { color: var(--ink-2); }
.side-link:hover { color: var(--ink); background: var(--surface); }
.side-link.active { color: var(--ink); background: rgba(124,92,255,.12); box-shadow: inset 2px 0 var(--violet); }
.sidebar-bottom { border-top: 1px solid var(--line); }
.sidebar-bottom a, .sidebar-bottom button { color: var(--ink-3); }
.sidebar-bottom a:hover, .sidebar-bottom button:hover { color: var(--ink); }
.dashboard-head { border-bottom: 1px solid var(--line); }
.dashboard-head h1 { color: var(--ink); }
.account-chip { border: 1px solid var(--line); background: var(--surface); }
.account-chip > span { background: var(--grad); color: #08080c; }
.account-chip b { color: var(--ink); }
.metric-card, .panel-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color 0.35s, background 0.35s, transform 0.5s var(--ease); }
.metric-card:hover, .panel-card:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-3px); }
.metric-value { color: var(--ink); }
.license-state i { background: var(--ink-3); }
.license-state.active i { background: var(--green); box-shadow: 0 0 0 4px rgba(39,166,68,.12); }
.license-state.lifetime i { background: var(--violet); box-shadow: 0 0 0 4px rgba(124,92,255,.14); }
.license-state.admin i { background: var(--cyan); box-shadow: 0 0 0 4px rgba(69,230,255,.14); }
.license-state.expired i, .license-state.revoked i { background: var(--red); box-shadow: 0 0 0 4px rgba(235,87,87,.12); }
.license-state b { color: var(--ink); }
.download-banner { border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 80% 100%, rgba(124,92,255,.1), transparent 42%), var(--surface); }
.download-banner h2 { color: var(--ink); }
.redemption-card { background: radial-gradient(circle at 90% 10%, rgba(69,230,255,.06), transparent 42%), var(--surface); }
.panel-title h3, .settings-form h3 { color: var(--ink); }
.profile-list > div, .mini-release { border-top: 1px solid var(--line); }
.artifact-card, .device-item, .empty-state { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.artifact-icon { background: var(--grad); color: #08080c; }
.artifact-card h3, .device-item b { color: var(--ink); }
.panel-page-head h2 { color: var(--ink); }

/* bootstrap operator card */
.bootstrap-card { border: 1px solid rgba(124,92,255,.34); border-radius: 16px; background: radial-gradient(circle at 7% 0%, rgba(124,92,255,.14), transparent 34%), linear-gradient(135deg, #0e0d18 0%, #0b0b11 55%, #07070a 100%); }
.bootstrap-card::after { background: var(--violet); box-shadow: -9px 9px 0 rgba(124,92,255,.55), -18px 18px 0 rgba(124,92,255,.24); }
.bootstrap-kicker { color: var(--violet); }
.bootstrap-kicker > span:first-child { background: var(--violet); box-shadow: 9px 0 rgba(124,92,255,.34), 0 9px rgba(124,92,255,.16); }
.bootstrap-card h2 { color: var(--ink); }
.bootstrap-facts b { color: var(--violet); }
.bootstrap-console { border: 1px solid var(--line); border-radius: 12px; background: rgba(7,7,10,.8); }
.bootstrap-console-head { border-bottom: 1px solid var(--line); }
.bootstrap-console-head > span:last-child { background: rgba(124,92,255,.14); color: var(--violet); }
.bootstrap-console-head > span.missing { background: rgba(235,87,87,.12); color: #ff8f94; }
.bootstrap-pixel-mark i { background: rgba(124,92,255,.16); }
.bootstrap-pixel-mark i:nth-child(1), .bootstrap-pixel-mark i:nth-child(3), .bootstrap-pixel-mark i:nth-child(5), .bootstrap-pixel-mark i:nth-child(7), .bootstrap-pixel-mark i:nth-child(9) { background: var(--violet); }
.bootstrap-form input { border-color: rgba(124,92,255,.3); background: rgba(124,92,255,.04); }
.bootstrap-form input:focus { border-color: var(--cyan); background: rgba(124,92,255,.07); }
.bootstrap-submit { border-color: transparent; border-radius: 999px; background: var(--grad); color: #08080c; }
.bootstrap-submit:hover { background: var(--grad); filter: saturate(1.15) brightness(1.06); }
.bootstrap-submit:disabled { background: var(--surface-2); color: var(--ink-3); filter: none; }

/* ---------- 8. media view ---------- */
.media-title-row .mono, .media-side-link { color: var(--cyan); }
.media-title-row h1 { color: var(--ink); }
.media-live i { background: var(--cyan); box-shadow: 0 0 0 5px rgba(69,230,255,.1); }
.media-metrics article, .media-chart-card, .media-link-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.media-metrics b { color: var(--ink); }
.media-promo-card { background: radial-gradient(circle at 90% 20%, rgba(124,92,255,.2), transparent 44%), rgba(255,255,255,.03) !important; border-color: rgba(124,92,255,.34) !important; }
.media-promo-card b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.media-promo-card strong { color: var(--violet); }
.media-card-head h2, .media-link-card h2 { color: var(--ink); }
.media-legend .visits { background: var(--cyan); }
.media-legend .purchases { background: var(--magenta); }
.media-grid-line { stroke: rgba(255,255,255,.07); }
.media-line.visits { stroke: var(--cyan); }
.media-line.purchases { stroke: var(--magenta); }
.media-dot { stroke: var(--bg-2); }
.media-dot.visits { fill: var(--cyan); }
.media-dot.purchases { fill: var(--magenta); }
.media-axis-label { fill: var(--ink-3); }

/* ---------- 9. admin view ---------- */
.admin-topbar { border-bottom: 1px solid var(--line); background: rgba(11,11,17,.6); backdrop-filter: blur(14px); }
.admin-title-row h1 { color: var(--ink); }
.admin-metrics article, .admin-panel { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.admin-metrics b { color: var(--ink); }
.admin-panel-head h2 { color: var(--ink); }
.create-grid { border-top: 1px solid var(--line); }
.create-grid label { color: var(--ink-2); }
table { color: var(--ink-2); }
th, td { border-top: 1px solid var(--line); }
th { color: var(--ink-3); }
td { color: var(--ink-2); }
td.cell-muted { color: var(--ink-3); }
.license-key { color: var(--ink); }
.table-badge { background: var(--surface-2); color: var(--ink-2); border-radius: 999px; }
.table-badge.active, .table-badge.online { color: #57d97e; }
.table-badge.revoked, .table-badge.expired { color: #ff8f94; }
.table-badge.maintenance { color: #f0b34a; }
.table-badge.media { color: var(--violet); }
.role-select { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.row-menu-button { border: 1px solid var(--line); color: var(--ink-2); }
.row-menu-button:hover { color: var(--ink); border-color: var(--line-2); }
.row-menu { border: 1px solid var(--line); border-radius: 12px; background: rgba(11,11,17,.96); backdrop-filter: blur(12px); box-shadow: 0 14px 38px rgba(0,0,0,.5); }
.row-menu button { color: var(--ink-2); }
.row-menu button:hover { background: var(--surface); color: var(--ink); }
.row-menu .danger { color: #ff8f94; }
.row-menu .warn { color: #f0b34a; }
.row-menu-separator { background: var(--line); }
.empty-table, .empty-state span { color: var(--ink-3); }
.empty-state span { color: var(--ink); }
kbd { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }

/* ---------- 10. all text inputs / selects / textarea ---------- */
input, select, textarea { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--ink); transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); background: rgba(255,255,255,.05); box-shadow: 0 0 0 3px rgba(69,230,255,.14); outline: none; }

/* ---------- 11. dialog + toasts ---------- */
.action-dialog { border: 1px solid var(--line); border-radius: 16px; background: rgba(11,11,17,.94); backdrop-filter: blur(16px); color: var(--ink-2); box-shadow: 0 24px 80px rgba(0,0,0,.7); }
.action-dialog::backdrop { background: rgba(4,4,7,.7); backdrop-filter: blur(6px); }
.action-dialog h2 { color: var(--ink); }
.toast { border: 1px solid var(--line); border-radius: 12px; background: rgba(11,11,17,.94); backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.toast::before { background: var(--grad); }
.toast.error::before { background: var(--red); }

/* ---------- 12. respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #phzField { display: none; }
  .phz-aurora { animation: none; }
}

/* orchestrator: avoid double dot-grid — hide the global field while the
   marketing landing (which has its own #field) is the visible route */
body:has(#marketingView:not(.hidden)) #phzField,
body:has(#marketingView:not(.hidden)) .phz-aurora,
body:has(#marketingView:not(.hidden)) .phz-grain { display: none !important; }