body { font-family: 'Cairo', sans-serif; background-color: #090d16; color: #f1f5f9; }
.bg-card { background-color: #0f172a; border: 1px solid #1e293b; }
.num-font { font-family: 'JetBrains Mono', monospace; direction: ltr; display: inline-block; }
.inp { background: #020617; border: 1px solid #334155; border-radius: 10px; padding: 8px 10px; color: #f1f5f9; font-size: 13px; width: 100%; }
.inp:focus { outline: none; border-color: #10b981; }
.lbl { font-size: 11px; color: #94a3b8; display: block; margin-bottom: 4px; }
.btn { border-radius: 10px; padding: 8px 14px; font-size: 12px; font-weight: 700; transition: background .15s; }
.btn-main { background: #059669; color: #fff; } .btn-main:hover { background: #10b981; }
.btn-ghost { background: #1e293b; color: #e2e8f0; } .btn-ghost:hover { background: #334155; }
.btn-danger { background: #7f1d1d; color: #fecaca; } .btn-danger:hover { background: #991b1b; }
.chip { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; }
.modal > .sheet { background: #0f172a; border: 1px solid #334155; width: 100%; max-height: 94vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 16px; }
@media (min-width: 768px) { .modal { align-items: center; } .modal > .sheet { max-width: 860px; border-radius: 18px; } }
.hidden { display: none; }
.modal.hidden { display: none; }
table.grid-t { width: 100%; font-size: 12px; border-collapse: collapse; }
table.grid-t th { color: #94a3b8; font-weight: 600; text-align: right; padding: 8px 6px; border-bottom: 1px solid #1e293b; white-space: nowrap; }
table.grid-t td { padding: 7px 6px; border-bottom: 1px solid #111c30; vertical-align: middle; }
.stat .num-font { display: block; }