/*
 * ThinkBox ID — bảng màu dùng chung cho Hub và trang quản lý (sáng / tối). Chỉ chứa biến màu và độ nổi; mọi trang dùng biến, không viết cứng mã màu.
 * Sáng là bảng màu gốc của Hub (nền trắng, xanh thương hiệu). Tối là nền gần đen ngả xanh với cùng màu nhấn (sáng hơn một bậc để đủ tương phản).
 * Chọn giao diện: theme.js đặt data-theme trên <html> trước khi trang vẽ (lựa chọn đã lưu, nếu không có thì theo hệ điều hành).
 * Không có JavaScript thì khối @media bên dưới vẫn cho bản tối theo hệ điều hành.
 * Màu nhấn nằm ở MỘT biến (--accent): muốn đổi màu cả hai trang chỉ sửa ở đây.
 */
:root {
  color-scheme: light;
  --bg: #ffffff; --panel: #f8fafc; --raise: #f1f5f9; --inset: #ffffff; --hover: rgba(15, 23, 42, .05);
  --line: #e2e8f0; --line-strong: #cbd5e1;
  --ink: #0f172a; --ink-2: #475569; --ink-3: #64748b; --wordmark: #334155;
  --accent: #1a6ff2; --accent-hover: #135fd8; --accent-wash: rgba(26, 111, 242, .14); --on-accent: #ffffff;
  --err: #c0243f; --ok: #15803d; --warn: #a16207;
  --float: #ffffff; --icon-bg: #ffffff;
  --elev-search: 0 2px 8px rgba(15, 23, 42, .1), 0 10px 26px -14px rgba(15, 23, 42, .25);
  --elev-icon: 0 1px 3px rgba(15, 23, 42, .12), 0 8px 20px -10px rgba(15, 23, 42, .3);
  --elev-menu: 0 16px 40px -12px rgba(15, 23, 42, .25);
  --elev-dialog: 0 24px 60px -20px rgba(15, 23, 42, .35);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --font: 'Be Vietnam Pro', 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117; --panel: #151b23; --raise: #1c232d; --inset: #0a0d12; --hover: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .18);
  --ink: #e4e9ef; --ink-2: #a3aebb; --ink-3: #8793a1; --wordmark: #e4e9ef;
  --accent: #4a90ff; --accent-hover: #6aa5ff; --accent-wash: rgba(74, 144, 255, .2); --on-accent: #061226;
  --err: #ff7b7b; --ok: #3ddc97; --warn: #e6b440; --float: #1c232d;
  --elev-search: 0 0 0 1px rgba(255, 255, 255, .04);
  --elev-icon: 0 0 0 1px rgba(255, 255, 255, .08);
  --elev-menu: 0 16px 40px -12px rgba(0, 0, 0, .6);
  --elev-dialog: 0 24px 60px -20px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0d1117; --panel: #151b23; --raise: #1c232d; --inset: #0a0d12; --hover: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .18);
    --ink: #e4e9ef; --ink-2: #a3aebb; --ink-3: #8793a1; --wordmark: #e4e9ef;
    --accent: #4a90ff; --accent-hover: #6aa5ff; --accent-wash: rgba(74, 144, 255, .2); --on-accent: #061226;
    --err: #ff7b7b; --ok: #3ddc97; --warn: #e6b440; --float: #1c232d;
    --elev-search: 0 0 0 1px rgba(255, 255, 255, .04);
    --elev-icon: 0 0 0 1px rgba(255, 255, 255, .08);
    --elev-menu: 0 16px 40px -12px rgba(0, 0, 0, .6);
    --elev-dialog: 0 24px 60px -20px rgba(0, 0, 0, .7);
  }
}

/* Nút đổi giao diện: hiện mặt trăng khi đang sáng (bấm để sang tối) và mặt trời khi đang tối */
[data-theme-toggle] .i-sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .i-sun { display: block; }
:root[data-theme="dark"] [data-theme-toggle] .i-moon { display: none; }