*{box-sizing:border-box}body{margin:0;font:15px/1.45 system-ui,"Segoe UI",Arial,sans-serif;background:#f3f5f9;color:#1f2937;display:flex;min-height:100vh}
aside{width:230px;background:#0f172a;color:#cbd5e1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.logo{font-size:18px;font-weight:700;color:#fff;padding:20px}aside nav{flex:1;overflow:auto}
aside nav a{display:flex;gap:10px;align-items:center;padding:11px 20px;color:#cbd5e1;text-decoration:none;border-left:3px solid transparent}
aside nav a:hover{background:#1e293b}aside nav a.on{background:#1e293b;color:#fff;border-color:#38bdf8;font-weight:600}
.usr{padding:16px 20px;font-size:13px;border-top:1px solid #1e293b}.usr a{color:#7dd3fc;text-decoration:none}
main{flex:1;padding:24px 28px;min-width:0}h1{margin:0 0 16px;font-size:24px}h2{font-size:17px;margin:22px 0 10px}
.topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.presets{display:flex;gap:6px;flex-wrap:wrap}.presets a{padding:7px 14px;border-radius:20px;background:#fff;color:#475569;text-decoration:none;border:1px solid #e2e8f0}
.presets a.on{background:#0ea5e9;color:#fff;border-color:#0ea5e9}
.flt{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.flt label,.sform label{display:flex;flex-direction:column;font-size:12px;color:#64748b;gap:3px}
input,select,textarea,button{font:inherit;padding:7px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}
button,.btn{background:#0ea5e9;color:#fff;border:0;cursor:pointer;text-decoration:none;border-radius:8px;display:inline-block;padding:8px 16px}
button.gray{background:#64748b}button.red{background:#ef4444}.sm{padding:4px 10px;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:8px}
.card{background:#fff;border-radius:12px;padding:14px 16px;border-left:5px solid #94a3b8;text-decoration:none;color:inherit;box-shadow:0 1px 2px #0001}
a.card:hover{box-shadow:0 3px 10px #0002}.card.ok{border-color:#22c55e}.card.bad{border-color:#ef4444}.card.out{border-color:#3b82f6}.card.warn{border-color:#f59e0b}
.card small{display:block;color:#64748b}.card b{font-size:26px}
.tw{overflow-x:auto;background:#fff;border-radius:12px;box-shadow:0 1px 2px #0001;margin-bottom:16px}table{border-collapse:collapse;width:100%}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef2f7;white-space:nowrap}th{background:#f8fafc;font-size:12px;color:#64748b;text-transform:uppercase}tr:hover td{background:#fafcff}.c{text-align:center;color:#94a3b8}
.tag{padding:3px 10px;border-radius:12px;background:#e2e8f0;font-size:12px}.tag.ok{background:#dcfce7;color:#166534}.tag.bad{background:#fee2e2;color:#991b1b}.tag.warn{background:#fef3c7;color:#92400e}
.tag.in{background:#e0f2fe;color:#075985}.tag.out{background:#ede9fe;color:#5b21b6}.tag.int{background:#f1f5f9;color:#475569}
.chart{display:flex;gap:4px;height:170px;background:#fff;padding:14px;border-radius:12px}.col{flex:1;display:flex;flex-direction:column;align-items:center}.bar{flex:1;width:100%;display:flex;flex-direction:column-reverse}
.bar i{display:block;width:100%}i.a{background:#22c55e}i.b{background:#ef4444}.col small{color:#94a3b8;font-size:10px}.legend i{display:inline-block;width:10px;height:10px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}.hint{color:#64748b;font-size:13px}.pager{display:flex;gap:10px;align-items:center}
.notice{background:#fef3c7;color:#92400e;padding:12px 16px;border-radius:10px}.okmsg{background:#dcfce7;color:#166534;padding:12px 16px;border-radius:10px}.err{color:#b91c1c}
.play{padding:2px 10px}.dl{text-decoration:none}.chk{flex-direction:row!important;align-items:center;gap:6px!important;font-size:14px!important;color:#1f2937!important}
.sform fieldset,fieldset.sform{background:#fff;border:0;border-radius:12px;padding:16px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px;max-width:720px;box-shadow:0 1px 2px #0001}
legend{font-weight:700;padding:0 6px}.card-form{background:#fff;padding:14px;border-radius:12px;margin-bottom:14px}.inl{display:inline-flex;gap:4px;margin-right:6px}.acts2{display:flex;gap:10px;margin:14px 0}
code{background:#f1f5f9;padding:2px 6px;border-radius:5px;word-break:break-all}.qbox{margin-bottom:26px}
body.lg{display:grid;place-items:center;background:#0f172a}.box{background:#fff;padding:30px;border-radius:14px;display:flex;flex-direction:column;gap:12px;width:320px}
@media(max-width:800px){body{flex-direction:column}aside{width:100%;height:auto;position:static}aside nav{display:flex;overflow-x:auto}aside nav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}.usr{display:none}main{padding:16px}}
/* v3 */
.logo{padding:18px 16px}.logo img{height:36px;display:block}.cr{margin-top:8px;color:#64748b;font-size:11px}
.tabs{display:flex;gap:4px;margin:0 0 14px;border-bottom:2px solid #e2e8f0;flex-wrap:wrap}.tabs a{padding:9px 16px;color:#475569;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px;font-weight:500}
.tabs a.on{color:#0284c7;border-color:#0284c7;font-weight:700}.tabs a:hover{background:#eef6ff}
.live{background:#ecfeff;border:1px solid #a5f3fc;color:#155e75;padding:12px 18px;border-radius:12px;margin-bottom:6px;display:flex;gap:26px;flex-wrap:wrap;align-items:center}.live b{font-size:22px}.live[hidden]{display:none}.live a{margin-left:auto;color:#0369a1}
.sec{display:flex;align-items:center;gap:8px}details.dg{background:#fff;border-radius:10px;margin-bottom:8px;padding:8px 12px;box-shadow:0 1px 2px #0001}details.dg summary{cursor:pointer}
.grid td{padding:3px 6px}.grid input{width:100%}.gridbox{background:#fff;border-radius:12px;padding:12px;max-width:680px;box-shadow:0 1px 2px #0001}
.prog{display:flex;height:9px;border-radius:6px;overflow:hidden;background:#e2e8f0;min-width:150px}.prog i{display:block}
.tgl{display:flex;flex-direction:column;gap:2px}.row2{display:flex;gap:12px;flex-wrap:wrap}.stat-ok{color:#16a34a}.stat-bad{color:#dc2626}
.hb{padding:10px 14px;border-radius:10px;margin-bottom:12px}.hb.ok{background:#dcfce7;color:#166534}.hb.bad{background:#fee2e2;color:#991b1b}

/* ===== v4 dizayn: yangi ko'rinish, yorug'/qorong'i rejim, mobil menyu ===== */
:root{--bg:#f1f5fb;--panel:#fff;--txt:#0f172a;--mut:#64748b;--line:#e6ebf3;--acc:#0ea5e9;--acc2:#2563eb;--side1:#0b1226;--side2:#111c3a;--shadow:0 1px 2px #0f172a0d,0 4px 14px #0f172a0a}
html[data-theme=dark]{--bg:#0b1120;--panel:#131c31;--txt:#e2e8f0;--mut:#94a3b8;--line:#1f2b46;--shadow:0 1px 2px #0006,0 4px 14px #0004}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
aside{background:linear-gradient(180deg,var(--side1),var(--side2));width:236px;box-shadow:2px 0 18px #0003}
.logo{display:block;padding:20px 18px 14px;text-decoration:none}.logo img{height:38px;transition:opacity .15s}.logo:hover img{opacity:.85}
aside nav{padding:6px 10px}aside nav a{border-left:0;border-radius:10px;margin:2px 0;padding:10px 12px;font-weight:500;transition:background .15s}
aside nav a span{width:22px;text-align:center}aside nav a:hover{background:#ffffff14}
aside nav a.on{background:linear-gradient(90deg,#0ea5e933,#2563eb33);color:#fff;box-shadow:inset 3px 0 0 #38bdf8}
.usr{border-top:1px solid #ffffff14;display:flex;flex-direction:column;gap:8px}.usr b{color:#fff;font-weight:600}
.lsw{display:flex;gap:4px;align-items:center}.lsw a{padding:2px 8px;border-radius:6px;color:#94a3b8;background:#ffffff0f;font-size:12px;text-decoration:none}.lsw a.cur{background:#0ea5e9;color:#fff}
.thm{background:#ffffff14;color:#e2e8f0;border:0;border-radius:6px;padding:1px 8px;margin-left:auto;cursor:pointer;font-size:15px}.cr a{color:#64748b;text-decoration:none}.cr a:hover{color:#38bdf8}
main{padding:28px 32px}h1{font-size:26px;font-weight:700;letter-spacing:-.4px;color:var(--txt)}
.card,.tw,.card-form,.sform fieldset,fieldset.sform,.gridbox,details.dg,.chart{background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--line);color:var(--txt)}
.card{border-left-width:5px;border-radius:14px;transition:transform .12s,box-shadow .12s}a.card:hover{transform:translateY(-2px)}.card small{color:var(--mut)}
.tw,.card-form,.sform fieldset,fieldset.sform{border-radius:14px}
th{background:transparent;color:var(--mut);border-bottom:1px solid var(--line)}td{border-bottom:1px solid var(--line)}tr:hover td{background:#0ea5e90a}
input,select,textarea{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:10px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px #0ea5e933}
button,.btn{background:linear-gradient(135deg,var(--acc),var(--acc2));border-radius:10px;font-weight:600;transition:filter .15s,transform .05s}button:hover,.btn:hover{filter:brightness(1.08)}button:active{transform:scale(.98)}
button.gray{background:#64748b}button.red{background:linear-gradient(135deg,#f87171,#dc2626)}
.presets a,.tabs a{color:var(--mut)}.presets a{background:var(--panel);border-color:var(--line)}.presets a.on{background:var(--acc);border-color:var(--acc);color:#fff}
.tabs{border-bottom-color:var(--line)}.tabs a.on{color:var(--acc);border-color:var(--acc)}.tabs a:hover{background:#0ea5e914}
.hint,.flt label,.sform label{color:var(--mut)}.chk{color:var(--txt)!important}code{background:#94a3b826;color:inherit}legend{color:var(--txt)}
html[data-theme=dark] .notice{background:#422006;color:#fde68a}html[data-theme=dark] .okmsg,html[data-theme=dark] .hb.ok{background:#052e16;color:#86efac}html[data-theme=dark] .hb.bad{background:#450a0a;color:#fca5a5}
html[data-theme=dark] .tag{background:#1e293b;color:#cbd5e1}html[data-theme=dark] .tag.ok{background:#052e16;color:#86efac}html[data-theme=dark] .tag.bad{background:#450a0a;color:#fca5a5}html[data-theme=dark] .tag.warn{background:#422006;color:#fde68a}
html[data-theme=dark] .tag.in{background:#082f49;color:#7dd3fc}html[data-theme=dark] .tag.out{background:#2e1065;color:#c4b5fd}html[data-theme=dark] .live{background:#083344;border-color:#155e75;color:#a5f3fc}
.permf{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;max-width:420px}.permf .chk{font-size:13px!important}.permf button{margin-left:auto}
.burger{display:none;position:fixed;top:10px;right:10px;z-index:30;padding:6px 12px;font-size:20px;background:#0b1226;color:#fff;border-radius:10px}
body.lg{background:radial-gradient(1200px 600px at 20% -10%,#1d4ed855,transparent),radial-gradient(900px 500px at 100% 110%,#0ea5e944,transparent),#0b1226;display:grid;place-items:center;padding:16px}
.box{background:var(--panel);color:var(--txt);border-radius:18px;padding:32px;width:min(380px,100%);box-shadow:0 20px 60px #0008;border:1px solid var(--line)}
.lglogo{display:block;align-self:flex-start}.lglogo img{height:46px}.lgttl{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:-4px}
html[data-theme=dark] .lglogo img{filter:none}.lsw-l{margin-top:4px}.lsw-l a{background:#94a3b822;color:var(--mut)}.lsw-l .thm{background:#94a3b822;color:var(--txt)}
@media(max-width:800px){aside{position:fixed;inset:0 auto 0 0;height:100vh;width:260px;transform:translateX(-105%);transition:transform .2s;z-index:20;flex-direction:column}
 body.menu aside{transform:none}aside nav{display:block}aside nav a{white-space:normal;border-bottom:0}.usr{display:flex}.burger{display:block}main{padding:58px 14px 20px}body{display:block}}
/* v4.3 autocall liniya tanlovi */
.lbl{display:block;margin:8px 0}.lnl{display:flex;flex-direction:column;gap:4px;margin:4px 0;max-height:190px;overflow:auto}.lnlx{display:flex;flex-direction:column;gap:4px;margin:4px 0;max-height:190px;overflow:auto}
label.ck{display:flex;align-items:center;gap:6px;font-weight:400}label.ck input{width:auto}
.sform label.ck,label.ck{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:14px;color:var(--txt,#1f2937);padding:3px 0}
label.ck input[type=radio],label.ck input[type=checkbox]{width:auto!important;flex:none;margin:0}
label.ck small{color:var(--mut,#64748b)}
.lnl{border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:6px 10px;max-height:230px}
.chtab th.fh{white-space:normal!important;text-transform:none!important;letter-spacing:0!important;font-size:11px!important;line-height:1.25;text-align:center;vertical-align:bottom;width:78px;min-width:78px;max-width:90px;padding:6px 4px;word-break:break-word;hyphens:auto}
.chtab th.fh .fe{display:block;font-size:18px;margin-bottom:2px}
.chtab td.c{text-align:center}.chtab td input[type=checkbox]{width:18px;height:18px}

/* v4.5 marketing / lidlar / AI */
.mktabs{margin:0 0 14px}
table.hm td,table.hm th{text-align:center;padding:4px 5px;min-width:26px;font-size:12px}
table.hm th:first-child{text-align:left}
ul.adv{margin:6px 0 16px;padding-left:20px}ul.adv li{margin:5px 0}
pre.code{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow:auto;font-size:13px;white-space:pre-wrap;word-break:break-all}
td.barc{width:40%}.bar{height:10px;background:rgba(37,99,235,.35);border-radius:5px;position:relative;min-width:2px}.bar i{display:block;height:100%;background:rgba(220,38,38,.85);border-radius:5px}
.ocf{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.ocf select,.ocf input{padding:3px 5px;font-size:12px;max-width:110px}.ocf input[name=note]{max-width:140px}
.aibox{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;line-height:1.55}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0}.grid2 label{display:flex;flex-direction:column;gap:4px;font-size:13px}.grid2 input,.grid2 select{width:100%;box-sizing:border-box}
.ln{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:4px 0}.ln select{min-width:220px;max-width:100%}
.tk{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}.tk .acts{display:flex;gap:6px;flex-wrap:wrap}

/* PBX: guruhlangan tablar */
.pxg{margin-bottom:14px;border:1px solid var(--bd,#e5e7eb);border-radius:10px;padding:6px 10px}
.pxr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0}
.pxr+.pxr{border-top:1px dashed var(--bd,#e5e7eb)}
.pxl{min-width:130px;font-size:12px;font-weight:600;opacity:.65}
.pxr .tabs{margin:0;flex:1}
@media(max-width:700px){.pxl{min-width:100%}}
.pxr .tabs{border-bottom:0}.pxr .tabs a{margin-bottom:0;padding:6px 12px;border-radius:6px;border-bottom:0}.pxr .tabs a.on{background:#e0f2fe}
.pxg{border-color:var(--line,#e2e8f0)}