:root{
  --bg:#0e1217;--surface:#161c24;--surface-2:#1b232e;--field:#212c39;--border:#2b3744;
  --text:#eef3f8;--muted:#9fb1c2;--dim:#647689;--accent:#36c2b4;--accent-2:#2a8f86;--on-accent:#04211e;
  --go:#46d39a;--warn:#f4b740;--stop:#ff5d6c;--info:#8ea2ff;
  --fa:'IBM Plex Sans Arabic',system-ui,Segoe UI,sans-serif;--fm:'IBM Plex Mono',ui-monospace,monospace;
  --r:16px;--r2:11px;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:var(--fa);font-size:15px;line-height:1.6;color:var(--text);
  background:
   radial-gradient(900px 500px at 12% -5%, #173b39 0, transparent 55%),
   radial-gradient(800px 460px at 100% 0%, #16263a 0, transparent 55%),
   linear-gradient(180deg,#0c1116,var(--bg));}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 70px}
a{color:var(--accent);text-decoration:none}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:11px}
.brand .dot{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--accent),var(--accent-2));box-shadow:0 4px 16px rgba(54,194,180,.35)}
.brand h1{font-size:17px;margin:0;font-weight:700}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:500}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);color:var(--muted);
  font-size:12.5px;padding:7px 12px;border-radius:30px;cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--text)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.card h2{font-size:13px;color:var(--accent);margin:0 0 14px;font-weight:600;display:flex;align-items:center;gap:8px}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
label .u{color:var(--dim);font-family:var(--fm);font-size:11px}
input,select{width:100%;height:50px;background:var(--field);border:1px solid var(--border);color:var(--text);
  font-family:var(--fm);font-size:16px;padding:0 13px;border-radius:var(--r2);outline:none;transition:border-color .15s}
input:focus,select:focus{border-color:var(--accent)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat}
html[dir=rtl] select{background-position:18px 21px,23px 21px}
.field{margin-bottom:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:520px){.row3{grid-template-columns:1fr 1fr}}
.btn{width:100%;height:54px;border:0;border-radius:var(--r2);cursor:pointer;font-family:var(--fa);font-weight:700;font-size:16px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--on-accent)}
.btn.soft{background:var(--surface-2);color:var(--text);border:1px solid var(--border);font-weight:600;height:46px;font-size:14px}
.btn.soft:hover{border-color:var(--accent)}
.help{font-size:12px;color:var(--dim);margin-top:5px}
.modelwrap{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2);padding:8px;margin-bottom:14px}
.modelwrap svg{display:block;width:100%;height:auto}
svg text{font-family:var(--fm)}
.verdict{display:flex;align-items:center;gap:15px;border-radius:var(--r);padding:18px;border:1px solid var(--border)}
.verdict .ico{font-size:36px}.verdict .big{font-family:var(--fm);font-size:25px;font-weight:600}.verdict .lbl{font-size:13px;margin-top:2px;color:var(--muted)}
.go-v{background:rgba(70,211,154,.10);border-color:#1f5e44}.go-v .big{color:var(--go)}
.caution-v{background:rgba(244,183,64,.10);border-color:#6b531a}.caution-v .big{color:var(--warn)}
.nogo-v{background:rgba(255,93,108,.11);border-color:#6b2a31}.nogo-v .big{color:var(--stop)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-top:14px}
.kv .c{background:var(--surface);padding:13px}.kv .c .k{font-size:12px;color:var(--muted)}.kv .c .v{font-family:var(--fm);font-size:19px;margin-top:3px}.kv .c .v small{font-size:11px;color:var(--muted)}
.msg{font-size:13px;padding:11px 13px;border-radius:var(--r2);border-inline-start:3px solid;background:var(--surface-2);margin-top:10px}
.msg.warn{border-color:var(--warn)}.msg.info{border-color:var(--accent)}.msg.stop{border-color:var(--stop)}
.wx{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.wx .item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2);padding:10px 14px;min-width:84px}
.wx .item .k{font-size:11px;color:var(--muted)}.wx .item .v{font-family:var(--fm);font-size:18px}
.note{font-size:12px;color:var(--dim);margin-top:14px;line-height:1.6}
/* login */
.login{max-width:380px;margin:9vh auto 0}
.login .card{padding:26px}
.login .big-dot{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;background:radial-gradient(circle at 32% 30%,var(--accent),var(--accent-2));box-shadow:0 6px 22px rgba(54,194,180,.4)}
.login h1{text-align:center;font-size:20px;margin:0 0 4px}.login p.sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 18px}
.err{background:rgba(255,93,108,.12);border:1px solid #6b2a31;color:#ffb3ba;font-size:13px;padding:10px 13px;border-radius:var(--r2);margin-bottom:14px}
.foot{text-align:center;color:var(--dim);font-size:11px;margin-top:16px}

/* --- refinements (ui-styling principles applied to vanilla CSS) --- */
.gcap{display:flex;align-items:center;gap:8px;margin:10px 0 8px;color:var(--accent);font-size:12.5px;font-weight:600}
.gsym{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ufield{position:relative}
.ufield input{padding-inline-end:48px}
.usuf{position:absolute;inset-inline-end:13px;top:0;height:50px;display:flex;align-items:center;color:var(--dim);font-family:var(--fm);font-size:12px;pointer-events:none}
.legend{display:flex;gap:10px;flex-wrap:wrap}
.legend .lg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:none}
.fcbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding:11px 14px;border-radius:var(--r2);
  background:rgba(142,162,255,.10);border:1px solid #39427a;color:#c7d0ff}
.fcbar .fck{font-weight:700;font-size:12px;color:var(--info)}
.fcbar .fcv{font-family:var(--fm);font-size:13px;color:#dfe5ff}
.fcbar .fcl{color:#8ea2ff;font-size:11px;margin-inline-end:3px}
@media(max-width:520px){.row3{grid-template-columns:1fr 1fr 1fr;gap:8px}.ufield input{padding-inline-end:32px}.usuf{inset-inline-end:8px;font-size:10.5px}}