:root{
  --bg:#0a0f1a;--surface:#111a2b;--surface2:#18233a;--entry:#080d16;--console:#05080f;
  --border:#22304a;--border-hi:#33456b;
  --text:#e6edf7;--dim:#8fa3c0;--faint:#5d7a9e;
  --primary:#3b82f6;--primary-hi:#2563eb;
  --ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;--code:#7dd3fc;
  --pad:16px;--gap:8px;--rad:12px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Segoe UI",Tahoma,sans-serif}
a{color:inherit;text-decoration:none}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad)}
.topbar{display:grid;grid-template-columns:140px 120px minmax(160px,1.4fr) 110px minmax(160px,1.4fr) 140px;gap:10px;padding:10px 12px;margin:8px 12px var(--gap);align-items:start;position:relative;z-index:60}
@media(max-width:980px){.topbar{grid-template-columns:1fr 1fr;}}
.cell{position:relative;min-width:0;z-index:1}
.cell.open-menu{z-index:80}
.cell.grow{min-width:140px}
.cell-lbl{color:var(--faint);font-size:10px;font-weight:700;margin-bottom:4px;text-align:right}
.brand-title{font-size:15px;font-weight:700;text-align:right}
.brand-sub{color:var(--faint);font-size:10px;font-weight:700;text-align:right;margin-bottom:4px}
.menu-btn,.select-btn{
  background:var(--entry);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:8px 10px;font-size:12px;font-weight:700;cursor:pointer;text-align:right;
}
.menu-btn.action{background:var(--surface2);width:auto;white-space:nowrap}
.menu-btn.sm{margin-top:4px;font-size:11px;padding:6px 8px}
.select-btn.grow,.inline .select-btn{flex:1}
.inline{display:flex;gap:4px;align-items:stretch}
.dropdown,.picker{
  position:absolute;top:100%;right:0;left:0;z-index:70;margin-top:4px;
  background:var(--surface);border:1px solid var(--border-hi);border-radius:10px;
  box-shadow:0 12px 30px #000a;max-height:min(50vh,320px);overflow:auto;
}
.dropdown button,.picker-list button{
  display:block;width:100%;border:0;background:transparent;color:var(--text);
  text-align:right;padding:10px 12px;cursor:pointer;font-size:12px;font-weight:700;
}
.dropdown button:hover,.picker-list button:hover,.picker-list button.on{background:var(--primary);color:#fff}
.picker input{width:100%;border:0;border-bottom:1px solid var(--border);background:var(--entry);color:var(--text);padding:10px;outline:none}
.shell{display:flex;gap:var(--gap);padding:0 12px;align-items:stretch;min-height:calc(100vh - 170px)}
.sidebar{width:168px;flex:0 0 168px;padding:10px;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1;overflow:visible}
@media(max-width:800px){
  .shell{flex-direction:column}
  .sidebar{width:100%;flex:none;flex-direction:column;align-items:stretch;z-index:1}
  .side-info{display:none}
}
.nav{border:0;background:transparent;color:var(--dim);text-align:right;padding:10px 8px;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px}
.nav.on{background:var(--primary);color:#fff}
.nav.ghost{border:1px solid var(--border);color:var(--text)}
.side-info{margin-top:auto;color:var(--faint);font-size:10px;line-height:1.5;white-space:pre-line;padding:8px 4px}
.more-wrap{position:relative;display:block;width:100%;z-index:60;overflow:visible}
.more-link{
  border:0;background:transparent;color:var(--faint);font-size:11px;font-weight:700;
  padding:6px 8px;cursor:pointer;border-radius:6px;width:100%;text-align:right;
}
.more-link:hover,.more-link.open{color:var(--text);background:var(--entry)}
.more-backdrop{
  position:fixed;inset:0;z-index:55;background:transparent;border:0;padding:0;margin:0;cursor:default;
}
.more-pop{
  position:absolute;z-index:70;top:100%;right:0;left:0;bottom:auto;margin-top:4px;
  max-height:min(50vh,320px);overflow:auto;width:auto;
  background:var(--surface);border:1px solid var(--border-hi);border-radius:10px;
  box-shadow:0 12px 30px #000a;padding:6px;display:flex;flex-direction:column;gap:2px;
}
.more-pop[hidden],.more-backdrop[hidden],[hidden]{display:none!important}
.more-pop .nav{font-size:12px;padding:10px 12px;white-space:nowrap}
.more-pop .nav:hover{background:var(--primary);color:#fff}
.content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gap);position:relative;z-index:1}
.view{display:none}
.view.on{display:block}
.block{padding:12px}
.head{font-size:15px;font-weight:700;margin-bottom:4px}
.head-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.head-row .head{margin:0;flex:1}
.caption{color:var(--faint);font-size:10px;font-weight:700;margin-bottom:10px}
.target-summary{background:var(--entry);border:1px solid var(--border);border-radius:8px;padding:12px;white-space:pre-line;line-height:1.55;font-size:12px;margin-bottom:10px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.btn{border:0;border-radius:8px;padding:12px 14px;font-weight:700;font-size:12px;cursor:pointer;color:#fff}
.btn.primary{background:var(--primary)}
.btn.ok{background:var(--ok);color:#052e16}
.btn.bad{background:var(--bad)}
.btn.ghost{background:var(--entry);border:1px solid var(--border);color:var(--text)}
.btn.sm{padding:6px 10px;font-size:10px}
.console{background:var(--console);border:1px solid var(--border);border-radius:8px;color:#a7f3d0;font-family:Consolas,monospace;font-size:12px;min-height:220px;max-height:45vh;overflow:auto;padding:12px;white-space:pre-wrap;direction:ltr;text-align:left}
.fields{display:grid;gap:8px}
.fields label{display:block;color:var(--dim);font-size:11px;font-weight:700;text-align:right}
.fields input,.fields textarea{width:100%;margin-top:3px;background:var(--entry);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px;font:inherit}
.picker-list.flat button{border:1px solid var(--border);border-radius:8px;margin-bottom:6px;background:var(--entry)}
.logs{display:grid;gap:8px}
.log-row{background:var(--entry);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:12px;line-height:1.45;position:relative}
.log-row.ok{border-color:#166534}
.log-row.bad{border-color:#7f1d1d}
.log-row.has-del{padding-left:64px}
.log-row .del-one{
  position:absolute;left:8px;top:8px;border:0;background:#7f1d1d;color:#fff;
  border-radius:6px;padding:4px 8px;font-size:10px;font-weight:700;cursor:pointer;
}
.statusbar{display:flex;justify-content:space-between;gap:10px;margin:8px 12px;padding:8px 12px;font-size:10px;font-weight:700;color:var(--dim)}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#14532d;color:#fff;padding:10px 14px;border-radius:999px;z-index:50}
.dlg{border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:16px;width:min(420px,92vw)}
.dlg::backdrop{background:#000a}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth .card{width:min(400px,100%);padding:22px}
.auth h1{text-align:center;margin:8px 0}
.auth p{text-align:center;color:var(--dim)}
.auth input{width:100%;margin:8px 0;background:var(--entry);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:12px}
.err{color:var(--bad);text-align:center}
.side-lbl{color:var(--faint);font-size:11px;font-weight:700;text-align:right;padding:4px 6px 8px}
.card-inner{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:8px;margin-bottom:6px}
.hg-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:6px}
.hg-row input{width:52px;background:var(--entry);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:4px;text-align:center;font-family:Consolas,monospace}
.hg-lbl{color:var(--warn);font-family:Consolas,monospace;font-size:12px;text-align:right;margin-top:6px}
.chip{border:0;background:var(--entry);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:4px 8px;font-size:10px;font-weight:700;cursor:pointer}
.btn.warn{background:var(--warn);color:#1c1400}
.muted{color:var(--faint);font-size:10px;font-weight:700}
.fields select{width:100%;margin-top:3px;background:var(--entry);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px;font:inherit}
.check{display:flex!important;align-items:center;gap:8px;flex-direction:row-reverse}
.check input{width:auto!important;margin:0}
.inline-lbl{display:block;color:var(--dim);font-size:11px;font-weight:700;text-align:right;margin:8px 0}
.inline-lbl select{width:100%;margin-top:4px;background:var(--entry);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px;font:inherit}
.check-list{display:grid;gap:6px;max-height:220px;overflow:auto;background:var(--entry);border:1px solid var(--border);border-radius:8px;padding:8px;margin-top:8px}
.check-list label{display:flex;align-items:center;gap:8px;flex-direction:row-reverse;justify-content:flex-end;color:var(--text);font-size:12px;font-weight:700}
.check-list input{width:auto}

/* Android / narrow phones */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
button,.btn,.menu-btn,.select-btn,.nav,.chip{min-height:44px;-webkit-tap-highlight-color:transparent}
.menu-btn,.select-btn,.btn,.nav{touch-action:manipulation}
@media(max-width:640px){
  .topbar{grid-template-columns:1fr;margin:6px 8px;padding:10px;gap:8px}
  .shell{padding:0 8px;min-height:calc(100dvh - 200px)}
  .sidebar{padding:8px;gap:4px}
  .nav{padding:12px 10px;font-size:13px}
  .btn{padding:14px 16px;font-size:13px;width:100%}
  .btn-row .btn{width:auto;flex:1 1 calc(50% - 8px)}
  .console{min-height:160px;font-size:11px;max-height:40vh}
  .statusbar{flex-direction:column;margin:6px 8px;gap:4px}
  .auth{padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .auth .card{padding:18px 16px}
  .auth input{font-size:16px;padding:14px} /* يمنع زوم iOS/Android */
  .dropdown,.picker,.more-pop{max-height:min(60vh,380px);-webkit-overflow-scrolling:touch}
}