html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{min-height:100vh}*{box-sizing:border-box}:root{color:#e5e7eb;background:#090f1d;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{margin:0}button,input{font:inherit}.login-page,.loading{background:radial-gradient(circle at 18% 20%,#4f46e533,#0000 35%),linear-gradient(135deg,#080d19,#111827);place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:#101827;border:1px solid #263247;border-radius:24px;width:100%;max-width:420px;padding:36px;box-shadow:0 30px 80px #00000059}.brand,.side-brand{align-items:center;gap:16px;display:flex}.brand{margin-bottom:32px}.logo{color:#fff;background:linear-gradient(135deg,#6366f1,#7c3aed);border-radius:16px;place-items:center;width:54px;height:54px;font-size:27px;font-weight:800;display:grid}.logo.small{border-radius:12px;width:40px;height:40px;font-size:20px}h1{letter-spacing:.08em;margin:0}h2{margin:4px 0 0;font-size:30px}h3{margin:3px 0 0}.brand p,.secure-note,small{color:#94a3b8}form{gap:18px;display:grid}label{color:#cbd5e1;gap:8px;font-size:14px;display:grid}input{color:#fff;background:#0b1322;border:1px solid #334155;border-radius:12px;outline:none;padding:14px 15px}input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}form button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#6d28d9);border:0;border-radius:12px;padding:14px;font-weight:700}.message{color:#fca5a5;text-align:center;font-size:14px}.secure-note{text-align:center;margin:16px 0 0;font-size:12px}.dashboard{background:#090f1d;grid-template-columns:240px 1fr;min-height:100vh;display:grid}.sidebar{background:#0d1524;border-right:1px solid #1f2b3e;flex-direction:column;padding:24px 18px;display:flex}.side-brand{padding:4px 8px 30px}nav{gap:6px;display:grid}.nav-item,.logout{text-align:left;color:#94a3b8;cursor:pointer;background:0 0;border:0;border-radius:10px;padding:12px 14px}.nav-item.active{color:#fff;background:#18233a}.logout{color:#fca5a5;margin-top:auto}.content{width:100%;max-width:1500px;padding:34px}.topbar{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.eyebrow{color:#7180a0;letter-spacing:.16em;margin:0;font-size:11px}.user-chip{text-align:right;background:#111b2d;border:1px solid #263247;border-radius:12px;padding:10px 14px;display:grid}.user-chip strong{color:#818cf8;text-transform:uppercase;font-size:11px}.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px;display:grid}.metric,.panel{background:#0f1828;border:1px solid #202d42;border-radius:16px}.metric{padding:20px}.metric span{color:#94a3b8;font-size:13px}.metric strong{margin:10px 0 4px;font-size:28px;display:block}.healthy{color:#34d399}.panel{margin-bottom:18px;padding:22px}.panel-title{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.flow{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.flow span{color:#c7d2fe;background:#172238;border-radius:9px;padding:9px 11px;font-size:11px}.flow b{color:#475569}.table{display:grid}.row{color:#cbd5e1;border-top:1px solid #1e293b;grid-template-columns:1fr 1fr 100px;gap:15px;padding:13px 4px;display:grid}.status-on{color:#34d399}.status-off{color:#f87171}@media (width<=900px){.dashboard{grid-template-columns:1fr}.sidebar{display:none}.cards{grid-template-columns:repeat(2,1fr)}.content{padding:20px}}@media (width<=550px){.cards{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:12px}}.session-user{color:#cbd5e1;border-top:1px solid #1f2b3e;margin-top:auto;margin-bottom:8px;padding:12px 14px;display:grid}.session-user strong{color:#818cf8;text-transform:uppercase;font-size:11px}.record-count{color:#94a3b8;font-size:13px}.users-layout{grid-template-columns:minmax(280px,360px) 1fr;gap:18px;display:grid}.user-form{gap:16px;display:grid}.role-info{color:#94a3b8;background:#0b1322;border:1px solid #263247;border-radius:10px;padding:12px 14px;font-size:13px}.role-info strong{color:#c7d2fe}.page-message{color:#cbd5e1;background:#111b2d;border-radius:10px;margin-top:15px;padding:11px 12px;font-size:13px}.user-table{display:grid}.user-row{color:#cbd5e1;border-top:1px solid #1e293b;grid-template-columns:1fr 1fr 100px 120px;align-items:center;gap:14px;min-height:58px;padding:10px 4px;display:grid}.header-row{color:#64748b;text-transform:uppercase;letter-spacing:.08em;border-top:0;min-height:38px;font-size:11px}.danger-button,.success-button{cursor:pointer;background:0 0;border:1px solid;border-radius:9px;padding:8px 10px}.danger-button{color:#fca5a5;border-color:#7f1d1d}.success-button{color:#6ee7b7;border-color:#065f46}.danger-button:disabled,.success-button:disabled{opacity:.35;cursor:not-allowed}.placeholder{min-height:230px}.placeholder p{color:#94a3b8;max-width:700px;line-height:1.7}@media (width<=1050px){.users-layout{grid-template-columns:1fr}}@media (width<=700px){.user-row{grid-template-columns:1fr 1fr}.header-row{display:none}}.action-buttons{align-items:center;gap:8px;display:flex}.delete-button{color:#fecaca;cursor:pointer;background:#3f1015;border:1px solid #991b1b;border-radius:9px;padding:8px 10px}.delete-button:hover{background:#52151c}.machine-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.machine-card{background:#0f1828;border:1px solid #202d42;border-radius:16px;min-height:230px;padding:20px;position:relative}.machine-head{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px;display:flex}.machine-state{text-transform:uppercase;border-radius:8px;padding:6px 8px;font-size:10px}.machine-state.not_connected{color:#fca5a5;background:#7f1d1d38;border:1px solid #7f1d1d}.machine-details{color:#94a3b8;grid-template-columns:80px 1fr;gap:9px 12px;font-size:12px;display:grid}.machine-details strong{color:#dbeafe;font-weight:500}.read-only-badge{color:#64748b;letter-spacing:.16em;font-size:9px;position:absolute;bottom:16px;right:18px}.empty-state{max-width:700px}.empty-state>p:not(.eyebrow){color:#94a3b8;line-height:1.7}.primary-action{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#7c3aed);border:0;border-radius:10px;margin-top:14px;padding:11px 15px;font-weight:700}@media (width<=1300px){.machine-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=950px){.machine-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.machine-grid{grid-template-columns:1fr}}.gateway-layout{grid-template-columns:minmax(320px,430px) 1fr;gap:18px;display:grid}.gateway-help{color:#94a3b8;font-size:13px;line-height:1.7}.activation-box{background:#312e812e;border:1px solid #4338ca;border-radius:12px;gap:10px;margin-top:18px;padding:16px;display:grid}.activation-box>span{color:#a5b4fc;text-transform:uppercase;letter-spacing:.08em;font-size:11px}.activation-box code{overflow-wrap:anywhere;color:#f8fafc;font-size:15px;line-height:1.6}.copy-button,.secondary-action{color:#cbd5e1;cursor:pointer;background:#111b2d;border:1px solid #475569;border-radius:9px;width:fit-content;padding:8px 11px}.security-note{background:#064e3b24;border:1px solid #065f46;border-radius:10px;gap:5px;margin-top:18px;padding:13px;display:grid}.security-note strong{color:#6ee7b7;font-size:12px}.security-note span{color:#94a3b8;font-size:12px;line-height:1.6}.gateway-empty{color:#64748b;padding:22px 4px}.gateway-list{display:grid}.gateway-row{border-top:1px solid #1e293b;grid-template-columns:2fr 100px 100px 1.2fr;align-items:center;gap:14px;padding:15px 4px;display:grid}.gateway-row>div{gap:4px;display:grid}.gateway-row small,.gateway-row span{color:#64748b;font-size:10px}.gateway-online{text-transform:uppercase;background:#065f4640;border-radius:8px;width:fit-content;padding:5px 8px;color:#6ee7b7!important}.gateway-offline{text-transform:uppercase;background:#7f1d1d33;border-radius:8px;width:fit-content;padding:5px 8px;color:#fca5a5!important}@media (width<=1100px){.gateway-layout{grid-template-columns:1fr}}@media (width<=700px){.gateway-row{grid-template-columns:1fr 1fr}}.machine-readonly-notice{background:#064e3b1f;border:1px solid #065f46;border-radius:11px;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px;font-size:12px;display:flex}.machine-readonly-notice strong{color:#6ee7b7;white-space:nowrap}.machine-readonly-notice span{color:#94a3b8}.machine-ip-editor{border-top:1px solid #1e293b;margin-top:18px;padding-top:14px}.machine-ip-editor label{color:#94a3b8;margin-bottom:7px;font-size:11px;display:block}.machine-ip-editor>div{gap:7px;display:flex}.machine-ip-editor input{color:#e2e8f0;background:#0b1322;border:1px solid #334155;border-radius:8px;outline:none;flex:1;min-width:0;padding:8px 9px}.machine-ip-editor input:focus{border-color:#6366f1}.machine-ip-editor button{color:#e2e8f0;cursor:pointer;background:#172033;border:1px solid #475569;border-radius:8px;padding:8px 10px}.machine-ip-readonly{color:#94a3b8;margin-top:18px;font-size:12px}.machine-state.reachable{color:#6ee7b7;background:#065f4640;border:1px solid #065f46}.machine-state.unknown{color:#fde68a;background:#713f1238;border:1px solid #854d0e}.gateway-lifecycle-top{grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;display:grid}.gateway-policy{gap:10px;margin-top:18px;display:grid}.gateway-policy>div{border-bottom:1px solid #1e293b;justify-content:space-between;gap:16px;padding:10px 0;display:flex}.gateway-policy strong{color:#dbeafe;font-size:12px}.gateway-policy span{color:#64748b;text-align:right;font-size:11px}.gateway-management-panel,.gateway-history-panel{margin-bottom:18px}.gateway-lifecycle-list{display:grid}.gateway-lifecycle-row{border-top:1px solid #1e293b;grid-template-columns:minmax(190px,1.5fr) 90px 100px minmax(150px,1fr) minmax(280px,1.6fr);align-items:center;gap:14px;padding:16px 0;display:grid}.gateway-main-info,.gateway-meta{gap:4px;display:grid}.gateway-main-info small{color:#475569;overflow-wrap:anywhere;font-size:9px}.gateway-meta span{color:#64748b;font-size:10px}.gateway-meta strong{font-size:11px}.gateway-status{border-radius:8px;width:fit-content;padding:5px 8px;font-size:9px;font-weight:700}.gateway-status-online{color:#6ee7b7;background:#065f4640}.gateway-status-offline,.gateway-status-disabled{color:#fde68a;background:#713f1238}.gateway-status-revoked{color:#fca5a5;background:#7f1d1d40}.gateway-actions{flex-wrap:wrap;gap:6px;display:flex}.gateway-actions button{color:#cbd5e1;cursor:pointer;background:#111b2d;border:1px solid #334155;border-radius:7px;padding:6px 8px;font-size:10px}.activation-history{display:grid}.activation-history-row{border-top:1px solid #1e293b;grid-template-columns:100px 1fr 1fr 1.5fr;align-items:center;gap:16px;padding:13px 0;display:grid}.activation-history-row>div{gap:4px;display:grid}.activation-history-row span{color:#64748b;font-size:10px}.activation-history-row strong{overflow-wrap:anywhere;font-size:11px}.activation-status{border-radius:8px;width:fit-content;padding:5px 8px;font-weight:700;font-size:9px!important}.activation-pending{background:#1e40af38;color:#93c5fd!important}.activation-used{background:#065f4638;color:#6ee7b7!important}.activation-expired{background:#3341554d;color:#94a3b8!important}@media (width<=1200px){.gateway-lifecycle-row{grid-template-columns:1fr 90px 100px 1fr}.gateway-actions{grid-column:1/-1}}@media (width<=800px){.gateway-lifecycle-top{grid-template-columns:1fr}.gateway-lifecycle-row,.activation-history-row{grid-template-columns:1fr 1fr}}