@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#071221;--side:#0a1829;--panel:#102036;--line:#26364d;--gold:#eac06b;--muted:#9eb0ca;--green:#3adea6;--red:#ff727c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#eef3fc;font-family:Cairo,Tahoma,Arial,sans-serif;font-size:13px}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.shell{display:grid;grid-template-columns:215px minmax(0,1fr);min-height:100vh}.sidebar{background:#0a1728;border-left:1px solid #23344c;min-height:100vh;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 13px}.brand{text-align:center;border-bottom:1px solid #29374d;padding-bottom:20px;display:flex;flex-direction:column;gap:3px}.brand strong{color:var(--gold);font-size:18px}.brand small{letter-spacing:2px;font-size:10px;color:var(--gold)}.crown{font-size:44px;color:var(--gold);line-height:1.2}.sidebar nav{padding-top:30px;display:flex;flex-direction:column;gap:8px}.sidebar nav a{display:block;padding:14px;border-radius:9px;font-weight:700;color:#bfcce1}.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(90deg,#604b24,#b68f47);color:white}.side-foot{margin-top:auto;border-top:1px solid #283c59;padding:20px 8px;color:#c7d2e5}.hint{color:#98a9c1;font-size:11px;line-height:1.7}.dot{display:inline-block;height:9px;width:9px;border-radius:50%;margin-left:6px}.dot.green{background:#33d4a0;box-shadow:0 0 9px #33d4a0}.dot.gray{background:#8994a3}.workspace{padding:16px 22px;max-width:2000px;width:100%;margin:0 auto}.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.topbar h1{font-size:23px;margin:0 0 3px;font-weight:800}.topbar em{font-style:normal;color:var(--gold)}.topbar p{margin:0;color:var(--muted)}.topstatus{display:flex;flex-wrap:wrap;gap:8px}.pill{border:1px solid #2a3c52;border-radius:7px;padding:8px 12px;color:#b4c5d9;background:#0c1b2d;font-weight:700}.pill.on{border-color:#166c51;color:#65f0b9;background:#0c2c2b}.pill.off{color:#b8bac4}.metrics{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:12px;margin-bottom:17px}.metric{background:linear-gradient(160deg,#122339,#0c192b);border:1px solid #283b54;border-radius:11px;padding:14px 15px;min-height:107px;position:relative}.metric small{display:block;font-size:12px;color:#b5c4d8}.metric strong{display:block;font-size:26px;line-height:1.65}.metric span{display:block;color:var(--muted);font-size:10px}.metric b{position:absolute;left:13px;top:17px;font-size:22px;color:var(--gold);border:1px solid #594a2e;background:#302b25;padding:0 8px;border-radius:8px}.main-grid{display:grid;grid-template-columns:minmax(300px,1.5fr) minmax(260px,0.93fr) minmax(235px,.81fr);grid-template-areas:'chart preview control' 'signals signals activity' 'devices bot activity';gap:14px;align-items:start}.panel{border:1px solid #2b3b50;border-radius:12px;background:linear-gradient(150deg,#0d1b2d,#11223a);padding:14px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:9px;border-bottom:1px solid #26384e;padding-bottom:12px;margin-bottom:13px}.panel-head h2{margin:0;font-size:15px;font-weight:800}.chart-card{grid-area:chart}.telegram-preview{grid-area:preview}.controls{grid-area:control}.table-card{grid-area:signals}.simulation{grid-area:activity}.devices{grid-area:devices}.bot{grid-area:bot}#main-chart{display:block;width:100%;height:390px;max-height:430px;background:#091626;border-radius:8px}.tag{color:#e8c781;background:#2b2b2a;padding:4px 9px;border-radius:8px;font-size:11px}.signal-card{border:1px solid #21738a;border-radius:12px;padding:15px;display:grid;gap:9px;color:#d1e0f0;font-size:13px}.signal-card b{color:white}.signal-name{font-size:18px;font-weight:800;color:#fff}.reason{padding:12px 10px;background:#182f44;border-radius:8px}.signal-card p{color:var(--gold);font-size:11px;text-align:center;border-top:1px solid #625034;padding-top:14px}.up{color:var(--green)!important;font-weight:800}.down{color:var(--red)!important;font-weight:800}.controls form,.bot form{display:flex;flex-direction:column;gap:12px}.controls label,.bot label{display:flex;flex-direction:column;gap:4px;color:#b5c6da;font-weight:700}.controls input,.controls select,.bot input,.chart-card select{background:#0c192b;color:#eef3fc;border:1px solid #354761;border-radius:8px;padding:9px 10px;width:100%}.controls input:focus,.bot input:focus{outline:2px solid #a98241}.switchlabel{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:center;background:#10283a;padding:12px;border-radius:8px}.switchlabel input{width:20px;accent-color:var(--gold)}.banner{border:1px solid #685026;background:#332920;border-radius:8px;padding:10px;margin-bottom:10px;color:#e7c98b;font-size:11px}.gold-btn{border:1px solid #bc9150;background:linear-gradient(135deg,#f3cc79,#b98b3d);color:#1d1b18;font-weight:800;border-radius:8px;padding:11px}.outline{background:#0c1b2e;border:1px solid #53657d;color:#deebfa;padding:8px 12px;border-radius:8px}.row-choice{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:7px;border-radius:7px;font-size:11px}.chip.selected{background:#73582d;color:#fff4cc}.chip.disabled{border:1px solid #555d6a;color:#8793a3}.scrollx{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:right}th,td{padding:11px 10px;border-bottom:1px solid #24374e}th{color:#edbc61;font-size:11px;background:#182c41}td{color:#cad7e8}tr:hover td{background:#182b3f}.approve,.device-item{padding:9px;border-bottom:1px solid #27394c;display:flex;justify-content:space-between;align-items:center;gap:10px}.approve button{background:var(--gold);border:0;padding:7px 12px;border-radius:8px}.device-item small{display:block;color:var(--muted)}.button-row{display:flex;flex-wrap:wrap;gap:8px}.empty{padding:30px 0;text-align:center;color:var(--muted)}.alert{padding:10px 16px;border-radius:8px;margin:10px 0}.alert.good{border:1px solid #245942;color:#70e2ad}.alert.error{border:1px solid #914248;color:#ffc4c4}.auth-center{display:grid;min-height:100vh;place-items:center}.login-form{width:min(420px,90vw);text-align:center;padding:28px}.login-form h1{color:var(--gold)}.login-form label{text-align:right;display:block;margin:20px 0}.login-form input{display:block;width:100%;padding:12px;margin:10px 0;border:1px solid #324760;border-radius:8px;background:#08152a;color:white}.login-form .gold-btn{width:100%}footer{text-align:center;color:#8d9db5;padding:22px}.logout{text-align:center;margin-bottom:25px}.logout button{background:transparent;border:0;color:#a6afc0;text-decoration:underline}
@media(max-width:1390px){.metrics{grid-template-columns:repeat(3,1fr)}.main-grid{grid-template-columns:1.3fr 1fr;grid-template-areas:'chart preview' 'control activity' 'signals signals' 'devices bot'}}@media(max-width:850px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;min-height:auto;padding:12px}.sidebar nav{flex-direction:row;flex-wrap:wrap;padding-top:8px;gap:3px}.sidebar nav a{padding:8px}.side-foot{display:none}.workspace{padding:10px}.main-grid{grid-template-columns:1fr;grid-template-areas:'chart' 'preview' 'control' 'signals' 'activity' 'devices' 'bot'}.metrics{grid-template-columns:repeat(2,1fr)}#main-chart{height:295px}.topbar h1{font-size:18px}}