/* ============================================================ CodexLab — design system Ported from the Cipher EaaS "cyberpunk-neon" theme: deep navy ink, cyan/violet/magenta accents, aurora background, glass panels, neon glows, JetBrains Mono data treatment. Tokenised via CSS variables — change one var, the whole app recolors. Class names match the existing admin/portal/storefront markup so every screen adopts the system at once. ============================================================ */ /* Fonts are self-hosted (public/fonts/, loaded in via the theme-tokens partial) — no external font CDN, no Google Fonts. */ /* The :root design tokens are emitted server-side, per surface + mode, by the DB-driven Theme Control System — resources/views/partials/theme-tokens.blade.php (defaults in App\Models\ThemeSettings::DEFAULTS). No palette is hard-coded here: every rule below reads from var(--token). Change a token in the admin Theme panel → all three surfaces recolor. */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} html,body{background-color:var(--bg-0);color:var(--text-0)} /* background image lives ON body (painted over bg-0) — reliably rendered; the cards' backdrop-filter blurs it. When set, the aura yields (theme-tokens → --glow:0). */ body{font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;background-image:var(--bg-image,none);background-size:cover;background-position:center;background-attachment:fixed} ::selection{background:var(--cyan);color:var(--on-accent)} a{color:inherit;text-decoration:none} .mono,.key{font-family:var(--mono)} /* ---- aurora background + grid overlay ---- */ body::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(20% 20% at 78% 16%, var(--sheen-hi,transparent), var(--sheen-mid,transparent) 42%, transparent 66%), radial-gradient(18% 18% at 93% 54%, var(--sheen-hi,transparent), var(--sheen-mid,transparent) 44%, transparent 68%), radial-gradient(22% 22% at 12% 72%, var(--sheen-hi,transparent), var(--sheen-mid,transparent) 42%, transparent 66%), radial-gradient(60% 50% at 20% 10%, var(--aura-1,transparent), transparent 60%), radial-gradient(60% 50% at 80% 0%, var(--aura-2,transparent), transparent 60%), radial-gradient(40% 40% at 60% 80%, var(--aura-3,transparent), transparent 60%), radial-gradient(46% 46% at 50% 48%, var(--aura-4,transparent), transparent 62%); opacity:var(--glow); /* glow-intensity lever from the Theme panel (0 = off) */ animation:aurora 32s ease-in-out infinite alternate; } body::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background-image: linear-gradient(rgba(120,140,220,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(120,140,220,0.04) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(circle at 50% 30%,black 0%,transparent 75%); mask-image:radial-gradient(circle at 50% 30%,black 0%,transparent 75%); } /* frosted-glass grain — opt-in, BEHIND content (z-index 0) so it textures the frosted backdrop and never films over text; the glass blurs it like real frost */ html::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--grain,0);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:130px 130px} @keyframes aurora{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-20px,0)}} .wrap,.side,.main,.top,.body,.login-wrap,header,footer,aside,main{position:relative;z-index:1} /* ============================================================ SHELL (admin + portal) ============================================================ */ .wrap{display:grid;grid-template-columns:240px 1fr;min-height:100vh} /* Per-area glass: .side reads --glass-bg-* → --* → default. One engine, three targets. */ .side{background:color-mix(in srgb,var(--bg-0) 60%,transparent);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;-webkit-backdrop-filter:blur(var(--glass-bg-blur,var(--blur,8px))) saturate(var(--glass-bg-saturate,var(--glass-saturate,1))) brightness(var(--glass-bg-bright,var(--glass-bright,1))) contrast(var(--glass-bg-contrast,var(--glass-contrast,1)));backdrop-filter:blur(var(--glass-bg-blur,var(--blur,8px))) saturate(var(--glass-bg-saturate,var(--glass-saturate,1))) brightness(var(--glass-bg-bright,var(--glass-bright,1))) contrast(var(--glass-bg-contrast,var(--glass-contrast,1)));box-shadow:0 18px 40px -12px rgba(0,0,0,calc(var(--glass-bg-shadow,var(--glass-shadow,0))/100*.55)),inset 0 1px 0 var(--glass-bg-rim,var(--rim,transparent)),inset 0 0 48px -14px var(--glass-bg-rim,var(--rim,transparent)),inset 0 0 0 200vmax color-mix(in srgb,var(--bg-2) var(--glass-bg-dim,var(--glass-dim,0%)),transparent),inset 0 0 0 200vmax color-mix(in srgb,var(--glass-bg-tint,var(--glass-tint,transparent)) 55%,transparent)} .brand{padding:20px 18px 16px;border-bottom:1px solid var(--line)} .brand .mark{font-family:var(--sans);font-size:19px;font-weight:800;letter-spacing:-.01em} .brand .mark b{color:var(--cyan);font-weight:800} .brand .sub{font-family:var(--mono);font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.18em;margin-top:5px} .navgroup{padding:12px 0 4px} .navgroup .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding:10px 18px 6px;border-top:1px solid var(--line-soft)} .navgroup:first-child .lbl{border-top:0} .nav a{display:flex;align-items:center;gap:11px;padding:9px 18px;color:var(--text-1);font-size:13.5px;border-radius:var(--radius-control);margin:1px 8px;cursor:pointer;transition:color .15s,background .15s,transform .15s,box-shadow .15s} .nav a .ico{width:16px;display:inline-flex;align-items:center;justify-content:center;opacity:.85;flex:none} .nav a:hover{background:color-mix(in srgb,var(--cyan) 6%,transparent);color:var(--text-0);transform:translateX(2px)} .nav a.on{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent);box-shadow:inset 2px 0 0 var(--cyan)} .nav a .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--text-2);background:color-mix(in srgb,var(--bg-0) 60%,transparent);border:1px solid var(--line);border-radius:6px;padding:1px 7px} .nav a.on .cnt{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,transparent)} .main{min-width:0} .top{display:flex;align-items:center;gap:16px;padding:0 26px;height:var(--header-h,58px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg-0) 55%,transparent);-webkit-backdrop-filter:blur(var(--glass-header-blur,var(--blur,8px))) saturate(var(--glass-header-saturate,var(--glass-saturate,1))) brightness(var(--glass-header-bright,var(--glass-bright,1))) contrast(var(--glass-header-contrast,var(--glass-contrast,1)));backdrop-filter:blur(var(--glass-header-blur,var(--blur,8px))) saturate(var(--glass-header-saturate,var(--glass-saturate,1))) brightness(var(--glass-header-bright,var(--glass-bright,1))) contrast(var(--glass-header-contrast,var(--glass-contrast,1)));box-shadow:0 18px 40px -12px rgba(0,0,0,calc(var(--glass-header-shadow,var(--glass-shadow,0))/100*.55)),inset 0 1px 0 var(--glass-header-rim,var(--rim,transparent)),inset 0 0 48px -14px var(--glass-header-rim,var(--rim,transparent)),inset 0 0 0 200vmax color-mix(in srgb,var(--bg-2) var(--glass-header-dim,var(--glass-dim,0%)),transparent),inset 0 0 0 200vmax color-mix(in srgb,var(--glass-header-tint,var(--glass-tint,transparent)) 55%,transparent);position:sticky;top:0;z-index:5} .crumb{font-family:var(--mono);font-size:11px;color:var(--text-2);letter-spacing:.04em} .crumb b{color:var(--text-1);font-weight:500} .top .spacer{margin-left:auto} .me{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));border:1px solid var(--line);flex:none;box-shadow:0 0 14px -4px color-mix(in srgb,var(--cyan) 60%,transparent);overflow:hidden;display:flex;align-items:center;justify-content:center;text-decoration:none} .me:hover{box-shadow:0 0 16px -2px color-mix(in srgb,var(--cyan) 85%,transparent)} .me img{width:100%;height:100%;object-fit:cover} .me span{font-size:11px;font-weight:700;color:var(--on-accent)} .logout{font-family:var(--mono);font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);border-radius:var(--radius-control);padding:7px 12px;background:transparent;cursor:pointer;transition:all .15s} .logout:hover{color:var(--text-0);border-color:color-mix(in srgb,var(--cyan) 40%,var(--line))} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--radius-control);background:transparent;color:var(--text-1);cursor:pointer;transition:color .15s,border-color .15s} .theme-toggle:hover{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,var(--line))} .body{padding:26px;animation:fade-in .35s ease both} .h1{font-family:var(--sans);font-size:26px;font-weight:700;letter-spacing:-.02em} .h1 + .dek{color:var(--text-1);font-size:13px;margin-top:6px;max-width:62ch} .dek{color:var(--text-1)} .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;text-shadow:0 0 10px color-mix(in srgb,var(--cyan) 45%,transparent)} /* ---- toolbar / filters ---- */ .toolbar{display:flex;align-items:center;gap:10px;margin:22px 0 14px;flex-wrap:wrap} .toolbar form{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .field{display:flex;align-items:center;border:1px solid var(--line);background:color-mix(in srgb,var(--bg-0) 60%,transparent);border-radius:var(--radius-control);padding:8px 12px;color:var(--text-0)} .field:focus-within{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 12%,transparent)} .field input,.field select{background:transparent;border:0;color:var(--text-0);font-family:var(--sans);font-size:13px;outline:none;min-width:150px} .field select option{background:var(--bg-1)} .toolbar .right{margin-left:auto} /* ---- buttons ---- */ .btn{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);background:color-mix(in srgb,var(--bg-2) 50%,transparent);color:var(--text-1);border-radius:var(--radius-control);padding:9px 15px;cursor:pointer;transition:all .15s ease} .btn:hover{color:var(--text-0);border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));transform:translateY(-1px)} .btn-accent{background:linear-gradient(90deg,var(--cyan),var(--violet));color:var(--on-accent);border:0;font-weight:700;box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 40%,transparent),0 10px 30px -10px color-mix(in srgb,var(--cyan) 55%,transparent)} .btn-accent:hover{transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 60%,transparent),0 14px 40px -10px color-mix(in srgb,var(--cyan) 65%,transparent);color:var(--on-accent)} .btn-danger{color:var(--rose);border-color:color-mix(in srgb,var(--rose) 35%,var(--line));background:color-mix(in srgb,var(--rose) 6%,transparent)} .btn-danger:hover{background:color-mix(in srgb,var(--rose) 12%,transparent);color:var(--rose);border-color:color-mix(in srgb,var(--rose) 55%,transparent)} /* ============================================================ PANELS (cards) + tables ============================================================ */ .card{background:var(--card-bg,linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 85%,transparent),color-mix(in srgb,var(--bg-1) 85%,transparent)));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 40px -12px rgba(0,0,0,calc(var(--glass-cards-shadow,var(--glass-shadow,0))/100*.55)),inset 0 1px 0 var(--glass-cards-rim,var(--rim,transparent)),inset 0 0 48px -14px var(--glass-cards-rim,var(--rim,transparent)),inset 0 0 0 200vmax color-mix(in srgb,var(--bg-2) var(--glass-cards-dim,var(--glass-dim,0%)),transparent),inset 0 0 0 200vmax color-mix(in srgb,var(--glass-cards-tint,var(--glass-tint,transparent)) 55%,transparent);-webkit-backdrop-filter:blur(var(--glass-cards-blur,var(--blur,8px))) saturate(var(--glass-cards-saturate,var(--glass-saturate,1))) brightness(var(--glass-cards-bright,var(--glass-bright,1))) contrast(var(--glass-cards-contrast,var(--glass-contrast,1)));backdrop-filter:blur(var(--glass-cards-blur,var(--blur,8px))) saturate(var(--glass-cards-saturate,var(--glass-saturate,1))) brightness(var(--glass-cards-bright,var(--glass-bright,1))) contrast(var(--glass-cards-contrast,var(--glass-contrast,1)));transition:box-shadow .22s ease,transform .22s ease} .card:hover{transform:translateY(-1px)} .card .hd{display:flex;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line-soft)} .card .hd h3{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text-0)} .card .hd .act{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;cursor:pointer} .card .bd{padding:17px} table{width:100%;border-collapse:collapse} th{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);text-align:left;padding:11px 17px;font-weight:500;background:color-mix(in srgb,var(--bg-0) 40%,transparent)} td{padding:12px 17px;border-top:1px solid var(--line);font-size:13px;color:var(--text-1)} .key{font-family:var(--mono);font-size:11.5px;color:var(--text-1)} .key a{color:var(--text-1)} .key a:hover{color:var(--cyan)} tr.row{transition:background .15s ease} tr.row:hover td{background:color-mix(in srgb,var(--cyan) 4%,transparent);box-shadow:inset 2px 0 0 color-mix(in srgb,var(--cyan) 35%,transparent)} .muted{color:var(--text-1)} .faint{color:var(--text-2)} /* ---- status pills / chips ---- */ .pill{font-family:var(--mono);font-size:10px;padding:3px 9px;border-radius:999px;border:1px solid;letter-spacing:.03em;display:inline-block} .p-ok{color:var(--emerald);border-color:color-mix(in srgb,var(--emerald) 45%,transparent);background:color-mix(in srgb,var(--emerald) 8%,transparent)} .p-warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 8%,transparent)} .p-bad{color:var(--rose);border-color:color-mix(in srgb,var(--rose) 45%,transparent);background:color-mix(in srgb,var(--rose) 8%,transparent)} .p-muted{color:var(--text-2);border-color:var(--line);background:color-mix(in srgb,var(--bg-0) 50%,transparent)} /* ---- pagination ---- */ .pager{display:flex;gap:6px;align-items:center;padding:14px 17px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;color:var(--text-2)} .pager a,.pager span{padding:5px 10px;border:1px solid var(--line);border-radius:6px;color:var(--text-1)} .pager a:hover{border-color:color-mix(in srgb,var(--cyan) 40%,var(--line));color:var(--text-0)} .pager .cur{background:color-mix(in srgb,var(--cyan) 10%,transparent);color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,transparent)} .pager .disabled{opacity:.4} .pager .count{margin-left:auto;border:0;padding:0} .empty{padding:42px 16px;text-align:center;color:var(--text-2);font-size:13px} /* ---- flash ---- */ .flash{margin:0 0 16px;padding:12px 15px;border-radius:var(--radius);font-size:13px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg-1) 85%,transparent);backdrop-filter:blur(var(--blur,8px))} .flash-ok{color:var(--emerald);border-color:color-mix(in srgb,var(--emerald) 30%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--emerald) 20%,transparent)} .flash-bad{color:var(--rose);border-color:color-mix(in srgb,var(--rose) 30%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--rose) 20%,transparent)} /* ============================================================ LOGIN ============================================================ */ .login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px} .login-card{width:100%;max-width:380px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 88%,transparent),color-mix(in srgb,var(--bg-1) 88%,transparent));border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px;backdrop-filter:blur(10px);box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 22%,transparent),0 30px 80px -30px color-mix(in srgb,var(--cyan) 45%,transparent)} .login-card .mark{font-family:var(--sans);font-size:24px;font-weight:800;letter-spacing:-.02em;text-align:center} .login-card .mark b{color:var(--cyan)} .login-card .sub{font-family:var(--mono);font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.18em;text-align:center;margin-top:6px;margin-bottom:26px} .login-card label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin:14px 0 6px} .login-card input{width:100%;background:color-mix(in srgb,var(--bg-0) 60%,transparent);border:1px solid var(--line);border-radius:var(--radius-control);padding:11px 13px;color:var(--text-0);font-size:14px;outline:none;transition:all .15s} .login-card input:focus{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 12%,transparent)} .login-card button{width:100%;margin-top:22px;background:linear-gradient(90deg,var(--cyan),var(--violet));color:var(--on-accent);border:0;border-radius:var(--radius-control);padding:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;cursor:pointer;box-shadow:0 10px 30px -10px color-mix(in srgb,var(--cyan) 55%,transparent);transition:transform .15s} .login-card button:hover{transform:translateY(-1px)} .login-err{margin-top:16px;color:var(--rose);font-size:12px;text-align:center} /* ============================================================ DETAIL + forms ============================================================ */ .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:18px} @media(max-width:1080px){.cols{grid-template-columns:1fr}} .keybanner{margin:18px 0;padding:16px;border:1px solid color-mix(in srgb,var(--cyan) 30%,var(--line));border-radius:var(--radius);background:color-mix(in srgb,var(--cyan) 6%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 18%,transparent)} .keybanner .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px} .keybanner .val{font-family:var(--mono);font-size:16px;color:var(--text-0);letter-spacing:.02em;word-break:break-all} .keybanner .warn{font-size:11px;color:var(--text-1);margin-top:8px} .dl{display:grid;grid-template-columns:120px 1fr;gap:0} .dl dt{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);padding:11px 0;border-top:1px solid var(--line-soft)} .dl dd{font-size:13px;color:var(--text-0);padding:11px 0;border-top:1px solid var(--line-soft)} .dl dt:first-of-type,.dl dd:first-of-type{border-top:0} .subhead{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin:0 0 2px;padding:15px 17px 4px} .ents{padding:6px 17px 14px} .ent{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line-soft);font-size:12.5px} .ent:first-child{border-top:0} .ent .k{font-family:var(--mono);color:var(--text-1)} .ent .v{margin-left:auto;font-family:var(--mono);color:var(--cyan)} .feed{padding:6px 0} .ev{display:flex;gap:12px;padding:11px 17px;border-top:1px solid var(--line-soft)} .ev:first-child{border-top:none} .ev .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-top:6px;flex:none;box-shadow:0 0 8px color-mix(in srgb,var(--cyan) 60%,transparent)} .ev .tx{font-size:12.5px;color:var(--text-1)} .ev .tx b{color:var(--text-0);font-weight:600} .ev .tm{font-family:var(--mono);font-size:10px;color:var(--text-2);margin-left:auto;flex:none;white-space:nowrap} .form-row{margin-bottom:14px} .form-row label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);margin-bottom:6px} .form-row input,.form-row select,.form-row textarea{width:100%;background:color-mix(in srgb,var(--bg-0) 60%,transparent);border:1px solid var(--line);border-radius:var(--radius-control);padding:10px 12px;color:var(--text-0);font-size:13px;outline:none;font-family:var(--sans);transition:all .15s} .form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 12%,transparent)} .form-row .hint{font-size:11px;color:var(--text-2);margin-top:5px} .actions{display:flex;gap:8px;flex-wrap:wrap;padding:15px 17px;border-top:1px solid var(--line-soft);align-items:center} .inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap} .err{color:var(--rose);font-size:12px;margin-top:6px} .back{font-family:var(--mono);font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em} .back:hover{color:var(--cyan)} details.disclosure{margin-top:10px} details.disclosure summary{cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:.06em;padding:8px 0} /* native form controls fallback (dark) */ select,input,textarea{accent-color:var(--cyan)} select option{color:var(--text-0);background-color:var(--bg-1)} input::placeholder,textarea::placeholder{color:var(--text-2);opacity:1} /* ============================================================ DASHBOARD helpers (stat grid + spark chart) ============================================================ */ .stat-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:22px} .stat{padding:17px} .stat .lbl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2)} .stat .num{font-size:32px;font-weight:700;color:var(--stat-num,var(--cyan));margin-top:6px;line-height:1;text-shadow:0 0 18px color-mix(in srgb,var(--cyan) 35%,transparent)} .stat .sub{font-size:11.5px;color:var(--text-2);margin-top:6px} .spark{display:flex;align-items:flex-end;gap:8px;height:128px;margin-top:16px} .spark .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px} .spark .bar{width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--cyan) 0%,var(--violet) 100%);box-shadow:0 0 12px -4px color-mix(in srgb,var(--cyan) 60%,transparent);min-height:3px;transition:height .4s ease} .spark .d{font-family:var(--mono);font-size:10px;color:var(--text-2)} .spark .n{font-family:var(--mono);font-size:10px;color:var(--text-1)} /* ============================================================ ⌘K command palette ============================================================ */ .cmdk-trigger{display:flex;align-items:center;gap:8px;width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--radius-control);background:color-mix(in srgb,var(--bg-0) 50%,transparent);color:var(--text-2);font-size:12.5px;cursor:pointer;transition:all .15s} .cmdk-trigger:hover{border-color:color-mix(in srgb,var(--cyan) 35%,var(--line));color:var(--text-1)} .cmdk-trigger-ico{font-size:13px} .cmdk-trigger-label{flex:1;text-align:left} .cmdk-trigger-kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--text-2)} .cmdk-overlay{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,#02030a 60%,transparent);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;animation:fade-in .15s ease both} .cmdk-overlay[hidden]{display:none} .cmdk-panel{width:min(560px,92vw);background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 97%,transparent),color-mix(in srgb,var(--bg-1) 97%,transparent));border:1px solid color-mix(in srgb,var(--cyan) 28%,var(--line));border-radius:var(--radius);box-shadow:0 30px 90px -20px color-mix(in srgb,var(--cyan) 40%,transparent);overflow:hidden} .cmdk-input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:16px 18px;color:var(--text-0);font-size:15px;outline:none;font-family:var(--sans)} .cmdk-results{max-height:50vh;overflow-y:auto;padding:8px} .cmdk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-control);color:var(--text-1);cursor:pointer} .cmdk-item-label{font-size:13.5px;font-weight:500} .cmdk-item-group{margin-left:auto;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)} .cmdk-item[data-active]{background:color-mix(in srgb,var(--cyan) 10%,transparent);color:var(--text-0);box-shadow:inset 2px 0 0 var(--cyan)} .cmdk-item[data-active] .cmdk-item-group{color:var(--cyan)} .cmdk-empty{padding:22px;text-align:center;color:var(--text-2);font-size:13px} /* ---- entrance stagger ---- */ .stagger > *{animation:fade-in .4s ease both} .stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.06s} .stagger > *:nth-child(3){animation-delay:.10s} .stagger > *:nth-child(4){animation-delay:.14s} .stagger > *:nth-child(5){animation-delay:.18s} .stagger > *:nth-child(6){animation-delay:.22s} @media(max-width:760px){.wrap{grid-template-columns:1fr}.side{display:none}.dl{grid-template-columns:100px 1fr}} /* NB: the resting state leaves NO transform — a lingering transform on a content container isolates backdrop-filter, which would stop cards frosting the page bg. */ @keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1}} /* ============================================================ AI assistant widget + docs prose ============================================================ */ .ai-fab{position:fixed;bottom:22px;right:22px;z-index:70;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--violet));color:var(--on-accent);font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 10px 30px -8px color-mix(in srgb,var(--cyan) 55%,transparent)} .ai-fab:hover{transform:translateY(-1px)} /* the [hidden] attribute must beat the explicit display below, or the panel can't close */ .ai-drawer[hidden],.ai-fab[hidden]{display:none!important} .ai-drawer{position:fixed;bottom:22px;right:22px;z-index:71;width:min(380px,92vw);height:min(540px,76vh);display:flex;flex-direction:column;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 96%,transparent),color-mix(in srgb,var(--bg-1) 96%,transparent));border:1px solid color-mix(in srgb,var(--cyan) 28%,var(--line));border-radius:var(--radius-lg);box-shadow:0 30px 80px -20px color-mix(in srgb,var(--cyan) 40%,transparent);backdrop-filter:blur(10px);overflow:hidden} .ai-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)} .ai-head button{background:transparent;border:0;color:var(--text-2);font-size:20px;cursor:pointer;line-height:1} .ai-head button:hover{color:var(--text-0)} .ai-thread{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px} .ai-msg{max-width:85%;padding:9px 12px;border-radius:var(--radius);font-size:13px;line-height:1.5;white-space:pre-wrap} .ai-msg.user{align-self:flex-end;background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 22%,transparent),color-mix(in srgb,var(--violet) 22%,transparent));color:var(--text-0);border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent)} .ai-msg.bot{align-self:flex-start;background:color-mix(in srgb,var(--bg-0) 50%,transparent);border:1px solid var(--line);color:var(--text-1)} .ai-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)} .ai-form input{flex:1;background:color-mix(in srgb,var(--bg-0) 60%,transparent);border:1px solid var(--line);border-radius:var(--radius-control);padding:9px 12px;color:var(--text-0);font-size:13px;outline:none} .ai-form input:focus{border-color:color-mix(in srgb,var(--cyan) 50%,transparent)} .doc-prose{font-size:14px;line-height:1.7;color:var(--text-1)} .doc-prose h1{font-family:var(--sans);font-size:24px;font-weight:700;color:var(--text-0);margin:0 0 14px} .doc-prose h2{font-size:17px;font-weight:600;color:var(--text-0);margin:26px 0 10px;padding-top:14px;border-top:1px solid var(--line-soft)} .doc-prose h3{font-size:14px;font-weight:600;color:var(--text-0);margin:18px 0 8px} .doc-prose p{margin:0 0 12px} .doc-prose ul,.doc-prose ol{margin:0 0 12px;padding-left:22px} .doc-prose li{margin:4px 0} .doc-prose a{color:var(--cyan)} .doc-prose code{font-family:var(--mono);font-size:12px;background:color-mix(in srgb,var(--bg-0) 60%,transparent);border:1px solid var(--line);border-radius:4px;padding:1px 5px} .doc-prose pre{background:color-mix(in srgb,var(--bg-0) 60%,transparent);border:1px solid var(--line);border-radius:var(--radius-control);padding:12px;overflow-x:auto;margin:0 0 12px} .doc-prose pre code{border:0;padding:0;background:transparent} .doc-prose table{margin:0 0 12px} .doc-prose th,.doc-prose td{border:1px solid var(--line);padding:6px 10px;text-align:left} /* ============================================================ Notifications (B3) — bell, list, preferences ============================================================ */ .note-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-control);color:var(--text-2);border:1px solid var(--line);background:color-mix(in srgb,var(--bg-0) 40%,transparent);text-decoration:none} .note-bell:hover{color:var(--text-0);border-color:color-mix(in srgb,var(--cyan) 40%,var(--line))} .note-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;color:var(--on-accent);background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:999px} .feed .ev.unread{background:color-mix(in srgb,var(--cyan) 7%,transparent);border-radius:var(--radius-control)} .feed .ev.unread .dot{background:var(--cyan);box-shadow:0 0 8px color-mix(in srgb,var(--cyan) 70%,transparent)} .feed .meta{font-size:11px;color:var(--text-2);margin-top:3px} .feed .empty{padding:26px;text-align:center;color:var(--text-2);font-size:13px} .pref-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft)} .pref-row:last-child{border-bottom:0} .pref-label{font-size:13px;color:var(--text-0)} .pref-label .faint{font-size:11px;margin-top:2px} .pref-row select{min-width:150px} /* Ticket attachments (B19) */ .attach-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .attach-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;font-size:11px;color:var(--text-1);background:color-mix(in srgb,var(--bg-0) 55%,transparent);border:1px solid var(--line);border-radius:999px;text-decoration:none;max-width:260px} .attach-chip:hover{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));color:var(--text-0)} .attach-chip span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* My Account (profile shell) */ .acct-tabs{display:flex;gap:4px;margin-top:20px;border-bottom:1px solid var(--line)} .acct-tab{padding:9px 16px;font-size:13px;color:var(--text-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px} .acct-tab:hover{color:var(--text-0)} .acct-tab.on{color:var(--text-0);border-bottom-color:var(--cyan)} .avatar-lg{width:120px;height:120px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,var(--cyan),var(--violet));display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line);box-shadow:0 0 26px -8px color-mix(in srgb,var(--cyan) 60%,transparent)} .avatar-lg img{width:100%;height:100%;object-fit:cover} .avatar-lg span{font-size:38px;font-weight:700;color:var(--on-accent)} .stub-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft)} .stub-row:last-child{border-bottom:0} .stub-row .faint{font-size:11px;margin-top:2px;max-width:460px} /* ONE glass material — every glass surface reads the SAME dials (frost/saturation/ brightness) so moving a slider re-frosts cards, panels, header + sidebar alike. .card already carries the full recipe (rim + solidity); this unifies the rest. */ /* .top/.side moved to their own per-area rules above; modals/login stay on the global glass. */ .login-card,.cmdk-panel,.ai-drawer,.flash{-webkit-backdrop-filter:blur(var(--blur,8px)) saturate(var(--glass-saturate,1)) brightness(var(--glass-bright,1));backdrop-filter:blur(var(--blur,8px)) saturate(var(--glass-saturate,1)) brightness(var(--glass-bright,1))} /* Liquid Glass refraction (lensing) — an isolated opt-in layer per surface. Each surface's own backdrop-filter already makes it a stacking context, so this z-index:-1 ::before stays inside it, below content (never distorts text). Default --rfr:none = inert + invisible, so nothing changes until the Refraction dial is set. Chromium renders the SVG displacement; other browsers ignore url() in backdrop-filter and simply no-op this layer (base glass intact). */ .card{position:relative} .card::before,.top::before,.side::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;-webkit-backdrop-filter:var(--rfr,none);backdrop-filter:var(--rfr,none)} .card::before{--rfr:var(--glass-cards-refract,var(--glass-refract,none))} .top::before{--rfr:var(--glass-header-refract,var(--glass-refract,none))} .side::before{--rfr:var(--glass-bg-refract,var(--glass-refract,none))} /* === Analytics (Command Center) — data viz on the shared glass card ========== Charts sit ON .card (the one glass material). Every colour is a token (var(--accent) / status tokens / color-mix) — nothing hard-coded. No transform on the cards (a transform breaks their backdrop-filter), so they frost cleanly. */ .an-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} .an-head .eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)} .an-head h1{font-size:26px;font-weight:650;letter-spacing:-.02em;margin:3px 0 4px} .an-head .muted{color:var(--text-2);font-size:13px;margin:0} .an-range{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg-2) 40%,transparent)} .an-range a{padding:6px 13px;border-radius:9px;font-size:12.5px;font-weight:550;color:var(--text-1);text-decoration:none;transition:color .18s,background .18s} .an-range a:hover{color:var(--text-0)} .an-range a.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)} .an-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px} .an-kpi{padding:15px 16px 14px} .an-kpi-label{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-2);text-transform:uppercase} .an-kpi-val{font-size:29px;font-weight:680;letter-spacing:-.02em;line-height:1.04;margin:9px 0 5px;color:var(--text-0);font-variant-numeric:tabular-nums} .an-kpi-sub{font-size:12px;color:var(--text-1);display:flex;align-items:center;gap:7px;flex-wrap:wrap} .an-delta{font-weight:650;font-size:11px} .an-delta.an-up{color:var(--emerald)} .an-delta.an-down{color:var(--rose)} .an-delta.an-flat{color:var(--text-2)} .an-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px} .an-grid>.card{padding:18px 18px 16px} .an-span2{grid-column:span 2} .an-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px} .an-card-h h2{font-size:14px;font-weight:620;letter-spacing:-.01em;margin:0;color:var(--text-0)} .an-card-h .muted{font-size:11.5px;color:var(--text-2)} .an-empty{padding:16px 0;text-align:center} .an-area{display:block;width:100%;height:auto;overflow:visible} .an-area .al{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round} .an-gauge{display:block;margin:4px auto 0;max-width:200px;width:100%;height:auto} .an-gauge .gt{fill:none;stroke:color-mix(in srgb,var(--text-2) 26%,transparent);stroke-width:13;stroke-linecap:round} .an-gauge .ga{fill:none;stroke:var(--accent);stroke-width:13;stroke-linecap:round} .an-gauge .gv{fill:var(--text-0);font-size:30px;font-weight:680;font-variant-numeric:tabular-nums} .an-gauge .gl{fill:var(--text-2);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .an-donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .an-donut{flex:0 0 auto} .an-donut .dseg{fill:none;stroke-width:15} .an-donut .dt{fill:var(--text-0);font-size:24px;font-weight:680;font-variant-numeric:tabular-nums} .an-donut .dl{fill:var(--text-2);font-size:9px;letter-spacing:.1em;text-transform:uppercase} .an-legend{display:flex;flex-direction:column;gap:9px;flex:1 1 140px;min-width:0} .an-legend .li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-1)} .an-legend .dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto} .an-legend .lc{margin-left:auto;font-weight:650;color:var(--text-0);font-variant-numeric:tabular-nums} .an-bars{display:flex;flex-direction:column;gap:12px} .an-bar .bh{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:5px;color:var(--text-1)} .an-bar .bh b{color:var(--text-0);font-weight:620;font-variant-numeric:tabular-nums} .an-bar .bt{height:8px;border-radius:6px;background:color-mix(in srgb,var(--text-2) 16%,transparent);overflow:hidden} .an-bar .bf{height:100%;border-radius:6px;background:var(--accent);min-width:3px} .an-bar .bf.an-accent2{background:var(--magenta)} .an-bignum{font-size:42px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--text-0);font-variant-numeric:tabular-nums} .an-bignum.warn{color:var(--amber)} .an-bignum-sub{font-size:12px;color:var(--text-2);margin:6px 0 14px} .an-list{display:flex;flex-direction:column} .an-list .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);font-size:12.5px} .an-list .row:last-child{border-bottom:0} .an-list .who{color:var(--text-1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .an-list .when{color:var(--amber);font-size:11.5px;font-weight:600;flex:0 0 auto} .an-split{display:flex;gap:20px;margin-bottom:12px} .an-split-n{font-size:30px;font-weight:680;line-height:1;color:var(--text-0);font-variant-numeric:tabular-nums} .an-split-n.ok{color:var(--emerald)} .an-split-l{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin-top:5px} .an-split-bar{height:8px;border-radius:6px;background:color-mix(in srgb,var(--text-2) 16%,transparent);overflow:hidden} .an-split-bar .bf{height:100%;border-radius:6px;background:var(--emerald)} .an-rel-v{font-size:28px;font-weight:680;letter-spacing:-.02em;color:var(--text-0)} .an-rel-meta{font-size:12.5px;color:var(--text-1);margin-top:4px} @media(max-width:1100px){ .an-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .an-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:680px){ .an-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .an-grid{grid-template-columns:1fr} .an-span2{grid-column:span 1} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.card:hover{transform:none!important}}