:root{
--bg:#f4f8fc;
--bg-accent:#d8ecff;
--panel:#0d1b2a;
--panel-2:#123250;
--card:#ffffff;
--card-soft:#f8fbff;
--muted:#5f7288;
--line:#d7e2ee;
--accent:#0f766e;
--accent-2:#0ea5e9;
--accent-3:#22c55e;
--danger:#dc2626;
--warning:#f59e0b;
--text:#0f1f32;
--shadow:0 20px 50px rgba(15,31,50,.08);
}
*{box-sizing:border-box}
body{
margin:0;
font-family:"Segoe UI",Arial,sans-serif;
background:
radial-gradient(circle at top left,var(--bg-accent),transparent 24%),
linear-gradient(180deg,#f9fbff 0%,var(--bg) 100%);
color:var(--text)
}
a{color:inherit}
.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}
.sidebar{
background:linear-gradient(180deg,var(--panel) 0%,#101c2d 100%);
color:#fff;
padding:24px 18px;
position:sticky;
top:0;
height:100vh;
box-shadow:0 0 0 1px rgba(255,255,255,.04) inset
}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:28px}
.brand strong{display:block;font-size:22px}
.brand span{display:block;color:#90a7bd;font-size:13px}
.logo{
width:46px;height:46px;border-radius:16px;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
display:grid;place-items:center;font-weight:900;letter-spacing:.04em
}
.sidebar nav{display:flex;flex-direction:column;gap:8px}
.sidebar a{
color:#d7e7f5;text-decoration:none;padding:12px 14px;border-radius:14px;
transition:background .18s ease,color .18s ease,transform .18s ease
}
.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.1);color:#fff;transform:translateX(2px)}
.content{padding:24px 28px;min-width:0}
.mobile-topbar{display:none}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}
.topbar h1{margin:4px 0 0;font-size:32px;line-height:1.05}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:800}
.userpill{background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:999px;color:#475569;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{
background:var(--card);
border:1px solid var(--line);
border-radius:24px;
padding:20px;
box-shadow:var(--shadow)
}
.metric{font-size:34px;font-weight:900;line-height:1}
.muted{color:var(--muted)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:linear-gradient(135deg,var(--accent),#0f766e);
color:#fff;text-decoration:none;border:0;border-radius:14px;
padding:11px 15px;font-weight:800;cursor:pointer
}
.btn:hover{filter:brightness(.98)}
.btn.secondary,.btn-secondary{background:#e6eef8;color:#12243a}
.btn.danger,.btn-danger{background:linear-gradient(135deg,#ef4444,var(--danger))}
.btn-small{padding:8px 11px;border-radius:12px;font-size:13px}
.toolbar,.actions{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.split{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
input,select,textarea{
width:100%;padding:12px 13px;border:1px solid #c8d6e5;border-radius:14px;
font:inherit;background:#fff;color:var(--text)
}
label{font-weight:700;font-size:13px;color:#4b6076;display:block;margin-bottom:6px}
.notice{
padding:13px 14px;border-radius:16px;background:#ecfeff;border:1px solid #a5f3fc;
color:#0f5461;margin-bottom:16px
}
.error{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#66788c}
tr:last-child td{border-bottom:0}
.badge,.chip,.tag{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.status-new,.chip-info{background:#dbeafe;color:#1d4ed8}
.status-review,.chip-review,.tag-review{background:#fef3c7;color:#92400e}
.status-approved,.chip-hot,.tag-hot{background:#dcfce7;color:#166534}
.status-rejected,.chip-ignore,.tag-ignore{background:#fee2e2;color:#991b1b}
.status-deleted,.chip-muted{background:#e2e8f0;color:#334155}
.score{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:7px 10px;border-radius:999px;font-weight:900}
.score-hot{background:#fee2e2;color:#991b1b}
.score-warm{background:#fef3c7;color:#92400e}
.score-cold{background:#e2e8f0;color:#334155}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#22c55e33,transparent 35%),linear-gradient(135deg,#0f172a,#020617)}
.login-card{width:min(440px,92vw);background:#fff;border-radius:28px;padding:30px;box-shadow:0 25px 80px rgba(0,0,0,.35)}
.login-card h1{margin:0 0 8px}
details{margin-top:8px}
summary{cursor:pointer;font-weight:800}
pre{white-space:pre-wrap;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px;font-family:inherit;max-width:520px}
.lead-board{display:grid;gap:14px}
.lead-card{
background:linear-gradient(180deg,#fff,#f8fbff);
border:1px solid var(--line);
border-radius:22px;
padding:18px;
box-shadow:var(--shadow)
}
.lead-card .lead-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.lead-card .lead-title{font-size:20px;font-weight:900;line-height:1.2}
.lead-card .lead-meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.lead-card .lead-text{color:#3f5368;line-height:1.5}
.lead-card .lead-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mobile-focus{
display:grid;grid-template-columns:1.2fr .8fr;gap:16px
}
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi-card{
padding:18px;border-radius:20px;
background:linear-gradient(180deg,#fff,#f7fbff);
border:1px solid var(--line)
}
.kpi-card strong{display:block;font-size:28px}
.task-list{display:flex;flex-direction:column;gap:10px}
.task-item{
display:flex;justify-content:space-between;gap:12px;align-items:center;
padding:12px 14px;border-radius:16px;background:#f8fbff;border:1px solid var(--line)
}
.task-item strong{display:block}
.reply-variant-list{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:12px
}
.reply-variant-list .btn{width:auto}
.hero-strip{
padding:24px;border-radius:26px;color:#fff;border:0;
background:
radial-gradient(circle at top right,rgba(34,197,94,.2),transparent 28%),
radial-gradient(circle at bottom left,rgba(14,165,233,.16),transparent 30%),
linear-gradient(135deg,#0d1b2a 0%,#143858 55%,#0f766e 100%);
box-shadow:0 24px 60px rgba(13,27,42,.18)
}
.hero-strip h2{margin:6px 0 10px;font-size:34px;line-height:1.02}
.hero-strip p{margin:0;color:rgba(255,255,255,.84);max-width:760px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.hero-stat{
padding:15px;border-radius:18px;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15)
}
.hero-stat strong{display:block;font-size:28px}

@media(max-width:1080px){
.grid,.kpi-row,.hero-stat-grid,.form-grid,.mobile-focus{grid-template-columns:1fr 1fr}
.app-shell{grid-template-columns:240px minmax(0,1fr)}
.content{padding:20px}
}

@media(max-width:860px){
.mobile-topbar{
display:flex;align-items:center;gap:12px;margin-bottom:14px;
padding:10px 12px;border:1px solid var(--line);border-radius:18px;background:#fff;
position:sticky;top:10px;z-index:12;box-shadow:var(--shadow)
}
.mobile-brand strong{display:block}
.mobile-brand span{display:block;font-size:12px;color:var(--muted)}
.nav-burger{display:grid;gap:4px;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2px;background:#12243a;border-radius:999px}
.app-shell{display:block}
.sidebar{
position:fixed;left:0;top:0;bottom:0;width:280px;height:auto;z-index:20;
transform:translateX(-100%);transition:transform .22s ease
}
.nav-toggle:checked + .app-shell .sidebar{transform:translateX(0)}
.content{margin:0;padding:16px}
.topbar{flex-direction:column;align-items:flex-start;margin-bottom:16px}
.topbar h1{font-size:28px}
.userpill{font-size:13px}
.grid,.kpi-row,.hero-stat-grid,.form-grid,.mobile-focus{grid-template-columns:1fr}
table{display:block;overflow:auto;white-space:nowrap}
.card{padding:16px;border-radius:20px}
.lead-card .lead-title{font-size:18px}
}

@media(max-width:560px){
body{font-size:15px}
.content{padding:12px}
.hero-strip{padding:18px;border-radius:22px}
.hero-strip h2{font-size:28px}
.btn,.btn-secondary,.btn-small{width:100%}
.hero-actions .btn,.lead-card .lead-actions .btn{width:auto}
.toolbar,.actions,.split{align-items:stretch}
.toolbar > *,.actions > *{flex:1 1 100%}
.userpill{width:100%;text-align:center}
th,td{padding:12px 10px}
}

.trend-dashboard-grid{
display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
gap:16px
}
.trend-chart{
height:440px;
width:100%
}
.trend-chart-card{overflow:hidden}
.trend-footnote{margin-top:10px}
.trend-filter-bar{align-items:end}
.trend-filter-bar > div{min-width:150px;flex:1 1 150px}
.trend-filter-actions{display:flex;gap:10px;align-items:end;flex:0 0 auto}
.trend-preview-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px
}
.trend-preview-kpi{
padding:16px;
border-radius:18px;
background:linear-gradient(180deg,#fff,#f7fbff);
border:1px solid var(--line)
}
.trend-preview-kpi strong{display:block;font-size:22px}
.trend-locked-preview,.trend-upsell-card{
position:relative;
overflow:hidden
}
.trend-preview-blur{
filter:blur(3px);
opacity:.85;
pointer-events:none
}
.trend-lock-copy{
display:flex;
flex-direction:column;
gap:6px;
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.9);
border:1px solid var(--line)
}
.trend-chart-placeholder{
margin-top:16px;
height:260px;
border-radius:22px;
background:
linear-gradient(180deg,rgba(14,165,233,.08),rgba(22,163,74,.14)),
repeating-linear-gradient(90deg,rgba(15,31,50,.04) 0 1px,transparent 1px 80px),
repeating-linear-gradient(180deg,rgba(15,31,50,.04) 0 1px,transparent 1px 64px)
}
.trend-chip-row{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:8px
}
.trend-sidepanel{
position:fixed;
top:18px;
right:18px;
bottom:18px;
width:min(520px,calc(100vw - 24px));
overflow:auto;
z-index:70;
transform:translateX(calc(100% + 24px));
transition:transform .22s ease;
border-radius:28px
}
.trend-sidepanel.is-open{transform:translateX(0)}
.drawer-backdrop{
position:fixed;
inset:0;
background:rgba(15,31,50,.34);
backdrop-filter:blur(4px);
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
z-index:60
}
.drawer-backdrop.is-open{
opacity:1;
pointer-events:auto
}
.drawer-close{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:14px;
border:1px solid var(--line);
background:#f8fbff;
color:var(--text);
font:inherit;
font-weight:800;
cursor:pointer
}
.lead-card.compact .lead-title{font-size:18px}

@media(max-width:1080px){
.trend-dashboard-grid,.trend-preview-grid{grid-template-columns:1fr}
}

@media(max-width:860px){
.trend-chart{height:320px}
.trend-filter-actions{width:100%;flex:1 1 100%}
.trend-sidepanel{
top:auto;
left:12px;
right:12px;
bottom:12px;
width:auto;
max-height:78vh
}
}