/* Spensara PM theme v1.1.0 - palette, gradients and fonts from /Spensara/assets/css/spensara.css (Tom's marketing page) */
:root{
--bg-primary:#050b15;--bg-surface:#0d1b2a;--bg-elevated:#132236;--bg-card:#0e1e31;
--color-cyan:#00c6ff;--color-cyan-d:#0090c2;--color-blue:#00B4D8;--color-blue-d:#0090ad;--color-green:#00FF87;
--color-purple:#8B5CF6;--color-red:#FF4757;--color-gold:#FFD700;--color-teal:#00C896;
--text-primary:#E8F1FF;--text-secondary:#7B92B2;--text-muted:#4A5F7A;
--border:rgba(0,180,216,0.15);--border-bright:rgba(0,180,216,0.35);--border-cyan:rgba(0,198,255,0.3);
--glow-blue:0 0 30px rgba(0,180,216,0.25);--glow-cyan:0 0 30px rgba(0,198,255,0.3);--glow-sm:0 0 12px rgba(0,180,216,0.2);
--radius-sm:8px;--radius-md:16px;--transition:0.3s cubic-bezier(0.4,0,0.2,1);
/* existing tracker aliases, mapped onto the same values */
--bg:var(--bg-primary);--panel:var(--bg-surface);--card:var(--bg-card);--elev:var(--bg-elevated);
--line:var(--border);--line-b:var(--border-bright);--text:var(--text-primary);--mut:var(--text-secondary);
--accent:var(--color-cyan);--teal:var(--color-teal);--blue:var(--color-blue);--warn:var(--color-gold);--glow:var(--glow-sm);
--grad-brand:linear-gradient(135deg,var(--color-cyan) 0%,#a78bfa 50%,var(--color-blue) 100%)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--color-blue);border-radius:3px}
/* animated background layer: fixed, behind everything, never clickable */
#sp-bg-canvas,.sp-bg-gradient{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.sp-bg-gradient{background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(0,198,255,0.08) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 20% 80%,rgba(0,180,216,0.06) 0%,transparent 50%),radial-gradient(ellipse 30% 25% at 80% 70%,rgba(139,92,246,0.05) 0%,transparent 50%)}
body>header,body>main,body>footer,body>div:not(.sp-bg-gradient),body>section{position:relative;z-index:1}
/* header matches marketing .sp-nav glass bar */
.top{position:sticky;top:0;z-index:10 !important;background:rgba(5,11,21,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background var(--transition)}
.top.scrolled{background:rgba(5,11,21,0.97);box-shadow:0 1px 30px rgba(0,0,0,0.5)}
nav a{transition:background var(--transition),color var(--transition)}
nav a.on{background:rgba(0,198,255,0.1);color:var(--color-cyan);box-shadow:inset 0 0 0 1px var(--border-cyan)}
/* readable glass cards over the moving background */
.card{background:rgba(14,30,49,0.88);border-color:var(--border);border-radius:var(--radius-md);box-shadow:var(--glow-sm);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color var(--transition),box-shadow var(--transition)}
.card:hover{border-color:var(--border-bright)}
h1{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
.login h1{display:block}
button,.btn{background:var(--color-cyan);border-color:var(--color-cyan);color:#000;border-radius:var(--radius-sm);transition:background var(--transition-fast,.15s),box-shadow var(--transition),transform var(--transition)}
button:hover,.btn:hover{background:#33d4ff;box-shadow:var(--glow-cyan);transform:translateY(-1px);text-decoration:none}
button.sec,.btn.sec{background:var(--border);border-color:var(--border-bright);color:var(--text-primary)}
button.danger{background:var(--color-red);border-color:var(--color-red);color:#fff}
button.link,button.link:hover{background:none;box-shadow:none;transform:none;color:var(--color-blue)}
input,select,textarea{background:var(--bg-elevated);border-color:var(--border);color:var(--text-primary)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-cyan);box-shadow:0 0 0 3px rgba(0,198,255,0.15)}
.flash{background:rgba(0,200,150,0.12);border-color:var(--color-teal)}
.over{color:var(--color-red)}
footer{color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){*{transition:none !important}button:hover,.btn:hover{transform:none}}
@media print{#sp-bg-canvas,.sp-bg-gradient{display:none}.card{backdrop-filter:none;background:#fff;color:#000}h1{-webkit-text-fill-color:#000;background:none}}