/* XFileTool Console UI v2
   Design direction: information architecture + quiet precision.
   Keep functional colors semantic and reserve cobalt for primary actions. */
:root {
  --x-bg: #f4f6f8;
  --x-surface: #ffffff;
  --x-surface-2: #f8fafc;
  --x-surface-3: #eef2f6;
  --x-ink: #17212b;
  --x-muted: #607080;
  --x-faint: #8794a3;
  --x-line: #d9e0e7;
  --x-line-soft: #e9eef3;
  --x-rail: #111a24;
  --x-rail-2: #1a2633;
  --x-rail-text: #edf3f8;
  --x-primary: #2457e6;
  --x-primary-2: #1742bd;
  --x-primary-soft: #e8efff;
  --x-success: #087a57;
  --x-success-soft: #e7f7f1;
  --x-warning: #a75c05;
  --x-warning-soft: #fff3df;
  --x-danger: #bd3d3d;
  --x-danger-soft: #fff0ef;
  --x-radius: 8px;
  --x-radius-sm: 6px;
  --x-shadow-1: 0 1px 2px rgba(20, 35, 50, .05), 0 8px 24px rgba(20, 35, 50, .05);
  --x-shadow-2: 0 16px 45px rgba(16, 30, 46, .14);
  --x-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --x-ease: cubic-bezier(.2,.75,.25,1);
}

html { color-scheme: light; scroll-behavior: smooth; }
html[data-theme="dark"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--x-ink); background: var(--x-bg); font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; font-size: 14px; line-height: 1.55; }
body, button, input, textarea, select { font-variant-numeric: tabular-nums; }
button, input, textarea, select { font: inherit; }
a { color: var(--x-primary); text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button, .btn, .nav-link, .icon-btn, .ops-metric, .ops-action-list a { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(36, 87, 230, .28); outline-offset: 2px; }
::selection { background: #d5e2ff; color: #12254d; }

/* Admin application shell */
.admin-page { min-height: 100vh; background: var(--x-bg) !important; color: var(--x-ink) !important; }
.admin-page .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: var(--x-bg); }
.admin-page .d-sidebar { position: sticky; top: 0; z-index: 80; display: flex; flex-direction: column; gap: 18px; height: 100vh; overflow-y: auto; padding: 18px 14px 14px; background: var(--x-rail); border-right: 1px solid rgba(255,255,255,.08); color: var(--x-rail-text); scrollbar-width: thin; }
.admin-page .brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.10); }
.admin-page .brand-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--x-primary); color: white; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 8px 18px rgba(36,87,230,.28); }
.admin-page .brand-name { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.admin-page .brand-tag { margin-top: 2px; color: #8d9cac; font-size: 11px; letter-spacing: .12em; }
.admin-page .nav-section { display: grid; gap: 4px; }
.admin-page .nav-label { padding: 0 10px 5px; color: #788899; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.admin-page .nav-link { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 10px; border-radius: 7px; color: #b1bfcd; font-size: 13px; font-weight: 650; transition: background .18s var(--x-ease), color .18s var(--x-ease), transform .18s var(--x-ease); }
.admin-page .nav-link svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.admin-page .nav-link span:not(.nav-badge) { min-width: 0; flex: 1; }
.admin-page .nav-link:hover { background: var(--x-rail-2); color: #fff; transform: translateX(2px); }
.admin-page .nav-link.is-active { background: rgba(75, 119, 255, .18); color: #dfe8ff; box-shadow: inset 3px 0 0 #5a82ff; }
.admin-page .nav-item-group .chev { width: 14px; height: 14px; transition: transform .2s var(--x-ease); }
.admin-page .nav-item-group.is-open .chev { transform: rotate(90deg); }
.admin-page .nav-submenu { display: grid; gap: 2px; margin: 1px 0 3px 28px; padding-left: 12px; border-left: 1px solid #334250; }
.admin-page .nav-submenu a { min-height: 32px; padding: 7px 9px; border-radius: 5px; color: #8fa0b0; font-size: 12px; }
.admin-page .nav-submenu a:hover, .admin-page .nav-submenu a.is-active { background: var(--x-rail-2); color: #e2eaff; }
.admin-page .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 20px; padding: 0 6px; border-radius: 99px; background: #2a3947; color: #cdd8e2; font-size: 10px; font-weight: 800; }
.admin-page .nav-badge.hot { background: rgba(215, 104, 55, .22); color: #ffb38e; }
.admin-page .sidebar-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.admin-page .workspace { display: flex; align-items: center; gap: 9px; padding: 3px 7px; }
.admin-page .workspace-avatar { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; border-radius: 8px; background: #315fe4; color: #fff; font-size: 12px; font-weight: 800; }
.admin-page .workspace-name { color: #eef3f7; font-size: 12px; font-weight: 750; }
.admin-page .workspace-role { margin-top: 1px; color: #8191a0; font: 11px var(--x-mono); overflow: hidden; text-overflow: ellipsis; }
.admin-page .collapse-btn { display: inline-grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 1px solid #344352; border-radius: 7px; background: #1b2733; color: #aebdcb; }
.admin-page .collapse-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.admin-page .collapse-btn:hover { background: #243342; color: #fff; }
.admin-page .main { min-width: 0; }
.admin-page .d-topbar { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 30px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--x-line); backdrop-filter: blur(18px); }
.admin-page .crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--x-muted); font-size: 12px; }
.admin-page .crumbs .current { color: var(--x-ink); font-weight: 750; }
.admin-page .crumbs .sep { width: 13px; height: 13px; color: var(--x-faint); stroke: currentColor; fill: none; stroke-width: 1.8; }
.admin-page .hamburger { display: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--x-line); border-radius: 7px; background: var(--x-surface); color: var(--x-muted); }
.admin-page .hamburger svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.admin-page .topbar-actions { display: flex; align-items: center; gap: 8px; }
.admin-page .cmd { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 1px solid var(--x-line); border-radius: 7px; background: var(--x-surface-2); color: var(--x-muted); font-size: 11px; cursor: pointer; }
.admin-page .cmd svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.admin-page .cmd kbd { padding: 2px 5px; border: 1px solid var(--x-line); border-radius: 4px; background: var(--x-surface); color: var(--x-faint); font: 10px var(--x-mono); }
.admin-page .cmd:hover { border-color: #b6c8ed; background: var(--x-primary-soft); color: var(--x-primary); }
.admin-page .icon-btn, .admin-page .avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 7px; }
.admin-page .icon-btn { background: transparent; color: var(--x-muted); }
.admin-page .icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-page .icon-btn:hover { background: var(--x-primary-soft); color: var(--x-primary); }
.admin-page .avatar { background: var(--x-ink); color: white; font-size: 11px; font-weight: 800; }
.admin-page .topbar-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 13px; border-radius: 7px; background: var(--x-primary); color: #fff; font-size: 12px; font-weight: 800; }
.admin-page .topbar-primary:hover { background: var(--x-primary-2); }
.admin-page .workspace-tabs { position: sticky; top: 64px; z-index: 60; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 8px 30px; overflow-x: auto; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--x-line); scrollbar-width: none; }
.admin-page .workspace-tabs::-webkit-scrollbar { display: none; }
.admin-page .workspace-tabs a, .admin-page .workspace-tabs button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--x-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.admin-page .workspace-tabs a:hover, .admin-page .workspace-tabs button:hover { background: var(--x-surface-3); color: var(--x-ink); }
.admin-page .workspace-tabs a.is-active, .admin-page .workspace-tabs-primary { background: var(--x-primary) !important; color: #fff !important; }
.admin-page .content { width: 100%; max-width: 1480px; margin: 0 auto; padding: 28px 30px 56px; }
.admin-page .content > .al { margin: 0 0 18px; }
@media (min-width: 901px) { .admin-page.sidebar-collapsed .shell { grid-template-columns: 76px minmax(0, 1fr); } .admin-page.sidebar-collapsed .d-sidebar { padding-inline: 10px; align-items: center; } .admin-page.sidebar-collapsed .brand { justify-content: center; width: 100%; padding-inline: 0; } .admin-page.sidebar-collapsed .brand-text, .admin-page.sidebar-collapsed .nav-label, .admin-page.sidebar-collapsed .nav-link span, .admin-page.sidebar-collapsed .nav-link .chev, .admin-page.sidebar-collapsed .nav-submenu, .admin-page.sidebar-collapsed .workspace-text, .admin-page.sidebar-collapsed .sidebar-footer > .collapse-btn { display: none; } .admin-page.sidebar-collapsed .nav-section { width: 100%; } .admin-page.sidebar-collapsed .nav-link { justify-content: center; width: 100%; padding-inline: 0; } .admin-page.sidebar-collapsed .workspace { justify-content: center; padding-inline: 0; } }

/* Overview and repeated surfaces */
.admin-page .ops-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--x-line); }
.admin-page .ops-eyebrow, .admin-page .ck-eyebrow { margin: 0 0 6px; color: var(--x-primary); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.admin-page .ops-page-header h2 { margin: 0; color: var(--x-ink); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.02em; }
.admin-page .ops-page-header p:not(.ops-eyebrow) { margin: 7px 0 0; color: var(--x-muted); font-size: 13px; }
.admin-page .ops-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-page .ops-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.admin-page .ops-metric { display: flex; flex-direction: column; min-height: 124px; padding: 17px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: var(--x-surface); color: var(--x-ink); box-shadow: var(--x-shadow-1); transition: transform .18s var(--x-ease), border-color .18s var(--x-ease), box-shadow .18s var(--x-ease); }
.admin-page .ops-metric:hover { transform: translateY(-2px); border-color: #b8c9f6; box-shadow: var(--x-shadow-2); }
.admin-page .ops-metric span { color: var(--x-muted); font-size: 12px; }
.admin-page .ops-metric b { margin: 8px 0 5px; color: var(--x-ink); font-size: 30px; line-height: 1; }
.admin-page .ops-metric small { margin-top: auto; color: var(--x-primary); font-size: 11px; font-weight: 700; }
.admin-page .ops-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 16px; }
.admin-page .ops-panel, .admin-page .cd, .admin-page .ck-panel, .admin-page .ck-list-panel, .admin-page .settings-card, .admin-page .modal-box, .admin-page .ck-modal, .admin-page .thumbnail-card, .admin-page .di, .admin-page .ef { border: 1px solid var(--x-line) !important; border-radius: var(--x-radius) !important; background: var(--x-surface) !important; box-shadow: var(--x-shadow-1) !important; }
.admin-page .ops-panel-head, .admin-page .section-head, .admin-page .ck-panel-head, .admin-page .ck-list-head { border-bottom-color: var(--x-line-soft); }
.admin-page .ops-panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 17px 18px; border-bottom: 1px solid var(--x-line-soft); }
.admin-page .ops-panel-head h3 { margin: 0; color: var(--x-ink); font-size: 15px; }
.admin-page .ops-panel-head p { margin: 5px 0 0; color: var(--x-muted); font-size: 12px; }
.admin-page .ops-action-list a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--x-line-soft); color: var(--x-ink); }
.admin-page .ops-action-list a:last-child { border-bottom: 0; }
.admin-page .ops-action-list a:hover { background: var(--x-surface-2); }
.admin-page .ops-action-index { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--x-primary-soft); color: var(--x-primary); font: 800 11px var(--x-mono); }
.admin-page .ops-action-list b, .admin-page .ops-action-list small { display: block; }
.admin-page .ops-action-list b { font-size: 13px; }
.admin-page .ops-action-list small { margin-top: 3px; color: var(--x-muted); font-size: 12px; }
.admin-page .ops-action-arrow { color: var(--x-primary); font-size: 12px; font-weight: 800; }
.admin-page .ops-status-list { display: grid; margin: 0; padding: 5px 18px; }
.admin-page .ops-status-list div { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--x-line-soft); }
.admin-page .ops-status-list div:last-child { border-bottom: 0; }
.admin-page .ops-status-list dt { color: var(--x-muted); font-size: 12px; }
.admin-page .ops-status-list dd { margin: 0; color: var(--x-ink); font-weight: 800; }

/* Forms, buttons, tags */
.admin-page input[type=text], .admin-page input[type=number], .admin-page input[type=password], .admin-page input[type=url], .admin-page input[type=email], .admin-page input[type=datetime-local], .admin-page textarea, .admin-page select, .monitor-page input, .monitor-page textarea, .monitor-page select, .hall-page input, .hall-page textarea, .hall-page select { min-height: 40px; border: 1px solid var(--x-line); border-radius: var(--x-radius-sm); background: var(--x-surface); color: var(--x-ink); box-shadow: none; }
.admin-page input, .admin-page select, .monitor-page input, .monitor-page select, .hall-page input, .hall-page select { padding: 0 11px; }
.admin-page textarea, .monitor-page textarea, .hall-page textarea { padding: 10px 11px; resize: vertical; }
.admin-page input:focus, .admin-page textarea:focus, .admin-page select:focus, .monitor-page input:focus, .monitor-page textarea:focus, .monitor-page select:focus, .hall-page input:focus, .hall-page textarea:focus, .hall-page select:focus { border-color: var(--x-primary); box-shadow: 0 0 0 3px rgba(36,87,230,.13); }
.admin-page .btn, .monitor-page .button, .hall-page .btn, .install-page .btn, .public-page .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid var(--x-line); border-radius: 7px; background: var(--x-surface); color: var(--x-ink); box-shadow: none !important; font-size: 12px; font-weight: 750; line-height: 1; text-decoration: none; transition: background .18s var(--x-ease), border-color .18s var(--x-ease), color .18s var(--x-ease), transform .18s var(--x-ease); }
.admin-page .btn:hover, .monitor-page .button:hover, .hall-page .btn:hover, .install-page .btn:hover, .public-page .button:hover { border-color: #b6c8ed; background: var(--x-primary-soft); color: var(--x-primary); transform: translateY(-1px); }
.admin-page .btn:active, .monitor-page .button:active, .hall-page .btn:active { transform: translateY(0); }
.admin-page .bp, .admin-page .btn.bp, .monitor-page .button.primary, .hall-page .btn.primary, .install-page .btn:not(.secondary), .public-page .button.primary { border-color: var(--x-primary) !important; background: var(--x-primary) !important; color: #fff !important; }
.admin-page .bp:hover, .admin-page .btn.bp:hover, .monitor-page .button.primary:hover, .hall-page .btn.primary:hover, .install-page .btn:not(.secondary):hover, .public-page .button.primary:hover { border-color: var(--x-primary-2) !important; background: var(--x-primary-2) !important; color: #fff !important; }
.admin-page .bg, .admin-page .btn.bg { border-color: var(--x-success) !important; background: var(--x-success) !important; color: #fff !important; }
.admin-page .bd, .admin-page .btn.bd, .monitor-page .button.danger, .hall-page .btn.danger { border-color: var(--x-danger) !important; background: var(--x-danger) !important; color: #fff !important; }
.admin-page .bo { background: var(--x-surface) !important; color: var(--x-ink) !important; border-color: var(--x-line) !important; }
.admin-page .bs, .hall-page .btn.small { min-height: 32px; padding: 0 10px; font-size: 11px; }
.admin-page .badge, .admin-page .status, .monitor-page .badge, .hall-page .status, .admin-page .section-tag, .admin-page .hero-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 99px; background: var(--x-primary-soft); color: var(--x-primary); font-size: 11px; font-weight: 800; }
.admin-page .bv { background: #efe9ff; color: #6a3ec3; }
.admin-page .bb, .monitor-page .license-ban { background: var(--x-danger-soft); color: var(--x-danger); }
.admin-page .al.as, .monitor-page .message, .hall-page .message { border: 1px solid #b9e4d5; border-radius: 7px; background: var(--x-success-soft); color: var(--x-success); }
.admin-page .al.ae, .hall-page .message.error { border-color: #efc5c1; background: var(--x-danger-soft); color: var(--x-danger); }
.admin-page code, .admin-page .ck-time, .admin-page .ck-key code, .monitor-page code, .monitor-page .device-id, .monitor-page .license-key, .hall-page .code { font-family: var(--x-mono); }

/* Lists, tables, settings */
.admin-page table, .monitor-page table, .hall-page table { border-collapse: separate; border-spacing: 0; }
.admin-page th, .monitor-page th, .hall-page th { height: 40px; padding: 10px 12px; background: var(--x-surface-2) !important; color: var(--x-muted) !important; border-bottom: 1px solid var(--x-line) !important; font-size: 10px !important; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.admin-page td, .monitor-page td, .hall-page td { padding: 11px 12px; border-bottom-color: var(--x-line-soft) !important; }
.admin-page tbody tr:hover td, .monitor-page tbody tr:hover td, .hall-page tbody tr:hover td { background: #f7faff !important; }
.admin-page .cd { padding: 20px; margin-bottom: 16px; }
.admin-page .ct-t { color: var(--x-ink); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.admin-page .section-meta, .admin-page .hint, .admin-page .muted { color: var(--x-muted); }
.admin-page .settings-grid, .admin-page .settings-workspace { gap: 16px; }
.admin-page .settings-card { padding: 20px; }
.admin-page .settings-card > .section-head { padding-bottom: 14px; border-bottom: 1px solid var(--x-line-soft); }
.admin-page .ck-key code { padding: 6px 8px; border-radius: 5px; background: var(--x-surface-3) !important; color: var(--x-ink); }
.admin-page .ck-table-wrap { overflow: auto; border: 1px solid var(--x-line) !important; border-radius: 7px !important; }
.admin-page .ck-table th { position: sticky; top: 0; z-index: 1; }
.admin-page .ck-batch { background: rgba(255,255,255,.96); border-top-color: var(--x-line); box-shadow: 0 -8px 22px rgba(20,35,50,.08); backdrop-filter: blur(10px); }
.admin-page .modal-bg { background: rgba(13, 22, 32, .52) !important; backdrop-filter: blur(4px); }
.admin-page .modal-box, .admin-page .ck-modal { box-shadow: var(--x-shadow-2) !important; }

/* Monitor and profile pages use the same rhythm as the console. */
.monitor-page, .hall-page { min-height: 100vh; background: var(--x-bg) !important; color: var(--x-ink) !important; }
.monitor-page .wrap, .hall-page .wrap { max-width: 1540px; padding: 0 28px 48px; }
.monitor-page .top, .hall-page .top { min-height: 64px; background: rgba(255,255,255,.92); border-bottom-color: var(--x-line); backdrop-filter: blur(16px); }
.monitor-page .top .title, .hall-page .top h1 { color: var(--x-ink); font-size: 18px; font-weight: 800; }
.monitor-page .page-head, .hall-page .page-head { padding: 28px 0 18px; border-bottom-color: var(--x-line); }
.monitor-page .page-head h2, .hall-page .page-head h2 { color: var(--x-ink); font-size: 25px; letter-spacing: -.02em; }
.monitor-page .stat, .hall-page .stat, .monitor-page .panel, .hall-page .panel { border-color: var(--x-line) !important; border-radius: var(--x-radius) !important; background: var(--x-surface) !important; box-shadow: var(--x-shadow-1) !important; }
.monitor-page .stat b, .hall-page .stat b { color: var(--x-ink); }
.monitor-page .panel-head, .hall-page .bulk, .hall-page .toolbar { border-bottom-color: var(--x-line-soft); background: var(--x-surface-2); }
.monitor-page .report-head { background: var(--x-surface-2); border-bottom-color: var(--x-line-soft); }
.monitor-page .license-card, .hall-page .summary-item { border-color: var(--x-line); border-radius: 7px; background: var(--x-surface); }
.monitor-page .chip, .hall-page .summary-item { background: var(--x-surface-3); }
.monitor-page .json, .hall-page .json { border-radius: 7px; background: #18232e; color: #e3eef7; }
.hall-page .status.share { background: var(--x-warning-soft); color: var(--x-warning); }
.hall-page dialog { border-color: var(--x-line); box-shadow: var(--x-shadow-2); }

/* Login, public page and installer */
.admin-login, .install-page { min-height: 100vh; background: var(--x-bg) !important; }
.admin-login .login { width: min(430px, calc(100% - 32px)); padding: 34px; border: 1px solid var(--x-line); border-radius: 12px; background: var(--x-surface); box-shadow: var(--x-shadow-2); }
.admin-login .login h2 { color: var(--x-ink); font-size: 25px; letter-spacing: -.02em; }
.admin-login .login input, .admin-login .login button { min-height: 46px; border-radius: 7px; }
.admin-login .login button { background: var(--x-primary); font-weight: 800; }
.public-page { background: var(--x-bg) !important; color: var(--x-ink) !important; }
.public-page .nav { background: rgba(244,246,248,.9); border-bottom-color: var(--x-line); backdrop-filter: blur(16px); }
.public-page .brand-mark { border-radius: 8px; background: var(--x-primary); box-shadow: none; }
.public-page .hero { padding: 80px 0 58px; }
.public-page .hero-card, .public-page .feature-card, .public-page .step-card, .public-page .section-card { border: 1px solid var(--x-line); border-radius: 10px; background: var(--x-surface); box-shadow: var(--x-shadow-1); }
.install-page .wrap { max-width: 980px; padding: 48px 18px; }
.install-page .card { border-color: var(--x-line); border-radius: 10px; background: var(--x-surface); box-shadow: var(--x-shadow-1); }

/* Utility controls injected by ui.js */
.x-ui-tools { display: flex; align-items: center; gap: 6px; }
.x-ui-tool { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--x-line); border-radius: 7px; background: var(--x-surface); color: var(--x-muted); cursor: pointer; }
.x-ui-tool:hover { border-color: #b6c8ed; background: var(--x-primary-soft); color: var(--x-primary); }
.x-ui-tool svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.x-palette { position: fixed; inset: 0; z-index: 500; display: grid; place-items: start center; padding-top: min(18vh, 160px); background: rgba(11, 20, 30, .45); backdrop-filter: blur(5px); }
.x-palette[hidden] { display: none; }
.x-palette-box { width: min(620px, calc(100% - 28px)); overflow: hidden; border: 1px solid var(--x-line); border-radius: 12px; background: var(--x-surface); box-shadow: var(--x-shadow-2); }
.x-palette-search { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--x-line-soft); }
.x-palette-search svg { width: 18px; height: 18px; stroke: var(--x-muted); fill: none; stroke-width: 1.8; }
.x-palette-search input { width: 100%; min-height: 34px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--x-ink); font-size: 14px; }
.x-palette-list { max-height: min(58vh, 430px); overflow: auto; padding: 7px; }
.x-palette-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--x-ink); text-align: left; }
.x-palette-item:hover, .x-palette-item.is-selected { background: var(--x-primary-soft); color: var(--x-primary); }
.x-palette-item small { margin-left: auto; color: var(--x-faint); }
.x-toast { position: fixed; right: 20px; bottom: 20px; z-index: 600; max-width: min(360px, calc(100% - 40px)); padding: 11px 14px; border: 1px solid #b9e4d5; border-radius: 8px; background: var(--x-success-soft); color: var(--x-success); box-shadow: var(--x-shadow-1); font-size: 12px; font-weight: 700; animation: x-toast-in .22s var(--x-ease); }
@keyframes x-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.admin-page.x-compact .content { padding-top: 20px; padding-bottom: 38px; }
.admin-page.x-compact .ops-metric { min-height: 104px; padding: 13px; }
.admin-page.x-compact .ops-panel-head, .admin-page.x-compact .settings-card, .admin-page.x-compact .cd { padding: 14px; }
.admin-page.x-compact .ops-action-list a { padding-block: 12px; }
.admin-page.x-compact th, .admin-page.x-compact td { padding-top: 8px; padding-bottom: 8px; }
.x-drawer-scrim { display: none; }

/* Dark mode is deliberately desaturated, preserving semantic color contrast. */
html[data-theme="dark"] body, html[data-theme="dark"] .admin-page, html[data-theme="dark"] .monitor-page, html[data-theme="dark"] .hall-page { --x-bg: #0d151d; --x-surface: #14202b; --x-surface-2: #192733; --x-surface-3: #22313e; --x-ink: #ebf2f7; --x-muted: #a4b3c0; --x-faint: #718291; --x-line: #30414f; --x-line-soft: #263542; --x-primary-soft: #1c356d; background: var(--x-bg) !important; color: var(--x-ink) !important; }
html[data-theme="dark"] .admin-page .d-topbar, html[data-theme="dark"] .admin-page .workspace-tabs, html[data-theme="dark"] .monitor-page .top, html[data-theme="dark"] .hall-page .top { background: rgba(20,32,43,.92); }
html[data-theme="dark"] .admin-page tbody tr:hover td, html[data-theme="dark"] .monitor-page tbody tr:hover td, html[data-theme="dark"] .hall-page tbody tr:hover td { background: #1b2b3a !important; }
html[data-theme="dark"] .admin-page th, html[data-theme="dark"] .monitor-page th, html[data-theme="dark"] .hall-page th { background: #192733 !important; }
html[data-theme="dark"] .admin-page input, html[data-theme="dark"] .admin-page select, html[data-theme="dark"] .admin-page textarea, html[data-theme="dark"] .monitor-page input, html[data-theme="dark"] .monitor-page select, html[data-theme="dark"] .monitor-page textarea, html[data-theme="dark"] .hall-page input, html[data-theme="dark"] .hall-page select, html[data-theme="dark"] .hall-page textarea { background: #101a23; color: var(--x-ink); }
html[data-theme="dark"] .admin-page .btn, html[data-theme="dark"] .monitor-page .button, html[data-theme="dark"] .hall-page .btn, html[data-theme="dark"] .x-ui-tool { background: var(--x-surface); color: var(--x-ink); }

/* Responsive and reduced motion */
@media (max-width: 1100px) { .admin-page .shell { grid-template-columns: 224px minmax(0,1fr); } .admin-page .ops-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } .admin-page .ops-workspace { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .admin-page .shell { grid-template-columns: 1fr; } .admin-page .d-sidebar { position: fixed; width: min(86vw, 300px); transform: translateX(-104%); transition: transform .22s var(--x-ease); box-shadow: var(--x-shadow-2); } .admin-page.has-drawer-open .d-sidebar { transform: translateX(0); } .x-drawer-scrim { position: fixed; inset: 0; z-index: 75; border: 0; background: rgba(8, 15, 23, .44); opacity: 0; pointer-events: none; transition: opacity .2s var(--x-ease); } .admin-page.has-drawer-open .x-drawer-scrim { display: block; opacity: 1; pointer-events: auto; } .admin-page .hamburger { display: inline-grid; } .admin-page .crumbs > .collapse-btn { display: none; } .admin-page .d-topbar { min-height: 58px; padding: 0 16px; } .admin-page .workspace-tabs { top: 58px; padding: 8px 16px; } .admin-page .content { padding: 22px 16px 42px; } .admin-page .cmd { display: none; } .admin-page .topbar-primary { display: none; } .monitor-page .wrap, .hall-page .wrap { padding: 0 16px 38px; } }
@media (max-width: 620px) { .admin-page .content { padding: 18px 12px 34px; } .admin-page .ops-page-header { align-items: flex-start; flex-direction: column; } .admin-page .ops-header-actions { width: 100%; } .admin-page .ops-header-actions .btn { flex: 1; } .admin-page .ops-metrics { gap: 8px; } .admin-page .ops-metric { min-height: 104px; padding: 13px; } .admin-page .ops-metric b { font-size: 24px; } .admin-page .ops-action-list a { grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 14px; } .admin-page .ops-action-arrow { display: none; } .admin-page .workspace-tabs { padding-inline: 10px; } .admin-page .workspace-tabs a, .admin-page .workspace-tabs button { padding-inline: 10px; } .monitor-page .top, .hall-page .top { flex-wrap: wrap; padding: 8px 0; } .monitor-page .top .title, .hall-page .top h1 { width: 100%; } .monitor-page .top .button, .hall-page .top .btn { flex: 1; } .monitor-page .page-head, .hall-page .page-head { align-items: flex-start; flex-direction: column; } .x-ui-tools { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }