/* Font cục bộ (bundled) — không phụ thuộc mạng.  Inter dùng font hệ thống
   (đã cài trên Windows); Nunito + Space Mono nạp từ file .ttf kèm theo. */
@font-face { font-family: 'Nunito'; src: url('fonts/Nunito.ttf'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Bold.ttf'); font-weight: 700; font-display: swap; }

:root {
  --coral: #FF5433; --coral-h: #ED4324; --coral-soft: #FFF1EC;
  --page: #FAFAFA; --surface: #FFFFFF; --border: #E5E5E5; --border-in: #D4D4D4;
  --text: #171717; --label: #525252; --muted: #737373;
  --cyan: #22D3EE; --yellow: #FACC15; --green: #4ADE80; --red: #F87171;
  --term-bg: #121212; --term-hdr: #1C1C1C; --term-text: #D4D4D4;
  --font-d: 'Inter', system-ui, sans-serif;
  --font-b: 'Nunito', system-ui, sans-serif;
  --font-m: 'Space Mono', ui-monospace, monospace;
}
[data-theme="dark"] {
  --coral-soft: #3A221B;
  --page: #141416; --surface: #1D1D20; --border: #323238; --border-in: #323238;
  --text: #F0F0F0; --label: #B0B0B6; --muted: #9A9AA0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font-b); background: var(--page); color: var(--text);
  font-size: 13px; overflow: hidden; }
.hidden { display: none !important; }

/* ── Buttons ─────────────────────────────────────────── */
.btn { font-family: var(--font-d); font-weight: 700; font-size: 13px;
  border: 1.5px solid transparent; border-radius: 12px; padding: 9px 16px;
  cursor: pointer; transition: background .12s, border-color .12s; white-space: nowrap; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-h); }
.btn-ghost { background: var(--surface); color: var(--label); border-color: var(--border); }
.btn-ghost:hover { background: var(--page); }
.btn-secondary { background: var(--coral-soft); color: var(--coral); font-size: 11px;
  padding: 5px 11px; }
.btn-lg { padding: 11px 18px; font-size: 14px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

/* ── Inputs ──────────────────────────────────────────── */
.inp { width: 100%; font-family: var(--font-b); font-size: 13px; color: var(--text);
  background: var(--page); border: 1.5px solid var(--border-in); border-radius: 12px;
  padding: 8px 11px; outline: none; transition: border-color .12s, box-shadow .12s; }
.inp:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,84,51,.15);
  background: var(--surface); }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld > label { font-size: 12px; color: var(--label); }

/* ── Chips ───────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 6px 11px; border-radius: 9999px; border: 1.5px solid var(--border-in);
  background: var(--page); color: var(--label); cursor: pointer; user-select: none;
  transition: all .1s; }
.chip.on { border-color: var(--coral); background: var(--coral-soft); color: var(--coral); }

/* Preset ngày — dùng CHUNG font/weight/size với chip "Mua vào/Bán ra"
   (Nunito, không bold) cho đồng bộ; mặc định xám, active (đã bấm) mới cam */
.preset { font-family: var(--font-b); font-weight: 400; font-size: 12px; padding: 5px 11px;
  border-radius: 9999px; border: 1.5px solid var(--border-in); background: var(--page);
  color: var(--label); cursor: pointer; user-select: none; transition: all .1s; }
.preset:hover { border-color: var(--coral); color: var(--coral); }
.preset.on { border-color: var(--coral); background: var(--coral-soft); color: var(--coral); }

/* ── Dropdown ────────────────────────────────────────── */
.dd { position: relative; }
.dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; font-family: var(--font-b); font-size: 13px; color: var(--text);
  background: var(--page); border: 1.5px solid var(--border-in); border-radius: 12px;
  padding: 8px 11px; cursor: pointer; text-align: left; }
.dd-menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; }
.dd-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.dd-menu label:hover { background: var(--page); }
.dd-menu input { accent-color: var(--coral); }

/* ── Section head ────────────────────────────────────── */
.sec-h { font-family: var(--font-d); font-size: 11px; font-weight: 800;
  letter-spacing: .06em; color: var(--text); margin: 0 0 8px; }

/* ── Topbar ──────────────────────────────────────────── */
.topbar { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--coral);
  color: #fff; font-family: var(--font-d); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-name { font-family: var(--font-d); font-weight: 800; font-size: 14px; }
.brand-mst { font-size: 12px; color: var(--muted); }
.icon-btn { width: 34px; height: 34px; border-radius: 9999px; border: none;
  background: transparent; color: var(--label); cursor: pointer; font-size: 17px;
  display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--page); }

/* ── Layout ──────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100%; }
.layout { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 296px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 20px; }
.sidebar .grow { flex: 1; min-height: 0; }
/* Cụm nút chính GHIM ĐÁY sidebar.  Trước đây nó chỉ nằm cuối luồng: ở cỡ cửa
   sổ nhỏ nhất cho phép (1000×680 → vùng nhìn 986×643) nút "Bắt đầu tải" rơi
   xuống y=662–703, tức KHUẤT HẲN, mà thanh cuộn sidebar thì mảnh nên không ai
   nhận ra là còn nội dung phía dưới.  Sticky giữ nút luôn thấy được, phần còn
   lại vẫn cuộn bình thường. */
.sidebar .sb-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin: 0 -16px -16px; padding: 12px 16px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: 16px; gap: 12px; background: var(--page); }

/* ── Card ────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; }
.row { display: flex; gap: 10px; }
.money-row { display: flex; align-items: center; gap: 6px; }

/* ── Log ─────────────────────────────────────────────── */
.logwrap { flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--term-bg); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); }
.log-hdr { flex-shrink: 0; height: 40px; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; background: var(--term-hdr); }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #4a4a4a; }
.log-title { font-family: var(--font-d); font-weight: 700; font-size: 12px; color: #d4d4d4; }
.log-link { font-size: 12px; color: #8a8a8a; cursor: pointer; }
.log-credit { margin-left: auto; font-size: 11px; color: #6a6a6a; }
.log-body { flex: 1; overflow-y: auto; padding: 14px 16px; font-family: var(--font-m);
  font-size: 11px; line-height: 1.8; overflow-wrap: anywhere;
  /* Terminal luôn nền tối ở CẢ light & dark mode → khóa màu chữ mặc định
     sáng để mọi dòng (kể cả tag lạ chưa có rule) không bị đen-trên-đen. */
  color: var(--term-text); }
.log-body .t-time { color: #6a6a6a; } .log-body .t-info { color: var(--cyan); }
.log-body .t-ok { color: var(--green); } .log-body .t-warning { color: var(--yellow); }
.log-body .t-error { color: var(--red); } .log-body .t-dbg { color: #8a8a8a; }
.log-ftr { flex-shrink: 0; padding: 12px 16px; background: var(--term-hdr);
  display: flex; align-items: center; gap: 12px; }
.log-ftr .pl { font-family: var(--font-d); font-size: 13px; color: #d4d4d4; white-space: nowrap; }
.log-ftr .cnt { color: var(--coral); font-weight: 700; }
.bar { flex: 1; height: 8px; border-radius: 9999px; background: #2e2e2e; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0%; background: var(--coral);
  border-radius: 9999px; transition: width .2s; }
.pct { font-family: var(--font-d); font-size: 11.5px; font-weight: 700; color: #8a8a8a;
  min-width: 34px; text-align: right; }

/* ── Login (Fani) ────────────────────────────────────── */
#login { height: 100%; display: flex; flex-direction: column; background: var(--page); }
.lg-topbar { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.lg-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; align-items: center;
  justify-content: center; padding: 32px 24px; }
.lg-grid { width: 100%; max-width: 880px; display: grid; grid-template-columns: 1fr 320px;
  gap: 20px; align-items: start; }
.lg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08); padding: 28px 28px 24px; }
.lg-title { font-family: var(--font-d); font-weight: 800; font-size: 22px; letter-spacing: .01em; }
.lg-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.lg-div { height: 1px; background: var(--border); margin: 20px 0; }
.lg-field { margin-bottom: 16px; position: relative; }
.lg-lbl { font-family: var(--font-d); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--text); margin-bottom: 8px; }
.lg-row { display: flex; gap: 8px; align-items: stretch; }
.lg-row .inp { padding: 9px 12px; font-size: 14px; }
.mono { font-family: var(--font-m); }
.sq-btn { width: 44px; flex-shrink: 0; border: 1.5px solid var(--border-in); border-radius: 12px;
  background: var(--page); color: var(--muted); cursor: pointer; font-size: 12px;
  font-family: var(--font-b); display: flex; align-items: center; justify-content: center; }
.sq-btn:hover { border-color: var(--coral); color: var(--coral); }
.lg-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--label); cursor: pointer; margin-top: 10px; }
.lg-check input { accent-color: var(--coral); width: 13px; height: 13px; }
.captcha-img { width: 168px; flex-shrink: 0; height: 44px; background: var(--page);
  border: 1.5px solid var(--border-in); border-radius: 12px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.captcha-img svg { max-height: 40px; max-width: 160px; }
/* Nhãn cạnh chữ "MÃ CAPTCHA" khi máy tự đọc được mã (captcha_solver). Cho
   người dùng biết ô đã điền sẵn là do tool, không phải mã cũ còn sót. */
.auto-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--coral-soft); color: var(--coral); font-size: 10px;
  font-weight: 600; letter-spacing: .2px; text-transform: none; vertical-align: 1px; }
.hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px 10px;
  border-radius: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); background: transparent; }
.hint-ic { flex-shrink: 0; }
.hint.err { color: #DC2626; background: rgba(220,38,38,.10); }
.hint.warn { color: #B45309; background: rgba(250,204,21,.16); }
.hint.info { color: #0891B2; background: rgba(34,211,238,.14); }
.hint.ok { color: #16A34A; background: rgba(22,163,74,.12); }
.lg-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px; }

.acc-menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18);
  padding: 6px; z-index: 30; max-height: 260px; overflow-y: auto; }
.acc-menu-h { font-size: 11px; color: var(--muted); padding: 4px 8px 6px; }
.acc-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.acc-item:hover, .acc-item.on { background: var(--coral-soft); }
.acc-mst { font-family: var(--font-m); font-size: 13px; color: var(--text); }
.acc-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-x { width: 24px; height: 24px; flex-shrink: 0; border-radius: 9999px; display: flex;
  align-items: center; justify-content: center; color: var(--muted); font-size: 13px; cursor: pointer; }
.acc-x:hover { background: var(--coral-soft); color: var(--coral); }

.lg-side { display: flex; flex-direction: column; gap: 16px; }
.lg-card2 { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06); padding: 20px; }
.lg-lbl2 { font-family: var(--font-d); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 12px; }
.co-head { display: flex; align-items: flex-start; gap: 10px; }
.co-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9999px; background: var(--coral-soft);
  border: 1px solid var(--coral); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-weight: 800; font-size: 13px; color: var(--coral); }
.co-name { font-family: var(--font-d); font-weight: 800; font-size: 14px; line-height: 1.35; }
.co-mst { font-family: var(--font-m); font-size: 12px; color: var(--coral); margin-top: 3px; }
.co-fields { display: flex; flex-direction: column; gap: 10px; }
.co-2col { display: flex; gap: 12px; } .co-2col > div { flex: 1; }
.co-k { font-size: 11px; color: var(--muted); }
.co-v { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.co-status.ok { color: #16A34A; font-weight: 700; }
.saved-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.saved-empty { font-size: 12px; color: var(--muted); }
.saved-chip { font-family: var(--font-m); font-size: 11.5px; padding: 5px 10px; border-radius: 9999px;
  cursor: pointer; border: 1.5px solid var(--border-in); background: var(--page); color: var(--text); }
.saved-chip.on { border-color: var(--coral); background: var(--coral-soft); }

.lg-footer { height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 20px; background: var(--surface); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted); }
.fdot { width: 1px; height: 12px; background: var(--border); }
.credit b { font-family: var(--font-d); font-weight: 700; color: var(--text); }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #fff;
  border-top-color: transparent; border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -2px; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ── Thanh báo lỗi nhập liệu (thay alert của trình duyệt) ─────────────── */
.err-bar { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 14px; border-radius: 12px;
  background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
  font-size: 13px; }
[data-theme="dark"] .err-bar { background: #3A1B1B; border-color: #7F2A2A;
  color: #FCA5A5; }
.err-ic { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: currentColor; color: #FEF2F2; font-size: 11px; font-weight: 700; }
[data-theme="dark"] .err-ic { color: #3A1B1B; }
.err-tx { flex: 1; min-width: 0; }
.err-x { cursor: pointer; opacity: .6; font-size: 12px; padding: 0 4px; }
.err-x:hover { opacity: 1; }

/* ── Ô nhập sai — Python (download_params) chỉ đúng ô nào hỏng ─────────── */
.bad, .bad .inp { border-color: var(--red) !important; }
.bad { box-shadow: 0 0 0 3px rgba(248,113,113,.18); border-radius: 12px; }

/* ── Hộp thoại đăng nhập lại giữa phiên ───────────────────────────────── */
.modal-bg { position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(23,23,23,.45); backdrop-filter: blur(2px); }
.modal { width: 100%; max-width: 440px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 24px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.modal-title { font-family: var(--font-d); font-weight: 700; font-size: 19px;
  color: var(--text); }
.modal-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.modal-mst { font-family: var(--font-m); font-size: 12px; color: var(--coral);
  margin: 10px 0 16px; }
.modal-err { min-height: 18px; font-size: 12.5px; color: var(--red);
  margin-top: 4px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 14px; }
.modal .lg-field { margin-bottom: 14px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-in); border-radius: 6px; }

/* ── Bổ sung cho BẢN WEB ────────────────────────────────────────────────
   Ba lớp dưới đây chỉ có ở bản chạy trong trình duyệt: cảnh báo lưu mật
   khẩu (bản desktop mã hoá bằng DPAPI nên không cần), ghi chú thư mục lưu
   (trình duyệt phải xin quyền), và chip bị khoá cho tính năng chỉ có ở bản
   desktop. */
.lg-warn { color: var(--coral); font-size: 11.5px; }
.sb-note { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.chip-off { opacity: .5; cursor: not-allowed; }
.chip-off:hover { border-color: var(--border-in); background: transparent; }
.chip-off i { font-style: normal; font-size: 10.5px; opacity: .8; }