:root{--bg: #f7f7f8;--surface: #ffffff;--surface-2: #fbfbfc;--border: #e6e6e9;--border-strong: #d4d4d9;--text-primary: oklch(22% .01 260);--text-secondary: oklch(46% .012 260);--text-tertiary: oklch(62% .01 260);--accent: oklch(58% .18 265);--accent-hover: oklch(52% .19 265);--accent-subtle: oklch(94% .035 265);--success: oklch(50% .14 150);--success-bg: oklch(94% .05 150);--warning: oklch(55% .15 75);--warning-bg: oklch(94% .06 75);--danger: oklch(55% .2 25);--danger-bg: oklch(95% .045 25);--neutral-bg: oklch(94% .004 260)}[data-theme=dark]{--bg: oklch(18% .006 260);--surface: oklch(22% .007 260);--surface-2: oklch(25% .008 260);--border: oklch(30% .008 260);--border-strong: oklch(36% .009 260);--text-primary: oklch(96% .004 260);--text-secondary: oklch(74% .008 260);--text-tertiary: oklch(56% .008 260);--accent: oklch(72% .15 265);--accent-hover: oklch(78% .14 265);--accent-subtle: oklch(28% .05 265);--success: oklch(72% .15 150);--success-bg: oklch(28% .05 150);--warning: oklch(78% .14 75);--warning-bg: oklch(30% .06 75);--danger: oklch(70% .18 25);--danger-bg: oklch(30% .06 25);--neutral-bg: oklch(30% .006 260)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text-primary);font-family:Geist,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}::placeholder{color:var(--text-tertiary)}.mono{font-family:Geist Mono,ui-monospace,SF Mono,Menlo,monospace}button,input,select{font-family:inherit}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap}.badge-success{background:var(--success-bg);color:var(--success)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-neutral{background:var(--neutral-bg);color:var(--text-secondary)}.badge-accent{background:var(--accent-subtle);color:var(--accent)}.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}.btn{font-size:13px;font-weight:600;border-radius:8px;padding:9px 16px;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-outline{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong);font-weight:500}.btn-outline:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}.btn-danger-solid{background:var(--danger);color:#fff}.btn-warn{background:transparent;color:var(--warning);border:1px solid var(--warning)}.btn-sm{font-size:12px;padding:6px 12px;border-radius:6px}.section-label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}.field-label{font-size:12px;font-weight:600;color:var(--text-secondary)}.field-input{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;font-size:14px;background:var(--surface);color:var(--text-primary);outline:none}.field-input:focus{border-color:var(--accent)}.filter-input{padding:7px 12px;border:1px solid var(--border-strong);border-radius:7px;font-size:13px;background:var(--surface);color:var(--text-primary)}.search-box{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-strong);border-radius:7px;padding:7px 12px;color:var(--text-tertiary)}.search-box input{border:none;outline:none;background:transparent;font-size:13px;color:var(--text-primary);width:100%}.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px}.panel-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.panel-title{font-size:14px;font-weight:600}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}.kpi-label{font-size:12px;color:var(--text-tertiary);font-weight:500}.kpi-value{font-size:26px;font-weight:600;color:var(--text-primary)}.kpi-sub{font-size:12px;font-weight:500;display:flex;align-items:center;gap:4px}table{width:100%;border-collapse:collapse}.th{text-align:left;padding:9px 14px;font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}.td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}tr.row-selected{background:var(--accent-subtle)}tr.row-clickable{cursor:pointer}tr.row-clickable:hover td{background:var(--surface-2)}.toggle{width:34px;height:19px;border-radius:10px;position:relative;flex-shrink:0;border:none;cursor:pointer;padding:0}.toggle .knob{position:absolute;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .12s ease}.toggle.on{background:var(--accent)}.toggle.on .knob{left:17px}.toggle.off{background:var(--border-strong)}.toggle.off .knob{left:2px}.toggle:disabled{opacity:.5;cursor:not-allowed}.state-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 24px;color:var(--text-tertiary);text-align:center;font-size:13px}.state-box .state-title{font-size:14px;font-weight:600;color:var(--text-secondary)}.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--neutral-bg) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:6px}@keyframes skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:.35}to{opacity:1}}.live-dot{animation:pulse 1.6s ease-in-out infinite}.timeline-dot{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px}.app-shell{width:100%;height:100vh;display:flex;background:var(--bg);color:var(--text-primary);overflow:hidden}.sidebar{width:224px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 12px;height:100vh}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 22px}.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}.brand-text{display:flex;flex-direction:column;line-height:1.2}.brand-name{font-size:13px;font-weight:600}.brand-sub{font-size:11px;color:var(--text-tertiary)}.sidebar-nav{display:flex;flex-direction:column;gap:2px}.navitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--text-secondary);font-size:13px;font-weight:500}.navitem:hover{background:var(--surface-2);text-decoration:none}.navitem.active{background:var(--accent-subtle);color:var(--accent);font-weight:600}.sidebar-section-label{margin-top:18px;padding:0 10px 6px;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--text-tertiary);text-transform:uppercase}.sidebar-footer{margin-top:auto;padding:8px 10px;font-size:11px;color:var(--text-tertiary)}.main-col{flex:1;display:flex;flex-direction:column;height:100vh;min-width:0}.topbar{height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--border);background:var(--surface);gap:16px}.topbar-search{width:340px;max-width:40vw}.role-badge{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.role-badge.admin{background:var(--accent-subtle);color:var(--accent)}.role-badge.staff{background:var(--neutral-bg);color:var(--text-secondary)}.theme-toggle{border:1px solid var(--border-strong);background:transparent;color:var(--text-secondary);border-radius:7px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}.user-menu{display:flex;align-items:center;gap:8px;position:relative}.avatar{width:28px;height:28px;border-radius:50%;background:var(--neutral-bg);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-secondary);flex-shrink:0}.user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px #0000001f;min-width:160px;padding:6px;z-index:20}.user-menu-dropdown button{width:100%;text-align:left;background:none;border:none;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text-primary);cursor:pointer}.user-menu-dropdown button:hover{background:var(--surface-2)}.page-content{flex:1;overflow-y:auto;padding:26px 28px;display:flex;flex-direction:column;gap:20px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.page-title{font-size:20px;font-weight:600}.page-subtitle{font-size:13px;color:var(--text-tertiary);margin-top:2px}.split-view{flex:1;display:flex;min-height:0}.split-main{flex:1;overflow-y:auto;padding:26px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}.detail-drawer{width:400px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:20px}.detail-drawer-empty{width:400px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border)}