:root{
  --bg:#0d1016;
  --panel:#151a24;
  --panel-2:#1c2230;
  --text:#eef2ff;
  --muted:#aeb7ca;
  --line:rgba(255,255,255,.08);
  --gold:#d4af37;
  --red:#c70039;
  --green:#21c37a;
  --yellow:#f5c451;
  --shadow:0 18px 40px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at top, #1c2333 0%, #0d1016 55%);color:var(--text)}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:0}
textarea,input,select{width:100%;background:#0f1420;border:1px solid var(--line);color:var(--text);border-radius:16px;padding:14px}
textarea{min-height:140px;resize:vertical}
label{display:block;color:var(--muted);font-size:14px;margin-bottom:10px}
.app-shell{display:grid;grid-template-columns:290px 1fr;min-height:100vh;gap:22px;padding:22px;padding-top:28px}
.global-logo-wrap{position:fixed;left:20px;top:20px;z-index:30;width:57px;height:57px;border-radius:18px;background:rgba(0,0,0,.22);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.06)}
.global-logo{width:100%;height:100%;object-fit:contain;border-radius:16px}
.glass{background:rgba(18,23,34,.78);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow)}
.glass-soft{background:linear-gradient(180deg, rgba(34,41,58,.72), rgba(18,23,34,.72));border:1px solid var(--line);box-shadow:var(--shadow)}
.sidebar{border-radius:28px;padding:86px 18px 18px 18px;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 56px);position:sticky;top:28px}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:26px;padding-left:6px}
.brand-mark{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--gold),#78601d);display:flex;align-items:center;justify-content:center;color:#111;font-weight:800}
.brand-title{font-weight:800;font-size:20px}
.brand-subtitle{color:var(--muted);font-size:13px}
.nav{display:grid;gap:10px}
.nav-btn{background:transparent;color:var(--text);padding:14px 16px;border-radius:16px;text-align:left;border:1px solid transparent}
.nav-btn.active,.nav-btn:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.sidebar-stack{display:grid;gap:12px;margin-top:18px}
.sidebar-card{padding:16px;border-radius:20px}
.main-content{display:grid;gap:22px;padding-top:6px}
.topbar{border-radius:24px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.topbar h2{margin:5px 0 0;font-size:24px}
.card{display:none;border-radius:28px;padding:28px}
.card.view.active{display:block}
.pill,.mini-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hero-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:start}
.hero-grid h1{font-size:40px;line-height:1.05;margin:14px 0 16px;max-width:700px;font-weight:700}
.lead{font-size:16px;line-height:1.7;color:var(--muted);max-width:760px}
.micro-insight{margin-top:16px;padding:14px 16px;border-radius:16px;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.16);color:#f1e6b8}
.hero-actions,.topbar-actions,.head-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.primary-btn,.secondary-btn{border-radius:16px;padding:14px 18px;font-weight:700}
.primary-btn{background:linear-gradient(135deg,var(--gold),#9a7f25);color:#121212}
.secondary-btn{background:#21293a;color:var(--text);border:1px solid var(--line)}
.small{padding:11px 14px;font-size:14px}
.full{width:100%}
.dashboard-preview,.score-grid,.feature-grid.four,.analysis-grid,.pricing-grid,.settings-grid,.pattern-grid,.reply-grid,.insight-grid,.workspace-grid,.heatmap-grid{display:grid;gap:16px}
.dashboard-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric-card,.score-card,.feature-box,.analysis-card,.price-card,.insight-card,.panel,.timeline-card,.pattern-card{border-radius:24px;padding:18px;background:linear-gradient(180deg,#171d29,#121722);border:1px solid var(--line);box-shadow:var(--shadow)}
.metric-card span,.score-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.metric-card strong,.score-card strong{font-size:34px}
.metric-card.glow{box-shadow:0 0 0 1px rgba(212,175,55,.18),0 14px 32px rgba(212,175,55,.12)}
.feature-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px}
.feature-box h3,.analysis-card h3,.insight-card h3,.timeline-card h2,.section-head h2,.price-card h3,.pattern-card h3{margin:8px 0 0}
.feature-box p,.sidebar-card p,.analysis-card p,.price-card p,.pattern-card p,.workspace-summary p{color:var(--muted);line-height:1.6}
.insight-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.timeline-card{margin-top:20px}
.timeline{display:grid;gap:14px;margin-top:18px}
.timeline-item{display:flex;gap:14px;align-items:flex-start}
.timeline-badge{width:34px;height:34px;border-radius:999px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.2);display:flex;align-items:center;justify-content:center;color:#f3e3aa;font-weight:700;flex:none}
.dashboard-footer{color:var(--muted);padding-top:28px;font-size:14px}
.workspace-grid{grid-template-columns:1.1fr .9fr;margin-top:16px}
.workspace-column,.settings-grid{display:grid;gap:16px}
.control-grid.triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.preview-box{min-height:100px;padding:16px;border-radius:18px;background:#0f1420;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center}
.preview-box img{max-width:100%;max-height:220px;border-radius:14px}
.score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.analysis-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.analysis-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.heatmap-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}
.heat-list{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:10px}
.heatmap-chat-wrap{margin-top:18px}
.heatmap-chat{display:grid;gap:10px}
.chat-line{padding:14px 16px;border-radius:16px;background:#111723;border:1px solid var(--line);line-height:1.6}
.chat-line.good{border-color:rgba(33,195,122,.3);background:rgba(33,195,122,.08)}
.chat-line.warn{border-color:rgba(245,196,81,.3);background:rgba(245,196,81,.08)}
.chat-line.bad{border-color:rgba(199,0,57,.35);background:rgba(199,0,57,.08)}
.chat-line .tag{display:inline-flex;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;color:var(--muted)}
.reply-grid,.pattern-grid,.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.reply-card{padding:18px;border-radius:22px;background:linear-gradient(180deg,#171d29,#121722);border:1px solid var(--line)}
.reply-card h4{margin:0 0 12px}
.reply-card p{color:var(--muted);line-height:1.6}
.price-card.featured{box-shadow:0 0 0 1px rgba(212,175,55,.22),0 18px 40px rgba(212,175,55,.12)}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:18px;border-radius:18px;background:linear-gradient(180deg,#171d29,#121722);border:1px solid var(--line)}
.toggle-row input{width:auto;transform:scale(1.2)}
.hidden{display:none}
@media (max-width:1200px){
  .app-shell{grid-template-columns:1fr;padding-top:90px}
  .sidebar{position:relative;top:0;min-height:auto;padding-top:24px}
  .hero-grid,.workspace-grid,.analysis-grid,.feature-grid.four,.reply-grid,.pattern-grid,.pricing-grid,.score-grid,.insight-grid,.heatmap-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .global-logo-wrap{left:14px;top:14px;width:52px;height:52px}
  .app-shell{padding:14px;padding-top:78px}
  .topbar,.card{padding:20px}
  .hero-grid,.workspace-grid,.analysis-grid,.feature-grid.four,.reply-grid,.pattern-grid,.pricing-grid,.score-grid,.insight-grid,.heatmap-grid,.dashboard-preview,.control-grid.triple{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start}
  .hero-grid h1{font-size:34px}
}