/* TOKENS */
:root {
 --fd: 'Bricolage Grotesque', sans-serif;
 --fb: 'Inter', sans-serif;
 --fm: 'Inter', monospace;
 --ease: cubic-bezier(0.4,0,0.2,1);
 --spring: cubic-bezier(0.34,1.56,0.64,1);
 --bar: linear-gradient(90deg,#3B8EF0 0%,#52BFFF 30%,#2ED8A8 62%,#F0A030 100%);
 /* CTA button — gradient works on both light and dark surfaces */
 --cta-bg: linear-gradient(135deg, #52E4B9, #2ED8A8 60%, #18c098);
 --cta-text: #071a12;
 --cta-hover: linear-gradient(135deg, #45D9AE, #28C99A 60%, #14A882);
 --cta-color: #2ED8A8;
 --cta-shadow: rgba(46,216,168,0.28);
 --cta-shadow-hover: rgba(46,216,168,0.42);
 /* Alpha colour tokens — theme-agnostic fixed rgba values */
 --mint-a06: rgba(46,216,168,0.06);
 --mint-a10: rgba(46,216,168,0.10);
 --mint-a12: rgba(46,216,168,0.12);
 --mint-a15: rgba(46,216,168,0.15);
 --mint-a20: rgba(46,216,168,0.20);
 --mint-a25: rgba(46,216,168,0.25);
 --mint-a30: rgba(46,216,168,0.30);
 --mint-a40: rgba(46,216,168,0.40);
 --blue-a06: rgba(59,142,240,0.06);
 --blue-a08: rgba(59,142,240,0.08);
 --blue-a10: rgba(59,142,240,0.10);
 --blue-a12: rgba(59,142,240,0.12);
 --blue-a15: rgba(59,142,240,0.15);
 --blue-a18: rgba(59,142,240,0.18);
 --blue-a20: rgba(59,142,240,0.20);
 --blue-a25: rgba(59,142,240,0.25);
 --blue-a30: rgba(59,142,240,0.30);
 --blue-a40: rgba(59,142,240,0.40);
 --blue-a50: rgba(59,142,240,0.50);
 --amber-a06: rgba(240,160,48,0.06);
 --amber-a10: rgba(240,160,48,0.10);
 --amber-a15: rgba(240,160,48,0.15);
 --amber-a20: rgba(240,160,48,0.20);
 --red-a06: rgba(224,82,82,0.06);
 --red-a08: rgba(224,82,82,0.08);
 --red-a10: rgba(224,82,82,0.10);
 --red-a15: rgba(224,82,82,0.15);
 --red-a20: rgba(224,82,82,0.20);
 --red-a30: rgba(224,82,82,0.30);
 --purple-a10: rgba(155,111,232,0.10);
 --purple-a15: rgba(155,111,232,0.15);
 /* Spacing scale */
 --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px;
 --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px;
 --space-48: 48px; --space-64: 64px;
 /* Radius scale */
 --radius-xs: 4px; --radius-sm: 10px; --radius-md: 12px;
 --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px;
}

/* DARK MODE (default) */
html, html[data-theme="dark"] {
 --mint: #2ED8A8; --mint-d: rgba(46,216,168,0.1); --mint-g: rgba(46,216,168,0.18); --mint2: #52E4B9;
 --blue: #3B8EF0; --blue-d: rgba(59,142,240,0.1); --blue2: #5BA3F5;
 --amber: #F0A030; --amber-d:rgba(240,160,48,0.1);
 --red: #E05252; --red-d: rgba(224,82,82,0.1);
 --purple: #9B6FE8;
 --bg: #070D1A;
 --bg-s: #0A1322;
 --card: #0E1A2E;
 --bg-e: #111f32;
 --bg-h: #162d4a;
 --b1: rgba(255,255,255,0.10);
 --b2: rgba(255,255,255,0.16);
 --b3: rgba(255,255,255,0.22);
 --bm: rgba(46,216,168,0.18);
 --hi: rgba(255,255,255,0.05);
 --glow-blue: 0 0 14px rgba(59,142,240,0.30);
 --glow-mint: 0 0 14px rgba(46,216,168,0.24);
 --t1: #EAF0FC;
 --t2: #8BAAC8;
 --t3: #6A8BA8;
 --tw: #FFFFFF;
 --placeholder: rgba(139,170,200,0.70);
 --sh-sm: 0 1px 3px rgba(10,20,45,.32), 0 4px 12px rgba(10,20,45,.22);
 --sh-md: 0 2px 8px rgba(10,20,45,.38), 0 8px 28px rgba(10,20,45,.28);
 --sh-lg: 0 4px 16px rgba(10,20,45,.42), 0 16px 48px rgba(10,20,45,.32);
 --sh-panel: 0 0 0 1px rgba(0,0,0,0.18), 0 4px 6px rgba(10,20,45,0.22), 0 12px 24px rgba(10,20,45,0.32), 0 32px 64px rgba(10,20,45,0.20);
 --sh-xs: 0 1px 3px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.10);
 --seg-track: rgba(255,255,255,0.10);
 --seg-active-bg: rgba(255,255,255,0.18);
 --seg-active-text: var(--t1);
 --input-bg: rgba(255,255,255,0.04);
 --overlay-bg: rgba(7,13,26,0.78);
 --sb-track: rgba(255,255,255,0.03);
 --sb-thumb: rgba(59,142,240,0.50);
 --shimmer-from: rgba(255,255,255,0.04);
 --shimmer-to: rgba(255,255,255,0.10);
 /* Card section colors */
 --card-header: #122038;
 --card-bsr: #0e1a2e;
 --card-comp: #0e1a2e;
 --card-metrics: #0b1425;
 --card-tags: #0e1a2e;
 --card-bottom: #0f2033;
 /* Form/page section colors */
 --form-bg: #122038;
 --form-input: #0b1425;
 --form-action: #122038;
 --focus-border: rgba(59,142,240,0.5);
 /* Consolidated card layers */
 --card-elevated: #122038;
 --card-base: #0e1a2e;
 --card-inset: #0b1425;
 /* Phase A: bg-b token — used in SERP Intelligence, Review Analysis */
 --bg-b: #0b1425;
 color-scheme: dark;
}

/* LIGHT MODE */
html[data-theme="light"] {
 /* Phase 1+A: Accents deepened for WCAG contrast on white */
 --mint: #009E7A; --mint-d: rgba(0,158,122,0.10); --mint-g: rgba(0,158,122,0.18); --mint2: #009E7A;
 --blue: #2C7DE0; --blue-d: rgba(44,125,224,0.10); --blue2: #5BA3F5;
 --amber: #C47A00; --amber-d: rgba(196,122,0,0.10);
 --red: #C73B3B; --red-d: rgba(199,59,59,0.10);
 --purple: #7A4FD6;
 /* light mode CTA shadow only — gradient bg is the same as dark */
 --cta-shadow: rgba(0,158,122,0.22);
 --cta-shadow-hover: rgba(0,158,122,0.35);
 /* Phase 1+B: Surfaces — bg-c off-white so cards differ from white sidebar */
 --bg: #F6F5F3;
 --bg-s: #FFFFFF;
 --card: #ffffff;
 --bg-e: rgba(26,39,64,0.04);
 --bg-h: rgba(26,39,64,0.05);
 /* Phase A+B+E: bg-b token + corrected border weight convention (b2 > b1) + boosted visibility */
 --bg-b: rgba(26,39,64,0.06);
 --b1: rgba(26,39,64,0.11);
 --b2: rgba(26,39,64,0.17);
 --b3: rgba(44,125,224,0.22);
 --bm: rgba(0,158,122,0.20);
 /* Phase 1: Hover — blue-tinted (white-on-white is invisible) */
 --hi: rgba(30,36,40,0.05);
 /* Phase 4+D: Typography — deepened for WCAG compliance, t3 safe at 9px */
 --t1: #1E2428;
 --t2: #3C5268;
 --t3: #4E6A85;
 --tw: #1E2428;
 /* Phase 2: Shadows — increased opacity, dual-layer ambient+key */
 --sh-sm: 0 1px 3px rgba(26,39,64,.12), 0 4px 16px rgba(26,39,64,.10);
 --sh-md: 0 2px 8px rgba(26,39,64,.14), 0 8px 32px rgba(26,39,64,.12);
 --sh-lg: 0 4px 20px rgba(26,39,64,.16), 0 16px 56px rgba(26,39,64,.14);
 --sh-panel: 0 0 0 1px rgba(0,0,0,0.04), 0 4px 6px rgba(0,0,0,0.05), 0 12px 24px rgba(0,0,0,0.08), 0 32px 64px rgba(0,0,0,0.06);
 --sh-xs: 0 1px 3px rgba(26,39,64,0.10), 0 4px 12px rgba(26,39,64,0.08);
 --seg-track: #E8E8ED;
 --seg-active-bg: #FFFFFF;
 --seg-active-text: var(--t1);
 /* Phase 1: Inputs, overlays, scrollbars */
 --input-bg: rgba(26,39,64,0.04);
 --overlay-bg: rgba(26,39,64,0.35);
 --sb-track: rgba(26,39,64,0.04);
 --sb-thumb: rgba(44,125,224,0.30);
 --shimmer-from: rgba(26,39,64,0.04);
 --shimmer-to: rgba(26,39,64,0.10);
 --focus-border: rgba(44,125,224,0.55);
 /* Card section colors */
 --card-header: var(--card);
 --card-bsr: var(--card);
 --card-comp: var(--card);
 --card-metrics: var(--card);
 --card-tags: var(--card);
 --card-bottom: var(--card);
 /* Form/page section colors */
 --form-bg: var(--card);
 --form-input: rgba(26,39,64,0.04);
 --form-action: var(--card);
 --placeholder: rgba(26,39,64,0.38);
 /* Consolidated card layers */
 --card-elevated: var(--card);
 --card-base: var(--card);
 --card-inset: rgba(26,39,64,0.04);
 /* Phase 1: Boosted alpha tokens — calibrated for white surfaces (~1.5x dark values) */
 --mint-a06: rgba(0,158,122,0.08);
 --mint-a10: rgba(0,158,122,0.12);
 --mint-a12: rgba(0,158,122,0.14);
 --mint-a15: rgba(0,158,122,0.18);
 --mint-a20: rgba(0,158,122,0.24);
 --mint-a25: rgba(0,158,122,0.30);
 --mint-a30: rgba(0,158,122,0.36);
 --mint-a40: rgba(0,158,122,0.46);
 --blue-a06: rgba(44,125,224,0.07);
 --blue-a08: rgba(44,125,224,0.10);
 --blue-a10: rgba(44,125,224,0.13);
 --blue-a12: rgba(44,125,224,0.15);
 --blue-a15: rgba(44,125,224,0.18);
 --blue-a18: rgba(44,125,224,0.22);
 --blue-a20: rgba(44,125,224,0.25);
 --blue-a25: rgba(44,125,224,0.30);
 --blue-a30: rgba(44,125,224,0.36);
 --blue-a40: rgba(44,125,224,0.46);
 --blue-a50: rgba(44,125,224,0.56);
 --amber-a06: rgba(196,122,0,0.08);
 --amber-a10: rgba(196,122,0,0.12);
 --amber-a15: rgba(196,122,0,0.18);
 --amber-a20: rgba(196,122,0,0.24);
 --red-a06: rgba(199,59,59,0.07);
 --red-a08: rgba(199,59,59,0.10);
 --red-a10: rgba(199,59,59,0.12);
 --red-a15: rgba(199,59,59,0.18);
 --red-a20: rgba(199,59,59,0.24);
 --red-a30: rgba(199,59,59,0.34);
 --purple-a10: rgba(122,79,214,0.12);
 --purple-a15: rgba(122,79,214,0.18);
 color-scheme: light;
}

/* Theme switch is instant (Vercel/Linear pattern). The previous 0.3s
   global transition produced a visible "intermediate state" mid-flip
   on dense surfaces (every cell/pill/badge interpolating colours
   simultaneously). The .theme-transitioning class is still added by
   toggleTheme() and removed after 400ms, but no longer drives any
   transition rules. Hover/state transitions on individual components
   stay intact — they only kick in on user interaction, not on the
   theme attribute change. */

/* RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; background:var(--bg); color:var(--t1); }
body { font-family:var(--fb); overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--sb-track); border-radius:100px; }
::-webkit-scrollbar-thumb { background:var(--sb-thumb); border-radius:100px; }
::-webkit-scrollbar-thumb:hover { background:rgba(59,142,240,0.65); }
* { scrollbar-width:thin; scrollbar-color:var(--sb-thumb) var(--sb-track); }

/* AUTH LOADING */
#auth-loading {
 display:flex; align-items:center; justify-content:center;
 min-height:100vh; flex-direction:column; gap:16px;
 background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(46,216,168,0.07), transparent), var(--bg);
}
.loading-logo {
 font-family:var(--fd); font-size:22px; font-weight:800; color:var(--t1);
}
.loading-logo .accent { color:var(--mint); }
.loading-spinner {
 width:28px; height:28px; border:2px solid var(--b2);
 border-top-color:var(--mint); border-radius:50%;
 animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* LOGIN SCREEN */
#login-screen {
 display:none; align-items:center; justify-content:center;
 min-height:100vh; flex-direction:column; gap:0;
 background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(46,216,168,0.07), transparent), var(--bg);
}
.login-card {
 background:var(--card); border:1px solid var(--b1); border-radius:20px;
 padding:40px; width:100%; max-width:400px; margin:0 16px;
}
.login-logo {
 font-family:var(--fd); font-size:20px; font-weight:800; color:var(--t1);
 margin-bottom:28px; text-align:center;
}
.login-logo .accent { color:var(--mint); }
.login-logo .sub { display:block; font-size:12px; font-weight:400; color:var(--t3); letter-spacing:0.08em; text-transform:uppercase; margin-top:4px; font-family:var(--fm); }
.login-card h2 { font-size:1.25rem; font-weight:700; color:var(--t1); margin:0 0 6px; text-align:center; font-family:var(--fd); }
.login-card .login-sub { font-size:0.85rem; color:var(--t3); text-align:center; margin:0 0 28px; }
.login-field { margin-bottom:16px; }
.login-field label { display:block; font-size:0.75rem; color:var(--t3); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; font-family:var(--fm); }
.login-input {
 width:100%; box-sizing:border-box;
 background:var(--input-bg); border:1px solid var(--b2);
 border-radius:8px; padding:11px 14px; color:var(--t1); font-size:0.9rem;
 outline:none; transition:border-color 0.2s; font-family:var(--fb);
}
.login-input::placeholder { color:var(--t3); }
.login-input:focus { border-color:rgba(59,142,240,0.5); }
.login-input.err { border-color:var(--red); }
.login-err { font-size:0.78rem; color:var(--red); margin-top:6px; display:none; }
.login-err.show { display:block; }
.login-btn-primary {
 width:100%; padding:12px; background:var(--mint); color:#07110e;
 border:none; border-radius:10px; font-size:0.95rem; font-weight:700;
 cursor:pointer; font-family:var(--fd); transition:opacity 0.2s; margin-top:8px;
}
.login-btn-primary:hover { opacity:0.9; }
.login-btn-primary:disabled { opacity:0.5; cursor:default; }
.login-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--t3); font-size:0.8rem; }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:var(--b1); }
.login-btn-google {
 width:100%; padding:11px; background:var(--input-bg); border:1px solid var(--b2);
 border-radius:10px; color:var(--t1); font-size:0.9rem; font-weight:600;
 cursor:pointer; font-family:var(--fb); display:flex; align-items:center; justify-content:center; gap:10px;
 transition:background 0.2s;
}
.login-btn-google:hover { background:var(--b2); }
.login-forgot { text-align:right; margin-top:6px; }
.login-forgot a { font-size:0.78rem; color:var(--t3); text-decoration:none; }
.login-forgot a:hover { color:var(--blue); }
.login-back { text-align:center; margin-top:20px; }
.login-back a { font-size:0.82rem; color:var(--t3); text-decoration:none; }
.login-back a:hover { color:var(--t1); }

/* APP SHELL */
#app-shell { display:none; }
.admin-wrap { display:flex; min-height:100vh; }

/* TOP NAV */
.admin-topnav {
 position:fixed; top:0; left:0; right:0; z-index:200;
 height:48px; background:var(--bg-s); border-bottom:1px solid var(--b1);
 display:flex; align-items:stretch; overflow:visible;
}
.topnav-rainbow {
 position:absolute; top:0; left:0; right:0; height:2px;
 background:var(--bar); opacity:0.9; pointer-events:none; z-index:1;
}
.topnav-logo {
 display:flex; align-items:center; gap:9px; padding:0 18px;
 flex-shrink:0; border:none; background:none; cursor:pointer;
}
.logo-mark {
 width:26px; height:26px; border-radius:7px;
 background:linear-gradient(135deg,rgba(46,216,168,0.35),rgba(59,142,240,0.28));
 border:1px solid rgba(46,216,168,0.25);
 display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-mark svg { width:13px; height:13px; }
.logo-text { font-family:var(--fd); font-size:15px; font-weight:800; color:var(--t1); }
.logo-text .accent { color:var(--mint); }
.topnav-nav {
 display:flex; align-items:stretch; flex:1; padding:0 4px; overflow:visible;
}
.topnav-item {
 display:flex; align-items:center; padding:0 14px;
 font-size:13px; font-weight:500; color:var(--t2);
 border:none; background:none; cursor:pointer;
 border-bottom:2px solid transparent; margin-bottom:-1px;
 transition:color 0.15s, border-color 0.15s, background 0.15s;
 font-family:var(--fb); white-space:nowrap;
}
.topnav-item:hover { color:var(--t1); background:var(--hi); }
.topnav-item.active { color:var(--mint); border-bottom-color:var(--mint); font-weight:600; }
.topnav-group { position:relative; display:flex; align-items:stretch; }
.topnav-group-btn {
 display:flex; align-items:center; gap:5px; padding:0 14px;
 font-size:13px; font-weight:500; color:var(--t2);
 border:none; background:none; cursor:pointer;
 border-bottom:2px solid transparent; margin-bottom:-1px;
 transition:color 0.15s, border-color 0.15s, background 0.15s;
 font-family:var(--fb); white-space:nowrap;
}
.topnav-group-btn:hover { color:var(--t1); background:var(--hi); }
.topnav-group-btn.active { color:var(--mint); border-bottom-color:var(--mint); font-weight:600; }
.topnav-group-btn.authority-group { color:var(--amber); }
.topnav-chevron {
 width:10px; height:10px; flex-shrink:0; opacity:0.45;
 transition:transform 0.2s; display:block;
}
.topnav-group:hover .topnav-chevron { transform:rotate(180deg); opacity:0.7; }
.topnav-dropdown {
 display:none; pointer-events:none;
 position:absolute; top:calc(100% + 1px); left:0; min-width:210px;
 background:var(--card); border:1px solid var(--b1);
 border-radius:var(--radius-md); box-shadow:var(--sh-lg);
 padding:4px; z-index:500;
 animation:tn-drop 0.14s var(--ease);
}
@keyframes tn-drop { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.topnav-group:hover .topnav-dropdown { display:block; pointer-events:auto; }
.topnav-dd-item {
 display:flex; align-items:center; gap:8px;
 padding:8px 12px; border-radius:8px;
 font-size:13px; font-weight:500; color:var(--t2);
 cursor:pointer; border:none; background:none;
 width:100%; text-align:left; font-family:var(--fb);
 transition:background 0.12s, color 0.12s; white-space:nowrap;
}
.topnav-dd-item:hover { background:var(--hi); color:var(--t1); }
.topnav-dd-item.active { color:var(--mint); font-weight:600; background:var(--mint-a06); }
.nav-icon { width:15px; height:15px; flex-shrink:0; opacity:0.45; transition:opacity 0.12s; }
.topnav-dd-item:hover .nav-icon, .topnav-dd-item.active .nav-icon { opacity:1; }
.topnav-right {
 display:flex; align-items:center; gap:2px;
 padding:0 10px 0 8px; flex-shrink:0; margin-left:auto;
}
.topnav-icon-btn {
 width:30px; height:30px; border-radius:7px;
 background:none; border:none; cursor:pointer;
 color:var(--t2); display:flex; align-items:center; justify-content:center;
 transition:background 0.15s, color 0.15s; position:relative;
}
.topnav-icon-btn:hover { background:var(--hi); color:var(--t1); }
.bell-badge {
 position:absolute; top:2px; right:2px;
 min-width:14px; height:14px; border-radius:7px;
 background:var(--red); color:#fff; font-size:0.6rem; font-weight:700;
 display:flex; align-items:center; justify-content:center;
 padding:0 3px; pointer-events:none; line-height:1;
}
/* Notification bell dropdown (agentMyBooksPush in-app feed) */
.topnav-notif { position:relative; display:flex; align-items:center; flex-shrink:0; }
.topnav-bell-icon { width:18px; height:18px; opacity:0.7; }
.topnav-bell-btn:hover .topnav-bell-icon { opacity:1; }
.topnav-notif-panel {
 display:none;
 position:absolute; top:calc(100% + 4px); right:0;
 background:var(--card); border:1px solid var(--b1);
 border-radius:var(--radius-md); box-shadow:var(--sh-lg);
 width:320px; max-width:88vw; z-index:600;
 animation:tn-drop 0.14s var(--ease); overflow:hidden;
}
.topnav-notif-panel.open { display:block; }
.topnav-notif-head {
 display:flex; align-items:center; justify-content:space-between;
 padding:10px 12px; border-bottom:1px solid var(--b1);
 font-size:12px; font-weight:700; color:var(--t1);
}
.topnav-notif-markall {
 background:none; border:none; cursor:pointer; font-family:var(--fb);
 font-size:11px; font-weight:600; color:var(--mint); padding:2px 4px;
}
.topnav-notif-markall:hover { text-decoration:underline; }
.topnav-notif-list { max-height:380px; overflow-y:auto; }
.topnav-notif-item {
 display:block; width:100%; text-align:left; cursor:pointer;
 background:none; border:none; border-bottom:1px solid var(--b1);
 padding:10px 12px; font-family:var(--fb); transition:background 0.12s;
}
.topnav-notif-item:last-child { border-bottom:none; }
.topnav-notif-item:hover { background:var(--hi); }
.topnav-notif-item.unread { background:var(--mint-a06); }
.topnav-notif-item.unread:hover { background:var(--mint-a10, rgba(29,216,171,0.10)); }
.topnav-notif-title { font-size:12px; font-weight:600; color:var(--t1); margin-bottom:2px; }
.topnav-notif-body { font-size:11.5px; color:var(--t2); line-height:1.35; }
.topnav-notif-time { font-size:10px; color:var(--t3); margin-top:3px; }
.topnav-notif-empty { padding:28px 18px 24px; text-align:center; color:var(--t3); }
.topnav-notif-empty-icon { width:30px; height:30px; opacity:0.5; margin:0 auto 10px; display:block; color:var(--t2); }
.topnav-notif-empty-title { font-size:13px; font-weight:600; color:var(--t1); margin-bottom:4px; }
.topnav-notif-empty-sub { font-size:11.5px; line-height:1.4; color:var(--t3); }
.topnav-user-group { position:relative; display:flex; align-items:center; margin-left:4px; }
.topnav-user-btn {
 display:flex; align-items:center; gap:7px; padding:4px 8px 4px 4px;
 border-radius:8px; background:none; border:none; cursor:pointer;
 transition:background 0.15s;
}
.topnav-user-btn:hover { background:var(--hi); }
.topnav-user-avatar {
 width:26px; height:26px; border-radius:50%;
 background:linear-gradient(135deg,var(--mint),var(--blue));
 display:flex; align-items:center; justify-content:center;
 font-size:11px; font-weight:700; color:#000; flex-shrink:0;
}
.topnav-user-name {
 font-size:12px; font-weight:600; color:var(--t1);
 max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topnav-user-dropdown {
 display:none;
 position:absolute; top:calc(100% + 4px); right:0;
 background:var(--card); border:1px solid var(--b1);
 border-radius:var(--radius-md); box-shadow:var(--sh-lg);
 padding:4px; min-width:190px; z-index:500;
 animation:tn-drop 0.14s var(--ease);
}
.topnav-user-group:hover .topnav-user-dropdown { display:block; }
.topnav-user-email {
 font-size:11px; color:var(--t3); padding:8px 12px;
 border-bottom:1px solid var(--b1); margin-bottom:4px;
 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topnav-signout-btn {
 display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px;
 font-size:13px; color:var(--t2); cursor:pointer;
 background:none; border:none; width:100%; text-align:left;
 font-family:var(--fb); transition:background 0.12s, color 0.12s;
}
.topnav-signout-btn:hover { background:var(--red-a08); color:var(--red); }
/* Topnav marketplace picker — same UX as keyword-research's kwe-mkt-dd */
.topnav-mkt-dd { position:relative; display:flex; align-items:center; flex-shrink:0; }
.topnav-mkt-btn {
 display:flex; align-items:center; gap:6px;
 padding:6px 8px; border-radius:8px;
 background:none; border:none;
 color:var(--t1); font-size:12px; font-weight:500; font-family:var(--fb);
 cursor:pointer; white-space:nowrap;
 transition:background 0.15s;
}
.topnav-mkt-btn:hover { background:var(--b0,rgba(255,255,255,0.06)); }
.topnav-mkt-btn .fi { width:18px; height:13px; border-radius:2px; flex-shrink:0; }
.topnav-mkt-menu {
 position:absolute; top:calc(100% + 6px); right:0; min-width:130px;
 background:var(--card); border:1px solid var(--b1);
 border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.10);
 overflow:hidden; z-index:1000;
 opacity:0; transform:translateY(-4px); pointer-events:none;
 transition:opacity 0.15s, transform 0.15s;
}
.topnav-mkt-dd.open .topnav-mkt-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.topnav-mkt-menu-item {
 display:flex; align-items:center; gap:8px;
 padding:9px 14px; font-size:0.82rem; font-weight:500;
 color:var(--t2); cursor:pointer; transition:background 0.1s, color 0.1s;
 border-bottom:1px solid var(--b1);
}
.topnav-mkt-menu-item:last-child { border-bottom:none; }
.topnav-mkt-menu-item:hover { background:var(--b0); color:var(--t1); }
.topnav-mkt-menu-item.active { color:var(--blue); font-weight:600; }
.topnav-mkt-menu-item .fi { width:18px; height:13px; border-radius:2px; flex-shrink:0; }
.topnav-hamburger {
 display:none; align-items:center; justify-content:center;
 width:34px; height:34px; background:none; border:1px solid var(--b1);
 border-radius:8px; cursor:pointer; flex-direction:column; gap:4px;
 flex-shrink:0; margin-left:6px;
}
.topnav-hamburger span { display:block; width:15px; height:2px; background:var(--t2); border-radius:2px; }
.topnav-mobile-drawer {
 display:none;
 position:fixed; top:48px; left:0; right:0; bottom:0;
 background:var(--bg-s); z-index:400; overflow-y:auto;
 padding:8px; border-top:1px solid var(--b1);
}
.topnav-mobile-drawer.open { display:block; animation:tn-drop 0.18s var(--ease); }
.topnav-mobile-section {
 font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
 color:var(--t3); padding:10px 8px 3px;
}
.topnav-mobile-item {
 display:flex; align-items:center; gap:9px;
 padding:10px 12px; border-radius:8px;
 font-size:13px; font-weight:500; color:var(--t2);
 cursor:pointer; border:none; background:none; width:100%; text-align:left;
 font-family:var(--fb); min-height:44px; transition:background 0.12s, color 0.12s;
}
.topnav-mobile-item:hover { background:var(--hi); color:var(--t1); }
.topnav-mobile-item.active { color:var(--mint); font-weight:600; background:var(--mint-a06); }
.topnav-mobile-item .nav-icon { opacity:0.5; }
.topnav-mobile-item.active .nav-icon, .topnav-mobile-item:hover .nav-icon { opacity:1; }

/* CONTENT */
.admin-main { flex:1; margin-top:48px; background:var(--bg); height:calc(100vh - 48px); display:flex; flex-direction:column; }
#content-area { padding:32px 36px; flex:1; min-width:0; }
.admin-main { overflow-x: hidden; }
#content-area.ce-active { display:flex; flex-direction:column; overflow:hidden; }

/* PAGE HEADER */
.page-header {
 display:flex; align-items:flex-start; justify-content:space-between;
 margin-bottom:28px;
 padding-bottom:20px;
 border-bottom:1px solid var(--b1);
 animation:float-up 0.4s var(--ease) backwards;
}
.page-title { font-family:var(--fd); font-size:26px; font-weight:800; color:var(--t1); }
.page-sub { font-size:13px; color:var(--t2); margin-top:3px; }
@keyframes float-up {
 from { opacity:0; transform:translateY(8px); }
 to { opacity:1; transform:translateY(0); }
}

/* CARDS */
.card {
 background:var(--card);
 border:1px solid var(--b1);
 border-radius:var(--radius-lg);
 padding:20px 24px 20px;
 margin-bottom:16px;
 animation:float-up 0.4s var(--ease) backwards;
 overflow:hidden;
 box-shadow:var(--sh-panel);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}
.card.mint-border { border-color:rgba(46,216,168,0.18); position:relative; overflow:hidden; }
.card.blue-border { border-color:rgba(59,142,240,0.18); position:relative; overflow:hidden; }
.card.mint-border::before {
 content:''; pointer-events:none; position:absolute; inset:0;
 background:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(46,216,168,0.10) 0%, transparent 70%);
 border-radius:inherit; z-index:0;
}
.card.blue-border::before {
 content:''; pointer-events:none; position:absolute; inset:0;
 background:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59,142,240,0.10) 0%, transparent 70%);
 border-radius:inherit; z-index:0;
}

/* SHARED FIELD CARD — used by Listing Builder, Authority Audit, and any tool page */
.ps-field-card { background:var(--card); border:1px solid var(--b1); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--sh-panel); margin-bottom:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.ps-field-card:last-child { margin-bottom:0; }
.ps-field-card-header { padding:12px 20px; background:var(--card); border-bottom:1px solid rgba(26,39,64,0.06); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ps-field-card-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--t3); }
.ps-field-card-actions { display:flex; align-items:center; gap:8px; }
.ps-field-card-body { padding:20px; background:var(--card); }

/* SHARED TAB BAR — used by Listing Builder, Authority Audit, and any tool page */
.lb-tab-bar { display:flex; gap:2px; background:var(--seg-track); border:none; border-radius:var(--radius-lg); padding:3px; width:fit-content; margin-bottom:20px; overflow-x:auto; scrollbar-width:none; }
.lb-tab-bar::-webkit-scrollbar { display:none; }
.ps-tab-btn { padding:7px 16px; border-radius:calc(var(--radius-md) - 2px); border:none; background:none; color:var(--t3); font-size:0.83rem; cursor:pointer; transition:all 0.18s; font-family:var(--fb); white-space:nowrap; }
.ps-tab-btn:hover { color:var(--t2); }
.ps-tab-btn.active { background:var(--seg-active-bg); color:var(--seg-active-text); box-shadow:var(--sh-sm); }
.ps-tab-panel { display:none; }
.ps-tab-panel.active { display:block; }

/* SHARED MAIN TOGGLE TABS — used by Listing Builder, Authority Audit */
.ps-main-tabs { display:flex; gap:2px; margin-bottom:24px; background:var(--seg-track); border:none; border-radius:var(--radius-lg); padding:3px; width:fit-content; }
.ps-main-tab { background:none; border:none; border-radius:calc(var(--radius-md) - 2px); padding:7px 20px; font-size:0.85rem; font-weight:600; color:var(--t3); cursor:pointer; transition:all 0.2s; font-family:inherit; white-space:nowrap; }
.ps-main-tab.active { background:var(--seg-active-bg); color:var(--seg-active-text); box-shadow:var(--sh-sm); }
.card-label {
 font-size:0.68rem; font-weight:700; font-family:var(--fb); text-transform:uppercase;
 letter-spacing:0.08em; color:var(--t3); margin-bottom:16px;
 display:flex; align-items:center; gap:6px;
 background:var(--card); border-bottom:1px solid rgba(26,39,64,0.06);
 padding:12px 24px; margin-top:-20px; margin-left:-24px; margin-right:-24px;
}
.card-label::before {
 content:''; width:5px; height:5px; border-radius:50%;
 background:var(--mint); flex-shrink:0;
}

/* ROWS */
.acct-row {
 display:flex; align-items:center; justify-content:space-between;
 padding:10px 0; border-bottom:1px solid var(--b1);
 font-size:0.88rem; font-family:var(--fb);
}
.acct-row:last-of-type { border-bottom:none; }
.acct-row-label { color:var(--t3); }
.acct-row-val { color:var(--t2); font-weight:600; }

/* ── Pubscout Intelligence loading state (shared across all pages) ── */
.ps-waiting { background:var(--form-bg); border:1px solid var(--mint-a20); border-radius:var(--radius-lg); padding:28px 24px; text-align:center; }
.ps-waiting-pulse { display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; }
.ps-waiting-dot { width:10px; height:10px; border-radius:50%; background:var(--mint); animation:ps-pulse 1.4s ease-in-out infinite; flex-shrink:0; }
.ps-waiting-dot-label { font-size:0.82rem; font-weight:700; color:var(--mint); }
@keyframes ps-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.75)} }
.ps-waiting-title { font-size:0.95rem; font-weight:700; color:var(--t1); margin-bottom:6px; }
.ps-waiting-sub { font-size:0.82rem; color:var(--t3); line-height:1.55; }
/* Pubscout Intelligence green card header (shared) */
.ps-intel-header { padding:12px 20px; background:rgba(46,216,168,0.07); border-bottom:1px solid rgba(46,216,168,0.14); display:flex; align-items:center; gap:8px; }
html[data-theme="light"] .ps-intel-header { background:var(--mint-a06); border-bottom-color:var(--mint-a12); }
.ra-insights-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--mint); }
.ps-mission { position:sticky; top:0; z-index:50; background:var(--bg-s); border-bottom:1px solid var(--b1); padding:0 24px; display:flex; align-items:center; gap:10px; height:52px; margin:0 -24px 20px; box-shadow:var(--sh-sm); }
.ps-mission-back { display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--t3); font-size:0.82rem; cursor:pointer; padding:6px 8px; border-radius:7px; font-family:var(--fb); transition:color 0.15s; white-space:nowrap; }
.ps-mission-back:hover { color:var(--t1); background:var(--b1); }
.ps-mission-kw { font-family:var(--fd); font-size:0.88rem; font-weight:700; color:var(--t1); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-mission-usage { font-size:0.7rem; color:var(--t3); font-family:var(--fm); white-space:nowrap; }
.ps-mission-save { display:flex; align-items:center; gap:6px; background:var(--b1); border:1px solid var(--b2); border-radius:var(--radius-sm); padding:5px 12px; font-size:0.78rem; color:var(--t2); cursor:pointer; font-family:var(--fb); transition:all 0.15s; white-space:nowrap; }
.ps-mission-save:hover { border-color:var(--mint); color:var(--mint); }
.ps-mission-save.saved { border-color:var(--mint); color:var(--mint); }

/* TIER BADGES */
.tier-badge {
 display:inline-flex; align-items:center; padding:3px 10px; border-radius:100px;
 font-size:0.65rem; font-weight:700; font-family:var(--fm); letter-spacing:0.04em;
}
.tier-badge.starter   { background:rgba(139,170,200,0.1); color:var(--t2);   border:1px solid rgba(139,170,200,0.2); }
.tier-badge.pro       { background:rgba(46,216,168,0.1);  color:var(--mint);  border:1px solid rgba(46,216,168,0.2); }
.tier-badge.elite     { background:rgba(96,165,250,0.1);  color:var(--blue);  border:1px solid rgba(96,165,250,0.2); }
.tier-badge.authority { background:rgba(240,160,48,0.1);  color:var(--amber); border:1px solid rgba(240,160,48,0.2); }
.tier-badge.trialing{ background:rgba(240,160,48,0.1); color:var(--amber); border:1px solid rgba(240,160,48,0.2); }
.tier-badge.free { background:rgba(74,98,120,0.1); color:var(--t3); border:1px solid var(--b1); }

/* TIER PILLS — inline use inside tab labels, card headers, nav items */
/* Pro=blue · Elite=mint · Authority=amber */
.tier-pill {
 display:inline-flex; align-items:center; vertical-align:middle;
 font-size:0.65rem; font-weight:700; font-family:var(--fm);
 border-radius:10px; padding:1px 6px; margin-left:4px; white-space:nowrap; letter-spacing:0.04em;
}
.tier-pill.pro       { background:rgba(46,216,168,0.1);  color:var(--mint);  }
.tier-pill.elite     { background:rgba(96,165,250,0.1);  color:var(--blue);  }
.tier-pill.authority { background:rgba(240,160,48,0.1);  color:var(--amber); }

/* BUTTONS */
.btn {
 display:inline-flex; align-items:center; gap:6px;
 padding:9px 16px; border-radius:10px; border:none;
 font-size:13px; font-weight:600; cursor:pointer; font-family:var(--fb);
 transition:all 0.2s; text-decoration:none;
}
.btn-primary { background:var(--cta-bg); color:var(--cta-text); }
.btn-primary:hover { background:var(--cta-hover); }
.btn-outline { background:transparent; border:1px solid var(--b2); color:var(--t2); }
.btn-outline:hover { border-color:var(--b3); color:var(--t1); background:var(--b1); }
.btn-danger-link {
 background:none; border:none; color:var(--t3);
 font-size:12px; cursor:pointer; font-family:var(--fb); padding:4px 0;
}
.btn-danger-link:hover { color:var(--red); }
*, *:focus, *:focus-within { outline: none; }
:focus-visible { outline:1.5px solid var(--focus-border) !important; outline-offset:2px; border-radius:4px; box-shadow:0 0 0 3px var(--blue-a10) !important; }
.btn-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:16px; }

/* EXTENSION CTA */
.ext-cta {
 display:flex; align-items:center; gap:16px; flex-wrap:wrap;
 background:linear-gradient(135deg,rgba(46,216,168,0.06),rgba(59,142,240,0.04));
}
.ext-cta-icon { font-size:28px; flex-shrink:0; }
.ext-cta-text h3 { font-family:var(--fd); font-size:15px; font-weight:700; color:var(--t2); margin-bottom:3px; }
.ext-cta-text p { font-size:13px; color:var(--t3); }
.ext-cta-btn {
 margin-left:auto; flex-shrink:0;
 display:inline-flex; align-items:center; gap:6px;
 background:var(--cta-bg); color:var(--cta-text);
 padding:9px 16px; border-radius:10px;
 font-size:13px; font-weight:700; text-decoration:none;
 transition:all 0.2s;
}
.ext-cta-btn:hover { background:var(--cta-hover); }

/* TOOLS GRID */
.tools-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:4px; }
.tool-card {
 background:var(--card); border:1px solid var(--b1); border-radius:var(--radius-md);
 padding:14px 16px; cursor:pointer; transition:all 0.22s var(--ease);
 display:flex; align-items:center; gap:10px;
 text-decoration:none; font-family:var(--fb);
}
.tool-card:hover { border-color:rgba(46,216,168,0.3); background:rgba(46,216,168,0.04); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.tool-card.locked { opacity:0.55; cursor:default; }
.tool-card.locked:hover { transform:none; box-shadow:none; border-color:var(--b1); background:var(--card); }
.tool-icon { width:18px; height:18px; flex-shrink:0; color:var(--t3); transition:color 0.2s; }
.tool-card:hover .tool-icon { color:var(--mint); }
.tool-name { font-size:13px; font-weight:600; color:var(--t2); font-family:var(--fd); }
.tool-desc { font-size:11px; color:var(--t3); margin-top:1px; }
.tool-badge {
 margin-left:auto; flex-shrink:0;
 font-size:0.65rem; font-weight:700;
 padding:2px 7px; border-radius:100px; font-family:var(--fm);
}
.tool-badge.pro       { background:rgba(46,216,168,0.12); color:var(--mint);  border:1px solid rgba(46,216,168,0.2); }
.tool-badge.elite     { background:rgba(96,165,250,0.12); color:var(--blue);  border:1px solid rgba(96,165,250,0.2); }
.tool-badge.authority { background:rgba(240,160,48,0.12); color:var(--amber); border:1px solid rgba(240,160,48,0.2); }

/* REFERRAL CARD */
.ref-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.ref-stat { background:var(--b1); border-radius:var(--radius-sm); padding:12px; text-align:center; }
.ref-stat-val { font-family:var(--fd); font-size:20px; font-weight:800; color:var(--mint); line-height:0.96; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.ref-stat-label { font-size:11px; color:var(--t3); margin-top:3px; }
.ref-link-row { display:flex; gap:8px; align-items:center; }
.ref-input {
 flex:1; background:var(--bg-e); border:1px solid var(--b2);
 border-radius:10px; padding:9px 12px; color:var(--t2);
 font-size:13px; font-family:var(--fm); outline:none;
}
.ref-copy-btn {
 background:var(--cta-bg); color:var(--cta-text); border:none; border-radius:10px;
 padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer;
 font-family:var(--fb); transition:all 0.2s; flex-shrink:0;
}
.ref-copy-btn:hover { background:#3de3b4; }
.ref-progress-bar { height:4px; background:var(--b1); border-radius:100px; margin-top:10px; overflow:hidden; }
.ref-progress-fill { height:100%; background:var(--mint); border-radius:100px; transition:width 0.5s; }

/* STATUS COLORS */
.color-mint { color:var(--mint); }
.color-amber { color:var(--amber); }
.color-red { color:var(--red); }
.color-muted { color:var(--t3); }

/* CANCEL MODAL */
/* Upgrade modal */
.upgrade-modal-slider {
 overflow: hidden;
}
.upgrade-modal-steps {
 display: flex;
 transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
 will-change: transform;
}
.upgrade-step {
 min-width: 100%;
 flex-shrink: 0;
}
.upgrade-back-btn {
 background: none;
 border: none;
 color: var(--t3);
 font-size: 13px;
 font-family: var(--fb);
 cursor: pointer;
 padding: 0 0 16px;
 display: flex;
 align-items: center;
 gap: 6px;
 transition: color .15s;
}
.upgrade-back-btn:hover { color: var(--t1); }
#upgrade-modal-overlay {
 position:fixed; inset:0; background:var(--overlay-bg); z-index:500;
 display:none; align-items:center; justify-content:center; padding:20px;
 backdrop-filter:blur(4px);
}
#upgrade-modal-overlay.open { display:flex; }
.upgrade-modal {
 background:var(--card); border:1px solid var(--b2); border-radius:20px;
 padding:32px; max-width:440px; width:100%; position:relative;
 box-shadow:0 32px 80px rgba(0,0,0,0.55), inset 0 1px 0 var(--hi);
 animation:float-up 0.25s ease;
}
.upgrade-modal-hdr {
 display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;
}
.upgrade-modal-hdr h2 { font-family:var(--fd); font-size:20px; font-weight:800; color:var(--t1); }
.upgrade-modal-close {
 width:28px; height:28px; background:var(--b1); border:none; border-radius:8px;
 color:var(--t3); cursor:pointer; font-size:14px; line-height:1;
 display:flex; align-items:center; justify-content:center; flex-shrink:0;
 transition:all 0.15s;
}
.upgrade-modal-close:hover { background:var(--b2); color:var(--t1); }
.upgrade-modal-section-label {
 font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
 color:var(--t3); font-family:var(--fb); margin-bottom:10px;
}
/* Billing cycle pills */
.upgrade-billing-opts { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.upgrade-billing-opt {
 display:flex; align-items:center; justify-content:space-between;
 padding:14px 16px; border-radius:12px; border:1.5px solid var(--b2);
 background:var(--bg-e); cursor:pointer; transition:all 0.15s; position:relative;
}
.upgrade-billing-opt:hover { border-color:var(--blue); background:rgba(59,142,240,0.05); }
.upgrade-billing-opt.selected { border-color:var(--mint); background:rgba(46,216,168,0.06); }
.upgrade-billing-opt.best-value { border-color:rgba(46,216,168,0.3); }
.upgrade-billing-opt-left { display:flex; align-items:center; gap:12px; }
.upgrade-billing-radio {
 width:16px; height:16px; border-radius:50%; border:2px solid var(--b2);
 flex-shrink:0; transition:all 0.15s; position:relative;
}
.upgrade-billing-opt.selected .upgrade-billing-radio {
 border-color:var(--mint); background:var(--mint);
}
.upgrade-billing-opt.selected .upgrade-billing-radio::after {
 content:''; position:absolute; inset:3px; border-radius:50%; background:#0D1B2E;
}
.upgrade-billing-period { font-size:14px; font-weight:600; color:var(--t2); }
.upgrade-billing-sub { font-size:11px; color:var(--t3); margin-top:1px; }
.upgrade-billing-right { text-align:right; }
.upgrade-billing-price { font-size:14px; font-weight:700; color:var(--t2); }
.upgrade-billing-save {
 font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
 color:var(--mint); background:rgba(46,216,168,0.12); border-radius:4px;
 padding:2px 6px; margin-top:4px; display:inline-block;
}
.upgrade-billing-best {
 position:absolute; top:-10px; right:12px;
 font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
 color:var(--mint); background:rgba(46,216,168,0.15); border:1px solid rgba(46,216,168,0.3);
 border-radius:20px; padding:2px 10px;
}
/* Card row */
.upgrade-card-row {
 display:flex; align-items:center; gap:12px;
 padding:14px 16px; border-radius:12px; border:1.5px solid var(--b2);
 background:var(--bg-b); margin-bottom:8px;
}
.upgrade-card-icon {
 width:36px; height:24px; border-radius:5px; background:var(--b2);
 display:flex; align-items:center; justify-content:center;
 font-size:11px; font-weight:700; color:var(--t2); flex-shrink:0; text-transform:uppercase;
}
.upgrade-card-details { flex:1; }
.upgrade-card-number { font-size:13px; font-weight:600; color:var(--t1); font-family:var(--fm); }
.upgrade-card-expiry { font-size:11px; color:var(--t3); margin-top:2px; }
.upgrade-card-check { color:var(--mint); font-size:16px; font-weight:700; }
.upgrade-card-fields { margin:8px 0 20px; }
.upgrade-card-field-label {
 font-size:11px;
 color:var(--t3);
 font-family:var(--fm);
 text-transform:uppercase;
 letter-spacing:.06em;
 margin-bottom:6px;
}
.upgrade-card-field-wrap {
 background:var(--input-bg);
 border:1px solid var(--b2);
 border-radius:10px;
 padding:12px 14px;
 transition:border-color .15s;
}
.upgrade-card-field-wrap.focused {
 border-color:var(--blue);
 background:rgba(59,142,240,0.05);
}
.upgrade-card-field-wrap.error-state { border-color:var(--red); }
.upgrade-add-card {
 font-size:12px; color:var(--blue); cursor:pointer; text-decoration:none;
 display:block; text-align:center; padding:8px 0; margin-bottom:20px;
 transition:color 0.15s;
}
.upgrade-add-card:hover { color:var(--t1); }
.upgrade-processing-note {
 font-size:11px; color:var(--t3); text-align:center;
 margin-top:6px; min-height:16px; transition:opacity .3s;
}
@keyframes upgrade-spin {
 to { transform: rotate(360deg); }
}
.upgrade-cta-btn .upgrade-spinner {
 display:inline-block; width:14px; height:14px;
 border:2px solid rgba(255,255,255,0.3);
 border-top-color:#fff;
 border-radius:50%;
 animation:upgrade-spin 0.7s linear infinite;
 vertical-align:middle; margin-right:8px;
}
/* CTA button */
.upgrade-cta-btn {
 width:100%; padding:16px; border-radius:12px; border:none; cursor:pointer;
 font-family:var(--fd); font-size:15px; font-weight:800; letter-spacing:.02em;
 background:var(--cta-bg); color:var(--cta-text);
 transition:background 0.15s;
}
.upgrade-cta-btn:hover { background:var(--cta-hover); }
.upgrade-cta-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.upgrade-proration-note {
 font-size:11px; color:var(--t3); text-align:center; margin-top:12px; line-height:1.5;
}
.upgrade-modal-loading {
 text-align:center; padding:40px 0; color:var(--t3); font-size:13px;
}
/* Plan opts reuse billing-opt styles */
.upgrade-plan-opt {
 display:flex; align-items:center; justify-content:space-between;
 padding:12px 16px; border-radius:12px; border:1.5px solid var(--b2);
 background:var(--bg-e); cursor:pointer; transition:all 0.15s;
}
.upgrade-plan-opt:hover { border-color:var(--blue); background:rgba(59,142,240,0.05); }
.upgrade-plan-opt.selected { border-color:var(--mint); background:rgba(46,216,168,0.06); }
.upgrade-plan-opt.locked { opacity:.4; cursor:not-allowed; pointer-events:none; }
.upgrade-plan-name { font-size:14px; font-weight:700; color:var(--t2); font-family:var(--fd); }
.upgrade-plan-desc { font-size:11px; color:var(--t3); margin-top:2px; }

#cancel-modal-overlay {
 position:fixed; inset:0; background:var(--overlay-bg); z-index:500;
 display:none; align-items:center; justify-content:center; padding:20px;
 backdrop-filter:blur(4px);
}
#cancel-modal-overlay.open { display:flex; }
.cancel-modal {
 background:var(--card); border:1px solid var(--b2); border-radius:20px;
 padding:32px; max-width:480px; width:100%; position:relative;
 box-shadow:0 32px 80px rgba(0,0,0,0.5);
 max-height:90vh; overflow-y:auto;
}
.cancel-modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cancel-modal-hdr h2 { font-family:var(--fd); font-size:20px; font-weight:800; color:var(--t1); }
.cancel-modal-close {
 width:28px; height:28px; background:var(--b1); border:none; border-radius:8px;
 color:var(--t3); cursor:pointer; font-size:14px; line-height:1;
 display:flex; align-items:center; justify-content:center; flex-shrink:0;
 transition:all 0.15s;
}
.cancel-modal-close:hover { background:var(--b2); color:var(--t1); }
.cancel-progress { display:flex; gap:6px; margin-bottom:24px; }
.cancel-progress-dot {
 width:6px; height:6px; border-radius:50%; background:var(--b2); transition:background 0.3s;
}
.cancel-progress-dot.active { background:var(--mint); }
.cancel-step { display:none; }
.cancel-step.active { display:block; }
.cancel-step-icon { font-size:32px; margin-bottom:12px; }
.cancel-step h3 { font-family:var(--fd); font-size:18px; font-weight:700; color:var(--t1); margin-bottom:8px; }
.cancel-step p { font-size:13px; color:var(--t2); line-height:1.6; margin-bottom:12px; }
.cancel-survey { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.cancel-survey-opt {
 padding:11px 14px; background:var(--bg-e); border:1px solid var(--b1);
 border-radius:10px; color:var(--t1); font-size:13px; cursor:pointer;
 font-family:var(--fb); text-align:left; transition:all 0.15s;
}
.cancel-survey-opt:hover { border-color:var(--b2); background:var(--bg-h); }
.cancel-survey-opt.selected { border-color:var(--mint); background:rgba(46,216,168,0.08); color:var(--mint); }
.cancel-offer-box {
 background:var(--bg-e); border:1px solid rgba(46,216,168,0.2); border-radius:12px;
 padding:16px; margin:16px 0;
}
.cancel-offer-box strong { display:block; font-size:15px; font-weight:700; color:var(--mint); margin-bottom:4px; }
.cancel-offer-box span { font-size:12px; color:var(--t2); }
.cancel-offer-box.orange { border-color:rgba(240,160,48,0.2); }
.cancel-offer-box.orange strong { color:var(--amber); }
.cancel-actions { display:flex; flex-direction:column; gap:8px; margin-top:20px; }
.ca-primary {
 padding:12px; background:var(--mint); border:none; border-radius:10px;
 color:#000; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--fb);
 transition:all 0.2s;
}
.ca-primary:hover { background:#3de3b4; }
.ca-primary.blue { background:var(--blue); color:#fff; }
.ca-primary.blue:hover { background:#5aa4f5; }
.ca-primary.orange{ background:var(--amber); }
.ca-primary:disabled { opacity:0.4; cursor:not-allowed; }
.ca-ghost {
 padding:11px; background:transparent; border:1px solid var(--b1);
 border-radius:10px; color:var(--t2); font-size:13px; cursor:pointer;
 font-family:var(--fb); transition:all 0.2s;
}
.ca-ghost:hover { border-color:var(--b2); color:var(--t1); }
.ca-ghost:disabled { opacity:0.4; cursor:not-allowed; }
.ca-danger {
 padding:12px; background:var(--red-d); border:1px solid rgba(224,82,82,0.3);
 border-radius:10px; color:var(--red); font-size:14px; font-weight:700;
 cursor:pointer; font-family:var(--fb); transition:all 0.2s;
}
.ca-danger:hover:not(:disabled) { background:rgba(224,82,82,0.15); }
.ca-danger:disabled { opacity:0.4; cursor:not-allowed; }
.cancel-confirm-loss {
 background:var(--bg-e); border:1px solid var(--b1); border-radius:10px;
 padding:14px; margin:12px 0; font-size:13px; color:var(--t2); line-height:1.5;
}
.cancel-type-confirm { margin:12px 0; }
.cancel-type-confirm label { font-size:12px; color:var(--t2); display:block; margin-bottom:6px; }
.cancel-type-confirm input {
 width:100%; padding:10px 12px; background:var(--bg-e); border:1px solid var(--b2);
 border-radius:8px; color:var(--t1); font-size:13px; font-family:var(--fm); outline:none;
}
.cancel-type-confirm input:focus { border-color:var(--red); }

/* CUSTOM DROPDOWN (shared across all pages) */
.ps-dropdown { position:relative; }
.ps-dropdown-trigger {
 background:var(--form-input); border:1px solid var(--b1);
 border-radius:12px; padding:10px 32px 10px 14px; color:var(--t2);
 font-size:0.85rem; cursor:pointer; font-family:var(--fb);
 font-weight:500; white-space:nowrap; user-select:none;
 box-shadow:var(--sh-sm);
 transition:all 0.15s; position:relative; width:100%;
}
.ps-dropdown-trigger::after {
 content:''; position:absolute; right:12px; top:50%; transform:translateY(-50%);
 width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
 border-top:5px solid var(--t3); transition:transform 0.2s;
}
.ps-dropdown.open .ps-dropdown-trigger::after { transform:translateY(-50%) rotate(180deg); }
.ps-dropdown-trigger:hover { border-color:var(--blue); color:var(--t1); }
.ps-dropdown.open .ps-dropdown-trigger { border-color:var(--blue); color:var(--t1); box-shadow:0 0 0 3px rgba(59,142,240,0.12); }
.ps-dropdown-menu {
 position:absolute; top:calc(100% + 6px); left:0; min-width:0; width:auto;
 background:var(--card); border:1px solid var(--b1);
 border-radius:12px; overflow:hidden; z-index:9999;
 box-shadow:var(--sh-lg);
 opacity:0; transform:translateY(-4px); pointer-events:none;
 transition:opacity 0.15s, transform 0.15s;
 max-height:280px; overflow-y:auto;
}
.ps-dropdown.open .ps-dropdown-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.ps-dropdown-item {
 padding:9px 14px; font-size:0.85rem; font-weight:500;
 color:var(--t2); cursor:pointer; transition:all 0.1s;
 font-family:var(--fb); white-space:nowrap;
 border-bottom:1px solid var(--b2);
}
.ps-dropdown-item:last-child { border-bottom:none; }
.ps-dropdown-item:hover { background:var(--bg-h); color:var(--t1); }
.ps-dropdown-item.active { color:var(--blue); font-weight:700; }
.ps-dropdown-item.active::before { content:'✓'; margin-right:6px; font-size:10px; }
.ps-dropdown select { display:none; }
.ps-dropdown-search {
 width:100%; padding:8px 12px; background:var(--form-input); border:none;
 border-bottom:1px solid var(--b1); color:var(--t1); font-size:0.82rem;
 font-family:var(--fb); outline:none; box-sizing:border-box;
}
.ps-dropdown-search::placeholder { color:var(--t3); }

/* THEME TOGGLE */
.theme-toggle {
 width:38px; height:38px; border-radius:8px; flex-shrink:0;
 background:var(--card); border:1px solid var(--b1);
 cursor:pointer; display:flex; align-items:center; justify-content:center;
 transition:all 0.2s; color:var(--t2);
}
.theme-toggle:hover { border-color:var(--blue); background:var(--bg-h); color:var(--t1); }
.theme-toggle .nav-icon { opacity:0.55; width:15px; height:15px; }
.theme-toggle:hover .nav-icon { opacity:1; }
.bell-btn {
 width:38px; height:38px; border-radius:8px; flex-shrink:0;
 background:var(--card); border:1px solid var(--b1);
 cursor:pointer; display:flex; align-items:center; justify-content:center;
 transition:all 0.2s; color:var(--t2); position:relative;
}
.bell-btn:hover { border-color:var(--mint); background:var(--bg-h); color:var(--t1); }
.bell-btn .nav-icon { opacity:0.55; width:15px; height:15px; }
.bell-btn:hover .nav-icon { opacity:1; }
/* .bell-btn .bell-badge removed — markup uses .topnav-bell-btn, generic .bell-badge rule applies */

/* OVERLAY (mobile drawer) */
#sidebar-overlay {
 display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:390;
}
#sidebar-overlay.open { display:block; }

/* TOAST */
.toast {
 position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
 background:var(--card); border:1px solid var(--b2); border-radius:10px;
 padding:10px 18px; font-size:13px; color:var(--t1); z-index:999;
 transition:transform 0.3s var(--ease); white-space:nowrap;
 box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.toast.show { transform:translateX(-50%) translateY(0); }
@media (max-width: 768px) {
 /* Clear the bottom tab bar (52px) + safe area so toast is always visible */
 .toast { bottom:calc(52px + env(safe-area-inset-bottom, 0px) + 12px); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
 .topnav-nav { display:none; }
 .topnav-user-name { display:none; }
 .topnav-hamburger { display:flex; }
 .admin-main { margin-left:0; }
 #content-area { padding:24px 16px; }
 .tools-grid { grid-template-columns:1fr; }
 .ref-stats { grid-template-columns:repeat(3,1fr); }
 .ext-cta { flex-direction:column; align-items:flex-start; }
 .ext-cta-btn { margin-left:0; }
 #a2hs-bar { padding-bottom:14px; }
}

/* PAGE TRANSITION SKELETON */
#page-skeleton {
 display:none;
 padding:24px 0;
 animation:float-up 0.2s var(--ease) backwards;
}
#page-skeleton.visible { display:block; }
.ps-skel-line {
 height:14px; border-radius:7px; margin-bottom:10px;
 background:linear-gradient(90deg, var(--shimmer-from) 0%, var(--shimmer-to) 50%, var(--shimmer-from) 100%);
 background-size:600px 100%;
 animation:psSkimmer 1.4s ease-in-out infinite;
}
.ps-skel-block {
 height:88px; border-radius:12px; margin-bottom:14px;
 background:linear-gradient(90deg, var(--shimmer-from) 0%, var(--shimmer-to) 50%, var(--shimmer-from) 100%);
 background-size:600px 100%;
 animation:psSkimmer 1.4s ease-in-out infinite;
}
@keyframes psSkimmer {
 0%   { background-position: -600px 0; }
 100% { background-position:  600px 0; }
}
@media (prefers-reduced-motion: reduce) {
 .ps-skel-line, .ps-skel-block { animation:none; background:var(--shimmer-from); }
}

/* SUB-480px — small phones (iPhone SE 375px, Galaxy A series) */
@media (max-width: 480px) {
 .page-title { font-size:20px; }
 .page-sub { font-size:12px; }
 .card { border-radius:12px; }
 #content-area { padding:16px 12px; padding-bottom:max(72px, calc(52px + env(safe-area-inset-bottom, 0px) + 16px)); }
 .ref-stats { grid-template-columns:repeat(2,1fr); }
 .btab-label { display:none; }
 .btab-inner { height:48px; }
 .btab-item { min-height:48px; }
}

/* BOTTOM TAB BAR (mobile only) */
#bottom-tab-bar {
 display:none;
 position:fixed; bottom:0; left:0; right:0; z-index:180;
 background:var(--bg-s);
 border-top:1px solid var(--b1);
 padding-bottom:env(safe-area-inset-bottom, 0px);
}
.btab-inner {
 display:flex; align-items:stretch; height:52px;
}
.btab-item {
 flex:1; display:flex; flex-direction:column; align-items:center;
 justify-content:center; gap:3px;
 background:none; border:none; cursor:pointer;
 color:var(--t3); font-family:var(--fb); font-size:9.5px; font-weight:600;
 letter-spacing:0.02em; line-height:1; transition:color 0.15s;
 padding:6px 4px; min-height:44px;
}
.btab-item:hover { color:var(--t2); }
.btab-item.active { color:var(--mint); }
.btab-icon { width:20px; height:20px; flex-shrink:0; }
.btab-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60px; }
@media (max-width: 768px) {
 #bottom-tab-bar { display:block; }
 /* Push content up so it clears the tab bar */
 #content-area { padding-bottom:max(72px, calc(52px + env(safe-area-inset-bottom, 0px) + 20px)); }
}
html[data-theme="light"] #bottom-tab-bar {
 background:#FFFFFF;
 border-top-color:rgba(26,39,64,0.09);
 box-shadow:0 -1px 8px rgba(26,39,64,0.07);
}
/* Active tab: #009E7A passes 3.1:1 on white — #2ED8A8 fails WCAG AA */
html[data-theme="light"] .btab-item.active { color:#009E7A; }

/* ADD TO HOME SCREEN BANNER */
#a2hs-bar {
 position:fixed; bottom:0; left:0; right:0; z-index:9999;
 background:var(--card); border-top:1px solid var(--bm);
 padding:14px 18px; display:flex; align-items:center; gap:12px;
 transform:translateY(100%); transition:transform 0.35s var(--ease);
 box-shadow:0 -4px 24px rgba(0,0,0,0.35);
}
#a2hs-bar.show { transform:translateY(0); }
.a2hs-icon { width:36px; height:36px; border-radius:8px; background:var(--mint-d); border:1px solid var(--bm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.a2hs-text { flex:1; min-width:0; }
.a2hs-text strong { display:block; font-size:0.82rem; font-weight:700; color:var(--t1); }
.a2hs-text span { font-size:0.72rem; color:var(--t3); }
#a2hs-ios { display:none; font-size:0.72rem; color:var(--t2); line-height:1.5; }
.a2hs-install { background:#2ED8A8; color:var(--cta-text); border:none; border-radius:8px; padding:7px 14px; font-size:0.78rem; font-weight:700; cursor:pointer; flex-shrink:0; font-family:var(--fb); }
.a2hs-dismiss { background:none; border:none; color:var(--t3); cursor:pointer; font-size:18px; line-height:1; padding:4px; flex-shrink:0; }
/* On mobile: float banner above the tab bar */
@media (max-width:768px) {
 #a2hs-bar { bottom:calc(52px + env(safe-area-inset-bottom, 0px)); }
}
/* iOS Safari: banner slides down from top to avoid Safari's bottom toolbar */
#a2hs-bar.a2hs-top {
 bottom:auto; top:0;
 border-top:none; border-bottom:1px solid var(--bm);
 transform:translateY(-100%);
 padding-top:max(14px, env(safe-area-inset-top, 14px));
 box-shadow:0 4px 24px rgba(0,0,0,0.35);
}
#a2hs-bar.a2hs-top.show { transform:translateY(0); }

/* ─── LIGHT MODE OVERRIDES (Phases 3, 5, 6) ─────────────────────────────── */

/* Light mode: topnav */
html[data-theme="light"] .admin-topnav {
 background: #FFFFFF;
 border-bottom-color: rgba(26,39,64,0.09);
 box-shadow: 0 1px 8px rgba(26,39,64,0.06);
}
html[data-theme="light"] .topnav-rainbow { opacity: 1; box-shadow: 0 2px 10px rgba(46,216,168,0.18); }
html[data-theme="light"] .logo-mark {
 background: linear-gradient(135deg, rgba(0,158,122,0.30), rgba(44,125,224,0.22));
 border: 1px solid rgba(0,158,122,0.36);
 box-shadow: 0 2px 10px rgba(0,158,122,0.18);
}
html[data-theme="light"] .topnav-item.active,
html[data-theme="light"] .topnav-group-btn.active,
html[data-theme="light"] .topnav-dd-item.active,
html[data-theme="light"] .topnav-mobile-item.active { color: #009E7A; }
html[data-theme="light"] .topnav-item.active { border-bottom-color: #009E7A; }
html[data-theme="light"] .topnav-group-btn.active { border-bottom-color: #009E7A; }
html[data-theme="light"] .topnav-dropdown,
html[data-theme="light"] .topnav-user-dropdown { box-shadow: 0 8px 32px rgba(26,39,64,0.12); }
html[data-theme="light"] .topnav-mobile-drawer { background: #FFFFFF; }

/* Phase 3: Upgrade modal card field — fix dark-only border */
html[data-theme="light"] .upgrade-card-field-wrap {
 border: 1px solid var(--b2);
}

/* Phase 5: Focus ring — stronger, brand-navy aware */
html[data-theme="light"] :focus-visible {
 outline: 1.5px solid var(--focus-border);
 outline-offset: 2px;
 box-shadow: 0 0 0 3px var(--blue-a10);
}

/* Phase 5: Card hover transitions — shadow + border animate */
html[data-theme="light"] .ct-card,
html[data-theme="light"] .mb-card,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .kd-score-card,
html[data-theme="light"] .ni-tool-card {
 transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}

/* Phase 5: Card hover — pure elevation, no colour ring */
html[data-theme="light"] .ct-card:hover,
html[data-theme="light"] .mb-card:hover {
 box-shadow: 0 4px 20px rgba(26,39,64,0.16), 0 16px 56px rgba(26,39,64,0.14);
}

/* Phase E: Tab active — white lift + blue indicator + brand colour */
html[data-theme="light"] .ap-tab.active,
html[data-theme="light"] .ra-tab.active,
html[data-theme="light"] .si-tab.active,
html[data-theme="light"] .lb-tab.active,
html[data-theme="light"] .ce-tab.active,
html[data-theme="light"] .mb-tab.active {
 background: #FFFFFF;
 box-shadow: 0 1px 4px rgba(26,39,64,0.12), 0 0 0 1px rgba(26,39,64,0.06);
 color: var(--blue);
 font-weight: 700;
}

/* Phase 3: Score banner headers — gradient lift instead of near-white flat */
html[data-theme="light"] .ap-score-top,
html[data-theme="light"] .lo-strength-top,
html[data-theme="light"] .ds-score-top,
html[data-theme="light"] .ra-score-top,
html[data-theme="light"] .si-score-top {
 background: linear-gradient(135deg, #F0F5FF 0%, #F8FBFF 100%);
 border-bottom: 1px solid rgba(26,39,64,0.08);
}

/* CE tree panel — distinct surface */
html[data-theme="light"] .ce-tree-panel {
 background: var(--bg-e);
 border-right: 1px solid var(--b1);
}

/* Phase 3: CE tree row active — stronger blue tint on white sidebar */
html[data-theme="light"] .ce-tree-row.active {
 background: rgba(44,125,224,0.10);
}
html[data-theme="light"] .ce-tree-row:hover {
 background: rgba(44,125,224,0.06);
}

/* Phase 6: SERP result rows — border + micro-shadow for definition */
html[data-theme="light"] .si-google-row,
html[data-theme="light"] .si-amz-row {
 border: 1px solid rgba(26,39,64,0.09);
 box-shadow: 0 1px 3px rgba(26,39,64,0.06);
}

/* Phase 6: CT card top section — unified white */
html[data-theme="light"] .ct-card-top {
 background: var(--card);
 border-bottom: 1px solid var(--b1);
}

/* Phase C: Upgrade + cancel modals — brand-navy shadow instead of pure black */
html[data-theme="light"] .upgrade-modal {
 box-shadow: 0 8px 32px rgba(26,39,64,0.18), 0 32px 80px rgba(26,39,64,0.22);
}
html[data-theme="light"] .cancel-modal {
 box-shadow: 0 8px 32px rgba(26,39,64,0.18), 0 24px 64px rgba(26,39,64,0.12);
}

/* Phase 6: Modal overlay scrim — navy-tinted (already set via --overlay-bg token) */
/* --overlay-bg: rgba(26,39,64,0.35) is set in the light theme block above */

/* Phase E: Insight pill overrides — all tool prefixes covered */
html[data-theme="light"] .ap-insight-kw,
html[data-theme="light"] .ds-insight-kw,
html[data-theme="light"] .lo-insight-kw,
html[data-theme="light"] .lb-insight-kw,
html[data-theme="light"] .ad-insight-kw {
 background: rgba(0,158,122,0.10);
 border-color: rgba(0,158,122,0.22);
 color: #007A63;
}
html[data-theme="light"] .ap-insight-kw-miss,
html[data-theme="light"] .ds-insight-kw-miss,
html[data-theme="light"] .lo-insight-kw-miss,
html[data-theme="light"] .ad-insight-kw-miss {
 background: rgba(199,59,59,0.09);
 border-color: rgba(199,59,59,0.22);
 color: #A83030;
}
html[data-theme="light"] .ap-insight-tone,
html[data-theme="light"] .ds-insight-tone,
html[data-theme="light"] .lo-insight-tone,
html[data-theme="light"] .lb-insight-tone,
html[data-theme="light"] .ad-insight-tone {
 background: rgba(44,125,224,0.09);
 border-color: rgba(44,125,224,0.20);
 color: #1A5FAD;
}
html[data-theme="light"] .ap-insight-struct,
html[data-theme="light"] .ds-insight-struct,
html[data-theme="light"] .lo-insight-struct,
html[data-theme="light"] .ad-insight-struct {
 background: rgba(122,79,214,0.09);
 border-color: rgba(122,79,214,0.20);
 color: #5A2FB0;
}
html[data-theme="light"] .ap-insight-read,
html[data-theme="light"] .lo-insight-read,
html[data-theme="light"] .ad-insight-read,
html[data-theme="light"] .ds-insight-read {
 background: rgba(26,39,64,0.05);
 border-color: rgba(26,39,64,0.12);
 color: var(--t3);
}

/* Phase 5: Nav item transition includes all visual properties */
html[data-theme="light"] .topnav-item, html[data-theme="light"] .topnav-group-btn, html[data-theme="light"] .topnav-dd-item {
 transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

/* Phase J: Global placeholder — uses --placeholder token (defined in both theme blocks) */
::placeholder { color: var(--placeholder, var(--t3)); opacity: 1; }


/* ps-tabs / ps-tab — pill/segment pattern (used by review-analysis) */
.ps-tabs { display: flex; gap: 2px; background: var(--seg-track); border: none; border-radius: var(--radius-lg); padding: 3px; width: fit-content; }
.ps-tab { background: none; border: none; border-radius: var(--radius-md); padding: 7px 16px; font-size: 0.83rem; font-weight: 500; color: var(--t3); cursor: pointer; font-family: inherit; transition: all 0.18s; white-space: nowrap; }
.ps-tab:hover { color: var(--t2); }
.ps-tab.active,
.ps-tab[aria-selected="true"] {
 background: var(--seg-active-bg);
 color: var(--seg-active-text);
 box-shadow: var(--sh-xs);
 font-weight: 600;
}


/* Phase C: Ext CTA — visible gradient + border on white background */
html[data-theme="light"] .ext-cta {
 background: linear-gradient(135deg, rgba(0,158,122,0.07), rgba(44,125,224,0.05));
 border: 1px solid rgba(26,39,64,0.09);
}

/* Phase E: Input focus — solid blue border + glow ring (all page input variants) */
html[data-theme="light"] .ad-input:focus,
html[data-theme="light"] .ad-select:focus,
html[data-theme="light"] .ad-textarea:focus,
html[data-theme="light"] .lo-input:focus,
html[data-theme="light"] .lo-select:focus,
html[data-theme="light"] .lo-textarea:focus,
html[data-theme="light"] .ap-input:focus,
html[data-theme="light"] .ap-textarea:focus,
html[data-theme="light"] .ds-input:focus,
html[data-theme="light"] .ds-textarea:focus,
html[data-theme="light"] .lb-input:focus,
html[data-theme="light"] .lb-textarea:focus,
html[data-theme="light"] .si-input:focus,
html[data-theme="light"] .kd-input:focus,
html[data-theme="light"] .mb-search:focus,
html[data-theme="light"] .as-input:focus,
html[data-theme="light"] .ce-search:focus,
html[data-theme="light"] input[type="text"]:focus,
html[data-theme="light"] input[type="email"]:focus,
html[data-theme="light"] input[type="password"]:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
 border-color: var(--blue) !important;
 box-shadow: 0 0 0 3px var(--blue-a12) !important;
 outline: none;
}

/* Phase E: Dropdown trigger — boosted border + shadow in light mode */
html[data-theme="light"] .ps-dropdown-trigger {
 border-color: rgba(26,39,64,0.14);
 box-shadow: 0 1px 4px rgba(26,39,64,0.10), 0 2px 8px rgba(26,39,64,0.06);
}
html[data-theme="light"] .ps-dropdown-trigger:hover {
 border-color: var(--blue);
 background: rgba(44,125,224,0.04);
}
html[data-theme="light"] .ps-dropdown.open .ps-dropdown-trigger {
 border-color: var(--blue);
 box-shadow: 0 0 0 3px rgba(44,125,224,0.15);
}
html[data-theme="light"] .ps-dropdown-menu {
 border-color: rgba(26,39,64,0.14);
 box-shadow: 0 4px 20px rgba(26,39,64,0.16), 0 16px 48px rgba(26,39,64,0.10);
}

/* Phase E: Authority suite — token-based filled slot (was hardcoded dark rgba) */
html[data-theme="light"] .as-cat-slot.filled {
 background: var(--mint-a10);
 border-color: rgba(0,158,122,0.28);
}

/* Phase F: Card shadow elevation — stronger presence on white surfaces */
html[data-theme="light"] .ap-form-card,
html[data-theme="light"] .ds-card,
html[data-theme="light"] .ds-input-card,
html[data-theme="light"] .lo-form-card,
html[data-theme="light"] .ad-form-card,
html[data-theme="light"] .lb-setup-card,
html[data-theme="light"] .kd-search-card,
html[data-theme="light"] .ra-search-card,
html[data-theme="light"] .si-verdict,
html[data-theme="light"] .as-form-card,
html[data-theme="light"] .ce-split,
html[data-theme="light"] .ni-feature,
html[data-theme="light"] .ni-tool-card {
 box-shadow: 0 1px 4px rgba(26,39,64,0.10), 0 4px 16px rgba(26,39,64,0.08);
}

/* Phase F: Form-card hover — subtle lift + border highlight */
html[data-theme="light"] .ap-form-card:hover,
html[data-theme="light"] .ds-card:hover,
html[data-theme="light"] .lo-form-card:hover,
html[data-theme="light"] .ad-form-card:hover,
html[data-theme="light"] .ni-feature:hover,
html[data-theme="light"] .ni-tool-card:hover {
 box-shadow: 0 2px 8px rgba(26,39,64,0.14), 0 8px 28px rgba(26,39,64,0.10);
 border-color: rgba(26,39,64,0.17);
}

/* Phase F: Score header stronger gradient — deeper blue-white sweep */
html[data-theme="light"] .ap-score-top,
html[data-theme="light"] .lo-strength-top,
html[data-theme="light"] .ds-score-top,
html[data-theme="light"] .ra-score-top,
html[data-theme="light"] .si-score-top {
 background: linear-gradient(135deg, #EBF2FF 0%, #F5F8FF 50%, #FAFCFF 100%);
 border-bottom: 1px solid rgba(44,125,224,0.12);
}

/* Phase G: kd-verdict — light-mode identity boost */
html[data-theme="light"] .kd-verdict.weak,
html[data-theme="light"] .kd-verdict.writer_market {
 background: var(--bg-b);
 border-color: rgba(26,39,64,0.14);
}

/* Phase G: Login card shadow — navy-tinted on white */
html[data-theme="light"] .login-card {
 box-shadow: 0 8px 40px rgba(26,39,64,0.16), 0 32px 80px rgba(26,39,64,0.10);
 border-color: rgba(26,39,64,0.11);
}

/* Dark mode — subtle blue focus ring */
html[data-theme="dark"] :focus-visible {
 outline: 1.5px solid var(--focus-border);
 outline-offset: 2px;
 box-shadow: 0 0 0 3px var(--blue-a10);
}

/* Phase H: Dark mode — card hover glow elevation */
html[data-theme="dark"] .tool-card:hover {
 border-color: rgba(46,216,168,0.22);
 box-shadow: var(--glow-mint), 0 4px 20px rgba(0,0,0,0.50), 0 16px 48px rgba(0,0,0,0.38), inset 0 1px 0 var(--hi);
}
html[data-theme="dark"] .ct-card:hover,
html[data-theme="dark"] .mb-card:hover {
 box-shadow: 0 4px 20px rgba(0,0,0,0.55), 0 16px 48px rgba(0,0,0,0.40), inset 0 1px 0 var(--hi);
}
html[data-theme="dark"] .ni-tool-card:hover {
 border-color: rgba(59,142,240,0.25);
 box-shadow: var(--glow-blue), 0 4px 20px rgba(0,0,0,0.50), inset 0 1px 0 var(--hi);
}

/* Phase H: Dark mode — strategic card header glow border */
html[data-theme="dark"] .ap-strategy-header,
html[data-theme="dark"] .ra-insights-card-header {
 border-bottom-color: rgba(46,216,168,0.20);
 box-shadow: 0 1px 0 rgba(46,216,168,0.10);
}

/* Phase H: CE — token-based button + kdp badge (was hardcoded dark rgba) */
html[data-theme="light"] .ce-bookmarks-btn {
 background: var(--mint-a10);
 border-color: rgba(0,158,122,0.22);
}
html[data-theme="light"] .ce-bookmarks-btn:hover,
html[data-theme="light"] .ce-bookmarks-btn.active {
 background: var(--mint-a15);
}
html[data-theme="light"] .ce-kdp.high {
 background: var(--mint-a10);
 border-color: rgba(0,158,122,0.22);
}
html[data-theme="light"] .ce-panel-bk-btn.saved {
 background: var(--mint-a10);
 border-color: var(--bm);
}

/* Linear-style CTA — smooth brightness dip on hover, no shadow, no lift */
html [class$="-generate-btn"],
html [class$="-search-btn"],
html [class$="-analyse-btn"],
html [class$="-add-btn"],
html [class$="-track-btn"],
html [class$="-build-listing-btn"],
html .opp-generate-btn,
html .btn-primary,
html .upgrade-cta-btn { transition: filter 0.15s !important; }
html [class$="-generate-btn"]:hover:not(:disabled),
html [class$="-search-btn"]:hover:not(:disabled),
html [class$="-analyse-btn"]:hover:not(:disabled),
html [class$="-add-btn"]:hover:not(:disabled),
html [class$="-track-btn"]:hover:not(:disabled),
html [class$="-build-listing-btn"]:hover:not(:disabled),
html .opp-generate-btn:hover:not(:disabled),
html .btn-primary:hover:not(:disabled),
html .upgrade-cta-btn:hover:not(:disabled) {
 filter: brightness(0.92) !important;
 box-shadow: none !important;
 transform: none !important;
 background: var(--cta-bg) !important;
}

/* Phase I: Premium polish — smooth transitions on all interactive surfaces */
html[data-theme="light"] .ps-dropdown-trigger,
html[data-theme="light"] .ps-dropdown-menu,
html[data-theme="light"] .ap-form-card,
html[data-theme="light"] .ct-card,
html[data-theme="light"] .mb-card,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .ni-tool-card,
html[data-theme="light"] .ni-feature {
 transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}

/* Phase K: Tour tooltip shadows — light mode uses brand navy shadow (not dark rgba) */
html[data-theme="light"] .ap-tour-tooltip,
html[data-theme="light"] .ad-tour-tooltip,
html[data-theme="light"] .lo-tour-tooltip,
html[data-theme="light"] .ds-tour-tooltip,
html[data-theme="light"] .ce-tour-tooltip,
html[data-theme="light"] .mb-tour-tooltip {
 box-shadow: 0 4px 20px rgba(26,39,64,0.14), 0 1px 4px rgba(26,39,64,0.08);
}

/* Phase K: .ap-tip tooltip — tokenized for light mode (was hardcoded black bg) */
html[data-theme="light"] .ap-tip::after {
 background: var(--card);
 color: var(--t1);
 border: 1px solid var(--b2);
 box-shadow: 0 2px 8px rgba(26,39,64,0.12);
}

/* Phase K: si-type-pill.retailer — use amber token (was literal #cc8800) */
html .si-type-pill.retailer {
 background: var(--amber-a10);
 color: var(--amber);
}

/* Phase K: mb-add-input focus — blue convention (was mint-a40) */
html .mb-add-input:focus {
 border-color: var(--blue) !important;
 box-shadow: 0 0 0 3px var(--blue-a12) !important;
}

/* Phase K: ra-insights-card-header — boosted mint alpha for light visibility */
html[data-theme="light"] .ra-insights-card-header {
 background: var(--mint-a10) !important;
 border-bottom-color: var(--mint-a15) !important;
}