:root{--bg:#0b0f14;--card:#101826;--muted:#a9b4c1;--text:#e9f1ff;--accent:#4aa3ff;--danger:#ff5c5c;--ok:#3ddc97;--border:rgba(255,255,255,.10);}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(1200px 800px at 20% 10%,rgba(74,163,255,.18),transparent 60%),radial-gradient(900px 600px at 90% 30%,rgba(61,220,151,.10),transparent 55%),var(--bg);color:var(--text);}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{font-weight:800;letter-spacing:.2px}
.card{background:rgba(16,24,38,.88);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 10px 28px rgba(0,0,0,.35);}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:260px}
.btn{appearance:none;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);padding:10px 12px;border-radius:12px;font-weight:700;cursor:pointer}
.btn:hover{border-color:rgba(74,163,255,.45)}
.btn.primary{background:rgba(74,163,255,.18);border-color:rgba(74,163,255,.45)}
.btn.danger{background:rgba(255,92,92,.16);border-color:rgba(255,92,92,.4)}
.btn.ok{background:rgba(61,220,151,.14);border-color:rgba(61,220,151,.35)}
.pill{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);font-weight:700;font-size:13px}
.h1{font-size:20px;font-weight:850;margin:0}
.muted{color:var(--muted)}
.sep{height:1px;background:var(--border);margin:12px 0}
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);outline:none}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
@media(max-width:900px){.grid{grid-template-columns:repeat(6,1fr)}}
.badge{font-weight:800;padding:4px 8px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.18)}
.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px;border:1px solid var(--border)}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.table th{font-size:13px;color:var(--muted);text-align:left;font-weight:800}
.box2{border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:rgba(0,0,0,.18);font-weight:800;width:max-content}
.box2 .small{font-size:12px;color:var(--muted);font-weight:800}
.linebtns{display:flex;gap:8px;flex-wrap:wrap}
.linebtns .lbtn{min-width:56px}
.linebtns .lbtn.active{background:rgba(74,163,255,.22);border-color:rgba(74,163,255,.55)}
.drop{border:2px dashed rgba(255,255,255,.18);border-radius:16px;padding:14px;background:rgba(0,0,0,.12)}
.drop.drag{border-color:rgba(74,163,255,.75);background:rgba(74,163,255,.10)}


/* Operator emphasis */
.mhdBig{background:#ffffff;color:#000000;border-radius:14px;padding:10px 12px;display:inline-block;line-height:1.05;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mhdBig .mhdDate{font-size:22px;font-weight:900;letter-spacing:.2px}
.mhdBig .mhdCode{margin-top:4px;font-size:13px;font-weight:900;color:#222}
.sapBig{font-size:20px;font-weight:950;letter-spacing:.4px}
.sapLine{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.sapLine .kz{display:inline-flex;padding:4px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.15);background:rgba(0,0,0,.04);font-weight:950;font-size:12px}
.btnrow{display:flex;gap:8px;flex-wrap:nowrap}
.btnrow .btn{flex:1;white-space:nowrap}