*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter',sans-serif;background:#0f1117;color:#e2e8f0;font-size:14px}
a{text-decoration:none;color:inherit}button{cursor:pointer;font-family:inherit}
.hidden{display:none!important}

/* LOGIN */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f1117,#1a1d2e,#0f1117);position:relative}
.login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 600px 400px at 20% 50%,rgba(99,102,241,.12),transparent 70%),radial-gradient(ellipse 500px 400px at 80% 30%,rgba(16,185,129,.08),transparent 70%);pointer-events:none}
.login-card{background:#1e2130;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:40px 36px;width:100%;max-width:380px;box-shadow:0 24px 64px rgba(0,0,0,.5);position:relative;z-index:1}
.login-logo{text-align:center;margin-bottom:32px}.logo-icon{font-size:40px;display:block;margin-bottom:12px}
.login-logo h1{font-size:22px;font-weight:800;color:#f1f5f9;margin-bottom:4px}.login-logo p{font-size:13px;color:#64748b}
.field-group{margin-bottom:16px}.field-group label{display:block;font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.field-group input{width:100%;background:#0f1117;border:1.5px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 14px;color:#f1f5f9;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s}
.field-group input:focus{border-color:#6366f1}
.login-error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#f87171;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px}
.btn-login{width:100%;padding:13px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-size:15px;font-weight:700;border:none;border-radius:10px;transition:opacity .2s,transform .15s;box-shadow:0 4px 16px rgba(99,102,241,.35)}
.btn-login:hover{opacity:.9;transform:translateY(-1px)}

/* LAYOUT */
.dashboard{display:flex;height:100vh;overflow:hidden}
.sidebar{width:230px;flex-shrink:0;background:#1a1d2e;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand-icon{font-size:24px;flex-shrink:0}.sidebar-brand strong{display:block;font-size:14px;font-weight:700;color:#f1f5f9}.sidebar-brand small{font-size:11px;color:#64748b}
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:500;color:#94a3b8;transition:all .18s}
.nav-item:hover{background:rgba(255,255,255,.06);color:#e2e8f0}
.nav-item.active{background:rgba(99,102,241,.15);color:#818cf8;font-weight:600}
.sidebar-footer{padding:16px 12px;border-top:1px solid rgba(255,255,255,.06)}
.btn-logout{width:100%;padding:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#94a3b8;font-size:13px;transition:all .2s}
.btn-logout:hover{background:rgba(255,255,255,.1);color:#e2e8f0}

/* MAIN */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid rgba(255,255,255,.06);background:#1a1d2e;flex-shrink:0}
.topbar-left h2{font-size:18px;font-weight:700;color:#f1f5f9;margin-bottom:2px}.last-update{font-size:11px;color:#475569}
.btn-refresh{padding:8px 16px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:8px;color:#818cf8;font-size:13px;font-weight:600;transition:all .2s}
.btn-refresh:hover{background:rgba(99,102,241,.25)}

/* VIEWS */
.view{flex:1;overflow-y:auto;padding:24px 28px}.view.hidden{display:none}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.kpi-card{background:#1e2130;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;display:flex;align-items:center;gap:14px;transition:border-color .2s}
.kpi-card:hover{border-color:rgba(255,255,255,.14)}
.kpi-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.kpi-icon.blue{background:rgba(59,130,246,.15)}.kpi-icon.green{background:rgba(16,185,129,.15)}.kpi-icon.purple{background:rgba(139,92,246,.15)}.kpi-icon.orange{background:rgba(249,115,22,.15)}
.kpi-value{font-size:26px;font-weight:800;color:#f1f5f9;line-height:1.1;display:block}.kpi-label{font-size:12px;color:#64748b;display:block}
.kpi-info{display:flex;flex-direction:column;gap:2px}

/* SECTION */
.section-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.section-header h3{font-size:15px;font-weight:700;color:#e2e8f0}

/* QUIZ CARDS */
.quiz-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.quiz-overview-card{background:#1e2130;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:20px;transition:border-color .2s,transform .15s}
.quiz-overview-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-2px)}
.quiz-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.quiz-card-title{font-size:14px;font-weight:700;color:#f1f5f9;margin-bottom:4px}
.quiz-card-id{font-size:11px;color:#475569;font-family:monospace}
.quiz-card-status{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap}
.status-active{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.2)}
.quiz-mini-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.mini-stat{text-align:center;padding:10px 8px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.05)}
.mini-stat-val{display:block;font-size:18px;font-weight:800;color:#f1f5f9}
.mini-stat-label{font-size:10px;color:#64748b;margin-top:2px;display:block}

/* FUNNEL */
.funnel-container{background:#1e2130;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:24px}
.funnel-title{font-size:16px;font-weight:700;color:#f1f5f9;margin-bottom:24px}
.funnel-step{margin-bottom:14px}
.funnel-step-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.funnel-step-name{font-size:13px;color:#cbd5e1;font-weight:500}
.funnel-step-stats{display:flex;gap:12px;align-items:center}
.funnel-step-count{font-size:13px;font-weight:700;color:#f1f5f9}
.funnel-step-pct{font-size:12px;color:#94a3b8}
.funnel-step-drop{font-size:11px;color:#f87171}
.funnel-bar-track{height:10px;background:rgba(255,255,255,.05);border-radius:5px;overflow:hidden}
.funnel-bar-fill{height:100%;border-radius:5px;transition:width .8s ease}
.funnel-divider{text-align:center;font-size:11px;color:#475569;margin:4px 0 12px;display:flex;align-items:center;gap:8px}
.funnel-divider::before,.funnel-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.05)}

/* TABLE */
.table-wrapper{background:#1e2130;border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden}
.sessions-table{width:100%;border-collapse:collapse}
.sessions-table th{text-align:left;padding:13px 16px;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.sessions-table td{padding:12px 16px;font-size:13px;color:#cbd5e1;border-bottom:1px solid rgba(255,255,255,.04)}
.sessions-table tr:last-child td{border-bottom:none}
.sessions-table tr:hover td{background:rgba(255,255,255,.02)}
.empty-row{text-align:center;color:#475569!important;padding:32px!important}
.status-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.s-complete{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.2)}
.s-abandoned{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.2)}
.s-started{background:rgba(249,115,22,.12);color:#fb923c;border:1px solid rgba(249,115,22,.2)}
.s-view{background:rgba(99,102,241,.12);color:#818cf8;border:1px solid rgba(99,102,241,.2)}

/* FORMS */
.add-quiz-form{background:#1e2130;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn-add{padding:12px 24px;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-size:14px;font-weight:700;border:none;border-radius:10px;margin-top:8px;transition:opacity .2s;box-shadow:0 4px 14px rgba(22,163,74,.3)}
.btn-add:hover{opacity:.9}
.btn-del{padding:5px 12px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#f87171;font-size:12px;transition:all .2s}
.btn-del:hover{background:rgba(239,68,68,.25)}
.form-msg{padding:10px 14px;border-radius:8px;font-size:13px;margin-top:12px}
.form-msg.ok{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.3)}
.form-msg.err{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3)}

/* SELECT */
.select-quiz{background:#0f1117;border:1.5px solid rgba(255,255,255,.1);border-radius:8px;color:#e2e8f0;padding:7px 12px;font-size:13px;font-family:inherit;outline:none;cursor:pointer}
.select-quiz:focus{border-color:#6366f1}

/* EMPTY */
.empty-state{text-align:center;padding:48px 24px;color:#475569}
.empty-state span{font-size:40px;display:block;margin-bottom:12px}
.empty-state p{font-size:14px}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}

/* RESPONSIVE */
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr}}
@media(max-width:640px){.dashboard{flex-direction:column}.sidebar{width:100%;height:auto}}