:root{ --bg:#0b0f17; --card:#111827; --mut:#94a3b8; --tx:#e5e7eb; --bd:#1f2937; --btn:#2563eb; }
*{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; }
body{ margin:0; background:radial-gradient(1200px 600px at 20% 10%, #111c3a, var(--bg)); color:var(--tx); }
.wrap{ max-width:1200px; margin:0 auto; padding:18px; }
.top{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 10px; }
.brand{ font-size:20px; font-weight:700; letter-spacing:.3px; }
.sub{ color:var(--mut); font-size:13px; }

.grid{ display:grid; grid-template-columns: 320px 1fr 420px; gap:14px; }
@media (max-width:1100px){ .grid{ grid-template-columns:1fr; } }

.card{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--bd); border-radius:16px; padding:14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
h2{ margin:0 0 10px; font-size:16px; }
h3{ margin:14px 0 8px; font-size:14px; color:#cbd5e1; }

.row{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
label{ font-size:12px; color:var(--mut); }
input, select{ background:#0b1220; border:1px solid var(--bd); border-radius:10px; padding:10px; color:var(--tx); outline:none; }
input:focus, select:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.18); }

.btn{ margin-top:10px; background:var(--btn); color:white; border:0; border-radius:12px; padding:10px 12px; cursor:pointer; font-weight:600; }
.btn.ghost{ background:transparent; border:1px solid var(--bd); color:var(--tx); }
.btn:hover{ filter:brightness(1.05); }

.hint{ color:var(--mut); font-size:12px; line-height:1.4; margin-top:10px; }
.okline{ color:#86efac; font-size:13px; padding:8px 10px; border:1px solid rgba(134,239,172,.25); border-radius:12px; background:rgba(134,239,172,.06); }

.table{ margin-top:8px; border:1px solid var(--bd); border-radius:12px; overflow:hidden; }
.thead, .tr{ display:grid; grid-template-columns: 1fr 90px 110px 140px 80px 120px 40px; gap:8px; align-items:center; padding:8px; }
.thead{ background:rgba(255,255,255,.04); font-size:12px; color:#cbd5e1; }
.tbody .tr{ border-top:1px solid var(--bd); }
.tr input{ width:100%; padding:8px; border-radius:10px; }
.num{ text-align:right; font-variant-numeric: tabular-nums; }
.x{ background:transparent; border:1px solid var(--bd); color:#e2e8f0; border-radius:10px; height:34px; cursor:pointer; }
.x:hover{ border-color:#ef4444; color:#fecaca; }

.totals{ display:flex; gap:12px; justify-content:space-between; padding:10px; border:1px dashed rgba(148,163,184,.25); border-radius:12px; margin-top:10px; color:#cbd5e1; }
.totals b{ color:#fff; }

.out{ background:#070b12; border:1px solid var(--bd); border-radius:12px; padding:10px; min-height:280px; overflow:auto; font-size:12px; color:#cbd5e1; }
.foot{ color:var(--mut); font-size:12px; padding:14px 6px; }