:root{--primary:#0ea5e9;--accent:#ff4500;--bg-base:#020617;--bg-panel:#0b1221;--bg-input:#ffffff05;--text-main:#fff;--text-sub:#64748b;--text-muted:#94a3b8;--border:#ffffff0f;--border-light:#ffffff1a;--shadow-float:0 10px 30px -5px #00000080}.dashboard-container{background-color:var(--bg-base);color:var(--text-main);background-image:radial-gradient(#ffffff08 1px,#0000 1px);background-size:24px 24px;width:100vw;height:100vh;margin:0;font-family:Inter,sans-serif;display:flex;position:fixed;top:0;left:0;overflow:hidden}.sidebar-header{flex-shrink:0;padding:32px 32px 20px}.logo-area{align-items:center;gap:12px;margin-bottom:24px;display:flex}.logo-icon{background:linear-gradient(135deg,var(--accent),#9a2b00);color:#fff;border-radius:10px;place-items:center;width:36px;height:36px;font-size:18px;font-weight:700;display:grid;box-shadow:inset 0 2px 4px #fff3}.logo-text{letter-spacing:-.02em;font-size:18px;font-weight:700}.segmented-control{background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:4px;display:flex;position:relative}.segment-btn{text-align:center;color:var(--text-sub);cursor:pointer;z-index:2;border-radius:7px;flex:1;padding:8px;font-size:13px;font-weight:600;transition:color .2s}.segment-btn.active{color:var(--text-main)}.segment-pill{z-index:1;background:#ffffff0d;border-radius:7px;width:calc(50% - 4px);transition:transform .3s cubic-bezier(.2,.8,.2,1);position:absolute;top:4px;bottom:4px;left:4px;box-shadow:0 2px 5px #0003}.scroll-content{flex:1;padding:10px 32px 40px;overflow-y:auto}.section-label{text-transform:uppercase;color:var(--text-sub);letter-spacing:.05em;margin:32px 0 12px;font-size:11px;font-weight:700}input[type=text]{border:1px solid var(--border-light);background:var(--bg-input);width:100%;color:var(--text-main);border-radius:8px;outline:none;padding:12px;font-family:inherit;font-size:14px;transition:all .2s}input[type=text]:focus{border-color:var(--primary);background:#0ea5e90d}.modern-card{background:var(--bg-input);border:1px solid var(--border);cursor:pointer;border-radius:12px;margin-bottom:8px;padding:16px;transition:all .2s}.modern-card:hover{background:#ffffff0d;border-color:#fff3;transform:translateY(-1px)}.modern-card.selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:#0ea5e91a}.mode-item{align-items:center;gap:14px;display:flex}.mode-icon{font-size:22px}.mode-text div{color:var(--text-main);font-size:14px;font-weight:600}.mode-text span{color:var(--text-sub);font-size:12px}.avatar-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.avatar-box{border:1px solid var(--border);text-align:center;cursor:pointer;background:var(--bg-input);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-height:80px;padding:12px;transition:all .2s;display:flex;position:relative;overflow:hidden}.avatar-box:hover{background:#ffffff0d}.avatar-box.active{border-color:var(--primary);color:var(--primary);background:#0ea5e91a}.color-row{gap:12px;margin-bottom:12px;display:flex}.color-dot{cursor:pointer;border:2px solid var(--bg-panel);width:40px;height:40px;box-shadow:0 0 0 1px var(--border);border-radius:50%;transition:transform .2s}.color-dot:hover{transform:scale(1.1)}.color-dot.active{box-shadow:0 0 0 2px var(--text-main),0 0 0 4px var(--bg-panel)}.btn-primary{background:var(--text-main);width:100%;color:var(--bg-base);cursor:pointer;border:none;border-radius:10px;margin-top:24px;padding:14px;font-weight:600;transition:all .2s;box-shadow:0 4px 12px #00000080}.btn-primary:hover:not(:disabled){background:#e2e8f0}.color-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;margin-bottom:20px;display:grid}.color-input-group{flex-direction:column;gap:6px;display:flex}.color-label-small{color:var(--text-sub);font-size:11px;font-weight:600}input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:8px;width:100%;height:38px;padding:0}.pos-row{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;margin-bottom:12px;padding:2px;display:flex}.pos-btn{text-align:center;color:var(--text-sub);cursor:pointer;border-radius:6px;flex:1;padding:8px;font-size:12px;font-weight:500}.pos-btn.active{color:var(--text-main);border:1px solid var(--border-light);background:#ffffff0d;font-weight:600}.train-row{gap:8px;display:flex}.btn-train{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:0 20px;font-weight:600}.main{flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative}.browser-mockup{background:var(--bg-panel);width:92%;height:90%;box-shadow:var(--shadow-float);border:1px solid var(--border);border-radius:16px;flex-direction:column;display:flex;overflow:hidden}.browser-bar{border-bottom:1px solid var(--border);background:#02061780;align-items:center;gap:16px;height:48px;padding:0 16px;display:flex}.address-field{border:1px solid var(--border-light);height:28px;color:var(--text-muted);background:#ffffff08;border-radius:6px;flex:1;justify-content:center;align-items:center;font-size:12px;display:flex}.browser-content{background-color:var(--bg-base);flex:1;padding:40px;position:relative}.analytics-view{flex-direction:column;width:100%;max-width:1000px;height:100%;display:flex}.kpi-grid{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px;display:grid}.kpi-card{background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;border-radius:16px;padding:24px;transition:all .3s;box-shadow:0 1px 2px #0003}.kpi-card:hover{border-color:#ffffff1a;transform:translateY(-4px);box-shadow:0 10px 30px -5px #00000080}.kpi-card.active{border-color:var(--primary);background:#0ea5e90d}.kpi-num{letter-spacing:-.03em;color:var(--text-main);font-size:42px;font-weight:800}.kpi-label{color:var(--text-sub);text-transform:uppercase;margin-top:4px;font-size:13px;font-weight:600}.kpi-card.active .kpi-num{color:var(--primary)}.data-table{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;flex-direction:column;flex:1;display:flex;overflow:hidden;box-shadow:0 1px 2px #0003}.table-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:20px 30px;display:flex}.table-container{flex:1;overflow-y:auto}table{border-collapse:collapse;width:100%}th{text-align:left;text-transform:uppercase;color:var(--text-sub);border-bottom:1px solid var(--border);background:#ffffff05;padding:16px 30px;font-size:11px;font-weight:600;position:sticky;top:0}td{border-bottom:1px solid var(--border);color:var(--text-main);padding:18px 30px;font-size:14px}.badge{color:var(--primary);background:#0ea5e91a;border:1px solid #0ea5e933;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700}.sidebar{background:var(--bg-panel);border-right:1px solid var(--border);z-index:50;flex-direction:column;width:500px;min-width:400px;display:flex;box-shadow:20px 0 40px #00000080}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--bg-panel)}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}