/* CoCanvas professional light theme. Visual-only: no behavior or data changes. */
:root {
  --bg-deep:#eef2f8; --bg:#f6f8fc; --bg-soft:#fff; --bg-elev:#f3f6fb;
  --bg-elev-hover:#e9eef7; --border:#d9e0eb; --border-strong:#c5cfdd;
  --accent:#3558d4; --accent-2:#293fa8; --accent-grad:linear-gradient(135deg,#3558d4,#586fe5);
  --accent-soft:#edf1ff; --accent-glow:none; --text:#172033;
  --text-dim:#566171; --text-faint:#7d8795; --green:#138a4b;
  --red:#c93434; --amber:#a66b00; --r-sm:4px; --r:7px; --r-lg:10px;
  --shadow-lg:0 18px 50px rgba(30,42,58,.14),0 2px 8px rgba(30,42,58,.08);
  --shadow-sm:0 5px 16px rgba(30,42,58,.12);
}
body { background:#eef2f8; color:var(--text); }
button,input,textarea { font-family:inherit; }
/* 从旧内嵌主题迁移的细节统一留在本文件，基础样式不再夹带第二份主题覆盖。 */
button { letter-spacing:0; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid #1769e0; outline-offset:2px; }
::-webkit-scrollbar-thumb { background:#c2c9d2; }
::-webkit-scrollbar-thumb:hover { background:#aeb7c3; }

/* Login */
#loginPage {
  background:
    linear-gradient(rgba(55,78,128,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(55,78,128,.045) 1px,transparent 1px),
    radial-gradient(720px 440px at 4% 5%,rgba(94,234,212,.18),transparent 64%),
    radial-gradient(780px 480px at 96% 100%,rgba(129,140,248,.19),transparent 66%),
    #f6f8fc;
  background-size:30px 30px,30px 30px,auto,auto,auto;
  color:var(--text);
}
#loginPage::before,#loginPage::after { display:none; }
.login-container {
  width:min(92%,430px); max-width:430px; padding:40px 40px 35px;
  background:rgba(255,255,255,.9); border:1px solid rgba(190,201,218,.78); border-radius:22px;
  box-shadow:0 34px 90px rgba(40,56,86,.14),0 3px 12px rgba(40,56,86,.06);
  backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
}
.logo-area { margin-bottom:26px; }
.logo-icon { position:relative; width:60px; height:60px; margin:0 auto 14px; display:block; overflow:hidden; background:none; border-radius:18px; animation:none; box-shadow:none; filter:drop-shadow(0 12px 20px rgba(28,45,85,.22)); font-size:0; }
.logo-icon::before { content:none; }
.logo-icon img { width:100%; height:100%; display:block; }
.app-title { color:#111a2e; background:none; -webkit-text-fill-color:currentColor; font-size:29px; font-weight:760; letter-spacing:-.8px; }
.app-subtitle { margin-top:4px; color:#52617a; font-size:12px; font-weight:700; letter-spacing:1.5px; }
.login-value-line { margin-top:9px; color:#8893a5; font-size:11px; }
.server-bar { margin-bottom:18px; padding:8px 10px; color:#5f6b79; background:#f6f7f9; border:1px solid #dde2e8; border-radius:6px; }
.server-status-dot { width:7px; height:7px; box-shadow:none!important; }
.server-status-text { color:#65707e; }
.server-setting-btn { width:28px; height:28px; color:#526070; background:transparent; border:0; border-radius:5px; filter:grayscale(1); }
.server-setting-btn:hover { color:#18202a; background:#e5e9ee; transform:none; }
.login-tabs { gap:4px; padding:4px; margin-bottom:22px; background:#f1f4f9; border:1px solid #dfe5ee; border-radius:11px; }
.tab-btn { margin:0; padding:9px 10px; color:#6a7583; border:1px solid transparent; border-radius:8px; font-size:14px; }
.tab-btn:hover { color:#18202a; }
.tab-btn.active { color:#263e9d; background:#fff; border-color:#d7deea; box-shadow:0 3px 10px rgba(42,58,89,.08); font-weight:700; }
.form-group { gap:7px; }
.form-group label { color:#485463; font-size:12px; font-weight:600; }
.form-group input { min-height:44px; padding:11px 12px; color:#18202a; background:#fff; border:1px solid #cbd4e1; border-radius:10px; font-size:14px; }
.form-group input::placeholder { color:#9aa3af; }
.form-group input:focus { color:#18202a; background:#fff; border-color:#4b63d2; box-shadow:0 0 0 4px rgba(53,88,212,.11); }
.submit-btn,.btn-primary,.create-btn,.server-modal-btn.primary,.ai-preview-apply { color:#fff; background:var(--accent-grad); border:1px solid #304ab8; border-radius:10px; box-shadow:0 8px 20px rgba(53,88,212,.17); font-weight:700; }
.submit-btn { margin-top:3px; padding:12px; font-size:14px; }
.submit-btn:hover,.btn-primary:hover,.create-btn:hover,.server-modal-btn.primary:hover,.ai-preview-apply:hover { background:linear-gradient(135deg,#2f4ec5,#4f65d7); transform:translateY(-1px); box-shadow:0 10px 24px rgba(53,88,212,.22); filter:none; }
.server-modal,.ai-preview-modal,.command-palette { background:rgba(28,36,48,.38); backdrop-filter:blur(3px); }
.server-modal-box,.ai-preview-dialog,.command-dialog { color:#26313e; background:#fff; border:1px solid #c9d0da; border-radius:9px; box-shadow:var(--shadow-lg); }
.server-modal-title,.ai-preview-title { color:#18202a; }
.server-modal-desc,.ai-preview-subtitle { color:#697482; }
.server-modal-btn.secondary,.ai-preview-close,.ai-preview-cancel { color:#34404e; background:#f2f4f7; border:1px solid #d5dbe3; border-radius:5px; }
.server-modal-close { color:#6f7987; }
.server-modal-close:hover { color:#18202a; }

/* Dashboard and creation */
#dashboardPage,#createPage { background:#f5f7fb; }
.dashboard-header,.create-header { padding:13px 22px; background:rgba(255,255,255,.92); border-bottom:1px solid #dbe2ec; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.avatar { width:40px; height:40px; color:#fff; background:#1769e0; border-radius:7px; box-shadow:none; }
.user-name,.record-title,.create-header h1 { color:#18202a; }
.user-label,.record-meta { color:#778291; }
.logout-btn,.back-btn { color:#4e5968; background:#f5f7fb; border:1px solid #d6deea; border-radius:10px; }
.dashboard-main { padding-top:22px; }
.dashboard-main::before,.section-title { color:#3e4957; letter-spacing:0; }
.empty-icon { background:#fff; border:1px solid #d8dee6; border-radius:10px; }
.empty-title { color:#34404e; } .empty-desc { color:#798492; }
.record-card { background:#fff; border:1px solid #d7dde5; border-radius:8px; box-shadow:0 2px 5px rgba(30,42,58,.04); }
.record-card:hover { transform:translateY(-2px); border-color:#aeb9c7; box-shadow:0 10px 24px rgba(30,42,58,.10); }
.record-delete { color:#4d5866; background:#fff; border:1px solid #d5dbe3; border-radius:5px; }
.bottom-nav { background:rgba(255,255,255,.96); border-top:1px solid #d5dbe3; backdrop-filter:blur(10px); }
.nav-item { color:#778290; } .nav-item.active { color:#1769e0; }
.nav-center { width:58px; height:58px; color:#fff; background:#1769e0; border-color:#f3f5f7; box-shadow:0 6px 16px rgba(23,105,224,.24); }
.preset-card,.btn-secondary { color:#26313e; background:#fff; border-color:#d5dbe3; border-radius:7px; }
.preset-card:hover,.preset-card.selected { color:#145fc9; background:#edf4fd; border-color:#1769e0; box-shadow:none; transform:none; }

/* Desktop drawing shell */
#boardPage { grid-template-columns:54px 1fr; background:#dfe4ea; }
#topBar { min-height:54px; padding:7px 12px; color:#27313e; background:#fff; border-bottom:1px solid #cfd6df; box-shadow:0 1px 3px rgba(30,42,58,.08); backdrop-filter:none; }
.top-left,.top-right { gap:9px; }
.board-name { color:#18202a; font-size:14px; font-weight:650; }
.room-badge,.user-badge { color:#65717f; background:#f3f5f7; border:1px solid #dde2e8; border-radius:4px; box-shadow:none; }
.user-badge { filter:grayscale(1); }
.top-actions { gap:3px; padding-left:8px; border-left:1px solid #e0e4e9; }
.icon-btn { width:34px; height:34px; color:#3f4b59; background:transparent; border:1px solid transparent; border-radius:5px; font-family:'Segoe UI','Microsoft YaHei',sans-serif; box-shadow:none; filter:none; }
.icon-btn:hover { color:#17202a; background:#edf0f4; border-color:#d7dde4; box-shadow:none; transform:none; }
.icon-btn:active { background:#e2e7ed; transform:none; }
.icon-btn[data-tooltip]::after,.side-tool[data-tooltip]::before { color:#f7f8fa; background:#252c35; border:0; border-radius:4px; box-shadow:0 5px 16px rgba(0,0,0,.18); }
#arrangeBtn,#arrangeBtn:hover { color:#3f4b59; background:transparent; border-color:transparent; box-shadow:none; }
#arrangeBtn:hover { background:#edf0f4; }
.ui-icon { width:20px; height:20px; flex:0 0 auto; pointer-events:none; transition:transform .16s ease; }
#ribbonToggleBtn.expanded .ui-icon { transform:rotate(180deg); }
#sideToolbar { padding:7px 6px; gap:3px; background:#f7f8fa; border-right:1px solid #cfd6df; box-shadow:1px 0 3px rgba(30,42,58,.05); backdrop-filter:none; }
.side-tool { width:40px; height:40px; color:#3e4957; background:transparent; border:1px solid transparent; border-radius:5px; filter:none; box-shadow:none; }
.side-tool:hover { color:#17202a; background:#e9edf2; border-color:#d5dbe3; transform:none; }
.side-tool.active { color:#0f58c3; background:#e5effc; border-color:#a9c8f3; box-shadow:inset 3px 0 0 #1769e0; }
.side-tool .ui-icon { width:21px; height:21px; }
.icon-btn:disabled,.side-tool:disabled { cursor:not-allowed; opacity:.38; }
#canvasArea,#canvasWrap { background:#dfe4ea; }
#whiteboard { box-shadow:0 8px 24px rgba(34,45,58,.18),0 0 0 1px rgba(90,103,119,.18); }
#statusBar { color:#4b5765; background:rgba(255,255,255,.94); border:1px solid #cfd6df; border-radius:5px; box-shadow:0 4px 12px rgba(30,42,58,.09); backdrop-filter:blur(8px); filter:grayscale(.35); }
#zoomControls { background:#fff; border:1px solid #cbd2db; border-radius:6px; box-shadow:0 5px 14px rgba(30,42,58,.11); }
#zoomControls button { color:#34404e; background:transparent; border-color:#e1e5ea; }
#zoomControls button:hover { background:#edf0f4; color:#145fc9; }

/* Native-style menus and properties */
.ai-menu,.selection-toolbar,.selection-color-popover { color:#25303d; background:#fff; border:1px solid #cbd2dc; border-radius:7px; box-shadow:0 12px 32px rgba(30,42,58,.16),0 2px 6px rgba(30,42,58,.08); backdrop-filter:none; }
.ai-menu-title,.ai-menu-heading,.panel-title { color:#35414f; }
.ai-menu-hint,.ai-primary-actions button small,.ai-full-board small { color:#707b89; }
.ai-menu-divider { background:#e1e5ea; }
.ai-menu button { color:#2d3845; background:#fff; border:1px solid #d8dde4; border-radius:5px; }
.ai-menu button:hover { color:#17202a; background:#f0f3f6; border-color:#c4ccd6; transform:none; }
.ai-menu button[data-ai] { color:#204f8e; background:#edf4fd; border-color:#bfd4f1; }
.ai-menu button[data-ai]:hover { color:#16477f; background:#e1edfb; }
.ai-menu button[data-ai]:hover small { color:#607088; }
.ai-scope-badge,.ai-recommended,.shape-count { color:#805600; background:#fff7df; border:1px solid #ead7a4; border-radius:4px; }
.ai-scope-badge.ready { color:#176c42; background:#eaf7f0; border-color:#b9dfca; }
.ai-full-board { color:#3c4958!important; background:#f6f7f9!important; border-style:solid!important; }
#bottomPanel { color:#27313e; background:#fff; border-top:1px solid #cbd2dc; border-radius:0; box-shadow:0 -5px 18px rgba(30,42,58,.09); backdrop-filter:none; }
.panel-handle::before { width:36px; height:3px; background:#b9c1cb; }
.panel-peek-label,.handle-icon { color:#6c7785; } .panel-handle:hover { background:#f3f5f7; }
.cat-tab,.shape-filter { color:#596574; background:#fff; border-color:#d5dbe3; border-radius:5px; }
.cat-tab.active,.shape-filter.active { color:#145fc9; background:#e9f2fd; border-color:#9fc2ef; box-shadow:none; }
.brush-item,.shape-btn { color:#4b5765; background:#f8f9fa; border-color:#d9dee5; border-radius:6px; }
.brush-item:hover,.shape-btn:hover { color:#18202a; background:#edf0f4; border-color:#c4ccd6; box-shadow:none; transform:none; }
.brush-item.active,.shape-btn.selected { color:#145fc9; background:#e4effc; border-color:#94bcec; box-shadow:none; }
.shape-icon { color:#3e4a58; } .shape-btn:hover .shape-icon svg { transform:none; filter:none; }
.shape-search-wrap { color:#7a8491; background:#fff; border-color:#cbd2dc; border-radius:6px; }
#shapeSearch,#commandSearch { color:#18202a; }
.shape-search-wrap:focus-within { border-color:#1769e0; box-shadow:0 0 0 3px rgba(23,105,224,.10); }
.shape-cat-label,.size-row { color:#586473; }
.color-preview-main,.color-preview-sec { border-color:#aeb7c2; }
.ai-preview-dialog,.command-dialog { box-shadow:0 28px 80px rgba(30,42,58,.22); }
.ai-preview-subtitle,.ai-candidate-meta { color:#687482; }
.ai-candidate-card { color:#26313e; background:#fff; border-color:#d8dde4; border-radius:7px; }
.ai-candidate-card:hover { transform:none; border-color:#aeb9c7; }
.ai-candidate-card.selected { background:#edf4fd; border-color:#1769e0; box-shadow:0 0 0 1px #1769e0; }
.ai-preview-detail { color:#687482; background:#f5f7f9; border-color:#dce1e7; border-radius:6px; }
.ai-preview-detail strong { color:#18202a; }
.command-search-wrap,.command-footer { border-color:#e0e4e9; }
.command-search-icon { color:#566271; }
.command-item { color:#2b3643; border-radius:5px; }
.command-item.active { background:#e8f1fc; border-color:#b4cef0; }
.command-item-icon { color:#34404e; background:#f3f5f7; border-color:#d9dee5; border-radius:5px; }
.command-item-group,.command-footer { color:#7a8491; }
.toast { color:#fff; background:#2f3843; border:1px solid #222a33; border-radius:5px; box-shadow:0 8px 20px rgba(0,0,0,.18); }

@media (max-width:760px) {
  #topBar { background:#fff; }
  #sideToolbar { background:#f7f8fa; border-top-color:#cfd6df; }
  .side-tool.active { box-shadow:inset 0 -3px 0 #1769e0; }
  #bottomPanel { border-radius:0; }
  .ai-preview-dialog,.command-dialog { border-radius:9px 9px 0 0; }
  .ai-preview-actions { background:#fff; }
}

/* Paint-inspired dark workspace and persistent desktop ribbon. */
@media (min-width:761px) {
  #boardPage {
    grid-template-rows:46px auto minmax(0,1fr);
    grid-template-columns:68px minmax(0,1fr);
    grid-template-areas:"top top" "panel panel" "side main";
    background:#202020;
  }
  #topBar {
    min-height:46px;
    padding:5px 14px;
    color:#e8e8e8;
    background:#1f1f1f;
    border-bottom:1px solid #303030;
    box-shadow:none;
  }
  .board-name { color:#f2f2f2; font-weight:500; }
  .room-badge,.user-badge { color:#b9b9b9; background:#292929; border-color:#3b3b3b; }
  .top-actions { border-left-color:#3b3b3b; }
  .icon-btn,#arrangeBtn { color:#d2d2d2; background:transparent; border-color:transparent; filter:none; }
  .icon-btn:hover,#arrangeBtn:hover { color:#fff; background:#333; border-color:#464646; }

  #bottomPanel,#bottomPanel.expanded {
    position:relative;
    grid-area:panel;
    inset:auto;
    z-index:8;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(390px,46vw);
    grid-template-areas:"properties colors";
    width:auto;
    height:auto;
    min-height:148px;
    max-height:min(42vh,360px);
    color:#e4e4e4;
    background:#242424;
    border:0;
    border-bottom:1px solid #363636;
    border-radius:0;
    box-shadow:none;
    transform:none!important;
    transition:none;
    overflow:hidden;
  }
  .panel-handle { display:none; }
  .ribbon-resize-handle {
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    z-index:12;
    height:7px;
    cursor:ns-resize;
    touch-action:none;
  }
  .ribbon-resize-handle::after {
    content:'';
    position:absolute;
    right:calc(50% - 24px);
    bottom:1px;
    width:48px;
    height:2px;
    background:#626262;
    border-radius:2px;
    opacity:.55;
  }
  .ribbon-resize-handle:hover::after,.ribbon-resize-handle.dragging::after { background:#b96bce; opacity:1; }
  #panelContent {
    grid-area:properties;
    min-width:0;
    max-height:none!important;
    padding:10px 14px 9px!important;
    opacity:1!important;
    overflow:auto;
    color:#ddd;
    border-right:1px solid #3a3a3a;
  }
  #panelContent[aria-hidden="true"] { display:block!important; }
  .panel-section { min-height:125px; padding:0; }
  .panel-title { margin-bottom:8px; color:#bdbdbd; font-size:11px; font-weight:500; letter-spacing:.2px; text-transform:none; }
  .brush-cat-container,.shape-filter-row { margin-bottom:7px; flex-wrap:nowrap; }
  .cat-tab,.shape-filter { padding:4px 9px; color:#c4c4c4; background:#2e2e2e; border-color:#464646; border-radius:3px; }
  .cat-tab.active,.shape-filter.active { color:#fff; background:#3b3b3b; border-color:#8d5aa5; box-shadow:inset 0 -2px #bf72d8; }
  .brush-grid { grid-template-columns:repeat(8,minmax(52px,1fr)); gap:4px; }
  .brush-item,.shape-btn { min-height:54px; padding:5px 4px; color:#d3d3d3; background:#2b2b2b; border-color:#414141; border-radius:4px; }
  .brush-item:hover,.shape-btn:hover { color:#fff; background:#363636; border-color:#5b5b5b; }
  .brush-item.active,.shape-btn.selected { color:#fff; background:#353039; border-color:#b66acb; box-shadow:inset 0 0 0 1px #8d4ca0; }
  .brush-icon { filter:grayscale(1); }
  .shape-panel-head,.shape-search-wrap,.shape-panel-hint { display:none; }
  .shape-categories { display:block; }
  .shape-cat { display:none; }
  .shape-cat:first-child,.shape-recent { display:block; }
  .shape-grid { grid-template-columns:repeat(7,minmax(64px,1fr)); gap:4px; }
  .shape-name { color:#c9c9c9; }
  .size-row { margin-top:7px; color:#c8c8c8; }
  .size-row input[type=range] { accent-color:#bd70d4; }

  .quick-color-ribbon {
    grid-area:colors;
    position:relative;
    display:grid;
    grid-template-columns:54px minmax(220px,1fr) 72px;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:14px 14px 25px;
    background:#242424;
  }
  .quick-color-current {
    width:42px;
    height:42px;
    justify-self:center;
    background:var(--current-color);
    border:3px solid #181818;
    border-radius:50%;
    box-shadow:0 0 0 2px #b86dd0;
  }
  .quick-color-swatches { display:grid; grid-template-columns:repeat(10,22px); grid-auto-rows:22px; gap:6px; align-content:center; }
  .quick-color-swatch {
    width:22px; height:22px; padding:0;
    background:var(--swatch);
    border:1px solid #666;
    border-radius:50%;
    cursor:pointer;
  }
  .quick-color-swatch:hover { border-color:#fff; transform:scale(1.08); }
  .quick-color-swatch.selected { outline:2px solid #c579da; outline-offset:2px; }
  .open-color-mixer {
    align-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:5px;
    color:#d3d3d3;
    background:transparent;
    border:1px solid transparent;
    border-radius:4px;
    cursor:pointer;
    font-size:10px;
  }
  .open-color-mixer:hover { color:#fff; background:#333; border-color:#4a4a4a; }
  .open-color-mixer span { width:31px; height:31px; border-radius:50%; background:conic-gradient(#f44,#fc0,#4c6,#2bd,#65f,#d4c,#f44); box-shadow:inset 0 0 0 7px #242424; }
  .ribbon-group-label { position:absolute; right:0; bottom:4px; left:0; color:#9d9d9d; font-size:11px; text-align:center; }

  #sideToolbar {
    grid-area:side;
    padding:13px 10px;
    gap:7px;
    background:#202020;
    border-right:1px solid #303030;
    box-shadow:none;
  }
  .side-tool { width:46px; height:46px; color:#d4d4d4; background:#292929; border-color:#373737; border-radius:5px; filter:none; }
  .side-tool:hover { color:#fff; background:#353535; border-color:#515151; }
  .side-tool.active { color:#fff; background:#343038; border-color:#b96bce; box-shadow:inset 0 0 0 1px #8d4c9f; }
  #canvasArea,#canvasWrap { background:#202020; }
  #whiteboard { box-shadow:0 0 0 1px #555,0 12px 30px rgba(0,0,0,.28); }
  #statusBar { right:0; bottom:0; left:0; max-width:none; justify-content:flex-start; color:#d0d0d0; background:#202020; border:0; border-top:1px solid #303030; border-radius:0; box-shadow:none; filter:none; }
  #zoomControls { right:18px; bottom:34px; background:#292929; border-color:#444; box-shadow:0 4px 12px rgba(0,0,0,.25); }
  #zoomControls button { color:#ddd; border-color:#414141; }
  #zoomControls button:hover { color:#fff; background:#3a3a3a; }

  /* The detailed mixer is a stable ribbon panel, not a disappearing popover. */
  .color-panel-section { display:grid; grid-template-columns:190px minmax(240px,1fr); grid-template-areas:"title title" "wheel inputs" "wheel colors"; gap:4px 14px; }
  .color-header { grid-area:title; margin:0; }
  .color-wheel-area { grid-area:wheel; margin:0; justify-content:flex-start; transform:scale(.53); transform-origin:top left; width:116px; height:106px; }
  .color-inputs { grid-area:inputs; min-width:260px; }
  .color-bottom { grid-area:colors; }
  .hsl-row { color:var(--text-dim); }
  .hex-row input { color:#eee; background:#303030; border-color:#4b4b4b; }
  .memory-title,.base-title { color:var(--text-dim); }

  /* White selection flyout needs dark native text; inherited light ribbon colors made it unreadable. */
  .selection-toolbar-btn { color:#334155; border-right-color:#d9dee6; }
  .selection-toolbar-btn:hover,.selection-toolbar-btn:focus-visible { color:#142033; background:#eaf2fc; }
  .selection-toolbar-btn.active { color:#103f7b; background:#dceafd; }
  .selection-toolbar-btn.danger { color:#c92f4f; }
  .selection-toolbar-btn.danger:hover,.selection-toolbar-btn.danger:focus-visible { color:#9f1239; background:#ffe8ed; }
  .selection-toolbar-btn:disabled { color:#7c8797; opacity:.62; }
}

@media (max-width:1100px) and (min-width:761px) {
  #bottomPanel,#bottomPanel.expanded { grid-template-columns:minmax(0,1fr) 360px; }
  .quick-color-ribbon { grid-template-columns:44px 1fr 58px; padding-inline:8px; gap:6px; }
  .quick-color-swatches { grid-template-columns:repeat(5,22px); }
  .brush-grid { grid-template-columns:repeat(6,minmax(48px,1fr)); }
}

/* Collapsible ribbon: compact by default, expanded only while choosing properties. */
@media (min-width:761px) {
  #boardPage.ribbon-collapsed { grid-template-rows:46px 0 minmax(0,1fr); }
  #boardPage.ribbon-collapsed #bottomPanel { min-height:0; max-height:0; border:0; opacity:0; pointer-events:none; }
  #ribbonToggleBtn { font-size:17px; }
  #userCount { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; color:#d0d0d0; background:transparent; border:0; border-radius:4px; cursor:pointer; font:inherit; }
  #userCount .ui-icon { width:15px; height:15px; }
  #userCount:hover,#userCount[aria-expanded="true"] { color:#fff; background:#383838; }
}

.member-menu {
  position:absolute;
  right:12px;
  bottom:34px;
  z-index:95;
  width:min(390px,calc(100vw - 24px));
  max-height:min(520px,70vh);
  overflow:auto;
  color:#e7e7e7;
  background:#282828;
  border:1px solid #474747;
  border-radius:6px;
  box-shadow:0 16px 38px rgba(0,0,0,.38);
}
.member-menu-head { display:flex; justify-content:space-between; align-items:center; padding:12px 13px; border-bottom:1px solid #404040; }
.member-menu-head strong { font-size:13px; }
.member-menu-head span { color:var(--text-dim); font-size:11px; }
.member-notice { margin:8px; padding:9px 10px; color:#f5d48b; background:#3b3324; border:1px solid #665630; border-radius:5px; font-size:11px; line-height:1.45; }
.member-list { padding:6px; }
.member-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:6px 7px; border-radius:4px; }
.member-row:hover { background:#333; }
.member-identity { min-width:0; display:flex; align-items:center; gap:7px; }
.member-identity i { width:8px; height:8px; flex:0 0 auto; background:#43b875; border-radius:50%; }
.member-identity b { overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:550; white-space:nowrap; }
.member-identity em { padding:2px 5px; color:#d8b6e3; background:#49344f; border-radius:3px; font-size:9px; font-style:normal; }
.member-identity em.editor { color:#a7dcbd; background:#294638; }
.member-identity em.viewer { color:#bad0ea; background:#2b4058; }
.member-identity em.admin { color:#ffe0a3; background:#57401f; }
.member-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.member-actions button,.member-row.blocked>button { padding:5px 8px; color:#ddd; background:#363636; border:1px solid #505050; border-radius:4px; cursor:pointer; font-size:10px; }
.member-actions button:hover,.member-row.blocked>button:hover { color:#fff; background:#444; }
.member-actions button.danger { color:#ffb5b5; border-color:#6d4141; }
.member-actions button.danger:hover { background:#633434; }
.member-actions .role-button.active { color:#fff; background:#1858a5; border-color:#4e8fdc; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.member-actions .admin-toggle { color:#ffe0a3; border-color:#7b6033; }
.member-actions .admin-toggle.active { color:#fff3d3; background:#62491f; border-color:#a88243; }
.blocked-section { border-top:1px solid #404040; }
.member-section-title { padding:9px 13px 3px; color:var(--text-dim); font-size:10px; text-transform:uppercase; letter-spacing:.7px; }
.member-row.blocked { color:#b8b8b8; }
.member-empty { padding:18px; color:var(--text-dim); font-size:11px; text-align:center; }

@media (max-width:760px) {
  #ribbonToggleBtn { display:none; }
  .quick-color-ribbon { display:flex; gap:8px; overflow-x:auto; padding:7px 9px; background:#242424; }
  .quick-color-current { width:32px; height:32px; flex:0 0 auto; background:var(--current-color); border:2px solid #111; border-radius:50%; box-shadow:0 0 0 2px #b86dd0; }
  .quick-color-swatches { display:flex; gap:6px; }
  .quick-color-swatch { width:30px; height:30px; flex:0 0 auto; padding:0; background:var(--swatch); border:1px solid #666; border-radius:50%; }
  .open-color-mixer { flex:0 0 auto; color:#ddd; background:#333; border:1px solid #4b4b4b; border-radius:4px; }
  .open-color-mixer span,.ribbon-group-label { display:none; }
  .member-menu { position:fixed; right:8px; bottom:70px; left:8px; width:auto; }
}