@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*{box-sizing:border-box}body{margin:0;background:#07111d;color:#ecf4fb;font:14px Inter,system-ui;overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #28425d;border-radius:9px;padding:10px 14px;background:#102337;color:#ecf4fb}button:hover{background:#19344e}button:disabled{cursor:not-allowed;opacity:.5}button:disabled:hover{background:#102337}.app{min-height:100vh;display:flex}.sidebar{width:232px;padding:24px 14px;background:#0a1726;border-right:1px solid #21374e}.brand{display:flex;gap:10px;color:#65b2ff;font-size:26px;margin:8px 12px 40px}.brand{align-items:center}.brand img{width:44px;height:44px;flex:none}.brand span{font-size:15px;color:#ecf4fb;line-height:1.1}.nav{width:100%;border:0;text-align:left;margin:3px 0;background:transparent}.nav.active{background:#18324c;color:#65b2ff}main{flex:1;min-width:0}header{height:70px;border-bottom:1px solid #21374e;display:flex;justify-content:flex-end;align-items:center;gap:32px;padding:0 34px}header>div{display:grid;gap:4px}small{color:#93a8bc;font-size:12px}.state{color:#93a8bc;text-transform:capitalize}.state.connected{color:#31c66f}.state.connecting,.state.reconnecting{color:#ffac4c}.notice{margin:16px 34px;padding:12px 16px;background:#102b45;border-left:3px solid #2f8cff;border-radius:6px}section{max-width:1320px;padding:34px;margin:auto}.toolbar{display:flex;gap:12px;align-items:center}.toolbar h1{margin-right:auto}.toolbar select{max-width:260px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:22px}article,.panel,.cert{background:#0e1d2d;border:1px solid #21374e;border-radius:12px;padding:18px}article h2{margin:5px 0 12px}.pill{padding:4px 8px;border-radius:99px;background:#293b4d;color:#b8c5d1}.pill.yes{background:#153d29;color:#70e59f}.swatches{display:flex;gap:5px;margin:20px 0}.swatches i{width:32px;height:22px;border-radius:5px;border:1px solid #3e576d}article footer{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}.primary{background:#2f8cff;border-color:#2f8cff}.primary:hover{background:#1978e8}.grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:16px}.grid label,label{display:grid;gap:7px;color:#93a8bc;text-transform:capitalize;min-width:0}input,select{width:100%;padding:10px;border-radius:7px;border:1px solid #2b4760;background:#07111d;color:#ecf4fb;min-width:0;box-sizing:border-box}input[type=checkbox]{width:auto}.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cert{min-width:0}.cert input{font-size:12px;min-width:0}.cert input[type=file]{overflow:hidden}.cert small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.empty{padding:40px;border:1px dashed #38546d;border-radius:12px;color:#93a8bc;margin-top:24px}.row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #21374e}.row-actions{display:flex;gap:8px}.confirm{background:#0e1d2d;border:1px solid #21374e;border-radius:14px;padding:26px;width:min(380px,90%);margin:14vh auto 0;display:grid;gap:14px}.confirm h3{margin:0}.confirm p{color:#93a8bc;margin:0}.confirm-actions{display:flex;gap:10px;justify-content:flex-end}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;z-index:5}.drawer{float:right;width:min(560px,100%);height:100%;overflow:auto;padding:26px;background:#0a1726;display:grid;gap:14px}.drawer>button:first-child{justify-self:end}.drawer h2{margin:0}.drawer h3{margin:12px 0 0}.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.tag{display:flex;align-items:center;gap:6px;background:#18324c;border-radius:99px;padding:4px 10px;font-size:12px;color:#ecf4fb}.tag button{border:0;background:transparent;color:#ecf4fb;padding:0;cursor:pointer;font-size:13px;line-height:1}.tag-add{display:flex;gap:8px}.tag-add input{flex:1}.condition-card{background:#0e1d2d;border:1px solid #21374e;border-radius:10px;padding:14px;display:grid;gap:8px;margin-bottom:10px}.condition-head{display:flex;justify-content:space-between;align-items:center}.condition-row{display:flex;justify-content:space-between;align-items:center;gap:10px;text-transform:none}.condition-row input,.condition-row select{max-width:160px;width:auto}.condition-editor-row{display:grid;grid-template-columns:1fr 90px 1fr 32px;gap:6px;align-items:center;margin-bottom:6px}.empty.small{padding:14px;margin:0 0 10px}.rgb{display:grid;grid-template-columns:80px repeat(4,1fr);gap:5px;align-items:center}.rgb-group{display:grid;gap:10px;padding:14px;background:#0e1d2d;border:1px solid #21374e;border-radius:10px;margin-bottom:10px}.rgb-group-title{text-transform:uppercase;font-size:12px;color:#65b2ff}.light-picker{display:grid;gap:8px;padding:12px;background:#07111d;border:1px solid #21374e;border-radius:8px}.light-picker>b{font-size:13px}.swatch-grid{display:flex;flex-wrap:wrap;gap:8px}.swatch-grid small{color:#93a8bc}.swatch{position:relative;width:34px;height:34px;border-radius:8px;border:1px solid #3e576d;padding:0}.swatch.selected{border-color:#2f8cff;box-shadow:0 0 0 2px #2f8cff66}.swatch-remove{position:absolute;top:-6px;right:-6px;width:16px;height:16px;line-height:14px;border-radius:99px;background:#0a1726;border:1px solid #3e576d;color:#ecf4fb;font-size:11px;text-align:center}.swatch-power{position:absolute;bottom:-6px;left:-6px;width:16px;height:16px;line-height:15px;border-radius:99px;background:#0a1726;border:1px solid #3e576d;font-size:10px;text-align:center}.power-slider{display:flex;align-items:center;gap:10px;padding:2px 2px 0}.power-slider label{flex:1;display:flex;align-items:center;gap:10px;text-transform:none;color:#ecf4fb}.power-slider small{color:#93a8bc;min-width:34px;text-align:right}.warn{color:#f25f5c;display:block}.custom-color{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.custom-color input[type=color]{width:44px;height:34px;padding:2px;flex:none}.custom-color label{flex:1;display:flex;align-items:center;gap:8px;text-transform:none;color:#ecf4fb;min-width:120px}.rgbw-preview{width:44px;height:34px;border-radius:8px;border:1px solid #3e576d;flex:none}.save-preset{display:flex;gap:8px}.save-preset input{flex:1}.manual-rgbw{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.manual-rgbw label{gap:4px;font-size:11px}.checkbox-tag{display:flex;align-items:center;gap:6px;background:#18324c;border-radius:99px;padding:4px 10px;font-size:12px;color:#ecf4fb;text-transform:none;width:auto}.checkbox-tag input{width:auto}.users-layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}.user-row{display:block;width:100%;text-align:left;margin-bottom:6px}.user-row.admin-row{border-color:#65b2ff}.user-row .pill{margin-right:6px}.login{min-height:100vh;display:grid;place-items:center;padding:16px}.login section{width:min(420px,100%);display:grid;gap:14px;padding:36px;background:#0e1d2d;border:1px solid #21374e;border-radius:14px}.login h1{margin:0}.login-logo{width:96px;height:96px;justify-self:center}.login p{color:#93a8bc}.login em{color:#f25f5c}.menu-toggle{display:none;background:transparent;border:1px solid #28425d;border-radius:8px;padding:8px 12px;font-size:18px;line-height:1;margin-right:auto}.backdrop{display:none}@media(max-width:820px){.app{display:block}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:20;transform:translate(-100%);transition:transform .2s ease;box-shadow:2px 0 24px #0008;overflow-y:auto}.sidebar.open{transform:translate(0)}.backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;z-index:15}.menu-toggle{display:inline-flex;align-items:center;justify-content:center}header{padding:10px 16px;gap:12px;height:auto;min-height:62px;flex-wrap:wrap}header>div{min-width:0}header>div b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:52vw}.grid,.certs{grid-template-columns:1fr}section{padding:18px}.toolbar{flex-wrap:wrap}.toolbar h1{width:100%}.toolbar select{max-width:none;width:100%}.rgb{grid-template-columns:64px repeat(4,1fr);gap:4px}.rgb input{padding:8px 4px;font-size:12px}.cards{grid-template-columns:1fr}article footer{flex-direction:column}article footer button{width:100%}.drawer{padding:18px}.row{flex-direction:column;align-items:flex-start;gap:8px}.row-actions{width:100%}.row-actions button{flex:1}.condition-editor-row{grid-template-columns:1fr}.condition-row{flex-direction:column;align-items:flex-start;gap:4px}.users-layout{grid-template-columns:1fr}}.road-preview{position:relative;border-radius:12px;overflow:clip;background:#040a17;border:1px solid #1d3147;box-shadow:0 10px 30px #0008,inset 0 0 0 1px #ffffff08}.road-preview canvas{display:block;width:100%}.road-preview-chip{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:999px;background:#040a17b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #ffffff14;font-size:11px;color:#b8c7d6;pointer-events:none}.road-preview-chip i{width:7px;height:7px;border-radius:50%;animation:road-pulse 1.6s ease-in-out infinite}.road-preview-chip span{text-transform:uppercase;letter-spacing:.08em;font-size:10px}.road-preview-chip b{color:#ecf4fb;font-weight:600}.road-preview-hint{position:absolute;left:10px;right:10px;bottom:10px;padding:7px 10px;border-radius:8px;background:#040a17c4;border:1px solid #ffffff12;font-size:11px;color:#9fb1c3;text-align:center;pointer-events:none}@keyframes road-pulse{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.road-preview-chip i{animation:none}}.feedback-host{position:fixed;z-index:100;top:18px;right:18px;display:grid;gap:8px}.feedback{max-width:420px;padding:12px 16px;border-radius:8px;background:#153d29;color:#d9ffe8;border:1px solid #31c66f;box-shadow:0 8px 28px #0008}.feedback.error{background:#3e2025;color:#ffe5e5;border-color:#f25f5c}