/* Final theme layer: explicit user-selectable light/dark modes. */
:root[data-theme="light"] {
  color-scheme:light;
  --bg-deep:#eef2f8; --bg:#f6f8fc; --bg-soft:#fff;
  --bg-elev:#f3f6fb; --bg-elev-hover:#e9eef7;
  --border:#d9e0eb; --border-strong:#c5cfdd;
  --text:#18202a; --text-dim:#566171; --text-faint:#7d8795;
  --board-shell:#dfe4ea; --board-panel:#fff; --board-panel-alt:#f7f8fa;
  --board-border:#cbd2dc; --board-grip:#94a1b0;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg-deep:#17191c; --bg:#1d2024; --bg-soft:#25282d;
  --bg-elev:#2b2f35; --bg-elev-hover:#343941;
  --border:#3c424b; --border-strong:#525a66;
  --text:#edf0f4; --text-dim:#b5bdc8; --text-faint:#8993a1;
  --shadow-lg:0 18px 48px rgba(0,0,0,.4); --shadow-sm:0 5px 16px rgba(0,0,0,.32);
  --board-shell:#202020; --board-panel:#242424; --board-panel-alt:#292929;
  --board-border:#363636; --board-grip:#727272;
}

.header-actions { display:flex; align-items:center; gap:8px; }
.theme-toggle {
  width:38px; height:38px; display:grid; place-items:center;
  color:var(--text); background:var(--bg-elev); border:1px solid var(--border);
  border-radius:6px; cursor:pointer; font:18px/1 'Segoe UI Symbol','Segoe UI',sans-serif;
}
.theme-toggle:hover { background:var(--bg-elev-hover); border-color:var(--border-strong); }
.theme-board-toggle { font-size:18px!important; }
.page-theme-toggle { position:fixed; top:18px; right:18px; z-index:20; }

/* Create page: remove stale white text inherited from the former dark-only design. */
:root[data-theme="light"] #createPage,:root[data-theme="light"] #dashboardPage { background:#f5f7fb; }
:root[data-theme="light"] .create-header,:root[data-theme="light"] .dashboard-header { background:#fff; }
:root[data-theme="light"] .dashboard-brand strong { color:#172033; }
:root[data-theme="light"] .dashboard-brand small { color:#718096; }
:root[data-theme="light"] .dashboard-header .header-actions {
  padding:4px; background:#f3f6fb; border:1px solid #dce3ee; border-radius:12px;
  box-shadow:inset 0 1px rgba(255,255,255,.8);
}
:root[data-theme="light"] .dashboard-header .theme-toggle,
:root[data-theme="light"] .dashboard-header .logout-btn { color:#425069; background:#fff; border-color:#d5deea; border-radius:9px; }
:root[data-theme="light"] .dashboard-header .theme-toggle:hover { color:#2b48b5; background:#edf1ff; border-color:#b9c7ec; }
:root[data-theme="light"] .dashboard-header .logout-btn:hover { color:#b4233d; background:#fff0f3; border-color:#efb5bf; }
:root[data-theme="light"] .create-header h1,
:root[data-theme="light"] .preset-name,
:root[data-theme="light"] .dashboard-section-heading span,
:root[data-theme="light"] .dashboard-section-heading h2,
:root[data-theme="light"] .record-title { color:#18202a; }
:root[data-theme="light"] .dashboard-hero,
:root[data-theme="light"] .lobby-card { background:#fff; border-color:#d4dce6; box-shadow:0 12px 34px rgba(30,42,58,.09); }
:root[data-theme="light"] .dashboard-hero h1,
:root[data-theme="light"] .lobby-card h2 { color:#18202a; }
:root[data-theme="light"] .dashboard-hero p,
:root[data-theme="light"] .lobby-card > p { color:#566171; }
:root[data-theme="light"] .dashboard-hero-note {
  color:#24324a; background:linear-gradient(145deg,#eef2ff,#f4fbfb);
  border-color:#d2dbee; box-shadow:inset 0 1px rgba(255,255,255,.9);
}
:root[data-theme="light"] .dashboard-hero-note span { color:#617087; }
:root[data-theme="light"] .hero-action { color:#26313e; background:#f5f7f9; border-color:#d5dce5; }
:root[data-theme="light"] .hero-action strong { color:#18202a; }
:root[data-theme="light"] .hero-action.primary { background:#e8f1fd; border-color:#a9c8ef; }
:root[data-theme="light"] #lobbyPage { background:#f5f7fb; }
:root[data-theme="light"] #lobbyRoomCode { color:#18202a; background:#fff; border-color:#c5ceda; }
:root[data-theme="light"] .lobby-mode-switch { background:#f1f4f9; border-color:#d8e0eb; }
:root[data-theme="light"] .lobby-mode-switch button { color:#657187; }
:root[data-theme="light"] .lobby-mode-switch button.active { color:#283f9f; background:#fff; border-color:#cbd5e5; box-shadow:0 3px 10px rgba(42,58,89,.08); }
:root[data-theme="light"] .recent-room-card { color:#263247; background:#fff; border-color:#d8e0eb; box-shadow:0 6px 18px rgba(34,48,74,.055); }
:root[data-theme="light"] .recent-room-card:hover { background:#f8faff; border-color:#aebfe5; }
.room-input-area input { color:var(--text)!important; background:var(--bg-soft)!important; border-color:var(--border-strong)!important; caret-color:var(--accent); }
.room-input-area input::placeholder { color:var(--text-faint); letter-spacing:1px; }
.preset-name { color:var(--text); }
.preset-size { color:var(--text-dim); }.preset-meta { color:var(--text-faint); }

/* Project cards show the actual canvas aspect ratio rather than a generic square icon. */
.record-thumb {
  position:relative; min-height:218px; aspect-ratio:auto!important;
  display:flex; align-items:center; justify-content:center;
  background:#e7ebf0!important; overflow:hidden;
}
.record-canvas-preview {
  position:relative; display:grid; place-items:center; flex:0 0 auto;
  border:1px solid rgba(68,78,91,.25); border-radius:3px;
  box-shadow:0 7px 18px rgba(32,39,49,.2); overflow:hidden;
}
.record-canvas-preview span { max-width:85%; overflow:hidden; color:#7d8793; font-size:9px; text-overflow:ellipsis; white-space:nowrap; opacity:.65; }
.record-thumb > small { position:absolute; right:10px; bottom:8px; color:#566171; font-size:10px; font-weight:650; }

/* Tooltips use independent typography；功能图标本身为 currentColor SVG。 */
.icon-btn[data-tooltip]::after,.side-tool[data-tooltip]::before {
  min-width:max-content; min-height:14px; color:#f7f8fa;
  font-family:'Segoe UI','Microsoft YaHei',sans-serif!important;
  font-size:11px!important; font-weight:500!important; line-height:1.25!important;
}

/* Background menu: preview, current selection, and applied canvas style share one vocabulary. */
#bgMenu { width:min(390px,calc(100vw - 24px)); }
.bg-current-choice { display:flex; align-items:center; gap:10px; margin:7px 0 10px; padding:9px 10px; color:var(--text); background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; }
.bg-current-choice>span { display:flex; flex-direction:column; gap:2px; }.bg-current-choice small { color:var(--text-faint); font-size:9px; }.bg-current-choice strong { font-size:11px; }
.bg-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
#bgMenu button[data-bg] { display:grid; grid-template-columns:22px 1fr 16px; align-items:center; gap:7px; min-width:0; text-align:left; }
#bgMenu button[data-bg] b { visibility:hidden; color:#1769e0; }
#bgMenu button[data-bg].active { color:#145fc9; background:#edf4fd; border-color:#9fc2ef; }
#bgMenu button[data-bg].active b { visibility:visible; }
.bg-option-preview { width:20px; height:20px; border:1px solid #858d99; border-radius:3px; background-color:#fff; }
.bg-option-preview.dot { background-image:radial-gradient(#aeb8cb 1px,transparent 1px); background-size:5px 5px; }
.bg-option-preview.grid { background-image:linear-gradient(#d5dbe5 1px,transparent 1px),linear-gradient(90deg,#d5dbe5 1px,transparent 1px); background-size:6px 6px; }
.bg-option-preview.dark { background:#1e2235; border-color:#596078; }
.bg-option-preview.dark.dot { background-color:#1e2235; background-image:radial-gradient(rgba(218,224,244,.28) 1px,transparent 1px); background-size:5px 5px; }
.bg-option-preview.dark.grid { background-color:#1e2235; background-image:linear-gradient(rgba(218,224,244,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(218,224,244,.2) 1px,transparent 1px); background-size:6px 6px; }

/* Dark mode application surfaces. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] #dashboardPage,
:root[data-theme="dark"] #createPage,
:root[data-theme="dark"] #loginPage { color:var(--text); background:#17191c; }
:root[data-theme="dark"] #loginPage {
  background:
    linear-gradient(rgba(125,145,205,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,145,205,.04) 1px,transparent 1px),
    radial-gradient(820px 480px at 9% 0,rgba(94,234,212,.08),transparent 65%),
    radial-gradient(760px 500px at 96% 100%,rgba(129,140,248,.13),transparent 67%),#0a1020;
  background-size:30px 30px,30px 30px,auto,auto,auto;
}
:root[data-theme="dark"] .dashboard-header,
:root[data-theme="dark"] .create-header { background:#202328; border-color:#373c44; }
:root[data-theme="dark"] .dashboard-brand strong { color:#f1f5ff; }
:root[data-theme="dark"] .dashboard-brand small { color:#9da8ba; }
:root[data-theme="dark"] .create-header h1,
:root[data-theme="dark"] .dashboard-section-heading span,
:root[data-theme="dark"] .dashboard-section-heading h2,
:root[data-theme="dark"] .record-title,
:root[data-theme="dark"] .user-name { color:#edf0f4; }
:root[data-theme="dark"] .preset-card,
:root[data-theme="dark"] .record-card,
:root[data-theme="dark"] .btn-secondary { color:var(--text); background:#25282d; border-color:#3c424b; }
:root[data-theme="dark"] .preset-card:hover { background:#30343a; }
:root[data-theme="dark"] .preset-card.selected { color:#bcd5ff; background:#26364b; border-color:#4992f0; }
:root[data-theme="dark"] .record-thumb { background:#1e2125!important; }
:root[data-theme="dark"] .record-info { background:#25282d; }
:root[data-theme="dark"] .record-thumb > small { color:#aeb7c3; }
:root[data-theme="dark"] .bottom-nav { background:rgba(31,34,39,.96); border-color:#3a4048; }
:root[data-theme="dark"] .logout-btn,:root[data-theme="dark"] .back-btn { color:#dce1e8; background:#292d33; border-color:#424851; }
:root[data-theme="dark"] .login-container,:root[data-theme="dark"] .server-modal-box { color:var(--text); background:#25282d; border-color:#414750; }
/* 专业浅色主题使用了固定深色文字；暗色容器启用后必须在最终主题层显式改回
   高对比文字，避免登录标题、表单标签和服务器设置标题与背景融为一体。 */
:root[data-theme="dark"] .app-title,
:root[data-theme="dark"] .form-group label,
:root[data-theme="dark"] .server-modal-title { color:#edf0f4; -webkit-text-fill-color:currentColor; }
:root[data-theme="dark"] .app-subtitle { color:#c6d0e0; }
:root[data-theme="dark"] .login-value-line { color:#8995a9; }
:root[data-theme="dark"] .form-group input { color:#edf0f4; background:#1f2226; border-color:#49515c; }
:root[data-theme="dark"] .server-bar { color:#c5ccd7; background:#1f2226; border-color:#414852; }
:root[data-theme="dark"] .server-status-text { color:#aeb8c8; }
:root[data-theme="dark"] .server-setting-btn { color:#aeb8c8; background:transparent; }
:root[data-theme="dark"] .server-setting-btn:hover { color:#f1f4f8; background:#343a43; }
:root[data-theme="dark"] .login-tabs { background:#1e2126; border-color:#414852; }
:root[data-theme="dark"] .tab-btn { color:#aeb8c8; }
:root[data-theme="dark"] .tab-btn:hover { color:#f1f4f8; }
:root[data-theme="dark"] .tab-btn.active {
  color:#dce4ff; background:#303642; border-color:#505c73; box-shadow:0 3px 12px rgba(0,0,0,.22);
}

/* Whiteboard dark/light choice affects chrome, not the collaborative canvas background setting. */
:root[data-theme="light"] #boardPage,
:root[data-theme="light"] #canvasArea,
:root[data-theme="light"] #canvasWrap { background:var(--board-shell); }
:root[data-theme="light"] #whiteboard { background:#fdfdfe; box-shadow:0 0 0 1px #aeb7c3,0 12px 30px rgba(30,42,58,.18); }
:root[data-theme="light"] #topBar { color:#27313e; background:#fff; border-color:#cfd6df; }
:root[data-theme="light"] #topBar .board-name { color:#18202a; }
:root[data-theme="light"] #topBar .room-badge,
:root[data-theme="light"] #topBar .user-badge { color:#3f4b59; background:#eef2f6; border-color:#cbd3dd; filter:none; }
:root[data-theme="light"] #userCount { color:#3f4b59; }
:root[data-theme="light"] #userCount:hover,:root[data-theme="light"] #userCount[aria-expanded="true"] { color:#145fc9; background:#e7f0fd; }
:root[data-theme="light"] .icon-btn,:root[data-theme="light"] #arrangeBtn { color:#344253; opacity:1; filter:none; }
:root[data-theme="light"] .icon-btn:hover,:root[data-theme="light"] #arrangeBtn:hover { color:#0759c7; background:#e7f0fd; border-color:#9fc2ef; }
:root[data-theme="light"] .icon-btn:disabled { color:#84909e; opacity:.55; }
:root[data-theme="light"] #sideToolbar { background:#f4f6f8; border-color:#cfd6df; }
:root[data-theme="light"] .side-tool { color:#34404e; background:#fff; border-color:#d2d9e2; }
:root[data-theme="light"] .side-tool:hover { color:#0759c7; background:#e7f0fd; border-color:#9fc2ef; }
:root[data-theme="light"] .side-tool.active { color:#0759c7; background:#dceafd; border-color:#5797e8; }
:root[data-theme="light"] #bottomPanel,:root[data-theme="light"] #bottomPanel.expanded { color:#27313e; background:#fff; border-color:#cbd2dc; }
:root[data-theme="light"] #bottomPanel,:root[data-theme="light"] #bottomPanel.expanded { border-bottom:1px solid var(--board-border); }
:root[data-theme="light"] #panelContent { color:#27313e; border-color:#d5dbe3; }
:root[data-theme="light"] .quick-color-ribbon { background:#f7f8fa; }
:root[data-theme="light"] .panel-title,:root[data-theme="light"] .ribbon-group-label { color:#586473; }
:root[data-theme="light"] .cat-tab,:root[data-theme="light"] .shape-filter { color:#445161; background:#f4f6f8; border-color:#cbd3dd; }
:root[data-theme="light"] .cat-tab:hover,:root[data-theme="light"] .shape-filter:hover { color:#0759c7; background:#e7f0fd; }
:root[data-theme="light"] .cat-tab.active,:root[data-theme="light"] .shape-filter.active { color:#0759c7; background:#dceafd; border-color:#5797e8; box-shadow:inset 0 -2px #1769e0; }
:root[data-theme="light"] .brush-item,:root[data-theme="light"] .shape-btn { color:#344253; background:#f7f8fa; border-color:#cbd3dd; }
:root[data-theme="light"] .brush-item:hover,:root[data-theme="light"] .shape-btn:hover { color:#0759c7; background:#e7f0fd; border-color:#9fc2ef; }
:root[data-theme="light"] .brush-item.active,:root[data-theme="light"] .shape-btn.selected { color:#0759c7; background:#dceafd; border-color:#5797e8; box-shadow:inset 0 0 0 1px #8eb9ee; }
:root[data-theme="light"] .shape-icon,:root[data-theme="light"] .shape-name,:root[data-theme="light"] .size-row { color:#344253; }
:root[data-theme="light"] .open-color-mixer { color:#344253; background:#eef2f6; border-color:#cbd3dd; }
:root[data-theme="light"] .open-color-mixer:hover { color:#0759c7; background:#e7f0fd; border-color:#9fc2ef; }
:root[data-theme="light"] .open-color-mixer span { box-shadow:inset 0 0 0 7px #f7f8fa; }
:root[data-theme="light"] #statusBar { color:#344253; background:rgba(255,255,255,.96); border-color:#cbd3dd; }
:root[data-theme="light"] #zoomControls { background:#fff; border-color:#cbd3dd; }
:root[data-theme="light"] #zoomControls button { color:#344253; border-color:#dbe1e8; }
:root[data-theme="light"] #zoomControls button:hover { color:#0759c7; background:#e7f0fd; }
:root[data-theme="light"] .member-menu { color:#25303d; background:#fff; border-color:#cbd3dd; }
:root[data-theme="light"] .member-menu-head,:root[data-theme="light"] .blocked-section { border-color:#dce2e9; }
:root[data-theme="light"] .member-row:hover { background:#eef3f8; }
:root[data-theme="light"] .member-menu-head span,
:root[data-theme="light"] .member-section-title,
:root[data-theme="light"] .member-empty { color:#566171; }
:root[data-theme="light"] .member-actions button,
:root[data-theme="light"] .member-row.blocked>button { color:#344253; background:#f3f5f7; border-color:#cbd3dd; }
:root[data-theme="light"] .member-actions .admin-toggle { color:#6b4d0e; background:#fff8e5; border-color:#d3ae62; }
:root[data-theme="light"] .member-actions .admin-toggle.active { color:#5f4308; background:#ffe8ad; border-color:#c18b2b; }
:root[data-theme="light"] .member-notice { color:#6b4d0e; background:#fff7df; border-color:#e2c574; }
:root[data-theme="light"] .ribbon-resize-handle::after { background:var(--board-grip); }
:root[data-theme="light"] .top-actions { border-color:#d8dee6; }
:root[data-theme="light"] #topBar .top-actions {
  padding:3px 4px; background:#f5f7fb; border:1px solid #d8e0eb; border-radius:9px;
}
:root[data-theme="light"] .hex-row input { color:#27313e; background:#fff; border-color:#cbd3dd; }
:root[data-theme="light"] .ai-menu,
:root[data-theme="light"] .ai-preview-dialog,
:root[data-theme="light"] .command-dialog { color:#27313e; background:#fff; border-color:#cbd3dd; }
:root[data-theme="light"] .ai-menu button { color:#344253; background:#f7f8fa; border-color:#d5dce5; }
:root[data-theme="light"] .quick-color-current { border-color:#fff; box-shadow:0 0 0 2px #5797e8; }
:root[data-theme="light"] .quick-color-swatch { border-color:#8b96a5; }
:root[data-theme="light"] .active-tool-status { color:#26313e; border-right-color:#c3ccd7; }

:root[data-theme="dark"] #boardPage,
:root[data-theme="dark"] #canvasArea,
:root[data-theme="dark"] #canvasWrap { background:var(--board-shell); }
:root[data-theme="dark"] #whiteboard { background:#1e2235; box-shadow:0 0 0 1px #555,0 12px 30px rgba(0,0,0,.28); }
:root[data-theme="dark"] #topBar { color:#e8e8e8; background:#1f1f1f; border-color:#303030; }
:root[data-theme="dark"] #topBar .board-name { color:#f2f2f2; }
:root[data-theme="dark"] #sideToolbar { background:#202020; border-color:#303030; }
:root[data-theme="dark"] #bottomPanel,:root[data-theme="dark"] #bottomPanel.expanded { color:#e4e4e4; background:#242424; border-color:#363636; }
:root[data-theme="dark"] #panelContent { color:#ddd; border-color:#3a3a3a; }
:root[data-theme="dark"] .quick-color-ribbon { background:#242424; }
:root[data-theme="dark"] #bgMenu { color:#e7e7e7; background:#282828; border-color:#474747; }
:root[data-theme="dark"] #bgMenu button[data-bg] { color:#ddd; background:#303030; border-color:#484848; }
:root[data-theme="dark"] #bgMenu button[data-bg].active { color:#fff; background:#3a3040; border-color:#a65cba; }
:root[data-theme="dark"] #statusBar { color:#d8dde4; background:rgba(32,32,32,.96); border-color:#41464e; }
:root[data-theme="dark"] #zoomControls { background:#292929; border-color:#484848; }
:root[data-theme="dark"] #zoomControls button { color:#e0e4e9; border-color:#41464e; }
:root[data-theme="dark"] #zoomControls button:hover { color:#fff; background:#383d44; }
:root[data-theme="dark"] .member-menu { color:#edf0f4; background:#282828; border-color:#474747; }
:root[data-theme="dark"] .member-menu-head,
:root[data-theme="dark"] .blocked-section { border-color:#40464e; }
:root[data-theme="dark"] .member-row:hover { background:#33383f; }
:root[data-theme="dark"] .member-actions button,
:root[data-theme="dark"] .member-row.blocked>button { color:#e0e4e9; background:#34383e; border-color:#505760; }
:root[data-theme="dark"] #bottomPanel,
:root[data-theme="dark"] #bottomPanel.expanded { border-bottom:1px solid var(--board-border); }
:root[data-theme="dark"] .ribbon-resize-handle::after { background:var(--board-grip); }
:root[data-theme="dark"] .top-actions { border-color:#3b3b3b; }
:root[data-theme="dark"] .hex-row input { color:#eee; background:#303030; border-color:#4b4b4b; }
:root[data-theme="dark"] .ai-menu,
:root[data-theme="dark"] .ai-preview-dialog,
:root[data-theme="dark"] .command-dialog { color:#e7e7e7; background:#282828; border-color:#474747; }
:root[data-theme="dark"] .ai-menu button { color:#ddd; background:#303030; border-color:#484848; }
:root[data-theme="dark"] .quick-color-current { border-color:#181818; box-shadow:0 0 0 2px #b86dd0; }
:root[data-theme="dark"] .quick-color-swatch { border-color:#666; }
:root[data-theme="dark"] .active-tool-status { color:#edf0f4; border-right-color:#525a66; }

/*
 * professional-theme.css 提供浅色原生风格，并在部分子元素上直接写了浅色值。这里逐层
 * 覆盖按钮、标题、搜索框与 AI 预览卡，防止切到深色后出现“外壳变暗、文字仍是深色”
 * 的半套主题；使用主题变量也让底部属性栏、弹层和工具图标保持同一套对比度。
 */
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] #arrangeBtn,
:root[data-theme="dark"] .side-tool { color:#d9dee5; }
:root[data-theme="dark"] #topBar .room-badge,
:root[data-theme="dark"] #topBar .user-badge { color:#cbd2dc; background:#292d33; border-color:#454c56; filter:none; }
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] #arrangeBtn:hover,
:root[data-theme="dark"] .side-tool:hover { color:#fff; background:#34383e; border-color:#505760; }
:root[data-theme="dark"] .side-tool.active { color:#a9ceff; background:#273a52; border-color:#4776ad; }
:root[data-theme="dark"] .ai-menu-title,
:root[data-theme="dark"] .ai-menu-heading,
:root[data-theme="dark"] .panel-title,
:root[data-theme="dark"] .ribbon-group-label,
:root[data-theme="dark"] .ai-preview-title,
:root[data-theme="dark"] .ai-preview-detail strong { color:#edf0f4; }
:root[data-theme="dark"] .ai-menu-hint,
:root[data-theme="dark"] .ai-primary-actions button small,
:root[data-theme="dark"] .ai-full-board small,
:root[data-theme="dark"] .ai-preview-subtitle,
:root[data-theme="dark"] .ai-candidate-meta { color:#aeb7c3; }
:root[data-theme="dark"] .ai-menu-divider,
:root[data-theme="dark"] .command-search-wrap,
:root[data-theme="dark"] .command-footer { border-color:#444b55; }
:root[data-theme="dark"] .ai-menu-divider { background:#444b55; }
:root[data-theme="dark"] .shape-search-wrap,
:root[data-theme="dark"] .command-search-wrap { color:#aeb7c3; background:#202328; border-color:#4b5360; }
:root[data-theme="dark"] #shapeSearch,
:root[data-theme="dark"] #commandSearch { color:#edf0f4; }
:root[data-theme="dark"] .ai-candidate-card { color:#e4e9ef; background:#30343a; border-color:#4a515c; }
:root[data-theme="dark"] .ai-candidate-card:hover { border-color:#687486; }
:root[data-theme="dark"] .ai-candidate-card.selected { color:#eef6ff; background:#273b55; border-color:#5797e8; box-shadow:0 0 0 1px #5797e8; }
:root[data-theme="dark"] .ai-preview-detail { color:#b8c0cb; background:#202328; border-color:#444b55; }
:root[data-theme="dark"] .ai-preview-actions { background:#282828; }
:root[data-theme="dark"] .command-item { color:#e1e6ec; }
:root[data-theme="dark"] .command-item.active { background:#303f53; border-color:#4d7099; }
:root[data-theme="dark"] .command-item-icon { color:#dce4ed; background:#333840; border-color:#4d5561; }
:root[data-theme="dark"] .command-item-group,
:root[data-theme="dark"] .command-footer { color:#a6afbb; }

/*
 * 手机没有 professional-theme.css 的桌面深色功能区规则，因此这些子控件必须在
 * 最终主题层单独覆盖；否则底部外壳虽变暗，图形卡片和分类按钮仍会保持白底深字。
 */
:root[data-theme="dark"] .panel-peek-label,
:root[data-theme="dark"] .handle-icon,
:root[data-theme="dark"] .shape-cat-label,
:root[data-theme="dark"] .size-row { color:#bdc5cf; }
:root[data-theme="dark"] .cat-tab,
:root[data-theme="dark"] .shape-filter { color:#d0d6de; background:#2d3137; border-color:#4a515b; }
:root[data-theme="dark"] .cat-tab:hover,
:root[data-theme="dark"] .shape-filter:hover { color:#fff; background:#383e46; border-color:#626c79; }
:root[data-theme="dark"] .cat-tab.active,
:root[data-theme="dark"] .shape-filter.active { color:#fff; background:#35303b; border-color:#a866bb; box-shadow:inset 0 -2px #c178d6; }
:root[data-theme="dark"] .brush-item,
:root[data-theme="dark"] .shape-btn { color:#d8dde4; background:#2c3036; border-color:#464d57; }
:root[data-theme="dark"] .brush-item:hover,
:root[data-theme="dark"] .shape-btn:hover { color:#fff; background:#383d44; border-color:#5c6572; }
:root[data-theme="dark"] .brush-item.active,
:root[data-theme="dark"] .shape-btn.selected { color:#fff; background:#38303d; border-color:#b36ac7; box-shadow:inset 0 0 0 1px #8d4ca0; }
:root[data-theme="dark"] .shape-icon,
:root[data-theme="dark"] .shape-name,
:root[data-theme="dark"] .size-row span { color:#e0e5eb; }

/*
 * 整站主题决定所有界面 Chrome；画布背景不能再用 !important 抢走状态栏、缩放栏和
 * 下底边框的颜色。canvas-tone 只给直接压在画布上的控件增加轮廓对比，并调整文本
 * 编辑器底色，因此切换主题时所有边框会完整变化，同时深/浅画布上仍容易辨认。
 */
:root[data-theme="light"] .selection-toolbar,
:root[data-theme="light"] .selection-color-popover { color:#25303d; background:rgba(255,255,255,.97); border-color:#cbd3dd; }
:root[data-theme="dark"] .selection-toolbar,
:root[data-theme="dark"] .selection-color-popover { color:#edf0f4; background:rgba(28,32,43,.97); border-color:#4b5363; }
:root[data-theme="dark"] .selection-toolbar-btn { color:#e4e9ef; border-color:#4b5363; }
:root[data-theme="dark"] .selection-toolbar-btn:hover { background:#343a45; }
#boardPage[data-canvas-tone="light"] #statusBar,
#boardPage[data-canvas-tone="light"] #zoomControls { box-shadow:0 4px 14px rgba(44,54,68,.16); }
#boardPage[data-canvas-tone="dark"] #statusBar,
#boardPage[data-canvas-tone="dark"] #zoomControls { box-shadow:0 4px 14px rgba(0,0,0,.36); }
#textEditor[data-canvas-tone="light"] { color:#18202a; background:#fff; border-color:#8793a3; }
#textEditor[data-canvas-tone="dark"] { color:#edf0f4; background:#20242d; border-color:#677186; }
#textEditor[data-canvas-tone="dark"].is-scrolling { scrollbar-color:rgba(190,201,220,.5) transparent; }
#textEditor[data-canvas-tone="dark"].is-scrolling::-webkit-scrollbar-thumb { background:rgba(190,201,220,.5); }

/* 房主离开属于全局模态事务，必须覆盖命令面板、成员抽屉和移动端属性栏。 */
.owner-leave-modal { z-index:5000; }
:root[data-theme="light"] .owner-leave-dialog { color:#263247; background:#fff; border-color:#cbd5e2; }
:root[data-theme="light"] .owner-leave-policy { color:#344258; background:#f7f9fc; border-color:#d7dfe9; }
:root[data-theme="light"] .owner-leave-policy:hover { color:#24324a; background:#eef2ff; border-color:#aebee5; }
:root[data-theme="light"] .owner-leave-policy-icon { color:#304cad; background:#e9edff; }
:root[data-theme="light"] .owner-leave-policy.danger .owner-leave-policy-icon { color:#ad2940; background:#ffeaee; }
.access-status { padding:2px 6px; border-radius:4px; font-weight:650; }
#boardPage[data-access-role="viewer"] .access-status { color:#195791; background:#d9ecff; }
#boardPage[data-access-role="admin"] .access-status { color:#704d08; background:#fff0c7; }
:root[data-theme="dark"] #boardPage[data-access-role="viewer"] .access-status { color:#b9dcff; background:#263e56; }
:root[data-theme="dark"] #boardPage[data-access-role="admin"] .access-status { color:#ffe0a3; background:#57401f; }

/* 历史成员也保留在房主面板中：状态点和按钮状态要能直观看出“离线/处理中”。 */
.member-identity small { color:var(--text-faint); font-size:9px; white-space:nowrap; }
.member-row.offline .member-identity i { background:#929aa5; }
.member-row.offline .member-identity b { color:var(--text-dim); }
.member-actions button:disabled,
.member-row.blocked>button:disabled { cursor:not-allowed; opacity:.48; }
.member-actions button.pending,
.member-row.blocked>button.pending { cursor:progress; opacity:.68; }

/* The dashboard already exposes Records, Join, and Create directly; no duplicate bottom navigation. */
.dashboard-main { padding-bottom:36px; }

/* Tablet: preserve command access without allowing account/title text to crush the toolbar. */
@media (max-width:1024px) and (min-width:761px) {
  #topBar { padding-inline:8px; }
  .board-name { max-width:150px; }
  .user-badge { display:none; }
  .top-actions { min-width:0; overflow-x:auto; scrollbar-width:none; }
  .top-actions::-webkit-scrollbar { display:none; }
  .icon-btn { flex:0 0 34px; }
  .dashboard-hero { grid-template-columns:1fr; }
  .records-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Phone and portrait tablet use a stable canvas shell with an overlay inspector.
   The inspector no longer becomes a Grid row that squeezes or offsets the canvas. */
@media (max-width:900px) {
  #boardPage,#boardPage.ribbon-collapsed {
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"top" "main" "side";
    height:100dvh;
  }
  #topBar {
    min-width:0; max-height:none; padding:6px 8px;
    flex-wrap:wrap; gap:5px; align-content:center;
  }
  .top-left { width:100%; min-width:0; gap:6px; }
  .top-right { width:100%; min-width:0; }
  .top-actions {
    width:100%; min-width:0; padding:0 0 2px; gap:4px;
    justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  }
  .top-actions::-webkit-scrollbar { display:none; }
  .board-name { min-width:0; max-width:38vw; }
  .room-badge { max-width:31vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .user-badge { display:none; }
  .icon-btn { min-width:42px; width:42px; height:42px; flex:0 0 42px; }
  #ribbonToggleBtn { display:grid!important; }

  #canvasArea,#canvasWrap { min-width:0; min-height:0; }
  #sideToolbar {
    grid-area:side; flex-direction:row; justify-content:flex-start;
    min-width:0; padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    gap:7px; overflow-x:auto; overscroll-behavior-x:contain;
    border-right:0; border-top:1px solid var(--border); scrollbar-width:none;
  }
  #sideToolbar::-webkit-scrollbar { display:none; }
  .side-tool { min-width:46px; width:46px; height:46px; flex:0 0 46px; }
  .side-tool.active::after { right:auto; bottom:-7px; width:19px; height:3px; }

  #bottomPanel,#bottomPanel.expanded {
    position:fixed; right:0; bottom:calc(60px + env(safe-area-inset-bottom)); left:0;
    z-index:60; display:flex; flex-direction:column;
    width:auto; height:auto!important; min-height:0; max-height:min(56dvh,520px);
    overflow:hidden; border-radius:12px 12px 0 0;
    box-shadow:0 -12px 34px rgba(18,25,34,.24); transform:none!important;
  }
  #boardPage.ribbon-collapsed #bottomPanel { display:none; }
  #panelContent { min-height:0; max-height:42dvh!important; padding:8px 12px 12px!important; overflow:auto; }
  #bottomPanel.expanded .panel-content { max-height:42dvh; }
  .panel-handle { display:flex; min-height:34px; }
  .ribbon-resize-handle { display:none; }
  .quick-color-ribbon {
    order:2; display:flex; min-height:48px; padding:7px 9px;
    gap:7px; overflow-x:auto; background:var(--bg-soft); border-top:1px solid var(--border);
  }
  #panelContent { order:1; }
  .quick-color-current { width:32px; height:32px; flex:0 0 32px; }
  .quick-color-swatches { display:flex; flex:0 0 auto; gap:6px; }
  .quick-color-swatch { width:30px; height:30px; flex:0 0 30px; }
  .open-color-mixer { flex:0 0 auto; min-height:34px; }
  .open-color-mixer span,.ribbon-group-label { display:none; }

  #statusBar { right:8px; bottom:8px; left:8px; max-width:none; overflow-x:auto; white-space:nowrap; }
  #zoomControls { right:8px; bottom:48px; }
  /* 手机端底部属性面板层级为 60；菜单必须在其上方，否则背景色/导出/AI 按钮会被面板截住。 */
  .ai-menu { position:fixed; top:auto; right:8px; bottom:calc(68px + env(safe-area-inset-bottom)); left:8px; z-index:90; width:auto; max-height:62dvh; overflow:auto; }
  .member-menu { position:fixed; top:auto; right:8px; bottom:calc(68px + env(safe-area-inset-bottom)); left:8px; z-index:90; width:auto; max-height:62dvh; }
  .selection-toolbar { max-width:calc(100vw - 12px); overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; }
}

/* Phone: large touch targets, one-column forms/cards, safe-area spacing. */
@media (max-width:760px) {
  .dashboard-header { gap:8px; }
  .dashboard-brand { min-width:0; }
  .dashboard-brand > span:last-child { min-width:0; }
  .dashboard-brand strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .header-actions { margin-left:auto; }
  .theme-toggle,.logout-btn,.back-btn { min-width:44px; width:44px; height:44px; }
  .dashboard-main { padding:14px 12px calc(20px + env(safe-area-inset-bottom)); }
  .dashboard-hero { margin-bottom:20px; padding:20px 16px; gap:18px; }
  .dashboard-hero-actions,.preset-grid,.records-grid { grid-template-columns:1fr; }
  .record-thumb { min-height:190px; }
  .create-main { padding:0 12px calc(24px + env(safe-area-inset-bottom)); }
  .room-input-area { align-items:stretch; flex-direction:column; }
  .room-input-area input { min-height:52px; font-size:17px; letter-spacing:5px; }
  .btn-secondary,.create-btn { min-height:48px; }

  #topBar { overflow:hidden; }
  .icon-btn { min-width:44px; width:44px; height:44px; }
  .ai-menu { width:min(360px,calc(100vw - 16px)); }
  .bg-option-grid { grid-template-columns:1fr; }
  .member-menu { max-height:60vh; }
}

@media (max-width:420px) {
  .dashboard-user { display:none; }
  .dashboard-brand small { display:none; }
  .dashboard-hero h1 { font-size:22px; }
  .dashboard-section-heading { margin-inline:2px; }
  .preset-card { padding:10px; }
  .selection-toolbar { max-width:calc(100vw - 12px); overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; }
  .selection-toolbar-btn { min-height:44px; padding-inline:9px; }
}