/* ═══════════════════════════════════════════════════
   SIMULATOR — Dark Premium Theme
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#0f172a;--bg2:#1e293b;--bg3:#334155;
  --card:rgba(255,255,255,.06);--card-border:rgba(255,255,255,.08);
  --t1:#f1f5f9;--t2:#94a3b8;--t3:#64748b;
  --purple:#8B5CF6;--purple2:#7C3AED;--green:#10B981;--green2:#059669;
  --amber:#F59E0B;--red:#EF4444;--blue:#3B82F6;
  --gold:#D4A853;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--t1);min-height:100vh}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}
button,input,textarea,select{font-family:inherit;color:var(--t1)}
button{cursor:pointer}

/* Layout */
.sim-wrap{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.sim-topbar{height:56px;background:rgba(15,23,42,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--card-border);display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0;z-index:10}
.sim-body{flex:1;overflow:hidden;display:flex}

/* Topbar */
.sim-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--blue));display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;font-weight:800}
.sim-title{font-size:14px;font-weight:800;color:var(--t1);letter-spacing:-.01em}
.sim-subtitle{font-size:10px;color:var(--t3)}

/* Tabs */
.tab-group{display:flex;gap:2px;background:rgba(255,255,255,.04);border-radius:9px;padding:3px}
.tab-btn{padding:6px 14px;border-radius:7px;border:none;font-size:12px;font-weight:600;background:transparent;color:var(--t3);transition:all .15s}
.tab-btn:hover{color:var(--t2)}
.tab-btn.active{background:rgba(139,92,246,.15);color:var(--purple);box-shadow:0 1px 4px rgba(139,92,246,.15)}
.tab-badge{margin-left:4px;font-size:9px;background:rgba(139,92,246,.15);color:var(--purple);padding:1px 6px;border-radius:100px}

/* Buttons */
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;border:none;border-radius:9px;padding:8px 18px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(139,92,246,.3)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-launch{background:linear-gradient(135deg,var(--green),var(--green2));padding:12px 28px;font-size:14px;border-radius:12px;box-shadow:0 4px 20px rgba(16,185,129,.25)}
.btn-launch:hover{box-shadow:0 8px 30px rgba(16,185,129,.35)}
.btn-secondary{background:rgba(255,255,255,.06);color:var(--t2);border:1px solid var(--card-border);border-radius:9px;padding:8px 16px;font-size:12.5px;font-weight:600;transition:all .12s}
.btn-secondary:hover{background:rgba(255,255,255,.1);color:var(--t1)}
.btn-danger{background:var(--red);color:#fff;border:none;border-radius:9px;padding:8px 16px;font-size:12.5px;font-weight:700}
.btn-success{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border:none;border-radius:9px;padding:8px 16px;font-size:12.5px;font-weight:700}

/* Cards */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px 20px;backdrop-filter:blur(12px)}
.card-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:2px}
.card-desc{font-size:11.5px;color:var(--t3)}

/* Target chips */
.target-chips{display:flex;gap:6px;flex-wrap:wrap}
.target-chip{padding:8px 14px;border-radius:9px;border:1.5px solid var(--card-border);background:rgba(255,255,255,.03);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
.target-chip:hover{border-color:var(--purple);color:var(--t1)}
.target-chip.active{border-color:var(--purple);background:rgba(139,92,246,.1);color:var(--purple)}
.target-dot{width:8px;height:8px;border-radius:50%}

/* Conversion badges */
.conv-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.03em}
.conv-converted{background:rgba(16,185,129,.15);color:var(--green);border:1px solid rgba(16,185,129,.3)}
.conv-interested{background:rgba(245,158,11,.12);color:var(--amber);border:1px solid rgba(245,158,11,.25)}
.conv-dropped{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25)}

/* Persona Cards */
.persona-card{border:1.5px solid var(--card-border);border-radius:12px;padding:14px;background:var(--card);transition:all .2s;position:relative}
.persona-card:hover{border-color:rgba(139,92,246,.3)}
.persona-card.done{border-color:rgba(16,185,129,.3)}
.persona-card.running{border-color:rgba(59,130,246,.4);box-shadow:0 0 20px rgba(59,130,246,.1)}
.persona-avatar{width:38px;height:38px;border-radius:50%;background:rgba(139,92,246,.15);border:1.5px solid rgba(139,92,246,.3);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--purple);flex-shrink:0}
.persona-name{font-size:13px;font-weight:700;color:var(--t1)}
.persona-meta{font-size:10.5px;color:var(--t3)}

/* Score helpers */
.score-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.minibar-track{height:4px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
.minibar-fill{height:100%;border-radius:100px;transition:width .6s ease}

/* KPI Cards */
.kpi-card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px;text-align:center;backdrop-filter:blur(12px)}
.kpi-value{font-size:28px;font-weight:800;line-height:1;margin:6px 0 2px}
.kpi-label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}

/* Chat */
.chat-header{padding:12px 16px;border-bottom:1px solid var(--card-border);background:rgba(15,23,42,.6);display:flex;align-items:center;gap:10px;flex-shrink:0}
.chat-area{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.msg-label{font-size:9.5px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
.msg-bubble{max-width:80%;padding:9px 13px;font-size:13px;line-height:1.55;word-break:break-word}
.msg-user{align-self:flex-end;border-radius:14px 14px 3px 14px;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff}
.msg-bot{align-self:flex-start;border-radius:14px 14px 14px 3px;background:var(--bg2);border:1px solid var(--card-border);color:var(--t1)}
.msg-thinking{align-self:flex-end;border-radius:14px 14px 3px 14px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);color:var(--amber);font-style:italic}

/* Sim sidebar */
.sim-sidebar{width:200px;border-right:1px solid var(--card-border);overflow-y:auto;padding:10px;background:rgba(15,23,42,.5)}
.sim-sidebar-item{padding:9px 10px;border-radius:9px;cursor:pointer;margin-bottom:4px;transition:all .12s;border:1.5px solid transparent}
.sim-sidebar-item:hover{background:rgba(255,255,255,.04)}
.sim-sidebar-item.active{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.2)}

/* Metrics panel */
.metrics-panel{width:280px;border-left:1px solid var(--card-border);overflow-y:auto;padding:14px;background:rgba(15,23,42,.5)}

/* Progress bar */
.progress-bar{height:56px;background:rgba(15,23,42,.9);border-top:1px solid var(--card-border);display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0}
.progress-track{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
.progress-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--purple),var(--green));transition:width .4s ease}

/* Score table */
.score-table{width:100%;border-collapse:collapse;font-size:12px}
.score-table th{padding:10px;text-align:center;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--card-border)}
.score-table th:first-child{text-align:left;padding-left:14px}
.score-table td{padding:8px 10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.03)}
.score-table td:first-child{text-align:left;padding-left:14px;font-family:monospace;font-weight:500;color:var(--t2)}
.score-table tr:hover{background:rgba(255,255,255,.02)}

/* Funnel */
.funnel-stage{display:flex;align-items:center;gap:10px;padding:10px 0}
.funnel-bar{height:32px;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:700;color:#fff;transition:width .6s ease}

/* Insights */
.insight-box{padding:14px 16px;border-radius:12px;margin-bottom:10px}
.insight-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(4px)}
.modal-body{background:var(--bg2);border:1px solid var(--card-border);border-radius:16px;padding:24px;width:min(520px,100%);max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-body input,.modal-body textarea,.modal-body select{background:rgba(255,255,255,.06);border:1.5px solid var(--card-border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--t1);width:100%;transition:border-color .15s}
.modal-body input:focus,.modal-body textarea:focus{outline:none;border-color:var(--purple)}

/* Animations */
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:pulse 1s infinite}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block}

/* Tab panels */
.tab-panel{display:none;flex:1;overflow:hidden}
.tab-panel.active{display:flex;flex-direction:column}
.tab-scroll{flex:1;overflow-y:auto;padding:20px}
