:root{
  --bg:#f6f8fc;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --line:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#6366f1;
  --primary-hover:#4f46e5;
  --success:#16a34a;
  --warn:#f59e0b;
  --danger:#ef4444;
  --radius:18px;
  --shadow:0 18px 45px rgba(15,23,42,.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:linear-gradient(180deg,#f8fbff,#f4f6fb);
  color:var(--text);
}

.app{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px 1fr;
}

/* SIDEBAR */
.sidebar{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  border-right:1px solid var(--line);
  padding:22px;
}

.brand{
  font-size:20px;
  font-weight:700;
  margin-bottom:24px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nav button{
  all:unset;
  cursor:pointer;
  padding:12px 14px;
  border-radius:12px;
  color:var(--muted);
  font-weight:600;
  transition:.2s;
}

.nav button:hover{
  background:#eef2ff;
  color:var(--primary);
}

.nav button.active{
  background:var(--primary);
  color:#fff;
}

/* MAIN */
.main{
  padding:24px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}

.topbar h1{
  margin:0;
  font-size:28px;
  letter-spacing:-.5px;
}

.sub{
  color:var(--muted);
  font-size:14px;
  margin-top:4px;
}

.actions{
  display:flex;
  gap:10px;
}

.ghost-btn,.primary-btn{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}

.ghost-btn{
  background:#fff;
  border:1px solid var(--line);
}

.primary-btn{
  background:var(--primary);
  color:#fff;
}

.primary-btn:hover{
  background:var(--primary-hover);
  transform:translateY(-1px);
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}

.card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.card-title{
  font-size:18px;
  font-weight:700;
  margin:0 0 16px;
}

label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  margin:14px 0 6px;
}

input,select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font:inherit;
  outline:none;
  transition:.2s;
}

input:focus,select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}

.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.run-btn{
  width:100%;
  margin-top:18px;
  border:none;
  padding:13px;
  border-radius:14px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.run-btn:hover{
  background:var(--primary-hover);
  transform:translateY(-1px);
}

.run-btn:disabled{
  opacity:.7;
  cursor:wait;
}

/* RESULT */
.metric-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-top:18px;
}

.metric{
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}

.metric small{
  display:block;
  color:var(--muted);
  margin-bottom:6px;
}

.metric strong{
  font-size:18px;
}

/* AI */
.ai-box{
  background:#eef2ff;
  border:1px solid #c7d2fe;
  border-radius:14px;
  padding:14px;
  line-height:1.45;
  font-size:14px;
}

/* HISTORY */
.history{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:260px;
  overflow:auto;
}

.row{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  font-size:13px;
  background:#fff;
}

.empty{
  color:var(--muted);
  padding:10px 0;
}

.hidden{
  display:none !important;
}

/* ONBOARDING */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:20px;
}

.modal{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:24px;
  padding:28px;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  animation:pop .28s ease;
}

@keyframes pop{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}

.steps{
  display:grid;
  gap:12px;
  margin:18px 0;
}

.step{
  background:#f8fafc;
  border:1px solid var(--line);
  padding:12px;
  border-radius:14px;
  font-size:14px;
}

/* LOADING */
.loader{
  display:inline-flex;
  gap:6px;
}

.loader span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  animation:bounce .8s infinite alternate;
}

.loader span:nth-child(2){animation-delay:.15s}
.loader span:nth-child(3){animation-delay:.3s}

@keyframes bounce{
  from{transform:translateY(0)}
  to{transform:translateY(-6px)}
}

/* MOBILE */
@media(max-width:1000px){
  .grid{grid-template-columns:1fr}
}

@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:16px}
  .two,.metric-grid{grid-template-columns:1fr}
  .topbar{align-items:flex-start;flex-direction:column}
}












/* =====================================
   DARK MODE SYSTEM
   Add class="dark" to body
===================================== */

body.dark{
  --bg:#0b1120;
  --panel:#111827;
  --panel-soft:#1e293b;
  --line:#263244;
  --text:#f8fafc;
  --muted:#94a3b8;
  --primary:#7c3aed;
  --primary-hover:#8b5cf6;
  --success:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow:0 20px 50px rgba(0,0,0,.45);

  background:
  radial-gradient(circle at top left,#1e1b4b 0%,transparent 35%),
  radial-gradient(circle at top right,#0f172a 0%,transparent 30%),
  linear-gradient(180deg,#020617,#0f172a 60%,#111827);

  color:var(--text);
}

/* APP */
body.dark .app{
  background:transparent;
}

/* SIDEBAR */
body.dark .sidebar{
  background:rgba(15,23,42,.78);
  border-right:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}

/* BRAND */
body.dark .brand{
  color:#ffffff;
  text-shadow:0 0 12px rgba(124,58,237,.25);
}

/* NAV */
body.dark .nav button{
  color:var(--muted);
}

body.dark .nav button:hover{
  background:rgba(124,58,237,.12);
  color:#fff;
}

body.dark .nav button.active{
  background:linear-gradient(135deg,#7c3aed,#6366f1);
  color:#fff;
  box-shadow:0 10px 25px rgba(124,58,237,.35);
}

/* TOPBAR */
body.dark .topbar h1{
  color:#fff;
}

body.dark .sub{
  color:var(--muted);
}

/* BUTTONS */
body.dark .ghost-btn{
  background:#111827;
  border:1px solid rgba(255,255,255,.07);
  color:#e5e7eb;
}

body.dark .ghost-btn:hover{
  background:#1e293b;
}

body.dark .primary-btn,
body.dark .run-btn{
  background:linear-gradient(135deg,#7c3aed,#6366f1);
  color:#fff;
  box-shadow:0 10px 25px rgba(99,102,241,.35);
}

body.dark .primary-btn:hover,
body.dark .run-btn:hover{
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  transform:translateY(-1px);
}

/* CARDS */
body.dark .card{
  background:rgba(17,24,39,.76);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
}

body.dark .card-title{
  color:#fff;
}

/* LABELS */
body.dark label{
  color:var(--muted);
}

/* INPUTS */
body.dark input,
body.dark select{
  background:#0f172a;
  border:1px solid #263244;
  color:#fff;
}

body.dark input::placeholder{
  color:#64748b;
}

body.dark input:focus,
body.dark select:focus{
  border-color:#7c3aed;
  box-shadow:0 0 0 4px rgba(124,58,237,.18);
}

/* METRICS */
body.dark .metric{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.05);
}

body.dark .metric small{
  color:var(--muted);
}

body.dark .metric strong{
  color:#fff;
}

/* AI BOX */
body.dark .ai-box{
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(99,102,241,.08));
  border:1px solid rgba(124,58,237,.22);
  color:#e2e8f0;
}

/* HISTORY */
body.dark .row{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.05);
  color:#e5e7eb;
}

body.dark .empty{
  color:var(--muted);
}

/* MODAL */
body.dark .overlay{
  background:rgba(2,6,23,.72);
}

body.dark .modal{
  background:#111827;
  color:#fff;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 30px 80px rgba(0,0,0,.65);
}

/* STEP BOXES */
body.dark .step{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.05);
  color:#cbd5e1;
}

/* SCROLLBAR */
body.dark ::-webkit-scrollbar{
  width:10px;
}

body.dark ::-webkit-scrollbar-track{
  background:#0f172a;
}

body.dark ::-webkit-scrollbar-thumb{
  background:#334155;
  border-radius:20px;
}

body.dark ::-webkit-scrollbar-thumb:hover{
  background:#475569;
}

/* CHART CANVAS WRAP FEEL */
body.dark canvas{
  filter:brightness(1.05);
}

/* SMOOTH TRANSITIONS */
body.dark .card,
body.dark .sidebar,
body.dark input,
body.dark button,
body.dark .metric,
body.dark .row{
  transition:all .25s ease;
}