:root{--bg:#07111e;--panel:#111d30;--panel2:#16243a;--line:#2a3a52;--text:#f0f4fb;--muted:#9ba9bd;--violet:#7960e8;--pink:#ef4d78;--green:#4dd079;--blue:#528ef2;--orange:#ff932f;--shadow:0 15px 35px #0004}*{box-sizing:border-box}[hidden]{display:none!important}html{color-scheme:dark}body{margin:0;background:radial-gradient(circle at 50% -20%,#192b48 0,transparent 38%),var(--bg);color:var(--text);font-family:Tahoma,"Segoe UI",sans-serif;font-size:14px;min-height:100vh}button,input{font:inherit}.panel{background:linear-gradient(145deg,#142137,#0e192a);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}.muted,p{color:var(--muted)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(440px,100%);padding:38px;background:linear-gradient(145deg,#15243a,#0c1728);border:1px solid var(--line);border-radius:24px;box-shadow:0 25px 75px #0008;text-align:center}.brand-mark{width:68px;height:68px;display:grid;place-items:center;margin:auto;border-radius:20px;background:#6e54db22;border:1px solid #856ee3;color:#cdbfff;font-size:30px}.brand-mark.small{width:43px;height:43px;margin:0;border-radius:13px;font-size:20px}.eyebrow{letter-spacing:2px;color:#9c87ff;font-size:11px}.login-card h1{margin:5px 0}.login-card form{text-align:right;margin-top:26px}.login-card label,.control>label{display:block;color:#b4c0d1;margin:13px 0 6px}.login-card input,.control input{width:100%;padding:12px 13px;margin-top:6px;border:1px solid #34455f;border-radius:9px;background:#0c1727;color:#fff;outline:none}.login-card input:focus{border-color:var(--violet)}.login-card button,.save{width:100%;border:0;border-radius:10px;background:linear-gradient(90deg,#6046d8,#7c61e8);color:#fff;padding:13px;margin-top:18px;cursor:pointer;font-weight:bold}.error{min-height:22px;color:#ff7892;text-align:center}
#app-view{max-width:1920px;margin:auto;padding:16px 20px}.topbar{height:77px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.brand,.account,.clock{display:flex;align-items:center;gap:13px}.brand>div:last-child,.account>div:first-child,.clock{display:flex;flex-direction:column}.brand strong{font-size:17px}.brand small,.account small,.clock small{color:var(--muted);margin-top:4px}.clock{position:absolute;left:50%;transform:translateX(-50%);text-align:center}.clock strong{font-size:19px}.online-dot{color:var(--green);position:absolute;right:calc(100% + 10px);white-space:nowrap}.avatar{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:#d7dcea;color:#526078;font-size:19px;font-weight:bold}.icon-btn{border:1px solid #2a3a55;background:#17243a;color:#dbe5f5;border-radius:10px;min-width:38px;height:38px;cursor:pointer}.layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:13px}.control{padding:0 0 18px;overflow:hidden}.control>*:not(hr){margin-left:18px;margin-right:18px}.section-title{height:56px;display:flex;align-items:center;justify-content:space-between}.section-title h2,.section-title h3,.control h3{margin:0}.control hr{border:0;border-top:1px solid var(--line);margin:14px 0}.device-list{display:grid;gap:8px}.device-item{padding:12px;border:1px solid #33455f;border-radius:11px;display:flex;align-items:center;gap:12px;cursor:pointer}.device-item.active{border-color:#8469eb;background:#4b3b8c20}.device-item .watch{font-size:22px}.device-item div{flex:1}.device-item strong,.device-item small{display:block}.device-item small{color:var(--muted);margin-top:4px}.status-dot{width:9px;height:9px;border-radius:50%;background:#66758d;display:inline-block}.status-dot.on{background:var(--green);box-shadow:0 0 12px #4dd079}.toggles{display:grid;grid-template-columns:1fr 1fr;gap:7px}.toggles label{padding:8px;border:1px solid #34445e;border-radius:8px;color:#dfe7f5}.toggles .unsupported{opacity:.46}.save:disabled{opacity:.75;cursor:not-allowed}
.dashboard{min-width:0}.dashboard-head{min-height:72px;padding:11px 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.dashboard-head h1,.dashboard-head p{margin:0}.device-heading{display:flex;align-items:center;gap:10px}.periods{display:flex;direction:rtl}.periods button{padding:11px 22px;border:0;border-left:1px solid #26364f;background:transparent;color:#aebad0;cursor:pointer}.periods button.active{background:#263553;color:#b8a8ff;border-radius:8px}.menu{display:none}.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px}.cards article{padding:18px;min-width:0}.metric{grid-column:span 4;min-height:215px}.card-title{display:flex;justify-content:space-between;align-items:flex-start}.card-title h2{font-size:16px;margin:0 0 12px}.card-title p{margin:0}.card-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:bold;font-size:18px}.card-icon.app-icon{overflow:hidden;background:transparent}.card-icon.app-icon img{width:100%;height:100%;display:block;object-fit:cover}.card-icon.pink{background:#ef4d7822;color:var(--pink)}.card-icon.green{background:#4dd07922;color:var(--green)}.card-icon.blue{background:#528ef222;color:var(--blue)}.card-icon.violet{background:#7960e822;color:#b49eff}.card-icon.orange{background:#ff932f22;color:var(--orange)}.metric>div:nth-child(2){margin-top:8px}.metric>div:nth-child(2)>strong{font-size:35px}.pink-text{color:var(--pink)}.metric canvas{width:100%;height:75px}.connection-bar{height:12px;border-radius:12px;background:#203049;margin-top:34px;overflow:hidden}.connection-bar i{height:100%;width:0;display:block;background:linear-gradient(90deg,#39bba9,#4dd079);transition:.4s}.link-badge{display:inline-block;color:var(--green);background:#14372a;padding:5px 10px;border-radius:20px;margin-top:23px}.chart-card{grid-column:span 8;min-height:380px}.chart-wrap{position:relative;height:300px}.chart-wrap canvas{width:100%;height:100%}.empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}.stats{grid-column:span 4}.stats dl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:30px 0}.stats dl div{text-align:center;padding:16px 5px;border-left:1px solid var(--line)}.stats dl div:last-child{border:0}.stats dt{color:var(--muted)}.stats dd{font-size:30px;font-weight:bold;margin:8px 0}.stats small{color:var(--muted)}.notice{background:#1a2940;padding:11px;border-radius:9px}.future{grid-column:span 12}.future-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.future-grid span{padding:13px;border:1px dashed #384a65;border-radius:10px;color:#bdc8d9}.future-grid small{display:block;color:#697991;margin-top:5px}
.metric{grid-column:span 3}.chart-card{min-height:410px}.chart-wrap{height:330px;direction:ltr}.chart-wrap canvas{direction:ltr}.connection-card{display:flex;flex-direction:column}.connection-main{display:flex!important;align-items:center;gap:10px;margin-top:18px!important}.connection-value{font-size:27px!important;color:#ff7893}.connection-value.on{color:var(--green)}.connection-card>small{display:block;color:var(--muted);margin-top:auto;padding-top:12px}.layout-message{min-height:20px;text-align:center;color:var(--green);font-size:11px}.save{margin-bottom:0}
@media(max-width:1100px){.layout{grid-template-columns:300px 1fr}.metric{grid-column:span 6}.chart-card,.stats{grid-column:span 12}.future-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){#app-view{padding:9px}.topbar{height:66px;padding:8px 12px}.brand small,.clock small,.account>div:first-child{display:none}.clock{position:static;transform:none}.online-dot{position:static}.layout{display:block}.control{position:fixed;z-index:20;top:0;right:0;bottom:0;width:min(360px,90vw);border-radius:0;transform:translateX(105%);transition:.25s;overflow-y:auto}.control.open{transform:none}.menu{display:block}.dashboard-head{gap:8px;flex-wrap:wrap}.periods{width:100%;justify-content:center}.periods button{flex:1;padding:9px}.cards{gap:9px}.metric{grid-column:span 12}.future-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:470px){.brand strong{font-size:14px}.brand-mark.small{display:none}.clock strong{font-size:15px}.account{gap:6px}.avatar{width:38px;height:38px}.dashboard-head{padding:11px}.cards article{padding:14px}.stats dl{gap:0}.stats dd{font-size:24px}.future-grid{grid-template-columns:1fr 1fr}}