/* ===== MODE TOGGLE ===== */
.mode-toggle {
  width:40px; height:22px; border-radius:11px; cursor:pointer; position:relative;
  background:var(--card-border); border:none; transition:background 0.3s;
}
.mode-toggle::after {
  content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:var(--text-primary); transition:all 0.3s;
}
body.light-mode .mode-toggle { background:var(--accent); }
body.light-mode .mode-toggle::after { left:21px; background:#FFFFFF; }
.mode-label { font-size:9px; color:var(--text-secondary); letter-spacing:1px; text-transform:uppercase; }

/* ===== CARDS ===== */
.card {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  padding:24px; margin-bottom:20px; transition:all 0.4s;
}
.card:hover { border-color:rgba(79,195,247,0.3); }
body.light-mode .card:hover { border-color:rgba(24,0,173,0.3); }
.card-title { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:var(--accent); text-transform:uppercase; margin-bottom:12px; transition:color 0.4s; }

/* ===== KPI ===== */
.kpi { text-align:center; padding:20px; }
.kpi-number { font-family:'Bebas Neue',sans-serif; font-size:64px; color:var(--accent); line-height:1; transition:color 0.4s; }
.kpi-number.coral { color:var(--coral); }
.kpi-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-secondary); margin-top:8px; }

/* ===== BADGE ===== */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px;
}
.badge-blue { background:rgba(79,195,247,0.15); color:var(--blue); }
.badge-coral { background:rgba(255,82,82,0.15); color:var(--coral); }
.badge-green { background:rgba(102,187,106,0.15); color:#66bb6a; }
.badge-indigo { background:rgba(24,0,173,0.2); color:var(--white); }

/* ===== PIPELINE ===== */
.pipeline { display:flex; align-items:center; gap:0; margin:24px 0; overflow-x:auto; padding:8px 0; }
.pipe-step {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-width:120px; cursor:pointer; position:relative;
}
.pipe-icon {
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px; border:2px solid var(--card-border); background:var(--card-bg); transition:all 0.5s;
}
.pipe-step.done .pipe-icon { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.pipe-step.active .pipe-icon { border-color:var(--accent); box-shadow:0 0 20px rgba(79,195,247,0.4); animation:pulse 1.5s infinite; }
.pipe-label { font-size:10px; color:var(--text-secondary); text-align:center; max-width:90px; letter-spacing:0.5px; }
.pipe-step.done .pipe-label { color:var(--accent); }
.pipe-step.active .pipe-label { color:var(--text-primary); font-weight:600; }
.pipe-arrow { color:var(--text-secondary); font-size:20px; margin:0 4px; margin-bottom:20px; }
.pipe-step.done + .pipe-arrow { color:var(--accent); }

/* ===== RATIO CARD ===== */
.ratio-card {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  padding:12px; display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; transition:all 0.3s;
}
.ratio-card:hover { border-color:var(--accent); }
.ratio-card.selected { border-color:var(--accent); background:rgba(79,195,247,0.08); }
body.light-mode .ratio-card.selected { background:rgba(24,0,173,0.06); }
.ratio-box { border:1px solid var(--text-secondary); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--text-secondary); }
.ratio-name { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500; color:var(--text-primary); transition:color 0.4s; }
.ratio-platform { font-size:9px; color:var(--text-secondary); }

/* ===== TRACK PREVIEW ===== */
.track-card {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  padding:16px; flex:1; min-width:300px; transition:all 0.4s;
}
.track-badge { background:var(--accent); color:var(--bg); padding:3px 10px; border-radius:4px; font-size:11px; font-weight:700; display:inline-block; margin-bottom:10px; }
.track-frame {
  background:var(--bg); border:1px solid var(--card-border); border-radius:6px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10px; position:relative; overflow:hidden; transition:all 0.4s;
}
.track-frame .center-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px; }
.track-frame .subtitle-bar { background:rgba(24,0,173,0.85); border-radius:4px; padding:6px 10px; font-size:11px; color:#FFFFFF; text-align:center; }
.track-meta { display:flex; justify-content:space-between; font-size:9px; color:var(--text-secondary); margin-top:8px; }

/* ===== LANG BUTTONS ===== */
.lang-btn {
  padding:6px 16px; border-radius:6px; border:1px solid var(--card-border); background:var(--card-bg);
  color:var(--text-secondary); cursor:pointer; font-size:12px; font-family:'Inter',sans-serif; transition:all 0.2s;
}
.lang-btn:hover { border-color:var(--accent); color:var(--text-primary); }
.lang-btn.active { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600; }

/* ===== WORKFLOW NODES ===== */
.workflow-node {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  padding:14px 16px; display:flex; align-items:center; gap:10px; transition:all 0.3s;
}
.workflow-node.highlight { border-color:var(--accent); box-shadow:0 0 15px rgba(79,195,247,0.2); }
.node-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.node-text { flex:1; }
.node-name { font-size:12px; font-weight:600; color:var(--text-primary); }
.node-desc { font-size:10px; color:var(--text-secondary); margin-top:2px; }

/* ===== PROCESS BTN ===== */
.btn-primary {
  background:var(--accent); color:var(--bg); border:none; padding:12px 32px;
  font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px;
  cursor:pointer; transition:all 0.3s; text-transform:uppercase;
}
.btn-primary:hover { box-shadow:0 0 20px rgba(79,195,247,0.4); }
body.light-mode .btn-primary:hover { box-shadow:0 0 20px rgba(24,0,173,0.3); }
.btn-primary:disabled { opacity:0.4; cursor:not-allowed; }

.btn-secondary {
  background:transparent; color:var(--accent); border:1px solid var(--accent); padding:8px 20px;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; transition:all 0.3s; letter-spacing:1px; text-transform:uppercase;
}

/* ===== INPUT ===== */
.text-input {
  width:100%; min-height:80px; background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:8px; padding:14px; color:var(--text-primary); font-size:14px; font-family:'Inter',sans-serif;
  resize:vertical; outline:none; transition:all 0.4s;
}
.text-input:focus { border-color:var(--accent); }
.text-input::placeholder { color:var(--text-secondary); opacity:0.4; }

/* ===== OUTPUT GALLERY ===== */
.output-item {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  padding:12px; display:flex; flex-direction:column; align-items:center; gap:8px; transition:all 0.4s;
}
.output-thumb { border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:24px; background:var(--bg); }
.output-label { font-size:10px; color:var(--text-secondary); text-align:center; }

/* ===== FOOTER STATS ===== */
.stat-row { display:flex; gap:24px; align-items:baseline; flex-wrap:wrap; }
.stat-item { display:flex; align-items:baseline; gap:6px; }
.stat-num { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:500; color:var(--accent); transition:color 0.4s; }
.stat-label { font-size:11px; color:var(--text-secondary); }

/* ===== INNER BOXES ===== */
.inner-box {
  background:var(--bg); padding:14px; border-radius:6px; transition:background 0.4s;
}
.inner-box-label {
  font-size:9px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;
}

/* ===== SCENARIO SELECTOR ===== */
.scenario-select {
  background:var(--card-bg); border:1px solid var(--card-border); color:var(--text-primary);
  padding:5px 10px; border-radius:6px; font-family:'Inter',sans-serif; font-size:11px;
  cursor:pointer; outline:none; transition:all 0.3s;
}
.scenario-select:focus { border-color:var(--accent); }

/* ===== ANIMATIONS ===== */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes glow { 0%,100%{box-shadow:0 0 10px rgba(79,195,247,0.2)} 50%{box-shadow:0 0 25px rgba(79,195,247,0.5)} }
@keyframes countUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }