/* ============================================================
   APPRISE CYBER LMS — style.css
   ============================================================ */
:root {
  --bg-base:      #06080f;
  --bg-surface:   #0c1020;
  --bg-card:      #101828;
  --bg-elevated:  #162032;
  --bg-hover:     #1c2940;
  --border:       #1e2d45;
  --border-glow:  #00c8ff33;
  --cyan:         #00c8ff;
  --cyan-dim:     #00c8ff44;
  --cyan-dark:    #007aad;
  --blue:         #3b82f6;
  --purple:       #7c3aed;
  --green:        #00e676;
  --green-dim:    #00e67622;
  --orange:       #ff8c00;
  --red:          #ff2d55;
  --red-dim:      #ff2d5522;
  --yellow:       #ffd600;
  --text-primary:   #e8f0fe;
  --text-secondary: #8ba4be;
  --text-muted:     #4a6480;
  --text-accent:    #00c8ff;
  --font-head: 'Rajdhani', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-body: 'Nunito', sans-serif;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow:    0 4px 24px #00000088;
  --shadow-glow: 0 0 24px #00c8ff22;
  --transition:  0.22s cubic-bezier(0.4,0,0.2,1);
  --sidebar-w:   256px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bg-base); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; }
a { color: var(--cyan); text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); }
input, select, textarea { font-family: var(--font-body); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-dark); }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.w-full { width: 100%; }
.text-sm{font-size:.82rem}.text-xs{font-size:.72rem}.text-lg{font-size:1.1rem}
.font-mono{font-family:var(--font-mono)}.text-center{text-align:center}.bold{font-weight:700}
.upper{text-transform:uppercase;letter-spacing:.08em}
.text-cyan{color:var(--cyan)}.text-green{color:var(--green)}.text-red{color:var(--red)}
.text-orange{color:var(--orange)}.text-yellow{color:var(--yellow)}
.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2,1fr); gap: 16px; }
.grid-3 { grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-4 { grid-template-columns: repeat(4,1fr); gap: 16px; }
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.req { color: var(--red); margin-left: 2px; }
/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:600;font-family:var(--font-mono);letter-spacing:.04em;white-space:nowrap;}
.badge-cyan{background:#00c8ff18;color:var(--cyan);border:1px solid var(--cyan-dim)}
.badge-green{background:#00e67618;color:var(--green);border:1px solid #00e67633}
.badge-red{background:#ff2d5518;color:var(--red);border:1px solid #ff2d5533}
.badge-orange{background:#ff8c0018;color:var(--orange);border:1px solid #ff8c0033}
.badge-purple{background:#7c3aed18;color:#a78bfa;border:1px solid #7c3aed44}
.badge-blue{background:#3b82f618;color:#93c5fd;border:1px solid #3b82f633}
.badge-yellow{background:#ffd60018;color:var(--yellow);border:1px solid #ffd60033}
.badge-gray{background:#1e2d45;color:var(--text-secondary);border:1px solid var(--border)}
/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}
.card-hover:hover{border-color:var(--cyan-dim);box-shadow:var(--shadow-glow);transition:var(--transition)}
/* Stat Cards */
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;position:relative;overflow:hidden;transition:var(--transition)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));opacity:0;transition:opacity var(--transition)}
.stat-card:hover::before{opacity:1}
.stat-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow)}
.stat-icon{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:12px}
.stat-value{font-family:var(--font-head);font-size:2rem;font-weight:700;color:var(--text-primary);line-height:1}
.stat-label{font-size:.78rem;color:var(--text-secondary);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.stat-change{font-size:.75rem;margin-top:8px;display:flex;align-items:center;gap:4px}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:var(--radius);font-size:.85rem;font-weight:600;border:none;transition:var(--transition);white-space:nowrap;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#000;box-shadow:0 0 16px var(--cyan-dim)}
.btn-primary:hover{box-shadow:0 0 28px var(--cyan-dim);transform:translateY(-1px);filter:brightness(1.1)}
.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--cyan-dim);background:var(--bg-hover)}
.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid #ff2d5533}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-success{background:var(--green-dim);color:var(--green);border:1px solid #00e67633}
.btn-success:hover{background:var(--green);color:#000}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{color:var(--text-primary);background:var(--bg-hover)}
.btn-sm{padding:5px 12px;font-size:.78rem}
.btn-icon{padding:8px;border-radius:var(--radius);background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);transition:var(--transition);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{color:var(--cyan);border-color:var(--cyan-dim)}
/* Forms */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:.78rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.form-control{width:100%;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:.88rem;padding:10px 14px;transition:var(--transition);outline:none;font-family:var(--font-body)}
.form-control:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim)}
.form-control::placeholder{color:var(--text-muted)}
.form-control.error{border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim)}
.form-error{font-size:.75rem;color:var(--red);margin-top:4px;display:flex;align-items:center;gap:4px}
.form-hint{font-size:.75rem;color:var(--text-muted);margin-top:4px}
select.form-control{cursor:pointer}
select.form-control option{background:var(--bg-card)}
textarea.form-control{min-height:90px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.switch{position:relative;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;transition:var(--transition)}
.switch-slider::after{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);width:15px;height:15px;background:var(--text-muted);border-radius:50%;transition:var(--transition)}
.switch input:checked+.switch-slider{background:var(--cyan-dim);border-color:var(--cyan)}
.switch input:checked+.switch-slider::after{left:calc(100% - 18px);background:var(--cyan)}
.switch-group{display:flex;align-items:center;gap:10px}
.checkbox-group{display:flex;align-items:center;gap:8px;cursor:pointer}
.custom-check{width:16px;height:16px;border:2px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;background:var(--bg-base);flex-shrink:0;transition:var(--transition)}
/* Tables */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--bg-elevated);color:var(--text-secondary);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:12px 16px;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border);font-family:var(--font-head)}
tbody td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--text-primary);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg-hover)}
tbody tr{transition:var(--transition)}
/* Tabs */
.tabs{display:flex;gap:2px;background:var(--bg-elevated);border-radius:var(--radius);padding:4px;width:fit-content;flex-wrap:wrap}
.tab-btn{padding:7px 16px;border-radius:6px;font-size:.82rem;font-weight:600;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition);white-space:nowrap;font-family:var(--font-body)}
.tab-btn.active{background:var(--bg-card);color:var(--cyan);box-shadow:0 2px 8px #00000044}
.tab-btn:hover:not(.active){color:var(--text-primary)}
.tab-content{display:none}.tab-content.active{display:block}
/* Modals */
.modal-overlay{position:fixed;inset:0;background:#00000099;backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:640px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 24px 80px #00000088;animation:slideUp .25s cubic-bezier(.34,1.56,.64,1)}
.modal-lg{max-width:800px}.modal-xl{max-width:960px}
@keyframes slideUp{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg-card);z-index:10}
.modal-title{font-family:var(--font-head);font-size:1.25rem;font-weight:700;color:var(--text-primary)}
.modal-close{width:32px;height:32px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);cursor:pointer}
.modal-close:hover{color:var(--red);border-color:var(--red)}
.modal-body{padding:20px 24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--bg-card)}
/* Toasts */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;display:flex;align-items:center;gap:10px;font-size:.85rem;box-shadow:var(--shadow);animation:toastIn .3s ease;pointer-events:all;min-width:260px;max-width:380px}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.toast.success{border-color:#00e67633}.toast.error{border-color:#ff2d5533}
.toast.warning{border-color:#ff8c0033}.toast.info{border-color:var(--cyan-dim)}
/* Sidebar */
.sidebar{width:var(--sidebar-w);min-height:100vh;background:var(--bg-surface);border-right:1px solid var(--border);position:fixed;left:0;top:0;bottom:0;display:flex;flex-direction:column;z-index:200;transition:transform var(--transition);overflow-y:auto}
.sidebar-brand{padding:20px 20px 16px;border-bottom:1px solid var(--border)}
.brand-name{font-family:var(--font-head);font-size:1.3rem;font-weight:700;color:var(--text-primary);line-height:1}
.brand-name span{color:var(--cyan)}
.brand-sub{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;margin-top:2px;font-family:var(--font-mono)}
.sidebar-role{padding:12px 20px;border-bottom:1px solid var(--border)}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:700;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.role-superadmin{background:#7c3aed18;color:#a78bfa;border:1px solid #7c3aed44}
.role-trainer{background:#00c8ff18;color:var(--cyan);border:1px solid var(--cyan-dim)}
.role-student{background:#00e67618;color:var(--green);border:1px solid #00e67633}
.sidebar-nav{flex:1;padding:12px 0}
.nav-section{padding:6px 20px 4px;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-weight:700;font-family:var(--font-mono)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);font-size:.88rem;font-weight:500;border-left:3px solid transparent;margin:1px 0}
.nav-item i{width:18px;text-align:center;font-size:.9rem}
.nav-item:hover{color:var(--text-primary);background:var(--bg-hover)}
.nav-item.active{color:var(--cyan);background:var(--bg-hover);border-left-color:var(--cyan)}
.nav-item .nav-badge{margin-left:auto;background:var(--cyan);color:#000;border-radius:999px;font-size:.65rem;padding:1px 7px;font-weight:700;font-family:var(--font-mono)}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border)}
.sidebar-user{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#000;flex-shrink:0}
.user-name{font-size:.85rem;font-weight:600;color:var(--text-primary)}
.user-email{font-size:.7rem;color:var(--text-muted)}
.logout-btn{margin-top:12px;width:100%;background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius);padding:7px;font-size:.8rem;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:var(--transition);font-family:var(--font-body)}
.logout-btn:hover{border-color:var(--red);color:var(--red)}
/* Topbar */
.topbar{position:fixed;top:0;left:var(--sidebar-w);right:0;height:60px;background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:100}
.topbar-left{display:flex;align-items:center;gap:16px}
.topbar-title{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--text-primary)}
.topbar-right{display:flex;align-items:center;gap:12px}
/* Main */
.main-content{padding:24px;min-height:calc(100vh - 60px);margin-top:60px}
.page-section{display:none}.page-section.active{display:block}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-header h1{font-family:var(--font-head);font-size:1.7rem;font-weight:700;color:var(--text-primary);line-height:1.1}
.page-header p{font-size:.85rem;color:var(--text-secondary);margin-top:4px}
.page-header-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Search bar */
.search-bar{display:flex;align-items:center;gap:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;min-width:220px;transition:var(--transition)}
.search-bar:focus-within{border-color:var(--cyan)}
.search-bar i{color:var(--text-muted);font-size:.85rem}
.search-bar input{background:none;border:none;outline:none;color:var(--text-primary);font-size:.85rem;width:100%;font-family:var(--font-body)}
.search-bar input::placeholder{color:var(--text-muted)}
/* Progress bars */
.progress-bar{height:6px;background:var(--bg-elevated);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .5s ease}
.progress-fill.green{background:linear-gradient(90deg,var(--green),#00b050)}
.progress-fill.orange{background:linear-gradient(90deg,var(--orange),#ff5500)}
.progress-fill.red{background:linear-gradient(90deg,var(--red),#c20030)}
/* Pipeline */
.pipeline{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.pipeline-col{min-width:220px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px}
.pipeline-col-title{font-family:var(--font-head);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;color:var(--text-secondary);display:flex;align-items:center;justify-content:space-between}
.pipeline-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:8px;cursor:pointer;transition:var(--transition)}
.pipeline-card:hover{border-color:var(--cyan-dim)}
.pipeline-card-name{font-size:.85rem;font-weight:600;margin-bottom:4px}
.pipeline-card-meta{font-size:.75rem;color:var(--text-muted)}
/* Resource items */
.resource-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;transition:var(--transition)}
.resource-item:hover{border-color:var(--cyan-dim)}
.resource-icon{width:36px;height:36px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.resource-icon.link{background:#3b82f618;color:#93c5fd}
.resource-icon.pdf{background:#ff2d5518;color:var(--red)}
.resource-icon.tool{background:#7c3aed18;color:#a78bfa}
.resource-icon.video{background:var(--cyan-dim);color:var(--cyan)}
.resource-body{flex:1}
.resource-title{font-size:.88rem;font-weight:600}
.resource-meta{font-size:.72rem;color:var(--text-muted)}
/* Leaderboard */
.leaderboard-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius);background:var(--bg-elevated);margin-bottom:6px;border:1px solid var(--border);transition:var(--transition)}
.leaderboard-row:hover{border-color:var(--cyan-dim)}
.lb-rank{width:28px;height:28px;border-radius:50%;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--text-muted);flex-shrink:0}
.lb-rank.gold{background:#ffd60022;color:var(--yellow);border:1px solid #ffd60044}
.lb-rank.silver{background:#94a3b822;color:#94a3b8;border:1px solid #94a3b844}
.lb-rank.bronze{background:#cd7c2a22;color:#cd7c2a;border:1px solid #cd7c2a44}
.lb-name{flex:1;font-size:.88rem;font-weight:600}
.lb-score{font-family:var(--font-mono);font-size:.88rem;color:var(--cyan)}
.lb-time{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted)}
.internship-tag{font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:999px;background:#00e67618;color:var(--green);border:1px solid #00e67644;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
/* Schedule items */
.schedule-item{display:flex;gap:14px;padding:14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;border-left:3px solid var(--cyan)}
.schedule-time{font-family:var(--font-mono);font-size:.78rem;color:var(--cyan);min-width:100px}
.schedule-title{font-size:.88rem;font-weight:600}
.schedule-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px}
/* Attendance marks */
.attend-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.attend-row:last-child{border-bottom:none}
.attend-name{flex:1;font-size:.88rem}
.mark-btn{width:32px;height:32px;border-radius:var(--radius);font-size:.75rem;font-weight:700;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono)}
.mark-btn.P{background:var(--green-dim);color:var(--green);border-color:#00e67633}
.mark-btn.A{background:var(--red-dim);color:var(--red);border-color:#ff2d5533}
.mark-btn.L{background:#ff8c0018;color:var(--orange);border-color:#ff8c0033}
.mark-btn.active{transform:scale(1.1)}
/* Misc */
.divider{height:1px;background:var(--border);margin:20px 0}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex-shrink:0;box-shadow:0 0 6px var(--cyan)}
.protected-banner{background:#00c8ff08;border:1px solid var(--cyan-dim);border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--text-secondary);margin-bottom:16px}
.protected-banner i{color:var(--cyan)}
.step-bar{display:flex;gap:0;margin-bottom:24px}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.step::before{content:'';position:absolute;top:14px;right:-50%;width:100%;height:2px;background:var(--border);z-index:0}
.step:last-child::before{display:none}
.step-circle{width:28px;height:28px;border-radius:50%;background:var(--bg-elevated);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;font-family:var(--font-mono);position:relative;z-index:1;color:var(--text-muted)}
.step.done .step-circle{background:var(--green-dim);border-color:var(--green);color:var(--green)}
.step.active .step-circle{background:var(--cyan-dim);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px var(--cyan-dim)}
.step-label{font-size:.68rem;color:var(--text-muted);margin-top:5px;text-align:center}
.step.active .step-label{color:var(--cyan)}
.log-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.log-item:last-child{border-bottom:none}
.log-time{font-family:var(--font-mono);color:var(--text-muted);font-size:.72rem;min-width:80px}
.log-level{font-family:var(--font-mono);font-size:.7rem;font-weight:700;min-width:50px}
.log-level.info{color:var(--cyan)}.log-level.warn{color:var(--orange)}.log-level.error{color:var(--red)}
.loading-state{display:flex;align-items:center;justify-content:center;padding:48px;color:var(--text-muted)}
.loading-state i{font-size:1.5rem;color:var(--cyan);margin-right:12px}
.empty-state{text-align:center;padding:48px;color:var(--text-muted)}
.empty-state i{font-size:2rem;margin-bottom:12px;display:block;opacity:.4}
/* Menu toggle (mobile) */
.menu-toggle{display:none;width:36px;height:36px;border-radius:var(--radius);background:var(--bg-elevated);border:1px solid var(--border);align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary)}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0!important}
  .topbar{left:0!important}
  .menu-toggle{display:flex}
  #appShell > div{margin-left:0!important}
}