/* ZeusVN — CHỦ ĐỀ GIAO DIỆN cá nhân (Owner 16/10). Nạp SAU app.css/cc.css/thread.css/ws.css trên MỌI trang (khung chat, Cowork, Duyệt,
   Trung tâm, đăng nhập). Mỗi chủ đề = một bộ biến trên <html data-theme="…">; độ thoáng data-density, cỡ chữ data-fs. Không style nội tuyến.
   Bộ chọn :root[data-theme] (độ ưu tiên 0,2,0) thắng mọi khối biến cũ ([data-theme="light"], media prefers-color-scheme).
   Thêm chủ đề: thêm id vào zeus/workbench/prefs.py THEMES + static/theme.js + một khối dưới đây (test kiểm độ tương phản). */

/* ─── ZeusVN Đêm (mặc định): vàng gold trên nền tối — đúng nhận diện zeusvn.com ─── */
:root[data-theme="zeus-dem"] {
  color-scheme: dark;  /* token theo zeusvn.com (assets/zv.css): nền #05070e/#090e1b/#0e1528, chữ #eef1ff, phụ #99a2c6, đồng #e8b04f */
  --bg: #05070e; --bg2: #090e1b; --panel: #0b1120; --panel2: #0e1528; --border: #1a2236; --border2: #2a3550;
  --text: #eef1ff; --text2: #c3c9e4; --muted: #99a2c6; --muted2: #8f98bb; --code: #0e1528; --side: #090e1b; --line: rgba(150,170,255,.12);
  --gold: #e8b04f; --gold2: #ffd98a; --gold-soft: rgba(232,176,79,.12); --accent: #e8b04f; --accent-t: #05070e; --on-grad: #160d02;
  --grad: linear-gradient(110deg, #ffe3a0 0%, #e8b04f 38%, #ff6a45 100%); --grad2: linear-gradient(110deg, #46e0ff, #5b78ff);
  --ok: #58d68d; --warn: #f0c050; --bad: #ff6a6a; --info: #46e0ff; --bad-btn: #c0392b;
  --ok-soft: rgba(88,214,141,.12); --warn-soft: rgba(240,192,80,.12); --bad-soft: rgba(255,96,96,.12); --info-soft: rgba(70,224,255,.10);
  --c-run: #9db8ff; --c-run-bg: #1b2745; --c-ok: #4fd8a4; --c-ok-bg: #12332a; --c-attn: #f4b25c; --c-attn-bg: #3a2a12; --c-bad: #ff8a90; --c-bad-bg: #3b1a1d;
  --c-src: #c4b0ff; --c-src-bg: #2b2147; --c-off: #a6afbf; --c-off-bg: #242a36;
  --ws-bg: #05070e; --ws-side-bg: #090e1b; --ws-card: #0b101d; --ws-card2: #111827; --ws-line: rgba(150,170,255,.12); --ws-line2: rgba(150,170,255,.20);
  --ws-gold-line: rgba(232,176,79,.38); --ws-spot: radial-gradient(ellipse 70% 45% at 50% -8%, rgba(232,176,79,.09), transparent 62%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(91,120,255,.06), transparent 60%);
  --ws-me: linear-gradient(135deg, rgba(232,176,79,.18), rgba(255,106,69,.10)); --ws-me-line: rgba(232,176,79,.38); --ws-focus: 0 0 0 3px rgba(232,176,79,.45);
  --k-ask: #5b78ff; --k-data: #46e0ff; --k-code: #c4b0ff; --k-fix: #e8b04f; --k-computer: #58d68d;
}

/* ─── ZeusVN Sáng: nền kem sáng, điểm nhấn vàng đồng ─── */
:root[data-theme="zeus-sang"] {
  color-scheme: light;
  --bg: #f6f4ef; --bg2: #efece4; --panel: #ffffff; --panel2: #f4f1ea; --border: #e2dccd; --border2: #cfc6b1;
  --text: #1c1a16; --text2: #4a4537; --muted: #645c49; --muted2: #6b6352; --code: #f1ede3; --side: #ffffff; --line: #e2dccd;
  --gold: #8a5600; --gold-soft: rgba(232,176,79,.18); --accent: #8a5600; --accent-t: #ffffff; --on-grad: #1c1204;
  --grad: linear-gradient(110deg, #ffe3a0 0%, #e8b04f 45%, #f08a4b 100%);
  --ok: #0f6e4a; --warn: #7a5000; --bad: #b42318; --info: #0b6178; --bad-btn: #b42318;
  --ok-soft: rgba(15,110,74,.10); --warn-soft: rgba(176,120,10,.12); --bad-soft: rgba(180,35,24,.08); --info-soft: rgba(11,97,120,.08);
  --c-run: #1d4ed8; --c-run-bg: #e6edfd; --c-ok: #0f6e4f; --c-ok-bg: #e3f4ec; --c-attn: #8a4705; --c-attn-bg: #fdf0dc; --c-bad: #b4232a; --c-bad-bg: #fbe7e8;
  --c-src: #5b3fa8; --c-src-bg: #eee8fb; --c-off: #5b6678; --c-off-bg: #eceef2;
  --ws-bg: #f6f4ef; --ws-side-bg: #efebe2; --ws-card: #ffffff; --ws-card2: #f6f2e9; --ws-line: #e4ddcc; --ws-line2: #d2c8b2;
  --ws-me: linear-gradient(135deg, rgba(232,176,79,.24), rgba(255,106,69,.12)); --ws-me-line: rgba(176,120,10,.45); --ws-focus: 0 0 0 3px rgba(176,120,10,.40);
  --k-ask: #4255c9; --k-data: #0a6f86; --k-code: #6a4fc4; --k-fix: #855c00; --k-computer: #13804c;
  --d-run: #1d4ed8; --d-ok: #0f8a5f; --d-warn: #b46a06; --d-bad: #c0262d; --d-src: #6a4fc4; --d-off: #8090a8;
}

/* ─── Xanh đại dương ─── */
:root[data-theme="dai-duong"] {
  color-scheme: dark;
  --bg: #03111b; --bg2: #061a28; --panel: #0a2233; --panel2: #0e2b40; --border: #123447; --border2: #1b4560;
  --text: #e6f3f8; --text2: #a9c8d6; --muted: #88adbf; --muted2: #7f9fb0; --code: #0e2b40; --side: #0a2233; --line: #123447;
  --gold: #46d6e8; --gold-soft: rgba(70,214,232,.13); --accent: #46d6e8; --accent-t: #03111b; --on-grad: #021018;
  --grad: linear-gradient(110deg, #b6f6ff 0%, #46d6e8 40%, #2f8fe0 100%);
  --ok: #5fe0a4; --warn: #f2c35a; --bad: #ff7d7d; --info: #7fd8ff; --bad-btn: #c0392b;
  --ok-soft: rgba(95,224,164,.12); --warn-soft: rgba(242,195,90,.12); --bad-soft: rgba(255,125,125,.12); --info-soft: rgba(127,216,255,.10);
  --c-run: #9fd0ff; --c-run-bg: #12304a; --c-ok: #5fe0a4; --c-ok-bg: #0f3a2e; --c-attn: #f4b25c; --c-attn-bg: #3a2a12; --c-bad: #ff8a90; --c-bad-bg: #3b1a1d;
  --c-src: #c4b0ff; --c-src-bg: #2b2147; --c-off: #a9bcc8; --c-off-bg: #18303f;
  --ws-bg: #041420; --ws-side-bg: #051824; --ws-card: #0a2232; --ws-card2: #0f2b3f; --ws-line: #15384d; --ws-line2: #1f4a64;
  --ws-me: linear-gradient(135deg, rgba(70,214,232,.18), rgba(47,143,224,.16)); --ws-me-line: rgba(70,214,232,.38); --ws-focus: 0 0 0 3px rgba(70,214,232,.45);
}

/* ─── Tím hoàng gia ─── */
:root[data-theme="tim-hoang-gia"] {
  color-scheme: dark;
  --bg: #0b0615; --bg2: #120a21; --panel: #1a1030; --panel2: #22163d; --border: #2c1f4a; --border2: #3d2c63;
  --text: #f2edfc; --text2: #c6b9e3; --muted: #a99bcd; --muted2: #9a8cc0; --code: #22163d; --side: #1a1030; --line: #2c1f4a;
  --gold: #e9c46a; --gold-soft: rgba(185,146,255,.15); --accent: #e9c46a; --accent-t: #0b0615; --on-grad: #120a21;
  --grad: linear-gradient(110deg, #f6dc8f 0%, #c9a2ff 50%, #8a63ff 100%);
  --ok: #6be3a3; --warn: #f2c35a; --bad: #ff8a8a; --info: #b8a6ff; --bad-btn: #c0392b;
  --ok-soft: rgba(107,227,163,.12); --warn-soft: rgba(242,195,90,.12); --bad-soft: rgba(255,138,138,.12); --info-soft: rgba(184,166,255,.12);
  --c-run: #c3b4ff; --c-run-bg: #2a1f4f; --c-ok: #6be3a3; --c-ok-bg: #143329; --c-attn: #f4b25c; --c-attn-bg: #3a2a12; --c-bad: #ff8a90; --c-bad-bg: #3b1a1d;
  --c-src: #e9c46a; --c-src-bg: #3a2f17; --c-off: #b3a9c8; --c-off-bg: #2a2140;
  --ws-bg: #0d0719; --ws-side-bg: #100920; --ws-card: #181030; --ws-card2: #20163b; --ws-line: #2d2050; --ws-line2: #3e2d66;
  --ws-me: linear-gradient(135deg, rgba(201,162,255,.22), rgba(233,196,106,.12)); --ws-me-line: rgba(201,162,255,.42); --ws-focus: 0 0 0 3px rgba(201,162,255,.45);
  --k-ask: #c9a2ff; --k-code: #e9c46a;
}

/* ─── Tối giản trắng-đen ─── */
:root[data-theme="toi-gian"] {
  color-scheme: light;
  --bg: #ffffff; --bg2: #f5f5f5; --panel: #ffffff; --panel2: #f3f3f3; --border: #e3e3e3; --border2: #c9c9c9;
  --text: #111111; --text2: #333333; --muted: #595959; --muted2: #5e5e5e; --code: #f2f2f2; --side: #ffffff; --line: #e3e3e3;
  --gold: #111111; --gold-soft: rgba(0,0,0,.06); --accent: #111111; --accent-t: #ffffff; --on-grad: #ffffff;
  --grad: linear-gradient(110deg, #2b2b2b 0%, #111111 100%);
  --ok: #1d6b3a; --warn: #7a5000; --bad: #b42318; --info: #1f4f8a; --bad-btn: #b42318;
  --ok-soft: rgba(29,107,58,.08); --warn-soft: rgba(122,80,0,.08); --bad-soft: rgba(180,35,24,.07); --info-soft: rgba(31,79,138,.07);
  --c-run: #1f4f8a; --c-run-bg: #eef2f8; --c-ok: #1d6b3a; --c-ok-bg: #edf5ef; --c-attn: #7a4a05; --c-attn-bg: #f7f1e6; --c-bad: #b4232a; --c-bad-bg: #f9ecec;
  --c-src: #4b4b4b; --c-src-bg: #efefef; --c-off: #5b5b5b; --c-off-bg: #efefef;
  --ws-bg: #ffffff; --ws-side-bg: #f6f6f6; --ws-card: #ffffff; --ws-card2: #f4f4f4; --ws-line: #e2e2e2; --ws-line2: #c8c8c8;
  --ws-me: linear-gradient(135deg, #f1f1f1, #e9e9e9); --ws-me-line: #cfcfcf; --ws-focus: 0 0 0 3px rgba(0,0,0,.35);
  --k-ask: #333333; --k-data: #333333; --k-code: #333333; --k-fix: #333333; --k-computer: #333333;
  --d-run: #1f4f8a; --d-ok: #1d6b3a; --d-warn: #9a6500; --d-bad: #b42318; --d-src: #555555; --d-off: #9a9a9a;
}
:root[data-theme="toi-gian"] .btn { box-shadow: none; color: #fff; }
:root[data-theme="toi-gian"] .ws-new, :root[data-theme="toi-gian"] .ws-send { box-shadow: none; }

.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad2 { background: var(--grad2, var(--grad)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* khung chat «Giao việc» (16/10): nền cột giữa, bo góc thẻ và màu chữ trên nút chuyển màu theo token --cx-* trong ws.css */

/* chữ trên nền chuyển màu (nút chính, ảnh đại diện ZB) theo chủ đề */
:root[data-theme] body { background: var(--bg); color: var(--text); }

/* ─── cỡ chữ ─── */
:root[data-fs="nho"] { font-size: 15px; }
:root[data-fs="nho"] body { font-size: 14px; }
:root[data-fs="vua"] { font-size: 16px; }
:root[data-fs="lon"] { font-size: 18px; }
:root[data-fs="lon"] body { font-size: 17px; }

/* ─── độ thoáng: Gọn = nhiều thông tin hơn trên một màn hình ─── */
:root[data-density="gon"] body { line-height: 1.45; }
:root[data-density="gon"] .card { padding: 10px 12px; }
:root[data-density="gon"] .ws-thread { gap: 12px; }
:root[data-density="gon"] .ws-card { padding: 10px 12px; }
:root[data-density="gon"] .ws-conv { min-height: 32px; padding: 5px 8px; }
:root[data-density="gon"] .ws-zb { margin-top: 6px; }
:root[data-density="gon"] .ws-chat { padding-top: 12px; }
:root[data-density="gon"] .ws-bubble-me { padding: 8px 12px; }
:root[data-density="gon"] .side a { padding-top: 6px; padding-bottom: 6px; }
:root[data-density="gon"] main { padding-top: 16px; }

/* ─── bộ chọn giao diện (menu tài khoản + trang Giao diện) ─── */
.ui-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-sw { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border2); cursor: pointer; padding: 0; }
.ui-sw[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--gold); }
.ui-sw-zeus-dem { background: linear-gradient(135deg, #05070e 50%, #e8b04f 50%); }
.ui-sw-zeus-sang { background: linear-gradient(135deg, #f6f4ef 50%, #e8b04f 50%); }
.ui-sw-dai-duong { background: linear-gradient(135deg, #03111b 50%, #46d6e8 50%); }
.ui-sw-tim-hoang-gia { background: linear-gradient(135deg, #0b0615 50%, #c9a2ff 50%); }
.ui-sw-toi-gian { background: linear-gradient(135deg, #ffffff 50%, #111111 50%); }
.ui-menu-h { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 2px; }
.ui-set { display: grid; gap: 18px; max-width: 860px; }
.ui-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ui-themes legend, .ui-row legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.ui-card { position: relative; display: grid !important; gap: 6px; padding: 10px; border-radius: 14px; border: 2px solid var(--border2); background: var(--panel); cursor: pointer; }
.ui-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.ui-card input:focus-visible + .ui-prev { outline: 3px solid var(--gold); outline-offset: 2px; }
.ui-prev { height: 54px; border-radius: 10px; border: 1px solid var(--border); }
.ui-card small { color: var(--muted); font-weight: 500; }
.ui-row { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ui-pill { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border2); background: var(--panel); cursor: pointer; }
.ui-pill:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); color: var(--text); }
.ui-note { color: var(--muted); font-size: .85rem; }
.ui-h3 { margin: 0; font-size: 1.05rem; }
.ui-check { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 8px; font-size: .9rem; text-align: left; }
.ui-check input { width: auto; margin: 0; flex: none; }
#persona { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
#persona .ui-pill { white-space: nowrap; }

/* ─── bộ biểu tượng (sprite _icons.html) ─── */
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; display: inline-block; }
.ic-gold { color: var(--gold); }
.owner-nav a::before, .mobile-nav a.mn-ic::before { content: none !important; display: none !important; }
.owner-nav a { display: flex; align-items: center; gap: 10px; }
.owner-nav a .ic { color: var(--muted); }
.owner-nav a.on .ic, .owner-nav a:hover .ic { color: var(--gold); }
.mobile-nav a.mn-ic { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mobile-nav a.mn-ic .ic { width: 22px; height: 22px; }

/* ─── logo thương hiệu thật (assets zeusvn.com) ─── */
.zv-logo { height: 34px; width: auto; display: block; }
:root[data-theme="zeus-sang"] .zv-logo, :root[data-theme="toi-gian"] .zv-logo, :root[data-theme="zeus-sang"] .ws-logo, :root[data-theme="toi-gian"] .ws-logo,
:root[data-theme="zeus-sang"] .ws-hello-logo, :root[data-theme="toi-gian"] .ws-hello-logo { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.25)); }
.zv-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 32px; padding: 14px 0 4px; border-top: 1px solid var(--line, var(--border)); color: var(--muted); font-size: .76rem; text-align: center; }

/* ─── trang đăng nhập dùng token chủ đề ─── */
:root[data-theme] .login-grid { background: var(--ws-spot, none), var(--bg); }
:root[data-theme] .login-card { background: color-mix(in srgb, var(--panel) 92%, transparent); border-color: var(--ws-gold-line, var(--border2)); color: var(--text); }
:root[data-theme] .login-brand-tagline { color: var(--muted); }
:root[data-theme] .login-greeting, :root[data-theme] .login-field label { color: var(--text2); }
:root[data-theme="zeus-sang"] .login-form input, :root[data-theme="toi-gian"] .login-form input { background: var(--bg2); border-color: var(--border2); color: var(--text); }
.login-dragon { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 6px 22px rgba(232,176,79,.35)); }
.login-zvlogo { width: 220px; height: auto; }

/* ─── thông báo «Có bản mới» (pwa.js) ─── */
.zv-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--panel2); color: var(--text); border: 1px solid var(--ws-gold-line, var(--border2)); box-shadow: var(--shadow-lg); font-size: .9rem; max-width: calc(100vw - 24px); }
.zv-toast button { border: 0; border-radius: 10px; padding: 8px 12px; background: var(--grad); color: var(--on-grad, #160d02); font: inherit; font-weight: 700; cursor: pointer; }
/* xem trước bộ biểu tượng (/wb/icons, Tech Mode) */
.ic-preview { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ic-preview li { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.ic-row { display: flex; align-items: center; gap: 12px; }
.ic-row > .ic { width: 32px; height: 32px; }
.ic-16 .ic { width: 16px; height: 16px; }
.ic-gold .ic { width: 24px; height: 24px; }
.ic-preview small { color: var(--muted); }

.login-brand-tagline { white-space: nowrap; }
@media (max-width: 420px) { .login-brand-tagline { white-space: normal; } }
.login-bg-dragon { position: absolute; right: -60px; bottom: -40px; width: min(560px, 70vw); height: auto; opacity: .10; filter: saturate(.8); }
@media (max-width: 600px) { .login-bg-dragon { right: -80px; bottom: -20px; opacity: .08; } }
:root[data-theme] { accent-color: var(--gold); }
.login-bg-dragon { opacity: .16; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.login-card p, .login-greeting p { text-wrap: balance; }