:root {
    --bg: #0f1116;
    --panel: #1a1d26;
    --border: #2a2e3a;
    --text: #e4e7ee;
    --muted: #9aa0ae;
    --accent: #4f8cff;
    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
    --caution: #eab308;
    --critical: #b91c1c;
    --neutral: #64748b;
    /* Tinggi topbar dipatok supaya CSS bisa menghitungnya tanpa JS: header tabel
       yang sticky harus berhenti PERSIS di bawah topbar, dan satu-satunya cara
       kedua angka itu tidak pernah berselisih adalah memakai variabel yang sama. */
    --topbar-h: 3.5rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

/* === Login === */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    width: min(360px, 92vw);
}
.login-card h1 {
    margin: 0 0 1.25rem;
    font-size: 1.35rem;
}
.login-card label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.login-card input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    background: #12141b;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
}
.login-card button {
    margin-top: 1.25rem;
    width: 100%;
    padding: 0.65rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}
.login-card button:hover { filter: brightness(1.08); }

.alert {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.88rem;
    margin: 0 0 0.5rem;
}
.alert-danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--danger);
    color: #fca5a5;
}

/* === Layout === */
/* Topbar ikut membeku. Sebelumnya ia menggulung ke atas, dan itu membuat header
   tabel yang sticky tidak terlihat membeku: ia berhenti di top:0 — persis di
   tempat dan dengan warna yang sama seperti topbar yang baru saja hilang, jadi
   tidak ada petunjuk visual bahwa ada yang menempel. Dengan topbar tetap di
   layar, tab tetap bisa diklik dan header tabel punya batas yang jelas. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 5;              /* di atas header tabel (2), di bawah modal (50) */
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;      /* tinggi dipatok variabel, jadi padding-y tak perlu */
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; }
.logout-form { margin: 0; }
.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
}
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
.container { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

/* === Tabs === */
.tabs { display: flex; gap: 0.25rem; flex: 1; margin: 0 1rem; }
.tab {
    background: transparent; border: none; color: var(--muted);
    padding: 0.4rem 0.8rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); background: rgba(79, 140, 255, 0.14); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* === Buttons === */
.btn-primary, .btn-danger {
    border: none; border-radius: 8px; padding: 0.5rem 0.9rem;
    font-size: 0.9rem; cursor: pointer; color: #fff;
}
.btn-primary { background: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { filter: brightness(1.08); }
.btn-primary:disabled, .btn-danger:disabled, .btn-ghost:disabled {
    opacity: 0.45; cursor: not-allowed;
}

/* === Cards === */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem;
}
.card-label { font-size: 0.8rem; color: var(--muted); }
.card-value { font-size: 1.8rem; font-weight: 600; }

/* === Run control === */
.run-control { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.run-state { color: var(--muted); font-size: 0.9rem; }
.run-state.running { color: var(--success); }
.run-day { color: var(--muted); font-size: 0.82rem; margin-left: auto; }
.next-run { color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 0.75rem; }

/* === Toolbar === */
.toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar input[type="search"], .toolbar select, .settings-form input, .settings-form select,
#account-form input {
    background: #12141b; border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 0.9rem;
}
.toolbar input[type="search"] { flex: 1; min-width: 180px; }
.inline { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.88rem; }

/* === Tables === */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td {
    text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border);
}
/* Sel dengan rincian per situs di tooltip (kolom Hasil run): hover menandai
   bahwa ada info lebih. */
.cell-tip { cursor: help; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.data-table th { color: var(--muted); font-weight: 500; font-size: 0.82rem; }
/* Header ikut membeku saat halaman di-scroll. Tabel Akun/Hasil bisa 200 baris;
   tanpa ini kolom tidak lagi bisa dikenali begitu header keluar dari layar.
   Sticky bekerja terhadap viewport karena tidak ada kontainer ber-overflow di
   antaranya. `top` HARUS setinggi topbar, bukan 0: topbar juga sticky, jadi
   top:0 menyelipkan header di BALIK topbar dan ia tampak tidak membeku. */
.data-table thead th {
    position: sticky;
    top: var(--topbar-h);
    z-index: 2;
    /* Wajib opaque: baris yang lewat di bawahnya akan tembus kalau transparan. */
    background: var(--panel);
    /* border-bottom milik sel tidak ikut menempel saat border-collapse: collapse
       (border dilukis oleh tabel, bukan sel), jadi garis pemisah hilang begitu
       header mengapung. inset box-shadow menggantikannya. */
    box-shadow: inset 0 -1px 0 var(--border);
}
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.col-check { width: 32px; }
.row-actions button { margin-right: 0.35rem; }
.link-btn {
    background: none; border: none; color: var(--accent);
    cursor: pointer; font-size: 0.85rem; padding: 0;
}

/* === Badges (warna per severity) === */
.badge {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 500; white-space: nowrap;
}
.badge.success  { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.badge.neutral  { background: rgba(100, 116, 139, 0.18); color: #cbd5e1; }
.badge.danger   { background: rgba(239, 68, 68, 0.15);  color: #fca5a5; }
.badge.critical { background: rgba(185, 28, 28, 0.22);  color: #fecaca; }
.badge.warning  { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.badge.caution  { background: rgba(234, 179, 8, 0.15);  color: #fde047; }
.badge.unknown  { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
.pill-2fa { color: var(--success); }
.pill-no2fa { color: var(--muted); }

/* === Chip situs terdaftar === */
.chip {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 6px;
    font-size: 0.75rem; white-space: nowrap;
    background: rgba(100, 116, 139, 0.18); color: #cbd5e1;
}
/* Situs login-only dibedakan: tidak ada check-in di sana, dan menampilkannya
   sama dengan situs check-in membuat user mengira ada kuota harian yang jalan. */
.chip-login { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
/* Akun tanpa pendaftaran tidak dikerjakan worker sama sekali — harus mencolok,
   bukan tampak seperti sel yang belum terisi. */
.chip-none { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.col-sites { max-width: 220px; }
.col-balance { white-space: nowrap; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.75rem; }

/* Pemilih situs di modal edit akun. */
.site-picker {
    border: 1px solid var(--border); border-radius: 8px;
    padding: 0.5rem 0.7rem; margin: 0.4rem 0;
}
.site-picker legend { color: var(--muted); font-size: 0.8rem; padding: 0 0.3rem; }
.site-picker .inline { display: flex; margin: 0.2rem 0; }
.toolbar-group { display: inline-flex; gap: 0.35rem; align-items: center; }

/* === Total saldo per situs === */
.section-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.6rem; }
.section-title .hint { font-weight: 400; }
.bal-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.9rem 1.1rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.bal-values { display: flex; flex-direction: column; gap: 0.1rem; }
/* Angka uang pakai tabular-nums supaya digit sejajar antar kartu — kolom yang
   bergeser membuat dua total sulit dibandingkan sekilas. */
.bal-amount {
    font-size: 1.35rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.bal-empty { color: var(--muted); font-weight: 400; }

/* === Tren saldo per hari === */
.bh-modes { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; }
.bh-mode {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    border-radius: 8px; padding: 0.35rem 0.8rem; font-size: 0.82rem; cursor: pointer;
}
.bh-mode:hover { color: var(--text); }
.bh-mode.active { color: var(--text); background: rgba(79, 140, 255, 0.14); border-color: var(--accent); }
.bh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.bh-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.9rem 1rem 0.6rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.bh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.bh-title { font-size: 0.9rem; font-weight: 600; }
/* Delta naik/turun/tetap vs titik sebelumnya; warna status dipakai di sini
   karena maknanya memang good/bad, bukan identitas series. */
.bh-delta { font-size: 0.78rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bh-delta.up   { color: #4ade80; }
.bh-delta.down { color: #fca5a5; }
.bh-delta.flat { color: var(--muted); }
.bh-note { font-size: 0.72rem; color: var(--muted); min-height: 1.1rem; }
.bh-plot { width: 100%; display: block; }
.bh-plot polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bh-gridline { stroke: var(--border); stroke-width: 1; }
.bh-axis-text { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
/* Ring panel 2px di sekeliling dot supaya tetap terbaca saat melewati garis. */
.bh-dot { stroke: var(--panel); stroke-width: 2; }
.bh-live-dot { stroke-dasharray: none; }
/* Garis putus-putus HANYA untuk segmen live hari ini — ia memang proyeksi
   "sampai jam sekarang", bukan grid: proyeksi adalah satu-satunya pemakaian
   sah dash (lihat anti-pattern: grid putus-putus salah, marker proyeksi benar). */
.bh-live-seg { stroke-dasharray: 4 3; }
.bh-crosshair { stroke: var(--muted); stroke-width: 1; }
/* Garis nol chart "Perubahan": baseline referensi delta — bukan grid dekoratif. */
.bh-zero-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.bh-tip {
    position: fixed; z-index: 70; pointer-events: none;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.5rem 0.7rem; font-size: 0.8rem; max-width: 240px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
/* Nilai diikuti (Strong), nama series menyusul — hierarki legend terbalik. */
.bh-tip-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.bh-tip-sub { color: var(--muted); font-size: 0.72rem; }
.bh-table-toggle {
    background: none; border: none; color: var(--accent); cursor: pointer;
    font-size: 0.8rem; padding: 0; align-self: flex-start; margin: 0.2rem 0;
}
/* Legend wajib untuk multi-garis: identitas tidak boleh bergantung warna saja. */
.bh-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0.1rem 0 0.2rem; }
/* Chip situs yang tak muat di chart gabungan: menempel di judul supaya selalu
   terlihat (peringatan di bawah grid bisa jatuh keluar viewport). */
.bh-skip-chip {
    display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.45rem;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 0.68rem; font-weight: 400; color: var(--muted);
    vertical-align: middle; cursor: help; white-space: nowrap;
}
.bh-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--muted); }
.bh-key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
/* Kartu gabungan melebar penuh: chart 560px + 3 label endpoint + legend butuh
   ruang; span 1/-1 pada grid .bh-grid eksplisit (bukan auto-fit implisit). */
.bh-combined { grid-column: 1 / -1; }
.bh-tip-row { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.bh-table { font-size: 0.78rem; }
.bh-table th, .bh-table td { padding: 0.3rem 0.5rem; }
.bh-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bh-empty { color: var(--muted); font-size: 0.82rem; }

/* === Log view === */
.log-view {
    background: #0b0d12; border: 1px solid var(--border); border-radius: 10px;
    padding: 0.75rem; height: 60vh; overflow-y: auto;
    font-family: "SFMono-Regular", ui-monospace, Consolas, monospace; font-size: 0.82rem;
    line-height: 1.6;
}
.log-line { white-space: pre-wrap; word-break: break-word; }
.log-ts { color: var(--muted); margin-right: 0.5rem; }
.log-INFO { color: #cbd5e1; }
.log-OK { color: #4ade80; }
.log-WARN { color: #fcd34d; }
.log-ERROR { color: #fca5a5; }

/* === Settings === */
.settings-form {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem; margin-bottom: 1rem;
}
.settings-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }

/* === Modal === */
.modal {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal[hidden] { display: none; }
.modal-body {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 1.5rem; width: min(420px, 92vw);
}
.modal-body h2 { margin: 0 0 1rem; font-size: 1.15rem; }
#account-form { display: flex; flex-direction: column; gap: 0.6rem; }
#account-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

/* === Paginasi === */
.pager {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 0.9rem; font-size: 0.85rem; color: var(--muted);
}
.pager-info { min-width: 9rem; }
/* Selector ukuran halaman didorong ke kanan agar tombol navigasi tetap
   berdampingan dan tidak berpindah posisi saat teks info berubah panjang. */
.pager-size { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; }
.pager-size select {
    background: #12141b; border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 0.35rem 0.5rem; font-size: 0.85rem;
}

/* === Toast === */
.toast {
    position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 60;
    background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
    padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.88rem; max-width: 360px;
}
.toast[hidden] { display: none; }
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }
/* Pergantian hari UTC: informatif, bukan kesalahan — jangan pakai warna danger. */
.toast.warn { border-left-color: var(--warning); }

/* === Tab OpenRouter === */
.btn-xs {
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    margin-left: 0.25rem;
}
.or-limit-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-dim, #94a3b8);
}
.or-limit-label input {
    width: 6.5rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--border, #334155);
    border-radius: 6px;
    background: var(--bg, #0f172a);
    color: var(--text, #e2e8f0);
}
.or-run-last { font-size: 1rem; }
.or-key-cell { font-family: ui-monospace, monospace; font-size: 0.85rem; }
#or-log-view { height: 260px; }