:root{--bg-base: #0a0e14;--bg-card: #141920;--bg-elevated: #1a2028;--bg-hover: #1e2630;--border-color: #2a3040;--text-primary: #c8d0da;--text-secondary: #8b95a5;--text-muted: #5a6577;--accent-green: #18a058;--accent-blue: #2080f0;--accent-red: #d03050;--accent-yellow: #f0a020;--accent-cyan: #18b8c0;--radius: 8px;--radius-lg: 12px;--shadow: 0 2px 12px rgba(0, 0, 0, .3);--transition: .25s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.layout-container{display:flex;height:100vh;overflow:hidden}.layout-sidebar{width:220px;min-width:220px;background:var(--bg-card);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:width var(--transition),min-width var(--transition);overflow:hidden}.layout-sidebar.collapsed{width:64px;min-width:64px}.sidebar-logo{height:60px;display:flex;align-items:center;padding:0 16px;font-size:16px;font-weight:700;color:var(--accent-green);border-bottom:1px solid var(--border-color);white-space:nowrap;overflow:hidden}.sidebar-logo svg{min-width:24px;margin-right:10px}.sidebar-logo.collapsed svg{margin-right:0}.sidebar-logo span{opacity:1;transition:opacity var(--transition)}.sidebar-logo span.hidden{opacity:0}.sidebar-menu{flex:1;overflow-y:auto;padding:8px 0}.menu-item{display:flex;align-items:center;padding:10px 20px;cursor:pointer;color:var(--text-secondary);transition:all var(--transition);white-space:nowrap;border-left:3px solid transparent;font-size:14px}.menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}.menu-item.active{background:#18a05814;color:var(--accent-green);border-left-color:var(--accent-green)}.menu-item svg{min-width:18px;margin-right:12px;font-size:18px}.menu-item span{opacity:1;transition:opacity var(--transition)}.menu-item span.hidden{display:none}.layout-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.layout-header{height:60px;min-height:60px;background:var(--bg-card);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.header-left{display:flex;align-items:center;gap:16px}.header-right{display:flex;align-items:center;gap:20px}.header-title{font-size:18px;font-weight:600;color:var(--text-primary)}.system-status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-green)}.status-dot.offline{background:var(--text-muted)}.status-dot.error{background:var(--accent-red)}.layout-content{flex:1;overflow-y:auto;padding:20px 24px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.dashboard-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.dashboard-row.video-section{grid-template-columns:2fr 1fr}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.card-title{font-size:15px;font-weight:600;color:var(--text-primary)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease}@keyframes livePulse{0%{box-shadow:0 0 #18a05880}70%{box-shadow:0 0 0 8px #18a05800}to{box-shadow:0 0 #18a05800}}.live-pulse{animation:livePulse 2s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.blink{animation:blink 1s infinite}.text-green{color:var(--accent-green)}.text-blue{color:var(--accent-blue)}.text-red{color:var(--accent-red)}.text-yellow{color:var(--accent-yellow)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-4{margin-bottom:16px}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}