/* ===== SIDEBAR ===== */
#sidebar{width:var(--sidebar-w);background:var(--sidebar-glass);color:var(--sidebar-text);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s;overflow:hidden;z-index:100;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#sidebar.collapsed{width:var(--sidebar-collapsed)}
.sidebar-header{padding:16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);min-height:60px}
.sidebar-header .logo{width:36px;height:36px;border-radius:var(--radius-sm);flex-shrink:0;object-fit:contain}
.sidebar-header .ws-info{overflow:hidden;white-space:nowrap}
.sidebar-header .ws-name{color:#f1f5f9;font-weight:600;font-size:13px}
.sidebar-header .ws-label{font-size:11px;color:var(--sidebar-text)}
.collapsed .ws-info{display:none}
.nav-group{padding:8px}
.nav-group-label{padding:4px 12px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:rgba(148,163,184,.6);font-weight:600;margin-bottom:2px}
.collapsed .nav-group-label{text-align:center;padding:4px}
.collapsed .nav-group-label span{display:none}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;color:var(--sidebar-text);font-size:13px;white-space:nowrap}
.nav-item:hover{background:var(--sidebar-hover);color:#e2e8f0}
.nav-item.active{background:rgba(99,102,241,.15);color:#a5b4fc}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.collapsed .nav-item span{display:none}
.collapsed .nav-item{justify-content:center;padding:8px}
.sidebar-footer{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.collapse-btn{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;color:var(--sidebar-text);font-size:13px;width:100%;border:none;background:none}
.collapse-btn:hover{background:var(--sidebar-hover);color:#e2e8f0}
.collapsed .collapse-btn span{display:none}
.collapsed .collapse-btn{justify-content:center}
.nav-scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.nav-scroll::-webkit-scrollbar{width:4px}
.nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* ===== MAIN LAYOUT ===== */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden}
#header{height:var(--header-h);background:var(--header-glass);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text3)}
.breadcrumb .current{color:var(--text);font-weight:600}
.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:all .15s;position:relative}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:18px;height:18px}
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--card)}
.user-menu-wrapper{position:relative;margin-left:4px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;cursor:pointer}
.user-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);min-width:180px;z-index:200;padding:4px 0}
.user-menu.open{display:block}
.user-menu-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;color:var(--text);cursor:pointer;text-decoration:none;transition:background .1s}
.user-menu-item:hover{background:var(--accent-bg)}
.user-menu-logout{color:var(--red)}
.user-menu-logout:hover{background:rgba(239,68,68,.08)}
#content{flex:1;overflow-y:auto;padding:24px}

/* ===== PAGE TRANSITIONS ===== */
.page{display:none;opacity:0;transform:translateY(8px)}
.page.active{display:block;transition:opacity .3s ease-out,transform .3s ease-out}
.page.visible{opacity:1;transform:translateY(0)}
.page.exiting{opacity:0;transform:translateY(-6px);transition:opacity .2s ease-in,transform .2s ease-in}
.page-title{font-size:22px;font-weight:700;margin-bottom:4px}
.page-subtitle{color:var(--text2);font-size:14px;margin-bottom:24px}

/* ===== GRID ===== */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ===== CARD ===== */
.card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px;box-shadow:var(--glass-shadow);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.card-header{display:flex;align-items:center;justify-content:between;margin-bottom:16px}
.card-title{font-weight:600;font-size:14px}
.metric-card{text-align:left;background-image:var(--gradient-subtle)}
.metric-label{font-size:12px;color:var(--text3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.metric-value{font-size:28px;font-weight:700;line-height:1.2}
.metric-change{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px}
.metric-change.up{color:var(--green)}
.metric-change.down{color:var(--red)}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.badge-signals{background:#dbeafe;color:#1d4ed8}
.badge-voicebot{background:#fae8ff;color:#a21caf}
.badge-both{background:#e0e7ff;color:#4338ca}
.badge-active{background:var(--green-bg);color:var(--green)}
.badge-draft{background:var(--amber-bg);color:var(--amber)}
.badge-error{background:var(--red-bg);color:var(--red)}
.badge-completed{background:var(--green-bg);color:var(--green)}
.badge-warning{background:var(--amber-bg);color:var(--amber)}
.badge-neutral{background:var(--bg);color:var(--text3)}

/* ===== BUTTONS ===== */
.btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent2)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:4px 10px;font-size:12px}

/* ===== TABLES ===== */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);padding:10px 12px;border-bottom:1px solid var(--border);font-weight:600}
td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2)}
tr:hover td{background:rgba(99,102,241,.03)}

/* ===== SEARCH BOX ===== */
.search-box{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;width:100%;max-width:400px}
.search-box input{border:none;background:none;outline:none;flex:1;font-size:13px;color:var(--text);font-family:var(--font)}
.search-box svg{width:16px;height:16px;color:var(--text3)}

/* ===== TABS ===== */
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px}
.tab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ===== PROGRESS BAR ===== */
.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .3s}

/* ===== DONUT CHART ===== */
.donut{width:120px;height:120px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}
.donut-label{font-size:20px;font-weight:700;text-align:center;line-height:1.2}
.donut-label small{display:block;font-size:10px;color:var(--text3);font-weight:400}

/* ===== BAR CHART ===== */
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:8px}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.bar{width:100%;border-radius:4px 4px 0 0;transition:height .3s;min-height:4px}
.bar-label{font-size:10px;color:var(--text3)}

/* ===== SPARKLINE ===== */
.sparkline{width:100%;height:40px}
.sparkline polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sparkline .area{fill:url(#sparkGrad);stroke:none}

/* ===== ACTIVITY ===== */
.activity-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border:none}
.activity-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.activity-text{font-size:13px;color:var(--text2)}
.activity-time{font-size:11px;color:var(--text3);margin-top:2px}

/* ===== PROJECT CARD ===== */
.project-card{cursor:pointer;transition:all .2s}
.project-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.project-icon{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}

/* ===== STATUS DOT ===== */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-dot.green{background:var(--green)}.status-dot.red{background:var(--red)}.status-dot.amber{background:var(--amber)}

/* ===== FORM FIELDS ===== */
.form-field{margin-bottom:16px}
.form-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:14px;font-family:var(--font)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent)}
.form-field textarea{resize:vertical;min-height:80px}
.form-field .field-error{border-color:var(--red)!important}
.form-field .field-success{border-color:var(--green)!important}
.form-field .field-msg{font-size:12px;margin-top:4px}
.form-field .field-msg.error{color:var(--red)}
.form-field .field-msg.success{color:var(--green)}

/* ===== FIELD HELP TEXT ===== */
.field-help{font-size:12px;color:var(--text3);margin-top:4px;line-height:1.4}

/* ===== SECTION INTRO BLOCKS ===== */
.section-intro{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:16px;padding:10px 12px;background:var(--accent-bg);border-radius:var(--radius-sm);border-left:3px solid var(--accent)}
[data-theme="dark"] .section-intro{background:rgba(99,102,241,.08)}

/* ===== CONFIRMATION MODAL ===== */
.confirm-modal-body{text-align:center;padding:8px 0}
.confirm-modal-body .confirm-icon{font-size:40px;margin-bottom:12px}
.confirm-modal-body p{color:var(--text2);font-size:14px;line-height:1.6;margin-bottom:20px}
.confirm-modal-actions{display:flex;gap:8px;justify-content:center}

/* ===== PAGE-LEVEL ADVANCED MODE ===== */
[data-advanced]{display:none}
.advanced-mode-on [data-advanced]{display:block}
.advanced-mode-on tr[data-advanced]{display:table-row}
.advanced-mode-on th[data-advanced],.advanced-mode-on td[data-advanced]{display:table-cell}
.advanced-mode-on .tab[data-advanced]{display:inline-flex}

/* ===== DATE PRESET PILLS ===== */
.date-preset-pills{display:flex;gap:4px;margin-right:8px}
.date-preset-pill{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.date-preset-pill:hover{border-color:var(--accent);color:var(--accent)}
.date-preset-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== STICKY DETAIL PANEL ===== */
.sticky-panel{align-self:start;position:sticky;top:16px;overflow-y:auto}

/* ===== MODALS ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-overlay.open{display:flex}
.modal-content{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--glass-shadow-lg);padding:24px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.modal-content h2{font-size:20px;font-weight:700;margin-bottom:16px}
.slider-group{margin-bottom:16px}
.slider-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.slider-row{display:flex;align-items:center;gap:12px}
.slider-row input[type="range"]{flex:1;accent-color:var(--accent)}
.slider-row .slider-val{min-width:40px;text-align:center;font-weight:600;font-size:14px}

/* ===== STARTUP MODAL ===== */
.startup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1100}
.startup-overlay.open{display:flex}
.startup-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:40px;text-align:center;max-width:480px;width:100%;box-shadow:var(--glass-shadow-lg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.startup-card h2{font-size:24px;font-weight:700;margin-bottom:8px}
.startup-card p{color:var(--text2);margin-bottom:24px}

/* ===== CONTEXT MENU ===== */
.ctx-menu{position:absolute;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);min-width:150px;z-index:500;display:none}
.ctx-menu.open{display:block}
.ctx-menu-item{padding:8px 14px;font-size:13px;cursor:pointer;transition:background .1s;display:flex;align-items:center;gap:8px}
.ctx-menu-item:hover{background:var(--accent-bg)}
.ctx-menu-item.danger{color:var(--red)}
.ctx-menu-item.danger:hover{background:var(--red-bg)}

/* ===== CLICKABLE ROWS ===== */
tr.clickable-row{cursor:pointer}
tr.clickable-row:hover td{background:rgba(99,102,241,.06)}

/* ===== 3-DOT BUTTON ===== */
.dots-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:16px;position:relative;transition:all .15s}
.dots-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ===== PAGINATION ===== */
.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.pagination-info{font-size:13px;color:var(--text2)}
.pagination-pills{display:flex;align-items:center;gap:4px}
.page-pill{min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text2);font-size:13px;cursor:pointer;transition:all .15s;padding:0 8px}
.page-pill:hover{border-color:var(--accent);color:var(--accent)}
.page-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.page-pill[disabled]{opacity:.4;cursor:default;pointer-events:none}
.page-pill.ellipsis{border:none;background:none;cursor:default;pointer-events:none;color:var(--text3)}

/* ===== BATCH ACTIONS BAR ===== */
.batch-bar{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 20px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lg);transition:bottom .3s ease;z-index:200}
.batch-bar.visible{bottom:24px}
.batch-count{font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}
.batch-bar .btn{padding:6px 14px;font-size:12px}
.batch-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:0 4px;line-height:1}
.batch-close:hover{color:var(--text)}

/* ===== NOTIFICATIONS DROPDOWN ===== */
.notif-wrapper{position:relative}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:360px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:300;display:none}
.notif-dropdown.open{display:block}
.notif-dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
.notif-dropdown-header h3{font-size:14px;font-weight:600;margin:0}
.notif-dropdown-header a{font-size:12px}
.notif-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 8px}
.notif-tab{padding:8px 12px;font-size:12px;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.notif-tab:hover{color:var(--text)}
.notif-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.notif-list{max-height:320px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.notif-item:hover{background:var(--accent-bg)}
.notif-item.unread{background:var(--accent-bg)}
.notif-item .notif-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.notif-icon.alert{background:var(--red-bg);color:var(--red)}
.notif-icon.activity{background:var(--green-bg);color:var(--green)}
.notif-icon.system{background:var(--blue-bg);color:var(--blue)}
.notif-item .notif-text{font-size:13px;color:var(--text);line-height:1.4}
.notif-item .notif-time{font-size:11px;color:var(--text3);margin-top:2px}
.notif-dropdown-footer{padding:10px 16px;text-align:center;border-top:1px solid var(--border)}
.notif-dropdown-footer a{font-size:12px}

/* ===== LINE CHART ===== */
.line-chart-card{padding:20px 24px}
.line-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.line-chart-legend{display:flex;gap:16px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.legend-dot{width:8px;height:8px;border-radius:50%}
.line-chart svg{width:100%;display:block}
.chart-grid-line{stroke:var(--border);stroke-width:1}
.chart-label{font-size:10px;fill:var(--text3);font-family:var(--font)}

/* ===== PROMPT CARDS ===== */
.prompt-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:var(--card)}
.prompt-card .prompt-name{font-weight:600;font-size:14px;margin-bottom:4px}
.prompt-card .prompt-type{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;background:var(--accent-bg);color:var(--accent);margin-bottom:8px}
.prompt-card .prompt-desc{font-size:13px;color:var(--text2);margin-bottom:8px}
.prompt-card .prompt-preview{background:var(--bg);border-radius:var(--radius-sm);padding:8px;font-family:monospace;font-size:11px;color:var(--text2);max-height:60px;overflow:hidden;margin-bottom:8px}
.prompt-card .prompt-actions{display:flex;gap:6px}
.prompt-card .prompt-model{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;background:var(--bg);color:var(--text2);border:1px solid var(--border)}
.prompt-card .prompt-lang{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;background:#ecfdf5;color:#059669}
.add-card{border:2px dashed var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);min-height:200px;transition:all .2s}
.add-card:hover{border-color:var(--accent);color:var(--accent)}

/* ===== TOGGLE SWITCH ===== */
.toggle-switch{position:relative;width:40px;height:22px;display:inline-block}
.toggle-switch input{display:none}
.toggle-switch .slider{position:absolute;inset:0;background:var(--border);border-radius:11px;cursor:pointer;transition:all .2s}
.toggle-switch .slider::before{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:all .2s}
.toggle-switch input:checked+.slider{background:var(--accent)}
.toggle-switch input:checked+.slider::before{left:20px}

/* ===== SKELETON LOADING ===== */
@keyframes skel-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel-overlay{position:absolute;inset:0;z-index:10;background:var(--bg);border-radius:var(--radius);transition:opacity .3s;pointer-events:none;padding:20px;overflow:hidden}
.skel-overlay.fade-out{opacity:0}
.skel{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--border) 25%,transparent 50%,var(--border) 75%);background-size:200% 100%;animation:skel-shimmer 1.5s infinite}
.skel-title{height:22px;width:40%;margin-bottom:12px}.skel-subtitle{height:14px;width:25%;margin-bottom:20px}
.skel-card{height:100px;border-radius:var(--radius)}.skel-metric{height:80px;border-radius:var(--radius)}
.skel-row{height:40px;margin-bottom:8px;border-radius:6px}.skel-canvas{height:200px;border-radius:var(--radius)}
.skel-grid{display:grid;gap:16px}.skel-grid-4{grid-template-columns:repeat(4,1fr)}.skel-grid-3{grid-template-columns:repeat(3,1fr)}.skel-grid-2{grid-template-columns:repeat(2,1fr)}

/* ===== STAGGER ENTRANCE ===== */
@keyframes entrance-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.stagger-in{animation:entrance-fade-up .35s ease-out both;animation-delay:calc(var(--stagger-i,0) * 50ms)}

/* ===== HOVER MICRO-INTERACTIONS ===== */
.grid>.card:hover,.project-card:hover{box-shadow:var(--glass-shadow-lg),var(--glass-glow);transform:translateY(-2px)}
.btn:hover{transform:scale(1.02)}.btn:active{transform:scale(.98)}
.btn-primary:hover{box-shadow:0 4px 16px rgba(99,102,241,.3)}
tr.clickable-row:hover td{background:rgba(99,102,241,.06);box-shadow:inset 3px 0 0 var(--accent)}
tr.clickable-row:hover td:first-child{border-radius:4px 0 0 4px}
.nav-item{position:relative}
.nav-item::before{content:'';position:absolute;left:0;top:50%;width:3px;height:0;background:var(--sidebar-active);border-radius:0 2px 2px 0;transition:height .2s,top .2s;transform:translateY(-50%)}
.nav-item:hover::before,.nav-item.active::before{height:60%;top:50%}
.badge{transition:transform .15s}.badge:hover{transform:scale(1.08) translateY(-1px)}
.tab{transition:all .15s}.tab:hover{background:rgba(99,102,241,.06);border-radius:6px 6px 0 0}

/* ===== RESPONSIVE ===== */
@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}
@media(max-width:768px){
  #sidebar{position:fixed;height:100%;left:0;top:0;transform:translateX(-100%);z-index:200;transition:transform .25s ease}
  #sidebar.mobile-open{transform:translateX(0)}
  .grid-4{grid-template-columns:1fr}
  #main{overflow-x:hidden;overflow-y:visible;min-height:0;min-width:0}
  #content{overflow-x:hidden;overflow-y:visible;padding:16px}
  #header{position:sticky;top:0;z-index:150;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
  #header{padding:0 12px;gap:8px}
  .header-actions .search-box{display:none}
  .breadcrumb{font-size:12px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .notif-dropdown{width:calc(100vw - 24px);right:-60px}
  .page{min-width:0;max-width:100%;overflow-x:hidden}
  .card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:600px}
}

/* ===== HAMBURGER MENU + SIDEBAR OVERLAY ===== */
.hamburger-btn{display:none;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:all .15s;flex-shrink:0}
.hamburger-btn:hover{border-color:var(--accent);color:var(--accent)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;transition:opacity .25s}
@media(max-width:768px){
  .hamburger-btn{display:flex}
  .sidebar-overlay{display:block;pointer-events:none}
  .sidebar-overlay.visible{pointer-events:auto;opacity:1}
}

/* ===== SMALL PHONE (480px) ===== */
@media(max-width:480px){
  .grid-2{grid-template-columns:1fr}
  #content{padding:12px}
  .card{padding:14px}
  .metric-value{font-size:22px}
  .btn{padding:6px 12px;font-size:12px}
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;white-space:nowrap}
  .tab{padding:8px 12px;font-size:12px;flex-shrink:0}
  .modal-content{margin:12px;padding:16px;max-width:calc(100vw - 24px)}
  .batch-bar{left:12px;right:12px;transform:none;width:auto}
  .batch-bar.visible{bottom:12px}
}

/* ===== DARK MODE — COMPONENT OVERRIDES ===== */
[data-theme="dark"] .page-pill{background:var(--card);border-color:var(--border);color:var(--text2)}
[data-theme="dark"] .page-pill.active{background:var(--accent);color:#fff}
[data-theme="dark"] .batch-bar{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .notif-dropdown{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .notif-item.unread{background:rgba(99,102,241,.1)}
[data-theme="dark"] .prompt-card .prompt-lang{background:#064e3b;color:#6ee7b7}