:root{--z-sticky:10;--z-drawer:20;--z-panel:30;--z-popover:40;--z-modal:50;--z-toast:60}
/* Thanh tài khoản dùng chung (account-bar.js) + giao diện tối/cỡ chữ. */
.nxab{position:relative;display:inline-flex;align-items:center;gap:4px;margin-left:8px}
.nxab-btn{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;padding:0}
.nxab-btn svg{width:22px;height:22px}.nxab-btn:hover,.nxab-btn[aria-expanded=true]{background:rgba(255,255,255,.14)}
.nxab-badge{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e8590c;color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.nxab-user{display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;color:inherit;cursor:pointer;padding:3px 8px 3px 3px;border-radius:22px;font:inherit;text-align:left}
.nxab-user:hover,.nxab-user[aria-expanded=true]{background:rgba(255,255,255,.14)}
.nxab-avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#2b7be9;color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px}.nxab-avatar.big{width:40px;height:40px;font-size:14px}
.nxab-id{display:flex;flex-direction:column;line-height:1.15}.nxab-id strong{font-size:13px;font-weight:600}.nxab-id small{font-size:11px;opacity:.75}
.nxab-pop{position:absolute;right:0;top:calc(100% + 8px);width:380px;max-width:calc(100vw - 24px);background:#fff;color:#16202b;border:1px solid #d6e0ec;border-radius:10px;box-shadow:0 12px 32px rgba(16,32,48,.18);z-index:var(--z-popover,40);font-size:13px;text-align:left;overflow:hidden}
.nxab-pop[data-kind=gear],.nxab-pop[data-kind=user]{width:300px}
.nxab-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #e9edf1}.nxab-head b{font-size:14px}.nxab-count{font-size:11px;padding:2px 8px;border-radius:10px;background:#fff3d6;color:#8a5a00;font-weight:600}.nxab-sp{flex:1}
.nxab-pop .nxab-link,.nxab-link{margin:0;border:0;background:none;color:#0b6bd6;font:inherit;font-size:12px;cursor:pointer;padding:0}.nxab-link:hover{text-decoration:underline}
.nxab-hint{margin:0;padding:8px 14px;font-size:11.5px;color:#657380;background:#f6f9fd;border-bottom:1px solid #e9edf1}
.nxab-list{list-style:none;margin:0;padding:0;max-height:min(60vh,440px);overflow:auto}
.nxab-row{display:flex;gap:10px;padding:10px 14px 10px 12px;border-bottom:1px solid #f0f3f6;cursor:pointer;align-items:flex-start;border-left:3px solid transparent}.nxab-row.unread{border-left-color:#0b6bd6}.nxab-row.system.unread{border-left-color:#6a49a0}.nxab-row:hover{background:#f4f9fd}.nxab-row.unread{background:#f7fbff}.nxab-row.unread:hover{background:#eef6fe}
.nxab-ico{font-size:15px;line-height:1;flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#eef2f7}.nxab-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.nxab-txt b{font-weight:600;font-size:12.5px;line-height:1.35}.nxab-txt span{font-size:12px;color:#485867;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nxab-txt small{font-size:11px;color:#687784}
.nxab-row.system .nxab-txt small{color:#7a4b00}.nxab-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#0b6bd6;margin-top:6px}
.nxab-empty,.nxab-loading{padding:22px 16px;color:#687784;text-align:center;font-size:12.5px;margin:0}
.nxab-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid #e9edf1;background:#fafbfd}.nxab-foot a{color:#0b6bd6;text-decoration:none;font-size:12px;display:inline-flex;align-items:center;gap:5px}.nxab-foot a svg{width:15px;height:15px}.nxab-foot a:hover{text-decoration:underline}
.nxab-menu{padding:6px}.nxab-menu a,.nxab-menu button[role=menuitem]{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:none;color:#16202b;font:inherit;font-size:13px;text-align:left;text-decoration:none;cursor:pointer}.nxab-menu a:hover,.nxab-menu button[role=menuitem]:hover{background:#f1f5fa}.nxab-menu svg{width:18px;height:18px;color:#5b6876;flex:0 0 18px}.nxab-menu button.danger{color:#b0392b}.nxab-menu button.danger svg{color:#b0392b}.nxab-menu hr{border:0;border-top:1px solid #e9edf1;margin:6px 0}.nxab-menu kbd{margin-left:auto;font:600 11px ui-monospace,Menlo,monospace;background:#eef2f6;border:1px solid #d6dee8;border-radius:4px;padding:1px 6px;color:#485867}
.nxab-who{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid #e9edf1;margin-bottom:6px}.nxab-who b{display:block;font-size:13.5px}.nxab-who small{color:#657380;font-size:11.5px}
.nxab-sect{padding:6px 10px 10px}.nxab-sect>span{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:8px}.nxab-seg{display:flex;gap:4px;margin:6px 0 0 28px}.nxab-pop .nxab-seg button{flex:1;margin:0;border:1px solid #d6dee8;background:#fff;border-radius:6px;padding:5px 6px;font:inherit;font-size:12px;cursor:pointer;color:#16202b;white-space:nowrap}.nxab-pop .nxab-seg button[aria-checked=true]{background:#0b6bd6;border-color:#0b6bd6;color:#fff}
.nxab-toast{position:fixed;right:18px;bottom:18px;z-index:var(--z-toast,60);display:flex;gap:8px;align-items:center;max-width:360px;padding:10px 14px;border-radius:10px;background:#16202b;color:#fff;font-size:13px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateY(12px);opacity:0;transition:.25s}.nxab-toast.in{transform:none;opacity:1}.nxab-toast b{font-weight:600}
.nxab-dialog{border:0;border-radius:12px;padding:20px 24px;max-width:420px;width:calc(100vw - 32px);box-shadow:0 20px 50px rgba(0,0,0,.3);font-size:13px;color:#16202b}.nxab-dialog::backdrop{background:rgba(10,20,40,.45)}.nxab-dialog h2{margin:0 0 12px;font-size:16px}.nxab-dialog table{width:100%;border-collapse:collapse}.nxab-dialog td{padding:6px 4px;border-bottom:1px solid #eef2f6}.nxab-dialog td:first-child{width:46%;white-space:nowrap}.nxab-dialog kbd{font:600 11px ui-monospace,Menlo,monospace;background:#eef2f6;border:1px solid #d6dee8;border-radius:4px;padding:2px 6px}.nxab-dialog .nxab-hint{background:none;border:0;padding:8px 0 0}.nxab-close{margin-top:10px;border:1px solid #d6dee8;background:#fff;border-radius:6px;padding:7px 14px;font:inherit;cursor:pointer}
/* Cỡ chữ lớn */
html[data-font=large] body{zoom:1.12}
/* Chế độ tối (đảo màu có kiểm soát; ảnh, canvas, video, avatar giữ nguyên) */
/* Chế độ tối "dịu": đảo màu vừa phải (không đen tuyền), thanh đầu trang giữ màu navy gốc, thẻ/bảng sáng hơn nền
   (đúng thứ tự lớp của giao diện tối), ảnh/bản vẽ/avatar giữ nguyên màu. */
html[data-theme=dark]{filter:invert(.91) hue-rotate(180deg) saturate(.88) contrast(1.02);background:#fbfcfe;color-scheme:light}
html[data-theme=dark] img,html[data-theme=dark] video,html[data-theme=dark] canvas,html[data-theme=dark] iframe,html[data-theme=dark] .nxab-toast,html[data-theme=dark] [data-no-invert]{filter:invert(1) hue-rotate(180deg) saturate(1.14)}
/* Hộp thoại mở bằng showModal() (và phần tử popover) nằm ở lớp trên cùng của trình duyệt (top layer) nên KHÔNG chịu bộ lọc đặt
   trên html → trắng chói giữa trang tối. Áp đúng bộ lọc của trang lên chính hộp; ảnh / canvas / [data-no-invert] bên trong
   vẫn theo quy tắc «đảo lại» ở dòng trên nên giữ màu thật. Hộp không modal (show()) nằm trong trang, đã được đảo — không áp lần hai.
   ::backdrop để nguyên: màn che tối phủ lên trang đã tối là đúng; đảo nó sẽ thành lớp sương trắng. */
html[data-theme=dark] dialog:modal,html[data-theme=dark] [popover]:popover-open{filter:invert(.91) hue-rotate(180deg) saturate(.88) contrast(1.02);color-scheme:light}
/* Hộp xem ảnh phóng to (dialog.lightbox) vốn nền trong suốt trên màn che gần đen, chữ trắng: giữ nguyên, không đảo, ảnh màu thật. */
html[data-theme=dark] dialog.lightbox:modal{filter:none;background:transparent}html[data-theme=dark] dialog.lightbox:modal img{filter:none}
html[data-theme=dark] .cde-topbar,html[data-theme=dark] header.topbar,html[data-theme=dark] .app-header,html[data-theme=dark] main#workspace-main .drawing-heading,html[data-theme=dark] .st-top,html[data-theme=dark] .app-topbar{filter:invert(1) hue-rotate(180deg) saturate(1.14);position:relative;z-index:30}html[data-theme=dark] header.topbar{position:fixed}
html[data-theme=dark] .cde-topbar img,html[data-theme=dark] header.topbar img,html[data-theme=dark] .app-header img,html[data-theme=dark] .st-top img,html[data-theme=dark] .app-topbar img,html[data-theme=dark] .cde-topbar canvas{filter:none}
/* Nền trang sáng hơn, thẻ tối hơn TRƯỚC khi đảo → sau khi đảo: nền tối, thẻ nổi lên sáng hơn nền. */
html[data-theme=dark] #cde,html[data-theme=dark] body,html[data-theme=dark] .cde-main,html[data-theme=dark] .pset,html[data-theme=dark] main{background:#fbfcfe}
html[data-theme=dark] .cde-content,html[data-theme=dark] .cde-settings-card,html[data-theme=dark] .adm-card,html[data-theme=dark] .ntf-card,html[data-theme=dark] .reg-card,html[data-theme=dark] .reg-link,html[data-theme=dark] .pset-card,html[data-theme=dark] .cap-org,html[data-theme=dark] .st-card,html[data-theme=dark] .project-card,html[data-theme=dark] .cde-drawer,html[data-theme=dark] .nxab-pop,html[data-theme=dark] .reg-review,html[data-theme=dark] dialog,html[data-theme=dark] .pset-tile,html[data-theme=dark] .cap-tile,html[data-theme=dark] .rg-card,html[data-theme=dark] .cde-table-wrap,html[data-theme=dark] .card,html[data-theme=dark] .panel,html[data-theme=dark] .review-card,html[data-theme=dark] .drawer{background:#e9edf2}
html[data-theme=dark] .cde-table th,html[data-theme=dark] .ntf-day,html[data-theme=dark] .pset-head,html[data-theme=dark] .cap-org-head{background:#e1e6ec}
html[data-theme=dark] .cde-sidebar:not(.nx-nav),html[data-theme=dark] .sidebar:not(.nx-nav),html[data-theme=dark] .st-nav a.on{background:#f3f5f8}
/* Giao diện navy: thanh chính và dải navy giữ màu gốc trong chế độ tối (đảo ngược lại như thanh đầu trang). */
html[data-theme=dark] .nx-nav,html[data-theme=dark] .nx-band{filter:invert(1) hue-rotate(180deg) saturate(1.14)}
html[data-theme=dark] .nx-nav img,html[data-theme=dark] .nx-band img,html[data-theme=dark] .nx-band canvas{filter:none}
html[data-theme=dark] .nx-band :is(.cde-create-options,[role=menu]){filter:invert(1) hue-rotate(180deg) saturate(1.14)}
html[data-theme=dark] .cde-table td,html[data-theme=dark] .cde-table th,html[data-theme=dark] .cde-content,html[data-theme=dark] .cde-settings-card,html[data-theme=dark] .pset-card,html[data-theme=dark] .cap-org,html[data-theme=dark] .reg-card{border-color:#d2d8e0}
@media (max-width:760px){.nxab-id{display:none}.nxab-pop{position:fixed;left:8px;right:8px;top:56px;width:auto;max-width:none}}
/* Panel/menu của thanh tài khoản nằm trong thanh đầu trang (đã đảo ngược lại) → đảo thêm một lần để cùng tông tối với trang. */
html[data-theme=dark] .cde-topbar .nxab-pop,html[data-theme=dark] header.topbar .nxab-pop,html[data-theme=dark] .app-header .nxab-pop,html[data-theme=dark] .st-top .nxab-pop,html[data-theme=dark] .app-topbar .nxab-pop{filter:invert(.9) hue-rotate(180deg) saturate(.88)}
.nxab-pop,.nxab-pop b,.nxab-pop strong,.nxab-pop .nxab-txt b,#cde .cde-topbar .nxab-pop b{color:#16202b}.nxab-pop .nxab-txt small,.nxab-pop .nxab-hint{color:#657380}
.nxab-pop,.nxab-pop *{text-align:left}.nxab-txt{align-items:flex-start}

html[data-layer-modal] .nxfb-fab,html[data-layer-modal] .nxfb-panel,html[data-layer-drawer] .nxfb-fab{display:none!important}
/* Vai trò dưới tên người dùng trên thanh đầu trang tối (trình xem bản vẽ): chữ sáng, đủ tương phản */
.app-header .nxab-id,.app-header .nxab-id small{color:#dbe6f3}.app-header .nxab-id small{opacity:.85}
/* Đổi sáng / tối mượt khi đến giờ (chế độ Tự động) */
html.theme-fade,html.theme-fade body{transition:filter .8s ease,background-color .8s ease}
@media (prefers-reduced-motion:reduce){html.theme-fade,html.theme-fade body{transition:none}}