@font-face{font-family:"Inter";src:url(/static/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cairo";src:url(/static/fonts/cairo.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"JBMono";src:url(/static/fonts/jbmono.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
  --bg:#070a12;--bg2:#0b1020;--panel:#0f1528cc;--panel-solid:#0f1528;--card:#121a30;--card2:#162039;--line:#1f2a47;--line2:#2a3860;
  --text:#e7ecf7;--muted:#8a97b5;--dim:#5d6a8a;--brand:#7c5cff;--brand2:#22d3ee;--ok:#22c55e;--ok-bg:#22c55e1a;--bad:#f43f5e;--bad-bg:#f43f5e1a;
  --warn:#f59e0b;--warn-bg:#f59e0b1a;--info:#38bdf8;--info-bg:#38bdf81a;--live:#ff4d6d;--radius:16px;--shadow:0 10px 30px -12px #000a;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"JBMono",ui-monospace,Menlo,monospace;
}
[dir=rtl]{--font:"Cairo","Inter",system-ui,sans-serif}
*{box-sizing:border-box}
.i{width:16px;height:16px;flex:none;vertical-align:-3px}
.bigico .i{width:26px;height:26px}
.kpi .lbl .i{width:15px;height:15px}
html,body{margin:0;height:100%}
body{background:radial-gradient(1200px 600px at 10% -10%,#1b1550 0%,transparent 60%),radial-gradient(900px 500px at 110% 10%,#05384a 0%,transparent 55%),var(--bg);
  color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;background-attachment:fixed}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
[dir=rtl] .num{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted)} .dim{color:var(--dim)} .pos{color:var(--ok)} .neg{color:var(--bad)} .warn{color:var(--warn)}
.hidden{display:none!important}

/* layout */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:18px 14px;border-inline-end:1px solid var(--line);background:linear-gradient(180deg,#0a0f1ee6,#070a12e6);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:6px;z-index:5}
.logo{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.logo .mark{width:36px;height:36px;border-radius:11px;background:conic-gradient(from 200deg,var(--brand),var(--brand2),var(--brand));display:grid;place-items:center;box-shadow:0 0 24px #7c5cff55}
.logo .mark svg{width:20px;height:20px}
.logo b{font-size:16px;letter-spacing:.2px} .logo small{display:block;color:var(--muted);font-size:11.5px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--muted);font-weight:500;transition:.15s}
.nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:#ffffff08;color:var(--text)}
.nav a.on{background:linear-gradient(90deg,#7c5cff26,#7c5cff08);color:#fff;box-shadow:inset 2px 0 0 var(--brand)}
[dir=rtl] .nav a.on{box-shadow:inset -2px 0 0 var(--brand);background:linear-gradient(270deg,#7c5cff26,#7c5cff08)}
.nav .sub{padding-inline-start:40px;font-size:13px;padding-top:7px;padding-bottom:7px}
.nav .sub .dot{width:7px;height:7px}
.nav .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);padding:14px 12px 6px}
[dir=rtl] .nav .sec{letter-spacing:0}
.side .foot{margin-top:auto;padding:10px;font-size:11.5px;color:var(--dim)}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:12px;padding:14px 26px;background:#070a12b3;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top h1{font-size:19px;margin:0;font-weight:650;letter-spacing:-.2px}
.top .grow{flex:1}
.content{padding:22px 26px 90px;display:flex;flex-direction:column;gap:18px;max-width:1600px;width:100%}

/* chips/badges */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line2);background:#ffffff06;white-space:nowrap}
.chip.ok{color:var(--ok);background:var(--ok-bg);border-color:#22c55e40}
.chip.bad{color:var(--bad);background:var(--bad-bg);border-color:#f43f5e40}
.chip.warn{color:var(--warn);background:var(--warn-bg);border-color:#f59e0b40}
.chip.info{color:var(--info);background:var(--info-bg);border-color:#38bdf840}
.chip.live{color:#fff;background:linear-gradient(90deg,#ff4d6d,#ff7a45);border:none;box-shadow:0 0 16px #ff4d6d66}
.chip.brand{color:#cfc4ff;background:#7c5cff1f;border-color:#7c5cff55}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none;display:inline-block}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px #22c55e22;animation:pulse 2.2s infinite}
.dot.bad{background:var(--bad)} .dot.warn{background:var(--warn)} .dot.info{background:var(--info)}
@keyframes pulse{0%{box-shadow:0 0 0 0 #22c55e66}70%{box-shadow:0 0 0 7px #22c55e00}100%{box-shadow:0 0 0 0 #22c55e00}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:#ffffff08;color:var(--text);font-weight:600;font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn:hover{background:#ffffff12;border-color:#3a4a7a}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sm{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.btn.primary{background:linear-gradient(135deg,#7c5cff,#5b8cff);border:none;color:#fff;box-shadow:0 6px 18px -6px #7c5cffaa}
.btn.go{color:#b8f5cc;border-color:#22c55e55;background:#22c55e14}.btn.go:hover{background:#22c55e26}
.btn.stop{color:#ffc2cc;border-color:#f43f5e55;background:#f43f5e12}.btn.stop:hover{background:#f43f5e24}
.btn.amber{color:#ffe1a8;border-color:#f59e0b55;background:#f59e0b12}
.btn.danger{background:linear-gradient(135deg,#ff4d6d,#ff7a45);border:none;color:#fff;box-shadow:0 6px 20px -6px #ff4d6daa}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)} .btn.ghost:hover{color:var(--text);background:#ffffff0a}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;background:#ffffff08;border:1px solid var(--line2);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);padding:5px 12px;border-radius:7px;font-weight:600;cursor:pointer;font-size:12.5px}
.seg button.on{background:#7c5cff;color:#fff}

/* cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.span2{grid-column:span 2}.span3{grid-column:span 3}
.card{background:linear-gradient(180deg,#131b33,#0f1529);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0;position:relative}
.card h3{margin:0 0 14px;font-size:14.5px;font-weight:650;display:flex;align-items:center;gap:8px}
.card h3 .grow{flex:1}
.card h3 small{font-weight:500;color:var(--muted);font-size:12px}
.kpi{padding:16px 18px;overflow:hidden}
.kpi .lbl{color:var(--muted);font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:7px}
.kpi .val{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.5px;font-family:var(--mono)}
[dir=rtl] .kpi .val{direction:ltr;text-align:right}
.kpi .sub{font-size:12px;color:var(--dim);margin-top:4px}
.kpi .glow{position:absolute;inset:auto -30px -40px auto;width:120px;height:120px;border-radius:50%;filter:blur(40px);opacity:.35}
[dir=rtl] .kpi .glow{inset:auto auto -40px -30px}

/* engine cards */
.eng{display:flex;flex-direction:column;gap:12px;transition:.2s}
.eng:hover{border-color:var(--line2);transform:translateY(-1px)}
.eng .head{display:flex;align-items:flex-start;gap:12px}
.eng .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.eng .ico svg{width:21px;height:21px}
.eng .ttl{font-weight:700;font-size:15px}
.eng .desc{color:var(--muted);font-size:12px;margin-top:2px;line-height:1.35}
.eng .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:#ffffff05;border:1px solid var(--line);border-radius:11px;padding:8px 10px;min-width:0}
.stat .l{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v{font-family:var(--mono);font-weight:650;font-size:14.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[dir=rtl] .stat .v{direction:ltr;text-align:right}
.eng .foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.eng .foot .grow{flex:1}
.bar{height:6px;border-radius:9px;background:#ffffff0d;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.bar.ok>i{background:var(--ok)}.bar.warn>i{background:var(--warn)}.bar.bad>i{background:var(--bad)}

/* tables */
.tbl-wrap{overflow:auto;border-radius:12px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:start;font-weight:600;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;background:#0c1224;position:sticky;top:0;white-space:nowrap}
[dir=rtl] th{letter-spacing:0;text-transform:none;font-size:12.5px}
td{padding:9px 12px;border-top:1px solid var(--line);white-space:nowrap}
tr:hover td{background:#ffffff05}
td.wrap{white-space:normal;min-width:220px}
.tbl-tools{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.input{height:34px;border-radius:10px;border:1px solid var(--line2);background:#0a0f1e;color:var(--text);padding:0 12px;font-family:inherit;font-size:13px;outline:none;min-width:0}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px #7c5cff33}
select.input{padding-inline-end:28px}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:10px;color:var(--muted);font-size:12px}

/* key/value */
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.kv div{background:#ffffff05;border:1px solid var(--line);border-radius:10px;padding:8px 11px;min-width:0}
.kv b{display:block;font-size:11.5px;color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv span{font-family:var(--mono);font-size:13px;word-break:break-word}
.kv small{display:block;color:var(--dim);font-size:11px;margin-top:2px}

/* misc */
.banner{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:14px;border:1px solid;font-size:13.5px}
.banner svg{width:20px;height:20px;flex:none}
.banner.warn{background:#f59e0b12;border-color:#f59e0b44;color:#ffe1a8}
.banner.info{background:#38bdf812;border-color:#38bdf844;color:#bfe9ff}
.banner.bad{background:#f43f5e12;border-color:#f43f5e44;color:#ffc2cc}
.empty{padding:28px;text-align:center;color:var(--dim)}
.logs{font-family:var(--mono);font-size:12px;background:#060912;border:1px solid var(--line);border-radius:12px;padding:12px;max-height:520px;overflow:auto;white-space:pre-wrap;word-break:break-all;direction:ltr;text-align:left;line-height:1.55}
.logs .e{color:#ff8fa3}.logs .w{color:#ffd27a}
.feed{display:flex;flex-direction:column;gap:2px;max-height:440px;overflow:auto}
.feed .it{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px}
.feed .it:hover{background:#ffffff06}
.trend{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#ffffff05;border:1px solid var(--line)}
.trend .arrow{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px;font-weight:800}
.ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),#ffffff10 0);display:grid;place-items:center;flex:none}
.ring span{width:50px;height:50px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700}
.chart{width:100%;height:240px;position:relative}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.chart .tip{position:absolute;pointer-events:none;background:#0b1020f2;border:1px solid var(--line2);border-radius:9px;padding:6px 9px;font-size:12px;white-space:nowrap;transform:translate(-50%,-110%);font-family:var(--mono)}
.spark{height:38px}
.cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.core{background:#ffffff05;border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:11px;color:var(--muted)}
.core b{font-family:var(--mono);color:var(--text);font-size:13px;display:block}
.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.row .grow{flex:1}
.hr{height:1px;background:var(--line);margin:4px 0}
.tag{font-size:11px;padding:2px 7px;border-radius:6px;background:#ffffff0c;color:var(--muted);font-weight:600}
.side-long{color:var(--ok);font-weight:700}.side-short{color:var(--bad);font-weight:700}
.livebox{border:1px solid #ff4d6d55;background:linear-gradient(135deg,#ff4d6d14,#7c5cff0a)}
.lockbox{border-style:dashed}

/* modal & toast */
.modal-bg{position:fixed;inset:0;background:#02040acc;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;padding:16px;animation:fade .15s}
.modal{width:min(520px,100%);background:linear-gradient(180deg,#141c36,#0e1428);border:1px solid var(--line2);border-radius:20px;padding:22px;box-shadow:0 30px 80px -20px #000}
.modal h2{margin:0 0 6px;font-size:18px}
.modal p{color:var(--muted);margin:6px 0}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.modal ul{margin:10px 0;padding-inline-start:18px;color:#ffd0d8}
.modal .cond{display:flex;justify-content:space-between;padding:7px 10px;border-radius:9px;background:#ffffff06;margin:5px 0;font-size:13px}
.modal label{display:block;font-size:12.5px;color:var(--muted);margin:12px 0 6px}
.modal .input{width:100%}
.phrase{font-family:var(--mono);background:#ff4d6d1f;color:#ffb3c1;padding:2px 8px;border-radius:6px;user-select:all}
@keyframes fade{from{opacity:0}to{opacity:1}}
.toasts{position:fixed;bottom:20px;inset-inline-end:20px;display:flex;flex-direction:column;gap:10px;z-index:60;max-width:min(420px,calc(100vw - 40px))}
.toast{background:#121a30f5;border:1px solid var(--line2);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);animation:slide .2s;font-size:13px}
.toast b{display:block;margin-bottom:3px}
.toast.ok{border-color:#22c55e66}.toast.bad{border-color:#f43f5e66}.toast.warn{border-color:#f59e0b66}
.toast pre{margin:6px 0 0;font-family:var(--mono);font-size:11px;white-space:pre-wrap;color:var(--muted);direction:ltr;text-align:left}
@keyframes slide{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .box{width:min(400px,100%);background:linear-gradient(180deg,#141c36ee,#0e1428ee);border:1px solid var(--line2);border-radius:24px;padding:30px;box-shadow:0 30px 80px -30px #000}
.login .logo{justify-content:center;padding-bottom:6px}
.login h2{text-align:center;margin:8px 0 4px}
.login p{text-align:center;color:var(--muted);margin:0 0 20px;font-size:13px}
.login .input{width:100%;height:44px;font-size:15px}
.login .btn{width:100%;height:44px;margin-top:12px;font-size:14.5px}
.login .err{color:var(--bad);text-align:center;min-height:20px;margin-top:10px;font-size:13px}
.login .lang{display:flex;justify-content:center;margin-top:16px}

/* mobile */
.mnav{display:none}
@media (max-width:1280px){.g6{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1000px){.g3{grid-template-columns:repeat(2,1fr)}.span3{grid-column:span 2}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}.side{display:none}
  .top{padding:12px 14px}.top h1{font-size:16px}.content{padding:14px 12px 96px}
  .g2,.g3,.g4{grid-template-columns:1fr}.g6{grid-template-columns:repeat(2,1fr)}.span2,.span3{grid-column:auto}
  .mnav{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:20;background:#0a0f1ef2;backdrop-filter:blur(14px);border-top:1px solid var(--line);justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--muted);padding:4px 6px;border-radius:9px;min-width:56px}
  .mnav a svg{width:20px;height:20px}.mnav a.on{color:#fff;background:#7c5cff26}
  .kpi .val{font-size:21px}.hide-m{display:none!important}
  .top .chip.hide-s{display:none}
}