:root{--primary:#2A75DF;--primary-hover:#1A5FB4;--foreground:#1E293B;--foreground-secondary:#334155;--foreground-muted:#475569;--muted:#64748B;--muted-light:#94A3B8;--border:rgba(30,41,59,0.1);--border-subtle:rgba(30,41,59,0.06);--border-input:#E2E8F0;--ring:rgba(42,117,223,0.3);--bg-page:#F0F4F8;--bg-card:#fff;--bg-muted:#F1F5F9;--bg-subtle:#F8FAFC;--bg-input:#FAFBFC;--shadow-xs:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--radius-sm:10px;--radius-md:12px;--radius-lg:14px;--radius-xl:18px;--radius-pill:30px;--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;--font-mono:'SFMono-Regular','Menlo','Monaco','Consolas',monospace;--sidebar-bg:#0F1F3A;--sidebar-bg-dark:#0A1828;--sidebar-text:#DDE8F6;--sidebar-heading:#9FC0E8;--sidebar-text-muted:#7FA3CC;--sidebar-accent:#5A8BC0;--success:#93BD31;--danger:#EF4444;--warning:#FF6620;--rate-1:#801E1E;--rate-2:#C12710;--rate-3:#EF4343;--rate-4:#F97415;--rate-5:#F59F0A;--rate-6:#CB9A06;--rate-7:#A4BA17;--rate-8:#6DA50D;--rate-9:#16A249;--rate-10:#047756;--overlay:rgba(0,0,0,0.1);--overlay-blur:blur(4px);color-scheme:light dark}
*{box-sizing:border-box;margin:0;padding:0}html{overflow-x:clip}html{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,0.28) transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.28);border:2px solid transparent;background-clip:padding-box;border-radius:999px;transition:background 0.15s}*::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,0.55);background-clip:padding-box}*::-webkit-scrollbar-corner{background:transparent}body{font-family:var(--font-sans);background:var(--bg-page);color:var(--foreground);display:flex;min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;touch-action:manipulation}.nav-progress-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--primary);box-shadow:0 0 8px rgba(42,117,223,0.6),0 0 4px rgba(42,117,223,0.4);z-index:99999;pointer-events:none;opacity:0;transition:width 0.4s ease-out,opacity 0.25s ease-out}.nav-progress-bar.is-active{opacity:1}.sat-tier-bar{position:relative;display:inline-block;width:140px;height:8px;border-radius:4px;vertical-align:middle;background:var(--bg-muted)}.sat-tier-bar-fill{position:absolute;inset:0;border-radius:4px}.sat-tier-marker{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--foreground);border-radius:1px;box-shadow:0 0 0 1px var(--bg-card)}.sat-tier-tick{position:absolute;top:-2px;bottom:-2px;width:1px;margin-left:-0.5px;background:rgba(0,0,0,0.45);opacity:0;transition:opacity 0.15s ease-out;pointer-events:none}.sat-tier-tick::after{content:attr(data-label);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-size:9px;font-weight:600;color:var(--muted-light);white-space:nowrap}.sat-tier-bar:hover .sat-tier-tick{opacity:1}.sat-tier-bound{position:absolute;top:100%;margin-top:6px;font-size:9px;font-weight:600;color:var(--muted-light);white-space:nowrap;opacity:0;transition:opacity 0.15s ease-out;pointer-events:none}.sat-tier-bound-left{left:0}.sat-tier-bound-right{right:0}.sat-tier-bar:hover .sat-tier-bound{opacity:1}.sidebar{width:240px;height:100vh;background:var(--sidebar-bg);padding:0;position:fixed;left:0;top:0;overflow-y:auto;z-index:100;display:flex;flex-direction:column}.sidebar-logo{padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,0.08);position:sticky;top:0;background:var(--sidebar-bg);z-index:2}.sidebar-logo-img{line-height:0}.sidebar-logo-img svg{width:110px;height:auto;display:block}.sidebar-logo-sub{color:var(--sidebar-text-muted);font-size:11px;margin-top:6px}.sidebar-section{padding:20px 20px 6px;color:var(--sidebar-accent);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em}.nav-link{display:flex;align-items:center;gap:10px;padding:9px 20px;color:var(--sidebar-text);text-decoration:none;font-size:14px;font-weight:500;line-height:1.35;border-left:3px solid transparent;transition:background 0.15s,color 0.15s,border-color 0.15s}.nav-link .nav-icon{flex:0 0 18px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-style:normal}.nav-link .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-link:hover{background:rgba(255,255,255,0.07);color:#fff}.nav-link.active{background:linear-gradient(90deg,rgba(42,117,223,0.40),rgba(42,117,223,0.12));color:#fff;border-left-color:#4E97FF;font-weight:700}.nav-link-overview{margin-bottom:4px;font-size:14.5px;font-weight:700;color:#fff}.sidebar-section-title{padding:18px 20px 6px;color:#E2EEFA;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em}.sidebar-section-divider{height:1px;background:rgba(255,255,255,0.08);margin:6px 16px}.sidebar-section-divider:last-child{display:none}.sidebar-group{border-bottom:none}.sidebar-group + .sidebar-group{border-top:1px solid rgba(255,255,255,0.07)}.sidebar-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 20px 8px;color:var(--sidebar-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;background:none;border:none;cursor:pointer;transition:color 0.15s}.sidebar-group-toggle:hover{color:#fff}.sidebar-group-chevron{font-size:8px;opacity:0.65;transition:transform 0.2s}.sidebar-group.collapsed .sidebar-group-chevron{transform:rotate(-90deg)}.sidebar-group.collapsed .sidebar-group-items{display:none}.main-content{margin-left:240px;flex:1;min-height:100vh;min-width:0;overflow-x:clip}.page-header{background:var(--bg-card);padding:16px 28px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px;position:sticky!important;top:0!important;z-index:50;box-shadow:var(--shadow-xs)}.page-title{font-size:18px;font-weight:700;color:var(--foreground)}.page-subtitle{font-size:12px;color:var(--muted-light);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.dashboard-tag{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);background:#EFF6FF;color:var(--primary);font-size:10px;font-weight:600;letter-spacing:0.02em}.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}.filter-period-gran{display:contents}.filter-select-mobile{display:none}.filter-tz-group{display:flex;gap:10px;align-items:center}.filters-extra{display:contents}.page-info-btn{background:var(--bg-subtle);border:1px solid var(--border);color:var(--muted);border-radius:50%;cursor:pointer;width:20px;height:20px;line-height:1;padding:0;margin-left:8px;font-size:12px;font-weight:700;vertical-align:middle}.page-info-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.page-info-table{width:100%;border-collapse:collapse;font-size:13px}.page-info-table td{padding:7px 10px;border-bottom:1px solid var(--border-subtle);vertical-align:top}.page-info-table .pi-term{font-weight:600;color:var(--foreground);white-space:nowrap;width:190px}.page-info-group td{background:var(--bg-subtle);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);padding:6px 10px}.chart-collapse-btn{background:var(--bg-subtle);border:1px solid var(--border);color:var(--muted);border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;padding:3px 10px;margin-right:6px;text-transform:uppercase;letter-spacing:0.04em}.chart-collapse-btn:hover{background:var(--bg-card);color:var(--foreground)}.chart-card-collapsible.collapsed .chart-wrap,.chart-card-collapsible.collapsed .chart-meta{display:none}.chart-card-collapsible.collapsed .chart-header{margin-bottom:0}.filter-label{font-size:12px;color:var(--muted);font-weight:500}.filter-group{display:flex;gap:2px;background:var(--bg-muted);border-radius:var(--radius-lg);padding:3px}.filter-btn{padding:5px 11px;border:none;background:transparent;border-radius:var(--radius-md);font-size:12px;color:var(--muted);cursor:pointer;transition:all 0.15s;font-weight:500;white-space:nowrap}.filter-btn:hover{color:var(--foreground)}.filter-btn.active{background:var(--bg-card);color:var(--primary);font-weight:600;box-shadow:var(--shadow-xs)}.filter-divider{width:1px;height:24px;background:var(--border);align-self:center;margin:0 2px}.date-inputs{display:flex;gap:6px;align-items:center}.date-input{padding:5px 8px;border:1px solid var(--border-input);border-radius:var(--radius-md);font-size:12px;color:var(--foreground);background:var(--bg-card);outline:none;box-shadow:var(--shadow-xs)}.date-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}.apply-btn{padding:5px 14px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:12px;cursor:pointer;font-weight:600;transition:background 0.15s}.apply-btn:hover{background:var(--primary-hover)}.tz-select{padding:5px 8px;border:1px solid var(--border-input);border-radius:var(--radius-md);font-size:12px;color:var(--foreground);background:var(--bg-card);outline:none;cursor:pointer;max-width:200px;box-shadow:var(--shadow-xs)}.tz-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}input.tz-select{cursor:text;width:132px}input.tz-select::placeholder{color:var(--muted-light)}.chart-meta{font-size:10.5px;color:var(--muted-light);text-align:right;padding:4px 2px 0;min-height:18px;letter-spacing:0.01em}.chart-meta.is-cached{color:var(--warning)}.content-area{padding:24px 28px}.period-badge{display:inline-flex;align-items:center;gap:6px;background:#E8F1FB;color:var(--primary);padding:4px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;margin-bottom:20px}.realtime-badge{display:inline-flex;align-items:center;gap:6px;background:#ECFDF5;color:#059669;padding:5px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;margin-bottom:16px;cursor:default}.realtime-dot{width:8px;height:8px;border-radius:50%;background:#10B981;animation:realtime-pulse 2s ease-in-out infinite}@keyframes realtime-pulse{0%,100%{opacity:1}50%{opacity:0.4}}.realtime-countdown{opacity:0.6;font-size:11px;margin-left:2px}.kpi-carousel{margin-bottom:20px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpi-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-xs);border:1px solid var(--border)}.kpi-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px}.kpi-value{font-size:26px;font-weight:800;color:var(--foreground);line-height:1;margin-bottom:8px}.kpi-value.loading{color:transparent;position:relative}.kpi-value.loading::after{content:'';position:absolute;top:4px;left:0;width:70%;height:20px;border-radius:8px;background:var(--primary);opacity:0;transform:scaleX(0.6);transform-origin:left;animation:kpi-bar-in 0.5s ease-out 0.2s forwards,skel-pulse 1.5s ease-in-out 0.8s infinite}.kpi-change.loading{color:transparent;position:relative}.kpi-change.loading::after{content:'';position:absolute;top:2px;left:0;width:45%;height:12px;border-radius:6px;background:var(--primary);opacity:0;transform:scaleX(0.6);transform-origin:left;animation:kpi-bar-in 0.5s ease-out 0.4s forwards,skel-pulse 1.5s ease-in-out 1s infinite}.kpi-prev.loading{color:transparent;position:relative}.kpi-prev.loading::after{content:'';position:absolute;top:2px;left:0;width:35%;height:10px;border-radius:5px;background:var(--primary);opacity:0;transform:scaleX(0.6);transform-origin:left;animation:kpi-bar-in 0.5s ease-out 0.6s forwards,skel-pulse 1.5s ease-in-out 1.2s infinite}@keyframes kpi-bar-in{to{opacity:0.25;transform:scaleX(1)}}.kpi-value.error{color:var(--danger);font-size:13px;font-weight:600}.kpi-change{font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}.kpi-change.up{color:var(--success)}.kpi-change.down{color:var(--danger)}.kpi-change.neutral{color:var(--muted-light)}.kpi-prev{font-size:11px;color:var(--muted-light);margin-top:6px}.kpi-dots{display:none;justify-content:center;gap:6px;padding:8px 0 0}.kpi-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all 0.2s}.kpi-dot.active{background:var(--primary);transform:scale(1.3)}.kpi-gauge-card{text-align:center;padding:14px 10px 10px}.kpi-gauge-wrap{display:flex;justify-content:center}.chart-full{margin-bottom:14px}.charts-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.charts-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}.chart-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-xs);border:1px solid var(--border);min-width:0;overflow:visible}.chart-header{margin-bottom:14px}.chart-title{font-size:13px;font-weight:700;color:var(--foreground);display:flex;align-items:center;gap:6px;position:relative}.chart-info-btn{width:18px;height:18px;border-radius:50%;border:1.5px solid #CBD5E1;background:none;color:var(--muted-light);font-size:11px;font-weight:700;font-style:italic;font-family:Georgia,serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}.chart-info-btn:hover{border-color:var(--primary);color:var(--primary)}.chart-info-tooltip{display:none;position:absolute;top:28px;left:0;z-index:20;background:var(--foreground);color:var(--bg-muted);font-size:12px;font-weight:400;font-style:normal;line-height:1.6;padding:10px 14px;border-radius:var(--radius-md);max-width:360px;min-width:200px;box-shadow:0 4px 12px rgba(0,0,0,0.15);white-space:normal}.chart-info-tooltip.open{display:block}.chart-info-tooltip::before{content:'';position:absolute;top:-5px;left:14px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--foreground)}.chart-subtitle{font-size:11px;color:var(--muted-light);margin-top:2px}.chart-wrap{position:relative}.chart-wrap{scrollbar-width:thin;scrollbar-color:var(--border) transparent}.chart-wrap::-webkit-scrollbar{width:6px;height:6px}.chart-wrap::-webkit-scrollbar-track{background:transparent}.chart-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.chart-wrap::-webkit-scrollbar-thumb:hover{background:var(--muted-light)}.loading-state{display:flex;align-items:flex-end;justify-content:space-between;height:100%;padding:24px 16px 16px;gap:6px}@keyframes skel-draw{to{stroke-dashoffset:0}}@keyframes skel-fade-in{to{opacity:1}}@keyframes skel-pulse{0%,100%{opacity:0.35}50%{opacity:0.7}}@keyframes skel-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes skel-cell-in{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}.skel-grid{stroke:var(--border-input);stroke-width:0.5;opacity:0.4}.loading-bar{align-items:flex-end;justify-content:center;padding:20px 24px 16px}.chart-skeleton-bars{width:100%;height:80%}.skel-bar{fill:var(--primary);opacity:0;transform-origin:bottom;animation:skel-grow 0.5s ease-out forwards,skel-fade-in 0.5s ease-out forwards,skel-pulse 1.5s ease-in-out 1.2s infinite}.loading-line{align-items:flex-end;justify-content:center;padding:20px 24px 16px}.chart-skeleton-line{width:100%;height:80%}.skel-trend{fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0.35;stroke-dasharray:700;stroke-dashoffset:700;animation:skel-draw 2s ease-out forwards,skel-pulse 1.5s ease-in-out 2s infinite}.skel-area{opacity:0;animation:skel-fade-in 0.6s ease-out 1.4s forwards}.loading-doughnut{align-items:center;justify-content:center}.chart-skeleton-doughnut{width:auto;height:75%;fill:none;transform:rotate(-90deg)}.skel-ring-bg{fill:none;stroke:var(--border-input);stroke-width:14;opacity:0.2}.skel-ring{fill:none;stroke:var(--primary);stroke-width:14;stroke-linecap:butt;opacity:0;animation:skel-fade-in 0.4s ease-out 0.3s forwards,skel-pulse 1.5s ease-in-out 1s infinite}.skel-ring.seg2{stroke:var(--success);animation-delay:0.5s,1.2s}.skel-ring.seg3{stroke:#FF6620;animation-delay:0.7s,1.4s}.skel-ring.seg4{stroke:#7E20AD;animation-delay:0.9s,1.6s}.loading-heatmap{align-items:stretch;padding:16px}.chart-skeleton-grid{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);gap:4px;width:100%;height:100%}.chart-skeleton-cell{border-radius:3px;background:var(--primary);opacity:0;animation:skel-cell-in 0.3s ease-out forwards,skel-pulse 1.5s ease-in-out 1.5s infinite}.error-state,.empty-state{display:flex;align-items:center;justify-content:center;min-height:140px;font-size:13px}.empty-state-inner{text-align:center}.empty-state-icon{font-size:28px;margin-bottom:8px;line-height:1}.empty-state-msg{color:var(--foreground-muted);font-weight:600;margin-bottom:4px}.error-state .empty-state-msg{color:var(--danger)}.empty-state-hint{color:var(--muted-light);font-size:12px;margin-bottom:10px}.error-retry-btn{padding:6px 18px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-card);color:var(--foreground);font-size:12px;font-weight:600;cursor:pointer;transition:background 0.15s;margin-top:8px}.error-retry-btn:hover{background:var(--bg-muted)}.heatmap-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}.heatmap-wrap.has-scroll-right::after{content:'';position:absolute;top:0;right:0;bottom:0;width:24px;background:linear-gradient(to right,transparent,rgba(0,0,0,0.06));pointer-events:none;z-index:2}.heatmap-wrap.has-scroll-left::before{content:'';position:absolute;top:0;left:0;bottom:0;width:24px;background:linear-gradient(to left,transparent,rgba(0,0,0,0.06));pointer-events:none;z-index:2}.heatmap-table{width:100%;border-collapse:collapse;font-size:12px}.heatmap-table th{padding:6px 8px;text-align:center;font-weight:600;color:var(--muted);background:var(--bg-subtle);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:1}.heatmap-table th:first-child,.heatmap-table th:nth-child(2){text-align:left}.heatmap-cohort{padding:6px 8px;font-weight:600;color:var(--foreground-muted);white-space:nowrap}.heatmap-size{padding:6px 8px;color:var(--muted);text-align:left}.heatmap-cell{padding:5px 6px;text-align:center;font-weight:600;font-size:11px;min-width:52px}.heatmap-empty{background:var(--bg-subtle)}.heatmap-table tr{border-bottom:1px solid var(--border-subtle)}.heatmap-table tr:hover{filter:brightness(0.95)}.funnel-wrap{position:relative;width:100%;height:calc(var(--funnel-rows,3) * var(--funnel-row-h,64px) + 8px)}.funnel-svg{position:absolute;top:0;left:0;width:100%;height:calc(var(--funnel-rows,3) * var(--funnel-row-h,64px));display:block}.funnel-step{transition:opacity 120ms ease-in-out,filter 120ms ease-in-out;cursor:pointer}.funnel-step.is-active{filter:brightness(1.08)}.funnel-wrap:hover .funnel-step:not(.is-active){opacity:0.55}.funnel-labels{position:relative;width:100%;pointer-events:none}.funnel-row{position:absolute;left:0;right:0;height:var(--funnel-row-h,64px);display:flex;flex-direction:column;justify-content:center;padding:6px 14px;pointer-events:auto;color:var(--foreground);border-radius:4px}.funnel-row.is-active{background:var(--border)}.funnel-row-name{font-size:12px;font-weight:600;color:var(--foreground);text-shadow:0 1px 2px rgba(0,0,0,0.25);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.funnel-row-meta{display:flex;align-items:baseline;gap:10px;font-size:11px;color:var(--foreground);text-shadow:0 1px 2px rgba(0,0,0,0.25)}.funnel-count{font-weight:700;font-size:13px}.funnel-pct{color:var(--foreground);opacity:0.85;font-weight:600}.funnel-step-pct{margin-left:auto;color:#16A34A;font-weight:600;background:rgba(22,163,74,0.12);padding:1px 8px;border-radius:10px}.funnel-step-pct.funnel-drop-mid{color:#B45309;background:rgba(245,158,11,0.18)}.funnel-step-pct.funnel-drop-high{color:#B91C1C;background:rgba(239,68,68,0.18)}[data-theme="dark"] .funnel-step-pct{background:rgba(22,163,74,0.22);color:#4ADE80}[data-theme="dark"] .funnel-step-pct.funnel-drop-mid{background:rgba(245,158,11,0.28);color:#FBBF24}[data-theme="dark"] .funnel-step-pct.funnel-drop-high{background:rgba(239,68,68,0.28);color:#FCA5A5}.data-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.data-table-wrap::-webkit-scrollbar{width:6px;height:10px}.data-table-wrap::-webkit-scrollbar-track{background:var(--bg-subtle);border-radius:5px}.data-table-wrap::-webkit-scrollbar-thumb{background:var(--muted-light);border-radius:5px}.data-table-wrap::-webkit-scrollbar-thumb:hover{background:var(--muted)}.chart-wrap.has-scroll-right::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,rgba(15,23,42,0.16));pointer-events:none;z-index:3}.chart-wrap.has-scroll-left::before{content:'';position:absolute;top:0;left:0;bottom:0;width:32px;background:linear-gradient(to left,transparent,rgba(15,23,42,0.16));pointer-events:none;z-index:3}.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}.data-table thead th{padding:8px 12px;text-align:left;font-weight:600;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:0.05em;background:var(--bg-card);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:2}.data-table tbody tr{border-bottom:1px solid var(--border-subtle);transition:background 0.1s}.data-table tbody tr:hover{background:var(--bg-subtle)}.data-table td{padding:8px 12px;vertical-align:middle}.data-table .dt-rank{width:36px;color:var(--muted-light);font-weight:700;font-size:11px;text-align:center;vertical-align:middle}.data-table th.dt-rank{text-align:center}.table-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0 2px}.table-pager-btn{padding:5px 12px;border:1px solid var(--border);background:var(--bg-card);border-radius:var(--radius-md);font-size:12px;color:var(--muted);cursor:pointer;font-weight:500;transition:all 0.15s;white-space:nowrap}.table-pager-btn:hover:not(:disabled){color:var(--primary);border-color:var(--primary)}.table-pager-btn:disabled{opacity:0.4;cursor:default}.table-pager-label{font-size:12px;color:var(--muted);font-weight:500}.data-table .dt-name{font-weight:500;color:var(--foreground);white-space:nowrap}.dt-name-inner{display:flex;align-items:center;gap:8px}.dt-info-btn{flex-shrink:0;margin-left:6px;padding:0;border:none;background:none;color:var(--foreground);font-size:13px;line-height:1;cursor:pointer}.dt-info-btn:hover{color:var(--primary)}#rowinfo-modal-body{overflow-y:auto}.rowinfo-subject{margin-bottom:12px;padding:8px 10px;border-radius:6px;background:var(--muted-background,rgba(127,127,127,0.08));color:var(--foreground-secondary);font-size:12px;line-height:1.5;word-break:break-word}.rowinfo-loading,.rowinfo-empty,.rowinfo-error{padding:12px 0;color:var(--muted);font-size:13px}.rowinfo-error{color:var(--danger)}.dt-drilldown-link{color:#3B82F6;text-decoration:none}.dt-drilldown-link:hover{text-decoration:underline}.dt-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.data-table th.dt-value{text-align:right}.data-table td.dt-value{text-align:right;font-variant-numeric:tabular-nums;color:var(--foreground-secondary);font-weight:600}.dt-bar-cell{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:80px}.dt-bar{position:absolute;left:0;top:50%;transform:translateY(-50%);height:20px;border-radius:3px;opacity:0.12;transition:width 0.3s ease}.dt-bar-text{position:relative;z-index:1}.loading-table{align-items:stretch;padding:16px;flex-direction:column;gap:0}.chart-skeleton-table{width:100%;display:flex;flex-direction:column;gap:8px;padding-top:4px}.chart-skeleton-row{height:24px;border-radius:4px;background:var(--primary);opacity:0;animation:skel-fade-in 0.3s ease-out forwards,skel-pulse 1.5s ease-in-out 1.2s infinite}.chart-skeleton-row:first-child{height:16px;width:100%;margin-bottom:4px;opacity:0;animation:skel-fade-in 0.2s ease-out forwards}.sidebar-nav-spacer{flex:1}.sidebar-user{margin-top:auto;padding:12px 16px;border-top:1px solid rgba(255,255,255,0.08);background:var(--sidebar-bg-dark);position:sticky;bottom:0;z-index:2}.sidebar-user-row{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px;border-radius:var(--radius-md);transition:background 0.15s}.sidebar-user-row:hover{background:rgba(255,255,255,0.06)}.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#2A75DF 0%,#7E20AD 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;letter-spacing:0.5px;user-select:none}.user-info{flex:1;min-width:0}.user-fullname{color:#E2EEFA;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-email{color:var(--sidebar-text-muted);font-size:10.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu{display:none;position:absolute;bottom:100%;left:12px;right:12px;background:#1e2330;border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-md);box-shadow:0 -4px 16px rgba(0,0,0,0.3);overflow:hidden;margin-bottom:4px}.user-menu.open{display:block}.user-menu-item{width:100%;padding:10px 14px;background:none;border:none;color:var(--sidebar-text);font-size:12.5px;font-weight:500;cursor:pointer;text-align:left;transition:background 0.15s}.user-menu-item:hover{background:rgba(255,255,255,0.08);color:#fff}.login-page{display:flex;min-height:100vh;width:100%}.login-left{width:420px;flex-shrink:0;background:var(--sidebar-bg);display:flex;flex-direction:column;justify-content:center;padding:60px 52px}.login-left-logo{line-height:0;margin-bottom:8px}.login-left-logo svg{width:130px;height:auto;display:block}.login-left-sub{font-size:13px;color:var(--sidebar-text-muted);margin-bottom:48px}.login-card-logo{margin-bottom:24px}.login-card-logo svg{width:110px;height:auto;display:block}.login-left-tagline{font-size:22px;font-weight:700;color:#E2EEFA;line-height:1.4;margin-bottom:16px}.login-left-desc{font-size:13px;color:var(--sidebar-text-muted);line-height:1.7}.login-left-dots{display:flex;gap:8px;margin-top:52px}.login-left-dot{width:8px;height:8px;border-radius:50%;background:var(--sidebar-accent)}.login-left-dot.active{background:var(--primary);width:24px;border-radius:4px}.login-right{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg-page);padding:40px 24px}.login-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:44px 40px;width:100%;max-width:400px;box-shadow:var(--shadow-xs);border:1px solid var(--border)}.login-card-title{font-size:22px;font-weight:800;color:var(--foreground);margin-bottom:6px}.login-card-sub{font-size:13px;color:var(--muted-light);margin-bottom:28px}.login-field{margin-bottom:18px}.login-label{display:block;font-size:12px;font-weight:600;color:var(--foreground-muted);margin-bottom:7px;letter-spacing:0.02em}.login-input{width:100%;padding:11px 14px;border:1.5px solid var(--border-input);border-radius:var(--radius-md);font-size:14px;color:var(--foreground);outline:none;transition:border-color 0.15s,box-shadow 0.15s;background:var(--bg-input);box-shadow:var(--shadow-xs)}.login-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);background:var(--bg-card)}.login-input:-webkit-autofill,.login-input:-webkit-autofill:hover,.login-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--bg-input) inset;-webkit-text-fill-color:var(--foreground);transition:background-color 5000s ease-in-out 0s}.login-input-suffix-wrap{display:flex}.login-input-prefix{flex:1;border-radius:var(--radius-md) 0 0 var(--radius-md);border-right:none}.login-input-prefix:focus{border-right:none;z-index:1;position:relative}.login-input-suffix-tag{padding:11px 14px;border:1.5px solid var(--border-input);border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:14px;color:var(--muted);background:var(--bg-muted);white-space:nowrap;cursor:default;user-select:none}.login-btn{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:700;cursor:pointer;margin-top:8px;transition:background 0.15s,transform 0.1s;letter-spacing:0.02em}.login-btn:hover{background:var(--primary-hover)}.login-btn:active{transform:scale(0.99)}.login-btn:disabled{background:var(--muted-light);cursor:not-allowed;transform:none}.login-error{margin-top:16px;padding:11px 14px;background:#FEF2F2;border:1.5px solid #FECACA;border-radius:var(--radius-lg);color:#DC2626;font-size:13px;display:none;line-height:1.5}.login-forgot{display:block;text-align:center;margin-top:16px;font-size:13px;color:var(--primary);text-decoration:none}.login-forgot:hover{text-decoration:underline}.login-divider{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--foreground-muted,#9CA3AF);font-size:11px;text-transform:uppercase;letter-spacing:0.08em}.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--border,#E5E7EB)}.login-btn-slack{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;padding:11px 12px;margin-top:14px;background:var(--bg-card,#fff);color:var(--foreground,#111827);border:1.5px solid var(--border,#E5E7EB);border-radius:var(--radius-md);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:border-color 0.15s,background 0.15s}.login-btn-slack:hover{border-color:var(--primary);background:var(--bg-subtle,#F9FAFB);text-decoration:none}.chart-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:8px}.chart-header-text{flex:1;min-width:0}.chart-toggle{display:inline-flex;flex-shrink:0;gap:2px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--bg-muted)}.chart-toggle-btn{border:none;background:transparent;color:var(--foreground-muted);font-size:12px;font-weight:500;padding:3px 10px;border-radius:6px;cursor:pointer;line-height:1.4;transition:background 0.15s,color 0.15s}.chart-toggle-btn:hover{color:var(--foreground)}.chart-toggle-btn.active{background:var(--primary);color:#fff}.chart-actions{position:relative;flex-shrink:0}.chart-kebab-btn{width:28px;height:28px;border:none;background:transparent;border-radius:50%;font-size:16px;color:var(--muted-light);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,color 0.15s;line-height:1;padding:0}.chart-kebab-btn:hover{background:var(--bg-muted);color:var(--foreground-muted)}.chart-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:160px;z-index:200;overflow:visible}.chart-dropdown.open{display:block}.chart-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;border:none;background:transparent;font-size:12.5px;color:var(--foreground-secondary);cursor:pointer;text-align:left;transition:background 0.1s;white-space:nowrap}.chart-dropdown-item:hover{background:var(--bg-subtle)}.chart-dropdown>:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}.chart-dropdown>:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}.chart-dropdown-divider{height:1px;background:var(--border-subtle);margin:3px 0}.chart-dropdown-sub{position:relative}.chart-dropdown-sub-trigger{display:flex;align-items:center;justify-content:space-between;cursor:default}.chart-dropdown-sub-trigger::before{content:'\25C0';font-size:8px;opacity:0.45;margin-right:8px}.chart-dropdown-submenu{display:none;position:absolute;right:100%;top:-4px;padding-right:4px;z-index:210}.chart-dropdown-submenu-inner{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:150px;overflow:hidden}.chart-dropdown-sub:hover>.chart-dropdown-submenu{display:block}.chart-dropdown-sub:hover>.chart-dropdown-sub-trigger{background:var(--bg-subtle)}.chart-switch-item.disabled{opacity:0.35;cursor:default;pointer-events:none}.debug-toggle-btn{width:28px;height:28px;border:1.5px solid var(--border-input);background:transparent;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;padding:0;color:var(--muted-light)}.debug-toggle-btn:hover{border-color:#94A3B8;color:var(--foreground-muted)}.debug-toggle-btn.active{border-color:var(--warning);background:#FFF4EF;color:var(--warning)}body.debug-active canvas{cursor:crosshair}.query-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}.query-modal-backdrop{position:absolute;inset:0;background:var(--overlay);backdrop-filter:var(--overlay-blur);-webkit-backdrop-filter:var(--overlay-blur)}.query-modal-box{position:relative;background:var(--bg-card);border-radius:var(--radius-xl);width:700px;max-width:calc(100vw - 48px);max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xs);border:1px solid var(--border);overflow:hidden}.query-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0}.query-modal-title{font-size:13px;font-weight:700;color:var(--foreground)}.query-modal-head-actions{display:flex;gap:8px;align-items:center}.query-modal-copy-btn{padding:5px 12px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:12px;font-weight:600;cursor:pointer;transition:background 0.15s}.query-modal-copy-btn:hover{background:var(--primary-hover)}.query-modal-copy-btn.copied{background:var(--success)}.query-modal-close-btn{width:28px;height:28px;border:none;background:transparent;border-radius:50%;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}.query-modal-close-btn:hover{background:var(--bg-muted);color:var(--foreground)}.query-modal-cache-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--radius-pill);background:#E8F1FB;color:var(--primary)}.query-modal-cache-badge.is-cached{background:#FFF4EF;color:var(--warning)}.query-modal-pre{flex:1;overflow:auto;padding:24px;margin:0;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--foreground);background:var(--bg-subtle);white-space:pre-wrap;word-break:break-word}.query-modal-note{padding:10px 24px;font-size:11px;color:var(--muted-light);background:var(--bg-subtle);border-top:1px solid var(--border);flex-shrink:0}.perf-stats-body{padding:24px}.perf-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.perf-stat-card{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px}.perf-stat-label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}.perf-stat-value{font-size:20px;font-weight:800;color:var(--foreground)}.perf-stat-sub{font-size:11px;color:var(--muted-light);margin-top:2px}.perf-stat-card.highlight{border-color:var(--primary);border-left:3px solid var(--primary)}.perf-stat-card.warn{border-color:#F97316;border-left:3px solid #F97316}.perf-breakdown{margin-top:12px}.perf-breakdown-title{font-size:11px;font-weight:700;color:var(--foreground-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em}.perf-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.perf-bar-label{font-size:11px;color:var(--muted);width:100px;flex-shrink:0}.perf-bar-track{flex:1;height:8px;background:var(--border-input);border-radius:4px;overflow:hidden}.perf-bar-fill{height:100%;border-radius:4px;transition:width 0.3s}.perf-bar-value{font-size:11px;color:var(--foreground-secondary);font-weight:600;width:60px;text-align:right;flex-shrink:0}.perf-note{font-size:11px;color:var(--muted-light);margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.expand-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}.expand-modal-backdrop{position:absolute;inset:0;background:var(--overlay);backdrop-filter:var(--overlay-blur);-webkit-backdrop-filter:var(--overlay-blur)}.expand-modal-box{position:relative;background:var(--bg-card);border-radius:var(--radius-xl);width:calc(100vw - 60px);height:calc(100vh - 60px);max-width:1600px;display:flex;flex-direction:column;box-shadow:var(--shadow-xs);border:1px solid var(--border);overflow:hidden}.expand-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0}.expand-modal-title{font-size:14px;font-weight:700;color:var(--foreground)}.expand-modal-body{flex:1;padding:24px;position:relative;min-height:0}.page-footer{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}.landing-hero{padding:60px 40px 40px;text-align:center}.landing-title{font-size:34px;font-weight:800;color:var(--foreground);margin-bottom:10px}.landing-title span{color:var(--primary)}.landing-subtitle{font-size:15px;color:var(--muted)}.landing-greeting{font-size:20px;font-weight:600;color:var(--foreground-muted);margin:0 0 16px 0;padding:40px 40px 0;text-align:left}.recent-dashboards{padding:0 40px 16px}.recent-dashboards-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px}.recent-dashboards-row{display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px}.recent-dashboard-card{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 14px;text-decoration:none;transition:all 0.2s;min-width:180px;flex-shrink:0}.recent-dashboard-card:hover{border-color:#55A1E3;box-shadow:0 4px 12px rgba(42,117,223,0.12);transform:translateY(-1px)}.recent-dashboard-card-icon{font-size:20px;flex-shrink:0}.recent-dashboard-card-info{display:flex;flex-direction:column;min-width:0}.recent-dashboard-card-title{font-size:13px;font-weight:600;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-dashboard-card-time{font-size:11px;color:var(--muted)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding:0 40px 60px}.dashboard-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:28px 24px;border:1px solid var(--border);text-decoration:none;transition:all 0.2s;box-shadow:var(--shadow-xs);display:block}.dashboard-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(42,117,223,0.18);border-color:#55A1E3}.dashboard-card-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--primary),var(--primary-hover));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}.dashboard-card-title{font-size:16px;font-weight:700;color:var(--foreground);margin-bottom:6px}.dashboard-card-desc{font-size:13px;color:var(--muted);line-height:1.5}.db-badge-img{width:18px;height:18px;object-fit:contain;border-radius:3px;opacity:0.55;transition:opacity 0.2s;cursor:help}.db-badge-img:hover{opacity:1}.db-badges-card{position:absolute;bottom:12px;right:14px;display:flex;gap:6px;align-items:center}.dashboard-card{position:relative}.db-badges-header{display:inline-flex;gap:5px;align-items:center;margin-left:4px}.db-badges-header .db-badge-img{width:16px;height:16px}.search-bar{padding:0 40px 16px}.search-input{width:100%;max-width:400px;padding:10px 16px;border:1px solid #CBD5E1;border-radius:var(--radius-md);font-size:14px;color:var(--foreground);background:var(--bg-card);outline:none;transition:border-color 0.15s,box-shadow 0.15s;box-shadow:var(--shadow-xs)}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}.search-input::placeholder{color:var(--muted-light)}.tag-filter-bar{display:flex;gap:8px;padding:0 40px 20px;flex-wrap:wrap}.tag-pill{padding:6px 16px;border-radius:var(--radius-pill);border:1px solid #CBD5E1;background:var(--bg-card);color:var(--foreground-muted);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s}.tag-pill:hover{border-color:var(--primary);color:var(--primary)}.tag-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}.async-multiselect{position:relative;display:inline-block}.ams-trigger{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border-input);border-radius:var(--radius-md);background:var(--bg-card);font-size:12px;color:var(--foreground);cursor:pointer;min-width:180px;max-width:300px;transition:border-color 0.15s;box-shadow:var(--shadow-xs)}.ams-trigger:hover{border-color:var(--primary)}.ams-trigger-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.ams-trigger-text.has-selection{color:var(--foreground);font-weight:500}.ams-trigger-badge{background:var(--primary);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--radius-pill);min-width:18px;text-align:center}.ams-chevron{font-size:8px;color:var(--muted-light);transition:transform 0.2s}.async-multiselect.open .ams-chevron{transform:rotate(180deg)}.ams-dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:300;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:260px;max-width:360px;max-height:320px;display:flex;flex-direction:column;overflow:hidden}.ams-search{padding:8px 12px;border:none;border-bottom:1px solid var(--border-subtle);font-size:12px;outline:none;background:var(--bg-input);color:var(--foreground);border-radius:var(--radius-md) var(--radius-md) 0 0}.ams-search::placeholder{color:var(--muted-light)}.ams-actions{display:flex;gap:4px;padding:6px 10px;border-bottom:1px solid var(--border-subtle)}.ams-action-btn{padding:3px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);font-size:11px;color:var(--muted);cursor:pointer;transition:all 0.15s}.ams-action-btn:hover{border-color:var(--primary);color:var(--primary)}.ams-list{overflow-y:auto;flex:1;max-height:220px;padding:4px 0}.ams-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:12px;color:var(--foreground-secondary);transition:background 0.1s}.ams-item:hover,.ams-item.ams-focus{background:var(--bg-subtle)}.ams-item.ams-focus{outline:2px solid var(--primary);outline-offset:-2px;border-radius:4px}.ams-item input[type="checkbox"]{accent-color:var(--primary);cursor:pointer;flex-shrink:0}input[type="checkbox"],input[type="radio"]{accent-color:var(--primary);color-scheme:light}[data-theme="dark"] input[type="checkbox"],[data-theme="dark"] input[type="radio"]{color-scheme:dark}.ams-item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ams-loading{padding:16px;text-align:center;color:var(--muted-light);font-size:12px}.ams-empty{padding:16px;text-align:center;color:var(--muted-light);font-size:12px}.dashboard-group-heading{font-size:18px;font-weight:700;color:var(--foreground-secondary);padding:0 40px 12px;margin-top:8px}.dashboard-group-section .dashboard-grid{padding-bottom:20px}.dashboard-group-section:last-child .dashboard-grid{padding-bottom:60px}.dashboard-card-arrow{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-size:12px;font-weight:600;margin-top:14px}.pwa-install-banner{position:fixed;bottom:0;left:0;right:0;background:var(--sidebar-bg);color:#fff;padding:14px 48px 14px 16px;font-size:13px;z-index:300;box-shadow:0 -2px 12px rgba(0,0,0,0.3);animation:pwa-slide-up 0.3s ease-out}@keyframes pwa-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}.pwa-install-text{line-height:1.5}.pwa-install-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;opacity:0.6;padding:4px 8px}.pwa-install-close:hover{opacity:1}.mobile-topbar{display:none;position:fixed;top:0;left:0;right:0;height:52px;background:var(--sidebar-bg);z-index:110;align-items:center;padding:0 16px;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,0.3)}.mobile-menu-btn{width:44px;height:44px;border:none;background:rgba(255,255,255,0.08);border-radius:var(--radius-md);color:var(--sidebar-text);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s;-webkit-tap-highlight-color:transparent}.mobile-menu-btn:hover{background:rgba(255,255,255,0.15)}.mobile-topbar-logo{color:#E2EEFA;font-size:14px;font-weight:700}.sidebar-overlay{display:none;position:fixed;inset:0;background:var(--overlay);backdrop-filter:var(--overlay-blur);-webkit-backdrop-filter:var(--overlay-blur);z-index:99;cursor:pointer}[data-theme="dark"]{--primary:#4A90E2;--primary-hover:#5BA0F2;--foreground:#E2E8F0;--foreground-secondary:#CBD5E1;--foreground-muted:#94A3B8;--muted:#64748B;--muted-light:#475569;--border:rgba(255,255,255,0.1);--border-subtle:rgba(255,255,255,0.06);--border-input:#334155;--ring:rgba(74,144,226,0.3);--bg-page:#0F172A;--bg-card:#1E293B;--bg-muted:#1E293B;--bg-subtle:#243247;--bg-input:#1E293B;--shadow-xs:0 1px 2px rgba(0,0,0,0.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.4),0 2px 4px -2px rgba(0,0,0,0.3);--sidebar-bg:#0B1222;--sidebar-bg-dark:#070D18;--overlay:rgba(0,0,0,0.4);--success:#A3D944;--danger:#F87171;--warning:#FB923C;--rate-1:#D34545;--rate-2:#E45944;--rate-3:#F37777;--rate-4:#FA8F42;--rate-5:#F6AE31;--rate-6:#EDB91D;--rate-7:#C2D831;--rate-8:#91D025;--rate-9:#30CF6A;--rate-10:#20B68C;color-scheme:dark}[data-theme="dark"] .chart-wrap.has-scroll-right::after{background:linear-gradient(to right,transparent,rgba(0,0,0,0.55))}[data-theme="dark"] .chart-wrap.has-scroll-left::before{background:linear-gradient(to left,transparent,rgba(0,0,0,0.55))}[data-theme="dark"] .heatmap-wrap.has-scroll-right::after{background:linear-gradient(to right,transparent,rgba(0,0,0,0.3))}[data-theme="dark"] .heatmap-wrap.has-scroll-left::before{background:linear-gradient(to left,transparent,rgba(0,0,0,0.3))}[data-theme="dark"] .heatmap-table tr:hover{filter:brightness(1.15)}[data-theme="dark"] .chart-action-btn{color:#94A3B8}[data-theme="dark"] .chart-action-btn:hover{background:rgba(255,255,255,0.08);color:#E2E8F0}@media (max-width:768px){.mobile-topbar{display:flex}body{display:block}.sidebar{transform:translateX(-100%);transition:transform 0.25s ease;z-index:200}body.sidebar-open .sidebar{transform:translateX(0)}body.sidebar-open .sidebar-overlay{display:block}.main-content{margin-left:0;padding-top:52px}.page-header{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px}.filter-tz-group{display:none}.period-badge-row{display:none!important}.db-badges-card,.db-badges-header{display:none}.filters{width:100%;flex-wrap:wrap;padding-bottom:4px;gap:6px}.filter-period-gran{display:flex;gap:6px;align-items:center;width:100%;flex-wrap:nowrap}.filter-group{display:none}.filter-divider{display:none}.filter-select-mobile{display:inline-block;padding:6px 10px;font-size:13px;border:1px solid var(--border-input);border-radius:var(--radius-md);background:var(--bg-card);color:var(--foreground);font-weight:500;cursor:pointer;min-width:0}.filter-label{font-size:12px;white-space:nowrap}.date-input{padding:5px 8px;font-size:12px}.apply-btn{padding:5px 12px;font-size:12px}.tz-select{padding:5px 8px;font-size:12px}.content-area{padding:14px 12px}.kpi-grid{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;scrollbar-width:none}.kpi-grid::-webkit-scrollbar{display:none}.kpi-card{flex:0 0 calc(50% - 5px);min-width:calc(50% - 5px);scroll-snap-align:start;padding:16px}.kpi-label{font-size:10px;margin-bottom:6px}.kpi-value{font-size:22px}.kpi-dots{display:flex}.kpi-carousel{margin-bottom:14px}.charts-row-2,.charts-row-3{grid-template-columns:1fr}.chart-card{padding:16px}.chart-title{font-size:13px}.chart-subtitle{font-size:10.5px}.heatmap-cell{min-width:38px;padding:4px 3px;font-size:10px}.heatmap-table th{padding:4px 4px;font-size:10px}.heatmap-cohort{padding:4px 6px;font-size:11px}.heatmap-size{padding:4px 6px;font-size:10px}.data-table{font-size:12px}.data-table td{padding:6px 8px}.data-table thead th{padding:6px 8px;font-size:9px}.dt-bar-cell{min-width:60px}.data-table .dt-name{font-size:12px}.ams-dropdown{min-width:200px;max-width:calc(100vw - 32px)}.ams-trigger{padding:7px 12px;font-size:13px}.query-modal-box{max-width:calc(100vw - 24px)}.query-modal-head{padding:12px 16px}.query-modal-pre{padding:16px;font-size:11px}.expand-modal-box{width:calc(100vw - 16px);height:calc(100vh - 16px);border-radius:var(--radius-md)}.expand-modal-head{padding:12px 16px}.perf-stats-grid{grid-template-columns:1fr}.perf-stats-body{padding:16px}.perf-bar-label{width:70px;font-size:10px}.chart-info-tooltip{max-width:calc(100vw - 80px);min-width:160px}.landing-hero{padding:32px 16px 24px}.landing-title{font-size:26px}.landing-greeting{padding:0 16px;font-size:18px}.dashboard-grid{padding:0 16px 32px;grid-template-columns:1fr}.search-bar{padding:0 16px 12px}.search-input{max-width:100%;font-size:16px}.tag-filter-bar{padding:0 16px 16px}.tag-pill{padding:6px 14px;font-size:13px}.dashboard-group-heading{padding:0 16px 12px;font-size:16px}.recent-dashboards{padding:0 16px 16px}.recent-dashboards-row{scrollbar-width:none}.recent-dashboards-row::-webkit-scrollbar{display:none}.recent-dashboard-card{min-width:160px;padding:8px 12px}.recent-dashboard-card-title{font-size:12px}.recent-dashboard-card-time{font-size:10px}.login-left{display:none}.login-right{padding:24px 16px}.login-card{padding:32px 24px}.login-input{font-size:16px;padding:12px 14px}.login-btn{padding:12px;font-size:15px}}@media (max-width:480px){.kpi-card{flex:0 0 85%;min-width:85%}.chart-wrap{max-height:200px}.user-menu{left:8px;right:8px}}.ops-app-section{margin-bottom:8px;padding:0 40px}.ops-app-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-light);margin-top:24px}.ops-app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:8px;padding:0 0 40px}.ops-app-note{padding:0 0 40px;margin-top:12px;font-size:13px;line-height:1.7;color:var(--foreground-muted);max-width:70ch}.ops-app-note p{margin:0 0 8px}.ops-app-note ol,.ops-app-note ul{margin:0;padding-left:20px}.ops-app-note li + li{margin-top:6px}.ops-app-note b,.ops-app-note strong{color:var(--foreground)}.ops-app-note code{font-size:12px}.ops-app-note .oq-status{vertical-align:middle}.ops-app-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--foreground);transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s}.ops-app-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(42,117,223,0.10);transform:translateY(-2px)}.ops-app-icon{font-size:40px;line-height:1}.ops-app-title{font-size:18px;font-weight:600;color:var(--foreground)}.ops-app-desc{font-size:13px;color:var(--muted);text-align:center}:root{--pk-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}.pk-legend{font-family:var(--pk-mono);font-size:11px;color:var(--muted-light);margin:0 0 14px;letter-spacing:0.01em}.pk-legend b{color:var(--muted);font-weight:600}.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;align-items:start}.pk{position:relative;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px 14px 20px;overflow:hidden;transition:box-shadow 0.16s ease,transform 0.16s ease}.pk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pk-accent,var(--border))}.pk:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.pk[data-state="error"]{--pk-accent:var(--danger)}.pk[data-state="warning"]{--pk-accent:var(--warning)}.pk[data-state="ok"]{--pk-accent:var(--success)}.pk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.pk-name{font-size:15.5px;font-weight:650;line-height:1.25;letter-spacing:-0.01em}.pk-name a{color:var(--foreground);text-decoration:none}.pk-name a:hover{text-decoration:underline;text-underline-offset:2px}.pk-cat{font-family:var(--pk-mono);font-size:11px;color:var(--muted-light);margin-top:5px;letter-spacing:0.01em;word-break:break-all}.pk-cat .pk-id{color:var(--muted);font-weight:600}.pk-tab{flex-shrink:0;font-family:var(--pk-mono);font-size:10.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid var(--pk-accent);color:var(--pk-accent);background:color-mix(in srgb,var(--pk-accent) 10%,transparent);white-space:nowrap}.pk-flag{display:inline-block;vertical-align:2px;font-family:var(--pk-mono);font-size:9.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border-input);padding:1px 5px;border-radius:5px;margin-left:6px}.pk-vitals{display:flex;gap:22px;margin:14px 0 2px;font-variant-numeric:tabular-nums}.pk-vital{min-width:0}.pk-vital-num{font-family:var(--pk-mono);font-size:17px;font-weight:600;color:var(--foreground);line-height:1.1;letter-spacing:-0.01em}.pk-vital-num.is-bad{color:var(--danger)}.pk-vital-num.is-muted{color:var(--muted-light);font-weight:500}.pk-vital-label{font-family:var(--pk-mono);font-size:9px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted-light);margin-top:4px}.pk-verdict{margin-top:14px;border-top:1px solid var(--border-subtle);padding-top:12px}.pk-finding{display:grid;grid-template-columns:14px 1fr;gap:8px;font-size:12.5px;line-height:1.45;margin-bottom:5px}.pk-finding:last-child{margin-bottom:0}.pk-finding .pk-mark{font-family:var(--pk-mono);font-weight:700;text-align:center;line-height:1.5}.pk-finding[data-level="error"] .pk-mark{color:var(--danger)}.pk-finding[data-level="warning"] .pk-mark{color:var(--warning)}.pk-finding b{font-weight:600;color:var(--foreground)}.pk-finding span{color:var(--foreground-muted)}.pk-more{font-family:var(--pk-mono);font-size:11px;color:var(--muted);text-decoration:none;margin-left:22px}.pk-more:hover{color:var(--foreground);text-decoration:underline}.pk-cov{display:flex;align-items:center;gap:10px;margin-top:16px}.pk-cov-cells{display:flex;gap:3px}.pk-cell{width:15px;height:15px;border-radius:3px;border:1px solid var(--border);background:var(--border-subtle)}.pk-cell.on{background:var(--foreground-secondary);border-color:var(--foreground-secondary)}.pk-cov-count{font-family:var(--pk-mono);font-size:11px;font-weight:600;color:var(--muted)}.pk-cov-count b{color:var(--foreground)}.pk-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle);display:flex;align-items:baseline;justify-content:space-between;gap:10px}.pk-meta{font-size:11.5px;color:var(--muted-light);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-meta .warn{color:var(--warning)}.pk-detail{flex-shrink:0;font-family:var(--pk-mono);font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;letter-spacing:0.02em}.pk-detail:hover{color:var(--foreground)}.pk-empty{padding:48px 24px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--border);border-radius:var(--radius-lg)}.pk-sheet{display:flex;flex-direction:column;gap:16px}.pk-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.pk-col{display:flex;flex-direction:column;gap:16px;min-width:0}@media (max-width:1100px){.pk-cols{grid-template-columns:1fr}}@media (max-width:560px){.pk-grid{grid-template-columns:1fr}.pk-vitals{gap:16px}}@media (prefers-reduced-motion:reduce){.pk{transition:none}.pk:hover{transform:none}}.ops-filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}.ops-filter-grid-5{grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}.ops-filter-grid-6{grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}.ops-filter-grid-7{grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:12px}.ops-filter-field{display:flex;flex-direction:column}.ops-filter-label{font-size:12px;font-weight:600;color:var(--foreground-muted);margin-bottom:5px;letter-spacing:0.02em}.ops-filter-input{padding:9px 12px;border:1.5px solid var(--border-input);border-radius:var(--radius-md);font-size:13px;color:var(--foreground);background:var(--bg-input);outline:none;transition:border-color 0.15s}.ops-filter-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}.ops-filter-input[type="date"]{min-height:38px;color-scheme:light dark;-webkit-appearance:none;position:relative}.ops-filter-input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.7;filter:var(--date-icon-filter,none);padding:4px;margin-right:-4px}.ops-filter-input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}[data-theme="dark"] .ops-filter-input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1)}.ops-search-actions{display:flex;gap:10px;margin-bottom:24px}.ops-clear-btn{padding:9px 20px;background:transparent;color:var(--muted-light);border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:13px;cursor:pointer;transition:border-color 0.15s,color 0.15s}.ops-clear-btn:hover{border-color:var(--foreground-muted);color:var(--foreground-muted)}.ops-search-error{padding:11px 14px;background:#FEF2F2;border:1.5px solid #FECACA;border-radius:var(--radius-lg);color:#DC2626;font-size:13px;margin-bottom:16px;line-height:1.5}.ops-search-loading{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted-light);padding:32px 0;justify-content:center}.ops-spinner{width:18px;height:18px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:ops-spin 0.7s linear infinite}@keyframes ops-spin{to{transform:rotate(360deg)}}.ops-results-info{font-size:13px;color:var(--muted-light);margin-bottom:12px;font-weight:500}.ops-results-info:empty{display:none}.ops-video{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#0a0a0a;box-shadow:0 1px 3px rgba(0,0,0,0.06)}.ops-video-frame{position:relative;width:100%;aspect-ratio:16 / 9;background:#000}.ops-video-el{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}.ops-video-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 14px;background:rgba(20,20,19,0.9);border-top:1px solid rgba(255,255,255,0.06)}.ops-video-action{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:500;color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-md);text-decoration:none;transition:color 0.12s ease,border-color 0.12s ease,background 0.12s ease}.ops-video-action:hover{color:#fff;background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);text-decoration:none}.ops-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}.sc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-xs);transition:box-shadow 0.15s,border-color 0.15s}.sc-card:hover{box-shadow:var(--shadow-md);border-color:rgba(42,117,223,0.25)}.sc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.sc-name{font-size:15px;font-weight:700;color:var(--foreground);line-height:1.3}.sc-date{font-size:11px;color:var(--muted);background:var(--bg-muted);padding:2px 8px;border-radius:4px;font-weight:500;white-space:nowrap;flex-shrink:0;margin-left:10px}.sc-ids{display:flex;gap:6px;margin-bottom:14px}.sc-id-badge{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--primary);background:rgba(42,117,223,0.08);padding:3px 8px;border-radius:5px;letter-spacing:0.01em}.sc-details{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border-subtle);padding-top:12px}.sc-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.sc-label{font-size:11px;font-weight:600;color:var(--muted-light);text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0}.sc-value{font-size:13px;color:var(--foreground-secondary);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-value-mono{font-family:var(--font-mono);font-size:12px;font-weight:600}.sc-copyable{cursor:pointer;border-bottom:1px dashed var(--border-input);padding-bottom:1px;transition:color 0.15s,border-color 0.15s}.sc-copyable:hover{color:var(--primary);border-bottom-color:var(--primary)}.sc-copyable.ops-copied{color:var(--success);border-bottom-color:var(--success)}.sc-copyable.ops-copied::after{content:' \2713';font-size:11px}.sc-row-top{align-items:flex-start}.sc-courses{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}.sc-course-tag{font-size:11px;color:var(--foreground-muted);background:var(--bg-muted);padding:2px 8px;border-radius:4px;font-weight:500;white-space:nowrap}.ops-empty-state{text-align:center;padding:40px 16px;color:var(--muted-light);font-size:13px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}.ops-infinite-loader{padding:16px;text-align:center;font-size:12px;color:var(--muted-light)}a.sc-card-link{text-decoration:none;color:inherit;display:block;cursor:pointer}a.sc-card-link:hover{border-color:var(--primary)}a.sc-card-link::after{content:'\2192';position:absolute;top:18px;right:18px;font-size:16px;color:var(--muted-light);transition:color 0.15s,transform 0.15s}a.sc-card-link:hover::after{color:var(--primary);transform:translateX(2px)}.sc-card{position:relative}.sc-back-link{color:var(--primary);text-decoration:none;font-size:13px;font-weight:500}.sc-back-link:hover{text-decoration:underline}button:disabled,button[disabled]{opacity:0.45!important;cursor:not-allowed!important}.sc-edit-btn{display:inline-block;padding:7px 18px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;transition:background 0.15s}.sc-edit-btn{text-transform:none}.sc-edit-btn:hover{background:var(--primary-hover);text-decoration:none}.sc-edit-btn.sc-btn-outline{background:transparent;color:var(--btn-accent,var(--primary));border:1px solid var(--btn-accent,var(--primary));transition:background 0.15s,color 0.15s,border-color 0.15s,box-shadow 0.15s}.sc-edit-btn.sc-btn-outline:hover{background:var(--btn-accent,var(--primary));color:#fff;border-color:var(--btn-accent,var(--primary));box-shadow:0 2px 8px color-mix(in srgb,var(--btn-accent,var(--primary)) 35%,transparent)}.sc-detail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden}.sc-detail-header{padding:24px 28px;border-bottom:1px solid var(--border-subtle)}.sc-detail-name{font-size:20px;font-weight:700;color:var(--foreground);margin-bottom:10px}.sc-detail-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.sc-muted{color:var(--muted-light)}.sc-status-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:5px}.sc-status-badge.sc-status-dotted{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:4px 11px}.sc-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}.sc-status-active{color:#15803D;background:#F0FDF4}.sc-status-inactive{color:#DC2626;background:#FEF2F2}.sc-status-muted{color:#475569;background:#F1F5F9}.sc-status-danger{color:#B91C1C;background:#FEE2E2}.sc-status-pending{color:#B45309;background:#FEF3C7}.sc-status-warning{color:#B45309;background:#FEF3C7}.sc-status-info{color:#1D4ED8;background:#DBEAFE}.sc-detail-section{padding:20px 28px;border-bottom:1px solid var(--border-subtle)}.sc-detail-section:last-child{border-bottom:none}.sc-detail-section-title{font-size:11px;font-weight:700;color:var(--muted-light);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px}.sc-detail-grid{display:flex;flex-direction:column;gap:8px}.sc-detail-section .sc-courses{justify-content:flex-start}.sc-coming-soon-grid{display:flex;flex-wrap:wrap;gap:10px}.sc-coming-soon-item{font-size:13px;color:var(--muted-light);background:var(--bg-muted);padding:8px 16px;border-radius:var(--radius-md);border:1px dashed var(--border)}.sc-detail-coming-soon{opacity:0.7}.sc-section-count{font-size:13px;font-weight:400;color:var(--muted)}.sc-pkg-list{display:flex;flex-direction:column;gap:12px}.sc-pkg-card{background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px}.sc-pkg-card-active{background:#F0FDF4;border-color:#86EFAC}.sc-pkg-card-link{position:relative;cursor:pointer;transition:border-color 0.12s,box-shadow 0.12s}.sc-pkg-card-link:hover{border-color:var(--primary);box-shadow:0 3px 8px rgba(43,129,252,0.12)}.sc-pkg-card-overlay{position:absolute;inset:0;z-index:1}.sc-pkg-card-link .sc-pkg-detail a{position:relative;z-index:2}.sc-pkg-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}.sc-pkg-name{font-size:14px;font-weight:600;color:var(--foreground)}.sc-pkg-status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:3px 10px;border-radius:20px;white-space:nowrap}.sc-pkg-active{background:#DCFCE7;color:#166534}.sc-pkg-terminated{background:#FEE2E2;color:#991B1B}.sc-pkg-expired{background:#F3F4F6;color:#6B7280}.sc-pkg-other{background:#FEF3C7;color:#92400E}.sc-pkg-bundle{font-size:12px;color:var(--muted);margin-bottom:4px}.sc-pkg-org{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.sc-pkg-dates{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--foreground-secondary);margin-bottom:8px}.sc-pkg-date-rel{font-size:12px;color:var(--muted-light)}.sc-pkg-details{display:flex;flex-wrap:wrap;gap:8px 16px}.sc-pkg-detail{font-size:12px;color:var(--muted)}.sc-pkg-flags{margin-top:8px;display:flex;gap:8px}.sc-pkg-flag{font-size:11px;padding:2px 8px;border-radius:12px}.sc-pkg-flag-primary{background:#DBEAFE;color:#1E40AF}.sc-pkg-flag-cancel{background:#FEF3C7;color:#92400E}.sc-pkg-flag-recurring{background:#E0E7FF;color:#3730A3}.sc-pkg-benefits{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.sc-pkg-benefit{font-size:11px;padding:3px 10px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);color:var(--foreground-secondary);white-space:nowrap}.sc-pkg-shipment{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}.sc-ship-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px;white-space:nowrap}.sc-ship-transit{background:#DBEAFE;color:#1E40AF}.sc-ship-delivered{background:#DCFCE7;color:#166534}.sc-ship-failed{background:#FEE2E2;color:#991B1B}.sc-ship-muted{background:#F3F4F6;color:#6B7280}.sc-ship-other{background:#FEF3C7;color:#92400E}.sc-ship-note{font-style:italic;flex-basis:100%}.sc-pkg-card-link .sc-pkg-shipment .sc-copyable,.sc-pkg-card-link .sc-pkg-shipment .sc-pkg-track{position:relative;z-index:2}.sc-pkg-track{color:var(--primary);text-decoration:none;font-weight:600;white-space:nowrap}.sc-pkg-track:hover{text-decoration:underline}.sc-pay-list{display:flex;flex-direction:column;gap:8px}.sc-pay-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius-md);color:inherit;text-decoration:none;transition:border-color 0.12s,box-shadow 0.12s,transform 0.12s}a.sc-pay-row:hover{border-color:var(--primary);box-shadow:0 3px 8px rgba(43,129,252,0.12)}.sc-pay-main{display:flex;flex-direction:column;gap:2px;min-width:0}.sc-pay-amount-line{display:flex;align-items:center;gap:10px}.sc-pay-amount{font-size:15px;font-weight:600;color:var(--foreground)}.sc-pay-status{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:20px;white-space:nowrap}.sc-pay-success{background:#DCFCE7;color:#166534}.sc-pay-failed{background:#FEE2E2;color:#991B1B}.sc-pay-pending{background:#FEF3C7;color:#92400E}.sc-pay-other{background:#F3F4F6;color:#6B7280}.sc-pay-package{font-size:13px;color:var(--foreground-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-pay-meta{display:flex;align-items:center;gap:12px;flex-shrink:0}.sc-pay-provider{font-size:12px;font-weight:500;color:var(--foreground-secondary);background:var(--bg-card);border:1px solid var(--border);padding:2px 8px;border-radius:var(--radius-sm)}.sc-pay-inst{font-size:12px;color:var(--muted)}.sc-pay-date{font-size:12px;color:var(--muted-light);white-space:nowrap}.sc-pay-buyer{font-size:12px;color:var(--muted);font-style:italic}.sc-pay-seller{font-size:12px;font-weight:500;color:var(--foreground-secondary);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-pay-seller-tag{font-size:11px;font-weight:400;color:var(--muted)}.sc-pay-seller-avatar{width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0;vertical-align:middle}.sc-pay-subheader{font-size:13px;font-weight:600;color:var(--foreground-secondary);margin:16px 0 8px 0;padding-bottom:6px;border-bottom:1px solid var(--border-subtle)}.sc-pay-subheader:first-child{margin-top:0}.sc-parent-row{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-bottom:1px solid var(--border-subtle)}.sc-parent-row:last-child{border-bottom:none}.sc-parent-name{font-size:14px;font-weight:600;color:var(--foreground)}.sc-parent-details{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--foreground-secondary)}.sc-detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.sc-detail-left,.sc-detail-right{display:flex;flex-direction:column;gap:20px}@media (max-width:1024px){.sc-detail-layout{grid-template-columns:1fr}}.ops-search-btn{padding:9px 20px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s}.ops-search-btn:hover{background:var(--primary-hover)}.ops-filter-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer}textarea.ops-filter-input{min-height:96px;resize:vertical;font-family:inherit;line-height:1.5}.ops-filter-input:disabled,.ops-filter-input[readonly]{background:var(--bg-muted);color:var(--muted);cursor:not-allowed}.ops-filter-input.is-invalid{border-color:var(--danger)}.ops-filter-input.is-invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 30%,transparent)}.ops-filter-required{color:var(--danger);margin-left:2px}.ops-field-hint{font-size:12px;color:var(--muted-light);margin-top:6px;line-height:1.5}.ops-field-error{font-size:12px;color:var(--danger);margin-top:6px}.ops-field-error:empty{display:none}.ops-form-field + .ops-form-field{margin-top:14px}.ops-form-narrow{max-width:200px}.ops-input-group{display:flex;align-items:stretch}.ops-input-group .ops-filter-input{flex:1;min-width:0}.ops-input-group .ops-filter-input:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.ops-input-group .ops-filter-input:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ops-input-addon{display:flex;align-items:center;padding:0 12px;border:1.5px solid var(--border-input);background:var(--bg-muted);color:var(--muted);font-size:13px;white-space:nowrap}.ops-input-addon:first-child{border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md)}.ops-input-addon:last-child{border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0}.ops-input-pair{display:flex;align-items:center;gap:8px}.ops-input-pair .ops-filter-input{flex:1;min-width:0}.ops-input-pair-sep{color:var(--muted-light);font-size:13px;flex:none}.ops-check{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:13px;color:var(--foreground);cursor:pointer}.ops-check>input{flex:none;margin-top:3px}.ops-check>span{min-width:0;overflow-wrap:anywhere}.ops-check-inline{display:flex;flex-wrap:wrap;gap:4px 18px}.ops-check-list{max-height:190px;overflow-y:auto;border:1.5px solid var(--border-input);border-radius:var(--radius-md);background:var(--bg-input);padding:4px 10px}.ops-switch{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--foreground);cursor:pointer}.ops-switch>input{position:absolute;opacity:0;width:0;height:0}.ops-switch-track{position:relative;flex:none;width:36px;height:20px;border-radius:10px;background:var(--border-input);transition:background 0.15s}.ops-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--bg-card);box-shadow:var(--shadow-xs);transition:transform 0.15s}.ops-switch>input:checked + .ops-switch-track{background:var(--primary)}.ops-switch>input:checked + .ops-switch-track::after{transform:translateX(16px)}.ops-switch>input:focus-visible + .ops-switch-track{box-shadow:0 0 0 3px var(--ring)}.ops-range{display:flex;align-items:center;gap:12px}.ops-range input[type="range"]{flex:1;accent-color:var(--primary);cursor:pointer}.ops-range output{min-width:3ch;font-size:13px;font-variant-numeric:tabular-nums;color:var(--foreground);text-align:right}.ops-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.ops-form-status{font-size:12px;color:var(--muted);margin-right:auto}.ops-form-status[data-level="success"]{color:var(--success)}.ops-form-status[data-level="danger"]{color:var(--danger)}.ops-result-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-xs)}.ops-table-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}.ops-export-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:500;cursor:pointer;color:var(--foreground-secondary);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color 0.12s,color 0.12s,background 0.12s}.ops-export-btn:hover{border-color:var(--primary);color:var(--primary)}.ops-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card)}.ops-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.ops-table thead th{padding:8px 14px;text-align:left;font-weight:500;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:0.04em;background:transparent;border-bottom:1px solid var(--border);white-space:nowrap}.ops-table.ops-cols-pinned thead th{overflow:hidden;text-overflow:ellipsis}.ops-table tbody tr{border-bottom:1px solid var(--border-subtle);transition:background 0.12s ease}.ops-table tbody tr:last-child{border-bottom:none}.ops-table tbody tr:hover{background:var(--bg-subtle)}.ops-table td{padding:10px 14px;vertical-align:middle;color:var(--foreground);overflow-wrap:anywhere;word-break:break-word}.ops-table td:first-child{font-weight:500}.ops-th-help{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-left:4px;border-radius:50%;border:1px solid var(--border);color:var(--muted-light);font-size:9px;font-weight:700;line-height:1;cursor:help;vertical-align:middle}.ops-th-help:hover{border-color:var(--primary);color:var(--primary)}.ops-table thead th.ops-th-sortable{cursor:pointer;user-select:none}.ops-table thead th.ops-th-sortable:hover{color:var(--foreground)}.ops-sort-indicator{display:inline-block;margin-left:6px;font-size:9px;opacity:0;transition:opacity 0.12s ease}.ops-table thead th.ops-th-sortable:hover .ops-sort-indicator{opacity:0.5}.ops-table thead th[data-sort] .ops-sort-indicator{opacity:1}.ops-table thead th[data-sort]{color:var(--foreground)}.ops-table thead th:not([data-sort]) .ops-sort-indicator::before{content:"↕"}.ops-table thead th[data-sort="asc"] .ops-sort-indicator::before{content:"▲"}.ops-table thead th[data-sort="desc"] .ops-sort-indicator::before{content:"▼"}.ops-table-frame{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card)}.ops-table-frame>.ops-table{margin:0}.ops-table[data-ops-max-rows] thead th{position:sticky;top:0;background:var(--bg-card)}.ops-table-frame{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,0.25) transparent}.ops-table-frame::-webkit-scrollbar{width:8px;height:8px}.ops-table-frame::-webkit-scrollbar-track{background:transparent}.ops-table-frame::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.25);border:2px solid transparent;background-clip:padding-box;border-radius:999px;transition:background 0.15s}.ops-table-frame:hover::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.45);background-clip:padding-box}.ops-table-frame::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,0.6);background-clip:padding-box}.ops-table-frame::-webkit-scrollbar-corner{background:transparent}.ops-table-filter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px 0}.ops-table-filter-left{display:flex;align-items:center;gap:10px;min-width:0}.ops-table-filter-wrap{position:relative;display:inline-flex;align-items:center;width:280px}.ops-table-filter-icon{position:absolute;left:10px;color:var(--muted-light);pointer-events:none}.ops-table-filter-input{width:100%;border:1px solid var(--border);border-radius:var(--radius-md);padding:7px 10px 7px 32px;font-size:13px;background:var(--bg-card);color:var(--foreground);transition:border-color 0.12s ease,box-shadow 0.12s ease}.ops-table-filter-input::placeholder{color:var(--muted-light)}.ops-table-filter-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(43,129,252,0.14)}.ops-table-filter-wrap:focus-within .ops-table-filter-icon{color:var(--primary)}.ops-table-filter-count{font-size:11px;color:var(--muted-light);min-width:60px;text-align:left}.ops-table thead th.ops-th-has-col-filter{position:relative;padding-right:26px}.ops-th-filter-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;padding:0;margin:0;border:none;border-radius:var(--radius-sm,4px);background:transparent;color:var(--muted-light);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.12s ease,background 0.12s ease,color 0.12s ease}.ops-table thead th:hover .ops-th-filter-btn,.ops-th-filter-btn:focus-visible,.ops-th-filter-btn.is-active{opacity:1}.ops-th-filter-btn:hover{color:var(--foreground);background:rgba(128,128,128,0.12)}.ops-th-filter-btn.is-active{color:var(--primary);background:rgba(43,129,252,0.12)}.ops-th-filter-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.ops-table thead th.ops-th-reorderable:not(.ops-th-sortable){cursor:grab}.ops-table thead th.ops-th-reorderable:not(.ops-th-sortable):active{cursor:grabbing}.ops-table thead th.is-col-dragging{opacity:0.45;background:var(--bg-subtle)}.ops-table thead th.ops-th-drop-before{box-shadow:inset 2px 0 0 0 var(--primary)}.ops-table thead th.ops-th-drop-after{box-shadow:inset -2px 0 0 0 var(--primary)}.ops-col-order-reset{border:1px solid var(--border);border-radius:var(--radius-sm,4px);background:transparent;color:var(--muted);font-size:11px;line-height:1;padding:5px 8px;cursor:pointer;white-space:nowrap;transition:color 0.12s ease,border-color 0.12s ease}.ops-col-order-reset:hover{color:var(--foreground);border-color:var(--muted-light)}.ops-col-order-reset:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.ops-table thead th.ops-th-resizable{position:relative}.ops-table thead th:last-child .ops-th-resizer{display:none}.ops-th-resizer{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;user-select:none;z-index:2;background:transparent;opacity:0;transition:opacity 0.12s ease,background 0.12s ease}.ops-table thead th:hover .ops-th-resizer,.ops-th-resizer.is-dragging{opacity:1;background:linear-gradient(to right,transparent 0,transparent 2px,var(--border) 2px,var(--border) 4px,transparent 4px,transparent 6px)}.ops-th-resizer.is-dragging{background:linear-gradient(to right,transparent 0,transparent 2px,var(--primary) 2px,var(--primary) 4px,transparent 4px,transparent 6px)}body.ops-col-resizing,body.ops-col-resizing *{cursor:col-resize!important;user-select:none!important}.ops-col-filter-popup{position:absolute;z-index:1000;width:260px;max-height:360px;display:flex;flex-direction:column;background:var(--bg-card);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 10px 30px rgba(0,0,0,0.18);font-size:13px;overflow:hidden}.ops-cfp-header{padding:8px;border-bottom:1px solid var(--border)}.ops-cfp-search{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm,4px);padding:6px 8px;font-size:12px;background:var(--bg-card);color:var(--foreground)}.ops-cfp-search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(43,129,252,0.18)}.ops-cfp-toolbar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted)}.ops-cfp-link{border:none;background:transparent;color:var(--primary);font-size:11px;padding:2px 4px;cursor:pointer;border-radius:var(--radius-sm,4px)}.ops-cfp-link:hover{background:rgba(43,129,252,0.1)}.ops-cfp-count{margin-left:auto;color:var(--muted-light);font-variant-numeric:tabular-nums}.ops-cfp-list{flex:1 1 auto;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(128,128,128,0.25) transparent}.ops-cfp-list::-webkit-scrollbar{width:6px}.ops-cfp-list::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.3);border-radius:999px}.ops-cfp-row{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;user-select:none}.ops-cfp-row:hover{background:rgba(128,128,128,0.08)}.ops-cfp-cb{flex:0 0 auto;margin:0;accent-color:var(--primary)}.ops-cfp-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ops-cfp-label.is-blank{color:var(--muted-light);font-style:italic}.ops-cfp-rowcount{flex:0 0 auto;color:var(--muted-light);font-size:11px;font-variant-numeric:tabular-nums}.ops-cfp-empty{padding:16px;text-align:center;color:var(--muted-light);font-size:12px}.oq-col-id{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--foreground)}.oq-col-date{white-space:nowrap;font-size:12px;color:var(--muted)}.oq-link{color:var(--primary);text-decoration:none;font-weight:500}.oq-link:hover{text-decoration:underline}.oq-status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:3px 10px;border-radius:20px;white-space:nowrap;display:inline-block}.oq-st-success{background:#DCFCE7;color:#166534}.oq-st-active{background:#DBEAFE;color:#1E40AF}.oq-st-pending{background:#FEF3C7;color:#92400E}.oq-st-processing{background:#E0E7FF;color:#3730A3}.oq-st-danger{background:#FEE2E2;color:#991B1B}.oq-st-warning{background:#FFF4EF;color:#C2410C}.oq-st-muted{background:#F3F4F6;color:#6B7280}.oq-pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px;padding:8px 0}.oq-page-btn{min-width:36px;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--foreground-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;justify-content:center}.oq-page-btn:hover:not(.active):not(.disabled){border-color:var(--primary);color:var(--primary)}.oq-page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600;cursor:default}.oq-page-btn.disabled{opacity:0.4;cursor:default;pointer-events:none}.oq-page-dots{padding:0 6px;color:var(--muted-light);font-size:14px;display:inline-flex;align-items:center}.oq-page-label{font-size:13px;font-weight:500;color:var(--muted);padding:0 12px;display:inline-flex;align-items:center}@media (max-width:1200px){.ops-filter-grid-5{grid-template-columns:repeat(3,1fr)}.ops-filter-grid-6{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.ops-filter-grid-5,.ops-filter-grid-6{grid-template-columns:1fr}.ops-filter-grid{grid-template-columns:1fr}.ops-cards{grid-template-columns:1fr}.sc-detail-header,.sc-detail-section{padding:16px 20px}.sc-pay-row{flex-direction:column;align-items:flex-start}.sc-pay-meta{flex-wrap:wrap}.ops-table{font-size:12px}.ops-table td,.ops-table thead th{padding:8px 10px}}.upd-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;max-width:1060px}@media (max-width:860px){.upd-layout{grid-template-columns:1fr}}.upd-sidebar{display:flex;flex-direction:column;gap:16px}.upd-id-card{padding:28px 20px!important;text-align:center}.upd-id-avatar{width:64px;height:64px;border-radius:50%;background:var(--primary);color:#fff;font-size:1.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;opacity:.9}.upd-id-avatar-img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 14px}.upd-id-name{font-size:1rem;font-weight:700;color:var(--foreground);margin-bottom:8px}.upd-id-meta{display:inline-block;margin:2px auto}.upd-legend-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:7px}.upd-legend-list li{font-size:.78rem;color:var(--muted);line-height:1.5}.upd-main{display:flex;flex-direction:column;gap:16px}.upd-global-msg{border-radius:var(--radius-md);padding:11px 16px;font-size:.88rem;font-weight:500;animation:upd-fadein .2s ease}@keyframes upd-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.upd-global-success{background:#F0FDF4;border:1.5px solid #86EFAC;color:#166534}.upd-global-error{background:#FEF2F2;border:1.5px solid #FECACA;color:#DC2626}.upd-global-link{color:inherit;font-weight:700;text-decoration:underline}.upd-global-link:hover{opacity:.8}.upd-section-header{display:flex;align-items:center;gap:10px}.upd-section-badge{font-size:.7rem;font-weight:700;border-radius:var(--radius-pill);padding:2px 8px;min-width:0}.upd-badge-ok{background:#DCFCE7;color:#166534}.upd-badge-err{background:#FEE2E2;color:#991B1B}.upd-section-danger{border-color:rgba(239,68,68,.25)!important}.upd-danger-badge{font-size:.65rem;font-weight:700;background:#FEF2F2;color:#DC2626;border:1px solid #FECACA;border-radius:var(--radius-pill);padding:2px 8px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.upd-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}@media (max-width:600px){.upd-fields{grid-template-columns:1fr}}.upd-section-actions{display:flex;justify-content:flex-end;margin-top:4px}.upd-btn-danger{background:var(--danger)!important;box-shadow:none}.upd-btn-danger:hover{background:#c53030!important}.upd-modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:var(--overlay-blur);-webkit-backdrop-filter:var(--overlay-blur);display:flex;align-items:center;justify-content:center;z-index:1000}.upd-modal{max-width:440px;width:90%;padding:32px!important;animation:upd-modal-in .2s ease}@keyframes upd-modal-in{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.upd-modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.upd-course-tags{display:flex;flex-wrap:wrap;gap:8px;min-height:32px}.upd-course-tag{display:inline-flex;align-items:center;gap:6px;background:var(--bg-muted,#F1F5F9);border:1px solid var(--border);border-radius:6px;padding:5px 8px 5px 12px;font-size:.82rem;color:var(--foreground)}.upd-course-tag button{background:none;border:none;color:var(--foreground-muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px}.upd-course-tag button:hover{color:#e53e3e}.upd-course-dropdown{position:absolute;z-index:50;top:100%;left:0;right:0;max-height:220px;overflow-y:auto;background:var(--bg-card,#fff);border:1px solid var(--border-input);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12)}.upd-course-dropdown-item{padding:9px 14px;font-size:.84rem;cursor:pointer;color:var(--foreground-secondary)}.upd-course-dropdown-item:hover{background:var(--bg-muted,#F1F5F9);color:var(--foreground)}.ops-filter-field{position:relative}@media (max-width:768px){.upd-layout{gap:16px}.upd-fields{grid-template-columns:1fr}}

.af-loading-note {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.af-skeleton { list-style: none; margin: 0; padding: 0; }
.af-sk-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.af-sk-line {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  animation: af-pulse 1.2s ease-in-out infinite;
}
@keyframes af-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .af-sk-line { animation: none; }
}
/* A spinner on the loading line. The note alone is one grey sentence on a
   white page, which reads as a page that finished and had nothing to show;
   something moving is what says "still working" at a glance. */
.af-loading-note { display: flex; align-items: center; gap: 8px; }
.af-loading-note::before {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: af-spin .8s linear infinite;
}
@keyframes af-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .af-loading-note::before { animation: none; } }

/* Tiles and panels: the skeleton takes the SHAPE of what is coming, not a
   generic bar stack. A page whose real body is a stat row over two panelled
   tables should not load as five thin lines — the layout jumps when the data
   lands, and until it does the reader cannot tell a slow query from an empty
   one. */
.af-sk-tiles {
  display: grid; gap: 12px; margin: 0 0 20px;
  grid-template-columns: repeat(var(--af-cols, 4), minmax(0, 1fr));
}
@media (max-width: 1200px) { .af-sk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .af-sk-tiles { grid-template-columns: minmax(0, 1fr); } }
.af-sk-tile {
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-md); background: var(--bg-card);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px;
}
.af-sk-panel {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); padding: 16px 18px; margin: 0 0 18px;
}
.af-sk-panel-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.af-sk-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.af-sk-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-sk-table td { padding: 14px 12px; border-bottom: 1px solid var(--border); }
.af-sk-cell .af-sk-line { min-width: 26px; }
.af-sk-cell[data-align="right"] .af-sk-line { margin-left: auto; }

/* A fragment that is taking a while says so. Without this a query that runs
   for fifteen seconds looks exactly like one that finished in two and painted
   nothing — which reads as broken, and is the state people reload out of. */
.af-loading-note[data-af-slow="1"] { color: var(--text); }
.af-loading-note .af-elapsed { opacity: .75; font-variant-numeric: tabular-nums; }

/* A refresh must be perceptible without being destructive: the previous
   reading stays legible underneath while the next one is fetched. */
[data-refreshing] { opacity: .6; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { [data-refreshing] { transition: none; } }

.af-retry {
  margin-top: 10px; padding: .4rem .9rem; border-radius: 8px; cursor: pointer;
  font: inherit; border: 1px solid var(--border); background: var(--bg-elevated);
  color: inherit;
}
.af-retry:hover { background: var(--bg-muted); }


.ops-export-overlay {
  position: fixed; inset: 0; z-index: 10050; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 42, 0.68);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ops-export-overlay.open { display: flex; }
.ops-export-card {
  background: var(--background, #fff); color: var(--foreground, #222);
  border: 1px solid var(--border-subtle, #e0e0e0); border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
  width: min(420px, 94vw); overflow: hidden;
}
.ops-export-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle, #e0e0e0);
}
.ops-export-title { font-size: 15px; font-weight: 600; }
.ops-export-sub {
  font-size: 12px; color: var(--muted-foreground, #666); margin-top: 2px;
}
.ops-export-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  font-size: 18px; line-height: 1; color: var(--foreground, #222); cursor: pointer;
}
.ops-export-x:hover {
  background: var(--bg-muted, #f4f4f6); border-color: var(--border-subtle, #e0e0e0);
}
.ops-export-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.ops-export-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; text-align: left; cursor: pointer;
  background: var(--background, #fff); color: var(--foreground, #222);
  border: 1px solid var(--border-subtle, #e0e0e0); border-radius: 9px;
  font: inherit; transition: background-color 120ms ease, border-color 120ms ease;
}
.ops-export-opt:hover:not(:disabled) {
  background: var(--bg-muted, #f4f4f6); border-color: var(--border-strong, #c9c9cf);
}
.ops-export-opt:focus-visible { outline: 2px solid var(--primary, #4f46e5); outline-offset: 2px; }
.ops-export-opt:disabled { opacity: 0.6; cursor: progress; }
.ops-export-ico { font-size: 19px; line-height: 1; flex: none; }
.ops-export-label { font-size: 13px; font-weight: 600; }
.ops-export-note { font-size: 11.5px; color: var(--muted-foreground, #666); margin-top: 1px; }
.ops-export-err {
  margin: 0 16px 14px; padding: 9px 11px; border-radius: 8px; font-size: 12px;
  background: var(--destructive-bg, #fdecec); color: var(--destructive, #b3261e);
  border: 1px solid var(--destructive-border, #f5c2c0); display: none;
}
.ops-export-err.show { display: block; }
.ops-export-ok {
  margin: 0 16px 14px; padding: 11px 12px; border-radius: 8px; font-size: 12.5px;
  background: var(--success-bg, #eaf7ee); color: var(--foreground, #222);
  border: 1px solid var(--success-border, #bfe3c9); display: none;
}
.ops-export-ok.show { display: block; }
.ops-export-ok a {
  display: inline-block; margin-top: 7px; padding: 7px 11px; border-radius: 7px;
  background: var(--primary, #4f46e5); color: #fff; font-weight: 600;
  text-decoration: none;
}
.ops-export-ok a:hover { filter: brightness(1.08); }


/* `.ops-export-btn` was written for a BUTTON, which carries no underline.
   Rendered as a link — which is what `export_href` produces — it inherits the
   browser's, and the control reads as body text with a box round it. */
a.ops-export-btn{text-decoration:none}

/* Busy: not pressable, and visibly so. The label does not change, because it
   is the control's accessible name and swapping it mid-action renames the
   thing a screen-reader user just pressed; the state is carried beside it. */
.ops-export-btn[data-busy="1"]{opacity:.65;pointer-events:none}

.ops-export-note{
  display:inline-flex;align-items:center;gap:8px;
  margin-left:10px;font-size:12px;color:var(--muted-light)
}
/* A spinner while the job runs, matching `async_fragment`'s `.af-loading-note`
   — including its reasoning, which is this case exactly: a lone grey sentence
   on a white page reads as something that FINISHED and had nothing to show.
   Something moving is what says "still working" at a glance, and this wait is
   20-40 s. */
.ops-export-note[data-state="working"]::before{
  content:"";flex:0 0 auto;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--primary);
  animation:ops-export-spin .8s linear infinite
}
@keyframes ops-export-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ops-export-note[data-state="working"]::before{animation:none}
}
/* Done is a TERMINAL state and has to look like one — no spinner, a tick, and
   the past tense. "downloading 76,437 rows" under a spinner reads as a second
   thing still happening after the first one ended. */
.ops-export-note[data-state="done"]{color:var(--success,var(--primary))}
.ops-export-note[data-state="done"]::before{content:"\2713";font-weight:700}
.ops-export-note[data-state="error"]{color:var(--danger)}
.ops-export-note[data-state="error"]::before{content:"\26a0";font-size:13px}
/* The elapsed counter, same shape as the async-fragment one: tabular so the
   digits do not jitter, dimmer than the sentence it trails. */
.ops-export-note .ops-export-elapsed{opacity:.75;font-variant-numeric:tabular-nums}


/* ---- Date picker (design_system/components/date_picker.py) ---- */
:root { --kdp-range-bg: rgba(42,117,223,0.10); --kdp-range-bg-strong: rgba(42,117,223,0.20);
  --kdp-shadow: 0 12px 32px -12px rgba(15,23,42,0.28), 0 2px 6px -2px rgba(15,23,42,0.10); }
[data-theme="dark"] { --kdp-range-bg: rgba(74,144,226,0.18); --kdp-range-bg-strong: rgba(74,144,226,0.30);
  --kdp-shadow: 0 14px 36px -10px rgba(0,0,0,0.65), 0 2px 6px -2px rgba(0,0,0,0.4); }
.kdp { position: relative; display: flex; flex-direction: column; min-width: 0; }
.kdp-native { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important;
  min-height: 0 !important; opacity: 0; pointer-events: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.kdp-field { position: relative; display: flex; min-width: 0; }
/* Zero-specificity defaults so a bare <input type="date"> with no class still looks like an
   ops input, while any page class (ops-filter-input, date-input, …) wins untouched. */
:where(.kdp-input) { padding: 9px 12px; border: 1.5px solid var(--border-input); border-radius: var(--radius-md);
  font-size: 13px; color: var(--foreground); background: var(--bg-input); outline: none; font-family: inherit;
  min-height: 38px; box-sizing: border-box; }
:where(.kdp-input):focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.kdp-input { width: 100%; min-width: 0; padding-right: 62px !important; font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em; cursor: pointer; }
.kdp-input::placeholder { color: var(--muted-light); letter-spacing: 0.02em; }
.kdp-input.kdp-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.18) !important; }
.kdp-open-state .kdp-input { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.kdp-icon, .kdp-clear { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0;
  background: transparent; border-radius: 50%; color: var(--muted); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0; transition: background .12s, color .12s, opacity .12s; }
.kdp-icon { right: 5px; }
.kdp-icon:hover, .kdp-open-state .kdp-icon { background: var(--kdp-range-bg); color: var(--primary); }
.kdp-clear { right: 32px; opacity: 0; pointer-events: none; }
.kdp-has-value .kdp-field:hover .kdp-clear, .kdp-has-value .kdp-input:focus ~ .kdp-clear { opacity: 1; pointer-events: auto; }
.kdp-clear:hover { color: var(--danger); background: rgba(239,68,68,0.10); }
.kdp-disabled .kdp-icon { opacity: .4; pointer-events: none; }
.kdp-disabled .kdp-input { cursor: not-allowed; opacity: .55; }

/* The popover lives on <body> while open and is placed by JS in viewport
   coordinates (`top`/`left` inline). `position: fixed` on a body child is what
   lets it escape an ancestor's `overflow: hidden` — every OPS form card clips
   (DEV-8505) — and the layer clears every dialog a date input can sit in. */
.kdp-pop { position: fixed; z-index: 10100; top: 0; left: 0; width: 300px; background: var(--bg-card);
  border-radius: var(--radius-xl); box-shadow: var(--kdp-shadow); overflow: hidden; opacity: 0;
  transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .14s ease, transform .14s ease;
  font-family: var(--font-sans); font-size: 13px; color: var(--foreground); text-align: left; line-height: normal; }
.kdp-pop.kdp-open { opacity: 1; transform: none; }
.kdp-pop.kdp-up { transform: translateY(6px) scale(.98); transform-origin: bottom left; }
.kdp-pop.kdp-up.kdp-open { transform: none; }
.kdp-pop.kdp-right { transform-origin: top right; }
.kdp-pop.kdp-up.kdp-right { transform-origin: bottom right; }
@media (prefers-reduced-motion: reduce) { .kdp-pop { transition: none; } }

.kdp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 14px;
  background: var(--primary); color: #fff; }
.kdp-title { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; font: inherit;
  font-size: 15px; font-weight: 600; color: #fff; padding: 6px 10px; margin-left: -10px; border-radius: var(--radius-pill);
  cursor: pointer; letter-spacing: -0.005em; }
.kdp-title:hover { background: rgba(255,255,255,0.16); }
.kdp-title svg { color: rgba(255,255,255,0.85); transition: transform .12s; }
.kdp-title[aria-expanded="true"] svg { transform: rotate(180deg); }
.kdp-nav { display: flex; gap: 4px; }
.kdp-nav button { width: 32px; height: 32px; border: 0; background: rgba(255,255,255,0.14); border-radius: 50%; color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .12s; }
.kdp-nav button:hover { background: rgba(255,255,255,0.28); }

.kdp-body { padding: 10px 12px 6px; }
.kdp-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.kdp-dow span { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; color: var(--muted-light); }
.kdp-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; isolation: isolate; }
.kdp-day { position: relative; height: 36px; border: 0; background: transparent; font: inherit; font-size: 13px;
  color: var(--foreground); border-radius: 50%; cursor: pointer; padding: 0; font-variant-numeric: tabular-nums;
  transition: background .1s, color .1s; }
.kdp-day:hover { background: var(--kdp-range-bg); color: var(--primary); }
.kdp-day.out { color: var(--muted-light); }
.kdp-day.today { font-weight: 600; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.kdp-day.in-range { background: var(--kdp-range-bg); border-radius: 0; color: var(--primary); }
.kdp-day.in-range:hover { background: var(--kdp-range-bg-strong); }
.kdp-day.range-start::before, .kdp-day.range-end::before { content: ''; position: absolute; top: 0; bottom: 0;
  background: var(--kdp-range-bg); z-index: -1; }
.kdp-day.range-start::before { left: 50%; right: 0; }
.kdp-day.range-end::before { left: 0; right: 50%; }
.kdp-day.range-start.range-end::before { display: none; }
.kdp-day.sel { background: var(--primary); color: #fff; font-weight: 600; box-shadow: none; }
.kdp-day.sel:hover { background: var(--primary-hover); color: #fff; }
.kdp-day.focus { box-shadow: 0 0 0 3px var(--ring); }
.kdp-day:disabled { color: var(--muted-light); opacity: .45; cursor: not-allowed; background: transparent; box-shadow: none; }
.kdp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0 2px; }
.kdp-grid.years { grid-template-columns: repeat(4, 1fr); }
.kdp-cell { height: 40px; border: 0; background: transparent; border-radius: var(--radius-pill); font: inherit; font-size: 13px;
  color: var(--foreground); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .1s, color .1s; }
.kdp-cell:hover { background: var(--kdp-range-bg); color: var(--primary); }
.kdp-cell.cur { color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--primary); }
.kdp-cell.sel { background: var(--primary); color: #fff; font-weight: 600; box-shadow: none; }
.kdp-cell:disabled { color: var(--muted-light); opacity: .45; cursor: not-allowed; background: transparent; box-shadow: none; }
.kdp-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 2px; }
.kdp-chip { font: inherit; font-size: 11px; font-weight: 600; padding: 5px 11px; border: 0; border-radius: var(--radius-pill);
  background: var(--kdp-range-bg); color: var(--primary); cursor: pointer; transition: background .12s, color .12s; }
.kdp-chip:hover { background: var(--primary); color: #fff; }
.kdp-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 12px; }
.kdp-foot button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; padding: 7px 14px;
  border-radius: var(--radius-pill); cursor: pointer; color: var(--muted); transition: background .12s, color .12s; }
.kdp-foot button:hover { background: var(--bg-muted); color: var(--foreground); }
.kdp-foot .kdp-today { background: var(--primary); color: #fff; }
.kdp-foot .kdp-today:hover { background: var(--primary-hover); color: #fff; }