/* Mobile/TG Canvas visual adapter.
   Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css.
   Every selector is route-scoped because this adapter is also re-imported through tg.css
   to guarantee late cascade ownership on the Canvas route only. */

@media (max-width:1024px){
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] html.tg .toolbar[aria-label]{
    background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent);
    border-color:var(--aidc-border-subtle);
    box-shadow:var(--aidc-shadow-popover)
  }
}

@media (max-width:767px){
  html[data-page="canvas"].canvas-dashboard-mode .site-header{
    border-bottom-color:var(--aidc-border-subtle)
  }

  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls,
  html[data-page="canvas"] .hud-panel,
  html[data-page="canvas"] .multi-sel-bar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover)
  }

  html[data-page="canvas"] .tool-btn,
  html[data-page="canvas"] .zoom-btn,
  html[data-page="canvas"] .multi-sel-bar__btn{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .tool-btn:hover,
  html[data-page="canvas"] .zoom-btn:hover,
  html[data-page="canvas"] .multi-sel-bar__btn:hover{
    background:var(--aidc-btn-secondary-bg-hover);
    border-color:var(--aidc-border-strong);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .tool-btn.active,
  html[data-page="canvas"] .tool-btn.is-active,
  html[data-page="canvas"] .zoom-btn.active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
    color:var(--aidc-action-primary-from)
  }

  html[data-page="canvas"] .shapes-menu,
  html[data-page="canvas"] .arrow-type-popup,
  html[data-page="canvas"] .emoji-popup,
  html[data-page="canvas"] .export-menu,
  html[data-page="canvas"] .comment-dialog,
  html[data-page="canvas"] .canvas-ctx-menu,
  html[data-page="canvas"] .frames-panel,
  html[data-page="canvas"] .connector-panel,
  html[data-page="canvas"] .dt-popover,
  html[data-page="canvas"] .canvas-format-bar,
  html[data-page="canvas"] .freehand-format-bar{
    background:var(--aidc-bg-popover);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .drawing-toolbar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important;
    border-color:var(--aidc-border-default)!important;
    box-shadow:var(--aidc-shadow-popover)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn{
    background:var(--aidc-btn-secondary-bg)!important;
    border-color:var(--aidc-border-default)!important;
    color:var(--aidc-text-secondary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{
    background:var(--aidc-btn-secondary-bg-hover)!important;
    color:var(--aidc-text-primary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn.active,
  html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important;
    color:var(--aidc-action-primary-from)!important;
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-sep{
    background:var(--aidc-border-subtle)!important
  }

  html[data-page="canvas"] .board-topbar .pill{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .board-topbar .pill--board-title{
    color:var(--aidc-text-primary)
  }
}

/* canvas-format-bars.js injects dark literal colors at runtime. The format bar
   is chrome, not board content, so its controls must follow the app theme. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-color:var(--aidc-border-default)!important;
  background-color:var(--aidc-btn-secondary-bg)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important
}
/* Runtime frame bars also emit plain spans for W/H and preset metadata. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{
  background:var(--aidc-bg-popover)!important;
  color:var(--aidc-text-primary)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){
  background:var(--aidc-border-default)!important;
  border-color:var(--aidc-border-default)!important
}

@media (pointer:coarse){
  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls{
    box-shadow:none
  }
}


/* Canvas Dashboard visual adapter. Grid/list geometry and media readability overlays remain legacy-owned. */

.canvas-dashboard .panel,
.panel-templates{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle);
  box-shadow:var(--aidc-shadow-popover)
}

.boards-grid,
.boards-list,
.templates-slider,
.custom-select__dropdown{
  scrollbar-color:var(--aidc-border-default) transparent
}
.boards-grid::-webkit-scrollbar-thumb,
.boards-list::-webkit-scrollbar-thumb,
.templates-slider::-webkit-scrollbar-thumb,
.custom-select__dropdown::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

.template-card,
.board-card{
  background:var(--aidc-bg-card);
  border-color:var(--aidc-border-subtle)
}
.template-card:hover,
.board-card:hover,
.template-card--user:hover{
  border-color:var(--aidc-border-strong);
  box-shadow:var(--aidc-shadow-popover)
}
.template-card--blank{
  border-color:var(--aidc-border-default)
}
.template-card--blank:hover{
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent)
}

.template-card__thumb,
.board-card__thumb{
  background:var(--aidc-bg-elevated);
  color:var(--aidc-text-secondary)
}
.template-card--blank .template-card__thumb{
  background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent));
  color:var(--aidc-action-primary-from)
}

.template-card__label,
.panel-user-templates .panel-title,
.board-card__title,
.col-name .list-title{
  color:var(--aidc-text-primary)
}

.template-card__badge,
.board-card__badge{
  background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent);
  color:var(--aidc-text-secondary);
  border-color:var(--aidc-border-default)
}

.template-card__menu,
.board-card__fav,
.board-card__menu-btn,
.list-fav-btn,
.list-menu-btn{
  background:color-mix(in srgb,var(--aidc-bg-popover) 82%,transparent);
  color:var(--aidc-text-muted)
}
.template-card__menu:hover,
.board-card__menu-btn:hover,
.list-fav-btn:hover,
.list-menu-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

.board-card__fav.active,
.board-card__fav.active:hover,
.list-fav-btn.active,
.list-fav-btn.active:hover{
  color:var(--aidc-amber-500)
}

.boards-filters label,
.boards-sort label,
.custom-select__arrow,
.boards-search-box .search-icon,
.board-card__meta,
.boards-list-header,
.col-users,
.col-opened,
.col-owner,
.boards-empty__text,
.boards-loading{
  color:var(--aidc-text-muted)
}

.custom-select__trigger,
.boards-search-box input,
.board-card__title-input{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}
.custom-select__trigger:hover,
.custom-select.open .custom-select__trigger,
.boards-search-box input:focus,
.board-card__title-input:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)
}

.custom-select__dropdown,
.board-ctx-menu{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-popover)
}
.custom-select__option,
.ctx-item{
  color:var(--aidc-text-secondary)
}
.custom-select__option:hover,
.ctx-item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}
.custom-select__option.active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent);
  color:var(--aidc-action-primary-from)
}

.ctx-item--danger{
  color:var(--aidc-red-500)
}
.ctx-item--danger:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent);
  color:var(--aidc-red-500)
}
.ctx-divider{
  background:var(--aidc-border-subtle)
}

.view-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-muted)
}
.view-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}
.view-btn.active{
  background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-cyan-500) 34%,transparent);
  color:var(--aidc-cyan-500)
}

.boards-list-header,
.boards-list-row{
  border-color:var(--aidc-border-subtle)
}
.boards-list-row:hover{
  background:var(--aidc-btn-secondary-bg)
}

.boards-loading .spinner{
  border-color:var(--aidc-border-default);
  border-top-color:var(--aidc-cyan-500)
}

.board-info-overlay{
  background:var(--aidc-backdrop)
}
.board-info-panel{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle);
  box-shadow:var(--aidc-shadow-modal)
}

.tpl-sub-modal-overlay{
  background:var(--aidc-backdrop)
}
.tpl-sub-modal-popup{
  background:var(--aidc-bg-modal);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-modal)
}
.tpl-sub-modal-title,
.tpl-sub-modal-card__label{
  color:var(--aidc-text-primary)
}
.tpl-sub-modal-card{
  background:var(--aidc-btn-secondary-bg)
}
.tpl-sub-modal-card:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent)
}
.tpl-sub-modal-card__icon svg{
  color:var(--aidc-text-secondary)
}

#canvas-rotation-badge{
  background:color-mix(in srgb,var(--aidc-bg-popover) 92%,transparent);
  color:var(--aidc-text-primary);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent);
  box-shadow:var(--aidc-shadow-popover)
}



/* Canvas sharing visual adapter.
   Dynamic collaboration colors (--user-color) remain owned by presence logic.
*/

body .share-modal-overlay{
  background:var(--aidc-backdrop)
}

body .share-modal{
  background:var(--aidc-bg-modal);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-modal);
  color:var(--aidc-text-primary)
}

body .share-modal__title,
body .member-name,
body .share-invite-meta strong{
  color:var(--aidc-text-primary)
}

body .share-modal__close,
body .share-generate-btn,
body .share-member-role-label,
body .share-remove-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

body .share-modal__close:hover,
body .share-generate-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

body .share-modal__body{
  scrollbar-color:var(--aidc-border-default) transparent
}
body .share-modal__body::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}
body .share-modal__body::-webkit-scrollbar-thumb:hover{
  background:var(--aidc-border-strong)
}

body .share-section,
body .share-section--settings,
body .share-section--transfer,
body .share-section--activity{
  border-color:var(--aidc-border-subtle)
}

body .share-section__label,
body .share-invite-meta,
body .share-you-tag,
body .share-member-role-label,
body .share-activity-row,
body .share-activity-time{
  color:var(--aidc-text-muted)
}

body .share-invite-input,
body .share-role-select{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}

body .share-invite-input:focus,
body .share-role-select:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring);
  outline:none
}

body .share-role-select option{
  background:var(--aidc-bg-popover);
  color:var(--aidc-text-primary)
}

body .share-copy-btn,
body .share-topbar-btn{
  background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-cyan-500) 30%,transparent);
  color:var(--aidc-cyan-500)
}

body .share-copy-btn:hover,
body .share-topbar-btn:hover{
  background:color-mix(in srgb,var(--aidc-cyan-500) 18%,transparent);
  border-color:color-mix(in srgb,var(--aidc-cyan-500) 44%,transparent)
}

body .member-row:hover{
  background:var(--aidc-btn-secondary-bg-hover)
}

body .member-online-dot.online{
  background:var(--aidc-green-500);
  box-shadow:0 0 6px color-mix(in srgb,var(--aidc-green-500) 50%,transparent)
}
body .member-online-dot.offline{
  background:var(--aidc-text-muted)
}

body .member-avatar,
body .presence-avatar{
  background:color-mix(in srgb,var(--aidc-bg-card) 88%,white 12%);
  color:var(--aidc-text-primary)
}

body .presence-more{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-muted)
}

body .share-remove-btn:hover,
body .share-leave-btn,
body .share-transfer-btn{
  background:color-mix(in srgb,var(--aidc-red-500) 10%,transparent);
  border-color:var(--aidc-action-danger-border);
  color:color-mix(in srgb,var(--aidc-red-500) 68%,white 32%)
}

body .share-remove-btn:hover,
body .share-leave-btn:hover,
body .share-transfer-btn:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 18%,transparent);
  border-color:color-mix(in srgb,var(--aidc-red-500) 42%,transparent)
}

body .view-only-badge{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  color:var(--aidc-action-primary-from);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 36%,transparent)
}

body .share-setting-row{
  color:var(--aidc-text-secondary)
}
body .share-setting-row:hover{
  color:var(--aidc-text-primary)
}
body .share-setting-cb{
  accent-color:var(--aidc-action-primary-from)
}

body .share-activity-name{
  color:var(--aidc-text-secondary)
}




/* Canvas Brush Studio visual adapter. Brush swatches and texture previews remain tool-owned. */

.brush-studio-backdrop{
  background:var(--aidc-backdrop);
  color:var(--aidc-text-secondary)
}

.brush-studio-modal{
  background:var(--aidc-bg-modal);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-modal)
}

.bs-header,
.bs-sidebar{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle)
}

.bs-title,
.bs-section-title{
  color:var(--aidc-text-primary)
}

.bs-sub-title,
.bs-brush-list-title,
.bs-testpad-info,
.bs-val,
.bs-val--mono,
.bs-grain-empty,
.bs-hint,
.bs-empty{
  color:var(--aidc-text-muted)
}

.bs-btn,
.bs-testpad-btn,
.bs-mode-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

.bs-btn:hover,
.bs-testpad-btn:hover,
.bs-mode-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.bs-btn--primary{
  background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  border-color:transparent;
  color:var(--aidc-text-inverse);
  box-shadow:0 0 16px var(--aidc-action-primary-glow)
}
.bs-btn--primary:hover{
  filter:brightness(1.08)
}

.bs-btn--accent{
  background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent);
  color:var(--aidc-violet-500)
}
.bs-btn--accent:hover{
  background:color-mix(in srgb,var(--aidc-violet-500) 22%,transparent);
  color:var(--aidc-text-primary)
}

.bs-brush-list,
.bs-nav,
.bs-section-content{
  scrollbar-color:var(--aidc-border-default) transparent
}
.bs-brush-list::-webkit-scrollbar-thumb,
.bs-nav::-webkit-scrollbar-thumb,
.bs-section-content::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}
.bs-section-content::-webkit-scrollbar-thumb:hover{
  background:var(--aidc-border-strong)
}

.bs-brush-list-item,
.bs-nav-item{
  color:var(--aidc-text-muted)
}
.bs-brush-list-item:hover,
.bs-nav-item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}
.bs-brush-list-item.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
  color:var(--aidc-action-primary-from)
}
.bs-nav-item.is-active{
  background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent);
  color:var(--aidc-violet-500)
}

.bs-testpad{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-subtle)
}
.bs-testpad canvas{
  border-color:var(--aidc-border-default)
}
.bs-testpad-info b{
  color:var(--aidc-text-secondary)
}

.bs-row .bs-label{
  color:var(--aidc-text-secondary)
}

.bs-slider{
  background:var(--aidc-btn-secondary-bg-hover)
}
.bs-slider::-webkit-slider-thumb,
.bs-slider::-moz-range-thumb{
  background:var(--aidc-violet-500);
  border-color:color-mix(in srgb,var(--aidc-text-primary) 30%,transparent)
}
.bs-slider::-webkit-slider-runnable-track{
  background:linear-gradient(to right,color-mix(in srgb,var(--aidc-violet-500) 50%,transparent),color-mix(in srgb,var(--aidc-violet-500) 15%,transparent))
}

.bs-toggle-track{
  background:var(--aidc-btn-secondary-bg-hover)
}
.bs-toggle-thumb{
  background:var(--aidc-text-muted)
}
.bs-checkbox:checked + .bs-toggle-track{
  background:color-mix(in srgb,var(--aidc-violet-500) 40%,transparent)
}
.bs-checkbox:checked + .bs-toggle-track .bs-toggle-thumb{
  background:var(--aidc-violet-500)
}

.bs-select,
.bs-input{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}
.bs-select:focus,
.bs-input:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)
}
.bs-select option{
  background:var(--aidc-bg-popover);
  color:var(--aidc-text-primary)
}
.bs-input::placeholder{
  color:var(--aidc-text-muted)
}

.bs-mode-btn.is-active{
  background:color-mix(in srgb,var(--aidc-violet-500) 16%,transparent);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent);
  color:var(--aidc-violet-500)
}

.bs-brush-list-thumb{
  background:var(--aidc-bg-elevated)
}

.bs-toast{
  background:var(--aidc-violet-500);
  color:var(--aidc-text-inverse);
  box-shadow:var(--aidc-shadow-popover)
}





/* Mobile/TG Canvas visual adapter.
   Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css.
   Every selector is route-scoped because this adapter is also re-imported through tg.css
   to guarantee late cascade ownership on the Canvas route only. */

@media (max-width:1024px){
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] html.tg .toolbar[aria-label]{
    background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent);
    border-color:var(--aidc-border-subtle);
    box-shadow:var(--aidc-shadow-popover)
  }
}

@media (max-width:767px){
  html[data-page="canvas"].canvas-dashboard-mode .site-header{
    border-bottom-color:var(--aidc-border-subtle)
  }

  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls,
  html[data-page="canvas"] .hud-panel,
  html[data-page="canvas"] .multi-sel-bar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover)
  }

  html[data-page="canvas"] .tool-btn,
  html[data-page="canvas"] .zoom-btn,
  html[data-page="canvas"] .multi-sel-bar__btn{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .tool-btn:hover,
  html[data-page="canvas"] .zoom-btn:hover,
  html[data-page="canvas"] .multi-sel-bar__btn:hover{
    background:var(--aidc-btn-secondary-bg-hover);
    border-color:var(--aidc-border-strong);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .tool-btn.active,
  html[data-page="canvas"] .tool-btn.is-active,
  html[data-page="canvas"] .zoom-btn.active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
    color:var(--aidc-action-primary-from)
  }

  html[data-page="canvas"] .shapes-menu,
  html[data-page="canvas"] .arrow-type-popup,
  html[data-page="canvas"] .emoji-popup,
  html[data-page="canvas"] .export-menu,
  html[data-page="canvas"] .comment-dialog,
  html[data-page="canvas"] .canvas-ctx-menu,
  html[data-page="canvas"] .frames-panel,
  html[data-page="canvas"] .connector-panel,
  html[data-page="canvas"] .dt-popover,
  html[data-page="canvas"] .canvas-format-bar,
  html[data-page="canvas"] .freehand-format-bar{
    background:var(--aidc-bg-popover);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .drawing-toolbar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important;
    border-color:var(--aidc-border-default)!important;
    box-shadow:var(--aidc-shadow-popover)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn{
    background:var(--aidc-btn-secondary-bg)!important;
    border-color:var(--aidc-border-default)!important;
    color:var(--aidc-text-secondary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{
    background:var(--aidc-btn-secondary-bg-hover)!important;
    color:var(--aidc-text-primary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn.active,
  html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important;
    color:var(--aidc-action-primary-from)!important;
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-sep{
    background:var(--aidc-border-subtle)!important
  }

  html[data-page="canvas"] .board-topbar .pill{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .board-topbar .pill--board-title{
    color:var(--aidc-text-primary)
  }
}

/* canvas-format-bars.js injects dark literal colors at runtime. The format bar
   is chrome, not board content, so its controls must follow the app theme. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-color:var(--aidc-border-default)!important;
  background-color:var(--aidc-btn-secondary-bg)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important
}
/* Runtime frame bars also emit plain spans for W/H and preset metadata. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{
  background:var(--aidc-bg-popover)!important;
  color:var(--aidc-text-primary)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){
  background:var(--aidc-border-default)!important;
  border-color:var(--aidc-border-default)!important
}

@media (pointer:coarse){
  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls{
    box-shadow:none
  }
}


/* Canvas Dashboard visual adapter. Grid/list geometry and media readability overlays remain legacy-owned. */

.canvas-dashboard .panel,
.panel-templates{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle);
  box-shadow:var(--aidc-shadow-popover)
}

.boards-grid,
.boards-list,
.templates-slider,
.custom-select__dropdown{
  scrollbar-color:var(--aidc-border-default) transparent
}
.boards-grid::-webkit-scrollbar-thumb,
.boards-list::-webkit-scrollbar-thumb,
.templates-slider::-webkit-scrollbar-thumb,
.custom-select__dropdown::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

.template-card,
.board-card{
  background:var(--aidc-bg-card);
  border-color:var(--aidc-border-subtle)
}
.template-card:hover,
.board-card:hover,
.template-card--user:hover{
  border-color:var(--aidc-border-strong);
  box-shadow:var(--aidc-shadow-popover)
}
.template-card--blank{
  border-color:var(--aidc-border-default)
}
.template-card--blank:hover{
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent)
}

.template-card__thumb,
.board-card__thumb{
  background:var(--aidc-bg-elevated);
  color:var(--aidc-text-secondary)
}
.template-card--blank .template-card__thumb{
  background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent));
  color:var(--aidc-action-primary-from)
}

.template-card__label,
.panel-user-templates .panel-title,
.board-card__title,
.col-name .list-title{
  color:var(--aidc-text-primary)
}

.template-card__badge,
.board-card__badge{
  background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent);
  color:var(--aidc-text-secondary);
  border-color:var(--aidc-border-default)
}

.template-card__menu,
.board-card__fav,
.board-card__menu-btn,
.list-fav-btn,
.list-menu-btn{
  background:color-mix(in srgb,var(--aidc-bg-popover) 82%,transparent);
  color:var(--aidc-text-muted)
}
.template-card__menu:hover,
.board-card__menu-btn:hover,
.list-fav-btn:hover,
.list-menu-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

.board-card__fav.active,
.board-card__fav.active:hover,
.list-fav-btn.active,
.list-fav-btn.active:hover{
  color:var(--aidc-amber-500)
}

.boards-filters label,
.boards-sort label,
.custom-select__arrow,
.boards-search-box .search-icon,
.board-card__meta,
.boards-list-header,
.col-users,
.col-opened,
.col-owner,
.boards-empty__text,
.boards-loading{
  color:var(--aidc-text-muted)
}

.custom-select__trigger,
.boards-search-box input,
.board-card__title-input{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}
.custom-select__trigger:hover,
.custom-select.open .custom-select__trigger,
.boards-search-box input:focus,
.board-card__title-input:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)
}

.custom-select__dropdown,
.board-ctx-menu{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-popover)
}
.custom-select__option,
.ctx-item{
  color:var(--aidc-text-secondary)
}
.custom-select__option:hover,
.ctx-item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}
.custom-select__option.active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent);
  color:var(--aidc-action-primary-from)
}

.ctx-item--danger{
  color:var(--aidc-red-500)
}
.ctx-item--danger:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent);
  color:var(--aidc-red-500)
}
.ctx-divider{
  background:var(--aidc-border-subtle)
}

.view-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-muted)
}
.view-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}
.view-btn.active{
  background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-cyan-500) 34%,transparent);
  color:var(--aidc-cyan-500)
}

.boards-list-header,
.boards-list-row{
  border-color:var(--aidc-border-subtle)
}
.boards-list-row:hover{
  background:var(--aidc-btn-secondary-bg)
}

.boards-loading .spinner{
  border-color:var(--aidc-border-default);
  border-top-color:var(--aidc-cyan-500)
}

.board-info-overlay{
  background:var(--aidc-backdrop)
}
.board-info-panel{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle);
  box-shadow:var(--aidc-shadow-modal)
}

.tpl-sub-modal-overlay{
  background:var(--aidc-backdrop)
}
.tpl-sub-modal-popup{
  background:var(--aidc-bg-modal);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-modal)
}
.tpl-sub-modal-title,
.tpl-sub-modal-card__label{
  color:var(--aidc-text-primary)
}
.tpl-sub-modal-card{
  background:var(--aidc-btn-secondary-bg)
}
.tpl-sub-modal-card:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent)
}
.tpl-sub-modal-card__icon svg{
  color:var(--aidc-text-secondary)
}

#canvas-rotation-badge{
  background:color-mix(in srgb,var(--aidc-bg-popover) 92%,transparent);
  color:var(--aidc-text-primary);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent);
  box-shadow:var(--aidc-shadow-popover)
}


/* Temporary compatibility layer for hardcoded !important theme rules in canvas/index.html.
   Remove this file together with the legacy inline theme block during physical HTML cleanup.
*/

html[data-page="canvas"] body .btn-primary{
  background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to))!important;
  color:var(--aidc-text-inverse)!important;
  border-color:transparent!important;
  box-shadow:0 0 20px var(--aidc-action-primary-glow)!important
}

html[data-page="canvas"] body .btn-primary:hover{
  box-shadow:0 0 28px var(--aidc-action-primary-glow)!important
}

html[data-page="canvas"] body .template-card,
html[data-page="canvas"] body .board-card{
  background:var(--aidc-bg-card)!important
}

html[data-page="canvas"] body .template-card__thumb,
html[data-page="canvas"] body .board-card__thumb{
  background:var(--aidc-bg-elevated)!important
}

html[data-page="canvas"] body .template-card--blank .template-card__thumb{
  background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent))!important;
  color:var(--aidc-action-primary-from)!important
}

html[data-page="canvas"] body .custom-select__dropdown{
  background:var(--aidc-bg-popover)!important
}

html[data-page="canvas"] body .custom-select__option.active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent)!important;
  color:var(--aidc-action-primary-from)!important
}

html[data-page="canvas"] body .board-card__title-input{
  border-color:var(--aidc-action-focus)!important;
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)!important
}


/* Canvas Slide Edit visual adapter. Layout and responsive geometry stay legacy-owned. */

.slide-edit-toolbar,
.slide-edit-strip,
.slide-edit-notes{
  background:color-mix(in srgb,var(--aidc-bg-panel) 92%,transparent);
  border-color:var(--aidc-border-subtle);
  color:var(--aidc-text-primary)
}

.slide-edit-back-btn,
.slide-edit-tbtn,
.mmz-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

.slide-edit-back-btn:hover,
.slide-edit-tbtn:hover,
.mmz-btn:hover,
.mmz-btn:active{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.slide-edit-title,
.slide-edit-strip__num,
.slide-edit-notes__header,
.slide-edit-notes__close,
.slide-edit-notes__textarea::placeholder{
  color:var(--aidc-text-muted)
}

.slide-edit-tbtn.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  color:var(--aidc-action-primary-from);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)
}

.slide-edit-close:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent);
  color:var(--aidc-red-500);
  border-color:var(--aidc-action-danger-border)
}

.slide-edit-strip{
  scrollbar-color:var(--aidc-border-default) transparent
}
.slide-edit-strip::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

.slide-edit-strip__item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong)
}

.slide-edit-strip__item.active{
  border-color:var(--aidc-action-primary-from);
  background:color-mix(in srgb,var(--aidc-action-primary-from) 8%,transparent)
}

.slide-edit-strip__item.drag-over{
  border-color:var(--aidc-violet-500);
  background:color-mix(in srgb,var(--aidc-violet-500) 10%,transparent)
}

.slide-edit-strip__preview{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-subtle)
}

.slide-edit-strip__label{
  color:var(--aidc-text-secondary)
}

.slide-edit-strip__add{
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-muted)
}
.slide-edit-strip__add:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.slide-edit-notes__header{
  border-bottom-color:var(--aidc-border-subtle)
}
.slide-edit-notes__close:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

.slide-edit-notes__textarea{
  color:var(--aidc-text-secondary);
  scrollbar-color:var(--aidc-border-default) transparent
}
.slide-edit-notes__textarea::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

.slide-edit-container .mode-mini-zoom{
  background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary);
  box-shadow:var(--aidc-shadow-popover)
}

.mmz-label{
  color:var(--aidc-text-secondary)
}





/* Mobile/TG Canvas visual adapter.
   Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css.
   Every selector is route-scoped because this adapter is also re-imported through tg.css
   to guarantee late cascade ownership on the Canvas route only. */

@media (max-width:1024px){
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] html.tg .toolbar[aria-label]{
    background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent);
    border-color:var(--aidc-border-subtle);
    box-shadow:var(--aidc-shadow-popover)
  }
}

@media (max-width:767px){
  html[data-page="canvas"].canvas-dashboard-mode .site-header{
    border-bottom-color:var(--aidc-border-subtle)
  }

  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls,
  html[data-page="canvas"] .hud-panel,
  html[data-page="canvas"] .multi-sel-bar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover)
  }

  html[data-page="canvas"] .tool-btn,
  html[data-page="canvas"] .zoom-btn,
  html[data-page="canvas"] .multi-sel-bar__btn{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .tool-btn:hover,
  html[data-page="canvas"] .zoom-btn:hover,
  html[data-page="canvas"] .multi-sel-bar__btn:hover{
    background:var(--aidc-btn-secondary-bg-hover);
    border-color:var(--aidc-border-strong);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .tool-btn.active,
  html[data-page="canvas"] .tool-btn.is-active,
  html[data-page="canvas"] .zoom-btn.active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
    color:var(--aidc-action-primary-from)
  }

  html[data-page="canvas"] .shapes-menu,
  html[data-page="canvas"] .arrow-type-popup,
  html[data-page="canvas"] .emoji-popup,
  html[data-page="canvas"] .export-menu,
  html[data-page="canvas"] .comment-dialog,
  html[data-page="canvas"] .canvas-ctx-menu,
  html[data-page="canvas"] .frames-panel,
  html[data-page="canvas"] .connector-panel,
  html[data-page="canvas"] .dt-popover,
  html[data-page="canvas"] .canvas-format-bar,
  html[data-page="canvas"] .freehand-format-bar{
    background:var(--aidc-bg-popover);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .drawing-toolbar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important;
    border-color:var(--aidc-border-default)!important;
    box-shadow:var(--aidc-shadow-popover)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn{
    background:var(--aidc-btn-secondary-bg)!important;
    border-color:var(--aidc-border-default)!important;
    color:var(--aidc-text-secondary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{
    background:var(--aidc-btn-secondary-bg-hover)!important;
    color:var(--aidc-text-primary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn.active,
  html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important;
    color:var(--aidc-action-primary-from)!important;
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-sep{
    background:var(--aidc-border-subtle)!important
  }

  html[data-page="canvas"] .board-topbar .pill{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .board-topbar .pill--board-title{
    color:var(--aidc-text-primary)
  }
}

/* canvas-format-bars.js injects dark literal colors at runtime. The format bar
   is chrome, not board content, so its controls must follow the app theme. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-color:var(--aidc-border-default)!important;
  background-color:var(--aidc-btn-secondary-bg)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important
}
/* Runtime frame bars also emit plain spans for W/H and preset metadata. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{
  background:var(--aidc-bg-popover)!important;
  color:var(--aidc-text-primary)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){
  background:var(--aidc-border-default)!important;
  border-color:var(--aidc-border-default)!important
}

@media (pointer:coarse){
  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls{
    box-shadow:none
  }
}


/* Canvas Dashboard visual adapter. Grid/list geometry and media readability overlays remain legacy-owned. */

.canvas-dashboard .panel,
.panel-templates{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle);
  box-shadow:var(--aidc-shadow-popover)
}

.boards-grid,
.boards-list,
.templates-slider,
.custom-select__dropdown{
  scrollbar-color:var(--aidc-border-default) transparent
}
.boards-grid::-webkit-scrollbar-thumb,
.boards-list::-webkit-scrollbar-thumb,
.templates-slider::-webkit-scrollbar-thumb,
.custom-select__dropdown::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

.template-card,
.board-card{
  background:var(--aidc-bg-card);
  border-color:var(--aidc-border-subtle)
}
.template-card:hover,
.board-card:hover,
.template-card--user:hover{
  border-color:var(--aidc-border-strong);
  box-shadow:var(--aidc-shadow-popover)
}
.template-card--blank{
  border-color:var(--aidc-border-default)
}
.template-card--blank:hover{
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent)
}

.template-card__thumb,
.board-card__thumb{
  background:var(--aidc-bg-elevated);
  color:var(--aidc-text-secondary)
}
.template-card--blank .template-card__thumb{
  background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent));
  color:var(--aidc-action-primary-from)
}

.template-card__label,
.panel-user-templates .panel-title,
.board-card__title,
.col-name .list-title{
  color:var(--aidc-text-primary)
}

.template-card__badge,
.board-card__badge{
  background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent);
  color:var(--aidc-text-secondary);
  border-color:var(--aidc-border-default)
}

.template-card__menu,
.board-card__fav,
.board-card__menu-btn,
.list-fav-btn,
.list-menu-btn{
  background:color-mix(in srgb,var(--aidc-bg-popover) 82%,transparent);
  color:var(--aidc-text-muted)
}
.template-card__menu:hover,
.board-card__menu-btn:hover,
.list-fav-btn:hover,
.list-menu-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

.board-card__fav.active,
.board-card__fav.active:hover,
.list-fav-btn.active,
.list-fav-btn.active:hover{
  color:var(--aidc-amber-500)
}

.boards-filters label,
.boards-sort label,
.custom-select__arrow,
.boards-search-box .search-icon,
.board-card__meta,
.boards-list-header,
.col-users,
.col-opened,
.col-owner,
.boards-empty__text,
.boards-loading{
  color:var(--aidc-text-muted)
}

.custom-select__trigger,
.boards-search-box input,
.board-card__title-input{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}
.custom-select__trigger:hover,
.custom-select.open .custom-select__trigger,
.boards-search-box input:focus,
.board-card__title-input:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)
}

.custom-select__dropdown,
.board-ctx-menu{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-popover)
}
.custom-select__option,
.ctx-item{
  color:var(--aidc-text-secondary)
}
.custom-select__option:hover,
.ctx-item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}
.custom-select__option.active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent);
  color:var(--aidc-action-primary-from)
}

.ctx-item--danger{
  color:var(--aidc-red-500)
}
.ctx-item--danger:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent);
  color:var(--aidc-red-500)
}
.ctx-divider{
  background:var(--aidc-border-subtle)
}

.view-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-muted)
}
.view-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}
.view-btn.active{
  background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-cyan-500) 34%,transparent);
  color:var(--aidc-cyan-500)
}

.boards-list-header,
.boards-list-row{
  border-color:var(--aidc-border-subtle)
}
.boards-list-row:hover{
  background:var(--aidc-btn-secondary-bg)
}

.boards-loading .spinner{
  border-color:var(--aidc-border-default);
  border-top-color:var(--aidc-cyan-500)
}

.board-info-overlay{
  background:var(--aidc-backdrop)
}
.board-info-panel{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle);
  box-shadow:var(--aidc-shadow-modal)
}

.tpl-sub-modal-overlay{
  background:var(--aidc-backdrop)
}
.tpl-sub-modal-popup{
  background:var(--aidc-bg-modal);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-modal)
}
.tpl-sub-modal-title,
.tpl-sub-modal-card__label{
  color:var(--aidc-text-primary)
}
.tpl-sub-modal-card{
  background:var(--aidc-btn-secondary-bg)
}
.tpl-sub-modal-card:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent)
}
.tpl-sub-modal-card__icon svg{
  color:var(--aidc-text-secondary)
}

#canvas-rotation-badge{
  background:color-mix(in srgb,var(--aidc-bg-popover) 92%,transparent);
  color:var(--aidc-text-primary);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent);
  box-shadow:var(--aidc-shadow-popover)
}


/* Temporary compatibility layer for hardcoded !important theme rules in canvas/index.html.
   Remove this file together with the legacy inline theme block during physical HTML cleanup.
*/

html[data-page="canvas"] body .btn-primary{
  background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to))!important;
  color:var(--aidc-text-inverse)!important;
  border-color:transparent!important;
  box-shadow:0 0 20px var(--aidc-action-primary-glow)!important
}

html[data-page="canvas"] body .btn-primary:hover{
  box-shadow:0 0 28px var(--aidc-action-primary-glow)!important
}

html[data-page="canvas"] body .template-card,
html[data-page="canvas"] body .board-card{
  background:var(--aidc-bg-card)!important
}

html[data-page="canvas"] body .template-card__thumb,
html[data-page="canvas"] body .board-card__thumb{
  background:var(--aidc-bg-elevated)!important
}

html[data-page="canvas"] body .template-card--blank .template-card__thumb{
  background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent))!important;
  color:var(--aidc-action-primary-from)!important
}

html[data-page="canvas"] body .custom-select__dropdown{
  background:var(--aidc-bg-popover)!important
}

html[data-page="canvas"] body .custom-select__option.active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent)!important;
  color:var(--aidc-action-primary-from)!important
}

html[data-page="canvas"] body .board-card__title-input{
  border-color:var(--aidc-action-focus)!important;
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)!important
}





/* Canvas Brush Studio visual adapter. Brush swatches and texture previews remain tool-owned. */

.brush-studio-backdrop{
  background:var(--aidc-backdrop);
  color:var(--aidc-text-secondary)
}

.brush-studio-modal{
  background:var(--aidc-bg-modal);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-modal)
}

.bs-header,
.bs-sidebar{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle)
}

.bs-title,
.bs-section-title{
  color:var(--aidc-text-primary)
}

.bs-sub-title,
.bs-brush-list-title,
.bs-testpad-info,
.bs-val,
.bs-val--mono,
.bs-grain-empty,
.bs-hint,
.bs-empty{
  color:var(--aidc-text-muted)
}

.bs-btn,
.bs-testpad-btn,
.bs-mode-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

.bs-btn:hover,
.bs-testpad-btn:hover,
.bs-mode-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.bs-btn--primary{
  background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  border-color:transparent;
  color:var(--aidc-text-inverse);
  box-shadow:0 0 16px var(--aidc-action-primary-glow)
}
.bs-btn--primary:hover{
  filter:brightness(1.08)
}

.bs-btn--accent{
  background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent);
  color:var(--aidc-violet-500)
}
.bs-btn--accent:hover{
  background:color-mix(in srgb,var(--aidc-violet-500) 22%,transparent);
  color:var(--aidc-text-primary)
}

.bs-brush-list,
.bs-nav,
.bs-section-content{
  scrollbar-color:var(--aidc-border-default) transparent
}
.bs-brush-list::-webkit-scrollbar-thumb,
.bs-nav::-webkit-scrollbar-thumb,
.bs-section-content::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}
.bs-section-content::-webkit-scrollbar-thumb:hover{
  background:var(--aidc-border-strong)
}

.bs-brush-list-item,
.bs-nav-item{
  color:var(--aidc-text-muted)
}
.bs-brush-list-item:hover,
.bs-nav-item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}
.bs-brush-list-item.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
  color:var(--aidc-action-primary-from)
}
.bs-nav-item.is-active{
  background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent);
  color:var(--aidc-violet-500)
}

.bs-testpad{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-subtle)
}
.bs-testpad canvas{
  border-color:var(--aidc-border-default)
}
.bs-testpad-info b{
  color:var(--aidc-text-secondary)
}

.bs-row .bs-label{
  color:var(--aidc-text-secondary)
}

.bs-slider{
  background:var(--aidc-btn-secondary-bg-hover)
}
.bs-slider::-webkit-slider-thumb,
.bs-slider::-moz-range-thumb{
  background:var(--aidc-violet-500);
  border-color:color-mix(in srgb,var(--aidc-text-primary) 30%,transparent)
}
.bs-slider::-webkit-slider-runnable-track{
  background:linear-gradient(to right,color-mix(in srgb,var(--aidc-violet-500) 50%,transparent),color-mix(in srgb,var(--aidc-violet-500) 15%,transparent))
}

.bs-toggle-track{
  background:var(--aidc-btn-secondary-bg-hover)
}
.bs-toggle-thumb{
  background:var(--aidc-text-muted)
}
.bs-checkbox:checked + .bs-toggle-track{
  background:color-mix(in srgb,var(--aidc-violet-500) 40%,transparent)
}
.bs-checkbox:checked + .bs-toggle-track .bs-toggle-thumb{
  background:var(--aidc-violet-500)
}

.bs-select,
.bs-input{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}
.bs-select:focus,
.bs-input:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)
}
.bs-select option{
  background:var(--aidc-bg-popover);
  color:var(--aidc-text-primary)
}
.bs-input::placeholder{
  color:var(--aidc-text-muted)
}

.bs-mode-btn.is-active{
  background:color-mix(in srgb,var(--aidc-violet-500) 16%,transparent);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent);
  color:var(--aidc-violet-500)
}

.bs-brush-list-thumb{
  background:var(--aidc-bg-elevated)
}

.bs-toast{
  background:var(--aidc-violet-500);
  color:var(--aidc-text-inverse);
  box-shadow:var(--aidc-shadow-popover)
}





/* Mobile/TG Canvas visual adapter.
   Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css.
   Every selector is route-scoped because this adapter is also re-imported through tg.css
   to guarantee late cascade ownership on the Canvas route only. */

@media (max-width:1024px){
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] html.tg .toolbar[aria-label]{
    background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent);
    border-color:var(--aidc-border-subtle);
    box-shadow:var(--aidc-shadow-popover)
  }
}

@media (max-width:767px){
  html[data-page="canvas"].canvas-dashboard-mode .site-header{
    border-bottom-color:var(--aidc-border-subtle)
  }

  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls,
  html[data-page="canvas"] .hud-panel,
  html[data-page="canvas"] .multi-sel-bar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover)
  }

  html[data-page="canvas"] .tool-btn,
  html[data-page="canvas"] .zoom-btn,
  html[data-page="canvas"] .multi-sel-bar__btn{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .tool-btn:hover,
  html[data-page="canvas"] .zoom-btn:hover,
  html[data-page="canvas"] .multi-sel-bar__btn:hover{
    background:var(--aidc-btn-secondary-bg-hover);
    border-color:var(--aidc-border-strong);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .tool-btn.active,
  html[data-page="canvas"] .tool-btn.is-active,
  html[data-page="canvas"] .zoom-btn.active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
    color:var(--aidc-action-primary-from)
  }

  html[data-page="canvas"] .shapes-menu,
  html[data-page="canvas"] .arrow-type-popup,
  html[data-page="canvas"] .emoji-popup,
  html[data-page="canvas"] .export-menu,
  html[data-page="canvas"] .comment-dialog,
  html[data-page="canvas"] .canvas-ctx-menu,
  html[data-page="canvas"] .frames-panel,
  html[data-page="canvas"] .connector-panel,
  html[data-page="canvas"] .dt-popover,
  html[data-page="canvas"] .canvas-format-bar,
  html[data-page="canvas"] .freehand-format-bar{
    background:var(--aidc-bg-popover);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .drawing-toolbar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important;
    border-color:var(--aidc-border-default)!important;
    box-shadow:var(--aidc-shadow-popover)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn{
    background:var(--aidc-btn-secondary-bg)!important;
    border-color:var(--aidc-border-default)!important;
    color:var(--aidc-text-secondary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{
    background:var(--aidc-btn-secondary-bg-hover)!important;
    color:var(--aidc-text-primary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn.active,
  html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important;
    color:var(--aidc-action-primary-from)!important;
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-sep{
    background:var(--aidc-border-subtle)!important
  }

  html[data-page="canvas"] .board-topbar .pill{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .board-topbar .pill--board-title{
    color:var(--aidc-text-primary)
  }
}

/* canvas-format-bars.js injects dark literal colors at runtime. The format bar
   is chrome, not board content, so its controls must follow the app theme. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-color:var(--aidc-border-default)!important;
  background-color:var(--aidc-btn-secondary-bg)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important
}
/* Runtime frame bars also emit plain spans for W/H and preset metadata. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{
  background:var(--aidc-bg-popover)!important;
  color:var(--aidc-text-primary)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){
  background:var(--aidc-border-default)!important;
  border-color:var(--aidc-border-default)!important
}

@media (pointer:coarse){
  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls{
    box-shadow:none
  }
}


/* Canvas Dashboard visual adapter. Grid/list geometry and media readability overlays remain legacy-owned. */

.canvas-dashboard .panel,
.panel-templates{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle);
  box-shadow:var(--aidc-shadow-popover)
}

.boards-grid,
.boards-list,
.templates-slider,
.custom-select__dropdown{
  scrollbar-color:var(--aidc-border-default) transparent
}
.boards-grid::-webkit-scrollbar-thumb,
.boards-list::-webkit-scrollbar-thumb,
.templates-slider::-webkit-scrollbar-thumb,
.custom-select__dropdown::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

.template-card,
.board-card{
  background:var(--aidc-bg-card);
  border-color:var(--aidc-border-subtle)
}
.template-card:hover,
.board-card:hover,
.template-card--user:hover{
  border-color:var(--aidc-border-strong);
  box-shadow:var(--aidc-shadow-popover)
}
.template-card--blank{
  border-color:var(--aidc-border-default)
}
.template-card--blank:hover{
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent)
}

.template-card__thumb,
.board-card__thumb{
  background:var(--aidc-bg-elevated);
  color:var(--aidc-text-secondary)
}
.template-card--blank .template-card__thumb{
  background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent));
  color:var(--aidc-action-primary-from)
}

.template-card__label,
.panel-user-templates .panel-title,
.board-card__title,
.col-name .list-title{
  color:var(--aidc-text-primary)
}

.template-card__badge,
.board-card__badge{
  background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent);
  color:var(--aidc-text-secondary);
  border-color:var(--aidc-border-default)
}

.template-card__menu,
.board-card__fav,
.board-card__menu-btn,
.list-fav-btn,
.list-menu-btn{
  background:color-mix(in srgb,var(--aidc-bg-popover) 82%,transparent);
  color:var(--aidc-text-muted)
}
.template-card__menu:hover,
.board-card__menu-btn:hover,
.list-fav-btn:hover,
.list-menu-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

.board-card__fav.active,
.board-card__fav.active:hover,
.list-fav-btn.active,
.list-fav-btn.active:hover{
  color:var(--aidc-amber-500)
}

.boards-filters label,
.boards-sort label,
.custom-select__arrow,
.boards-search-box .search-icon,
.board-card__meta,
.boards-list-header,
.col-users,
.col-opened,
.col-owner,
.boards-empty__text,
.boards-loading{
  color:var(--aidc-text-muted)
}

.custom-select__trigger,
.boards-search-box input,
.board-card__title-input{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}
.custom-select__trigger:hover,
.custom-select.open .custom-select__trigger,
.boards-search-box input:focus,
.board-card__title-input:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)
}

.custom-select__dropdown,
.board-ctx-menu{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-popover)
}
.custom-select__option,
.ctx-item{
  color:var(--aidc-text-secondary)
}
.custom-select__option:hover,
.ctx-item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}
.custom-select__option.active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent);
  color:var(--aidc-action-primary-from)
}

.ctx-item--danger{
  color:var(--aidc-red-500)
}
.ctx-item--danger:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent);
  color:var(--aidc-red-500)
}
.ctx-divider{
  background:var(--aidc-border-subtle)
}

.view-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-muted)
}
.view-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}
.view-btn.active{
  background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-cyan-500) 34%,transparent);
  color:var(--aidc-cyan-500)
}

.boards-list-header,
.boards-list-row{
  border-color:var(--aidc-border-subtle)
}
.boards-list-row:hover{
  background:var(--aidc-btn-secondary-bg)
}

.boards-loading .spinner{
  border-color:var(--aidc-border-default);
  border-top-color:var(--aidc-cyan-500)
}

.board-info-overlay{
  background:var(--aidc-backdrop)
}
.board-info-panel{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle);
  box-shadow:var(--aidc-shadow-modal)
}

.tpl-sub-modal-overlay{
  background:var(--aidc-backdrop)
}
.tpl-sub-modal-popup{
  background:var(--aidc-bg-modal);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-modal)
}
.tpl-sub-modal-title,
.tpl-sub-modal-card__label{
  color:var(--aidc-text-primary)
}
.tpl-sub-modal-card{
  background:var(--aidc-btn-secondary-bg)
}
.tpl-sub-modal-card:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent)
}
.tpl-sub-modal-card__icon svg{
  color:var(--aidc-text-secondary)
}

#canvas-rotation-badge{
  background:color-mix(in srgb,var(--aidc-bg-popover) 92%,transparent);
  color:var(--aidc-text-primary);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent);
  box-shadow:var(--aidc-shadow-popover)
}


/* Temporary compatibility layer for hardcoded !important theme rules in canvas/index.html.
   Remove this file together with the legacy inline theme block during physical HTML cleanup.
*/

html[data-page="canvas"] body .btn-primary{
  background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to))!important;
  color:var(--aidc-text-inverse)!important;
  border-color:transparent!important;
  box-shadow:0 0 20px var(--aidc-action-primary-glow)!important
}

html[data-page="canvas"] body .btn-primary:hover{
  box-shadow:0 0 28px var(--aidc-action-primary-glow)!important
}

html[data-page="canvas"] body .template-card,
html[data-page="canvas"] body .board-card{
  background:var(--aidc-bg-card)!important
}

html[data-page="canvas"] body .template-card__thumb,
html[data-page="canvas"] body .board-card__thumb{
  background:var(--aidc-bg-elevated)!important
}

html[data-page="canvas"] body .template-card--blank .template-card__thumb{
  background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent))!important;
  color:var(--aidc-action-primary-from)!important
}

html[data-page="canvas"] body .custom-select__dropdown{
  background:var(--aidc-bg-popover)!important
}

html[data-page="canvas"] body .custom-select__option.active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent)!important;
  color:var(--aidc-action-primary-from)!important
}

html[data-page="canvas"] body .board-card__title-input{
  border-color:var(--aidc-action-focus)!important;
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)!important
}


/* Canvas Slide Edit visual adapter. Layout and responsive geometry stay legacy-owned. */

.slide-edit-toolbar,
.slide-edit-strip,
.slide-edit-notes{
  background:color-mix(in srgb,var(--aidc-bg-panel) 92%,transparent);
  border-color:var(--aidc-border-subtle);
  color:var(--aidc-text-primary)
}

.slide-edit-back-btn,
.slide-edit-tbtn,
.mmz-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

.slide-edit-back-btn:hover,
.slide-edit-tbtn:hover,
.mmz-btn:hover,
.mmz-btn:active{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.slide-edit-title,
.slide-edit-strip__num,
.slide-edit-notes__header,
.slide-edit-notes__close,
.slide-edit-notes__textarea::placeholder{
  color:var(--aidc-text-muted)
}

.slide-edit-tbtn.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  color:var(--aidc-action-primary-from);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)
}

.slide-edit-close:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent);
  color:var(--aidc-red-500);
  border-color:var(--aidc-action-danger-border)
}

.slide-edit-strip{
  scrollbar-color:var(--aidc-border-default) transparent
}
.slide-edit-strip::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

.slide-edit-strip__item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong)
}

.slide-edit-strip__item.active{
  border-color:var(--aidc-action-primary-from);
  background:color-mix(in srgb,var(--aidc-action-primary-from) 8%,transparent)
}

.slide-edit-strip__item.drag-over{
  border-color:var(--aidc-violet-500);
  background:color-mix(in srgb,var(--aidc-violet-500) 10%,transparent)
}

.slide-edit-strip__preview{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-subtle)
}

.slide-edit-strip__label{
  color:var(--aidc-text-secondary)
}

.slide-edit-strip__add{
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-muted)
}
.slide-edit-strip__add:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.slide-edit-notes__header{
  border-bottom-color:var(--aidc-border-subtle)
}
.slide-edit-notes__close:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

.slide-edit-notes__textarea{
  color:var(--aidc-text-secondary);
  scrollbar-color:var(--aidc-border-default) transparent
}
.slide-edit-notes__textarea::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

.slide-edit-container .mode-mini-zoom{
  background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary);
  box-shadow:var(--aidc-shadow-popover)
}

.mmz-label{
  color:var(--aidc-text-secondary)
}


/* Canvas Focus Mode visual adapter. Layout and mobile positioning stay legacy-owned. */

.focus-mode-topbar,
.focus-mode-bottombar{
  background:color-mix(in srgb,var(--aidc-bg-panel) 88%,transparent);
  border-color:var(--aidc-border-subtle);
  color:var(--aidc-text-primary)
}

.focus-back-btn,
.focus-topbar-btn,
.focus-nav-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

.focus-back-btn:hover,
.focus-topbar-btn:hover,
.focus-nav-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.focus-close-btn:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent);
  border-color:var(--aidc-action-danger-border);
  color:var(--aidc-red-500)
}

.focus-counter{
  color:var(--aidc-text-muted)
}

.focus-thumb{
  color:var(--aidc-text-muted)
}

.focus-thumb:hover{
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-secondary)
}

.focus-thumb.active{
  border-color:var(--aidc-action-primary-from);
  color:var(--aidc-text-primary)
}

.focus-mini-zoom{
  background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary);
  box-shadow:var(--aidc-shadow-popover)
}

html[data-page="canvas"] .list-fav-btn.active,
html[data-page="canvas"] .board-card__fav.active{
  color:var(--aidc-amber-500)
}



/* Canvas Brush Studio visual adapter. Brush swatches and texture previews remain tool-owned. */

.brush-studio-backdrop{
  background:var(--aidc-backdrop);
  color:var(--aidc-text-secondary)
}

.brush-studio-modal{
  background:var(--aidc-bg-modal);
  border-color:var(--aidc-border-default);
  box-shadow:var(--aidc-shadow-modal)
}

.bs-header,
.bs-sidebar{
  background:var(--aidc-bg-panel);
  border-color:var(--aidc-border-subtle)
}

.bs-title,
.bs-section-title{
  color:var(--aidc-text-primary)
}

.bs-sub-title,
.bs-brush-list-title,
.bs-testpad-info,
.bs-val,
.bs-val--mono,
.bs-grain-empty,
.bs-hint,
.bs-empty{
  color:var(--aidc-text-muted)
}

.bs-btn,
.bs-testpad-btn,
.bs-mode-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

.bs-btn:hover,
.bs-testpad-btn:hover,
.bs-mode-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.bs-btn--primary{
  background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  border-color:transparent;
  color:var(--aidc-text-inverse);
  box-shadow:0 0 16px var(--aidc-action-primary-glow)
}
.bs-btn--primary:hover{
  filter:brightness(1.08)
}

.bs-btn--accent{
  background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent);
  color:var(--aidc-violet-500)
}
.bs-btn--accent:hover{
  background:color-mix(in srgb,var(--aidc-violet-500) 22%,transparent);
  color:var(--aidc-text-primary)
}

.bs-brush-list,
.bs-nav,
.bs-section-content{
  scrollbar-color:var(--aidc-border-default) transparent
}
.bs-brush-list::-webkit-scrollbar-thumb,
.bs-nav::-webkit-scrollbar-thumb,
.bs-section-content::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}
.bs-section-content::-webkit-scrollbar-thumb:hover{
  background:var(--aidc-border-strong)
}

.bs-brush-list-item,
.bs-nav-item{
  color:var(--aidc-text-muted)
}
.bs-brush-list-item:hover,
.bs-nav-item:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}
.bs-brush-list-item.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
  color:var(--aidc-action-primary-from)
}
.bs-nav-item.is-active{
  background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent);
  color:var(--aidc-violet-500)
}

.bs-testpad{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-subtle)
}
.bs-testpad canvas{
  border-color:var(--aidc-border-default)
}
.bs-testpad-info b{
  color:var(--aidc-text-secondary)
}

.bs-row .bs-label{
  color:var(--aidc-text-secondary)
}

.bs-slider{
  background:var(--aidc-btn-secondary-bg-hover)
}
.bs-slider::-webkit-slider-thumb,
.bs-slider::-moz-range-thumb{
  background:var(--aidc-violet-500);
  border-color:color-mix(in srgb,var(--aidc-text-primary) 30%,transparent)
}
.bs-slider::-webkit-slider-runnable-track{
  background:linear-gradient(to right,color-mix(in srgb,var(--aidc-violet-500) 50%,transparent),color-mix(in srgb,var(--aidc-violet-500) 15%,transparent))
}

.bs-toggle-track{
  background:var(--aidc-btn-secondary-bg-hover)
}
.bs-toggle-thumb{
  background:var(--aidc-text-muted)
}
.bs-checkbox:checked + .bs-toggle-track{
  background:color-mix(in srgb,var(--aidc-violet-500) 40%,transparent)
}
.bs-checkbox:checked + .bs-toggle-track .bs-toggle-thumb{
  background:var(--aidc-violet-500)
}

.bs-select,
.bs-input{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}
.bs-select:focus,
.bs-input:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring)
}
.bs-select option{
  background:var(--aidc-bg-popover);
  color:var(--aidc-text-primary)
}
.bs-input::placeholder{
  color:var(--aidc-text-muted)
}

.bs-mode-btn.is-active{
  background:color-mix(in srgb,var(--aidc-violet-500) 16%,transparent);
  border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent);
  color:var(--aidc-violet-500)
}

.bs-brush-list-thumb{
  background:var(--aidc-bg-elevated)
}

.bs-toast{
  background:var(--aidc-violet-500);
  color:var(--aidc-text-inverse);
  box-shadow:var(--aidc-shadow-popover)
}



/* Canvas comments and popup chrome.
   Comment pin colors, emoji content and sticker artwork remain content-owned. */

html[data-page="canvas"] .comment-dialog{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary);
  box-shadow:var(--aidc-shadow-popover)
}

html[data-page="canvas"] .comment-dialog__header,
html[data-page="canvas"] .comment-dialog__input,
html[data-page="canvas"] .ep-tabs,
html[data-page="canvas"] .arrow-type-popup__sep{
  border-color:var(--aidc-border-subtle)
}

html[data-page="canvas"] .comment-dialog__resolve,
html[data-page="canvas"] .cd-bell-btn,
html[data-page="canvas"] .cd-more-btn,
html[data-page="canvas"] .shapes-menu__btn,
html[data-page="canvas"] .emoji-popup__btn,
html[data-page="canvas"] .ep-sticker-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

html[data-page="canvas"] .comment-dialog__resolve:hover,
html[data-page="canvas"] .cd-bell-btn:hover,
html[data-page="canvas"] .cd-more-btn:hover,
html[data-page="canvas"] .shapes-menu__btn:hover,
html[data-page="canvas"] .emoji-popup__btn:hover,
html[data-page="canvas"] .ep-sticker-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .comment-dialog__messages{
  scrollbar-color:var(--aidc-border-default) transparent
}

html[data-page="canvas"] .comment-dialog__messages::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

html[data-page="canvas"] .comment-dialog__messages::-webkit-scrollbar-thumb:hover{
  background:var(--aidc-border-strong)
}

html[data-page="canvas"] .comment-msg__author,
html[data-page="canvas"] .cd-resolve-label,
html[data-page="canvas"] .arrow-type-popup__title,
html[data-page="canvas"] .ep-sticker-section__title{
  color:var(--aidc-text-muted)
}

html[data-page="canvas"] .comment-msg__text,
html[data-page="canvas"] .arrow-type-popup__btn{
  color:var(--aidc-text-secondary)
}

html[data-page="canvas"] .comment-msg__time{
  color:var(--aidc-text-muted)
}

html[data-page="canvas"] .comment-dialog__input input,
html[data-page="canvas"] .ep-search{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .comment-dialog__input input:focus,
html[data-page="canvas"] .ep-search:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring);
  outline:none
}

html[data-page="canvas"] .comment-dialog__input button{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
  color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .comment-dialog__input button:hover{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 18%,transparent)
}

html[data-page="canvas"] .cd-resolve-slider{
  background:var(--aidc-btn-secondary-bg-hover)
}

html[data-page="canvas"] .cd-resolve-slider::after{
  background:var(--aidc-text-muted)
}

html[data-page="canvas"] .cd-resolve-cb:checked + .cd-resolve-slider{
  background:color-mix(in srgb,var(--aidc-green-500) 34%,transparent)
}

html[data-page="canvas"] .cd-resolve-cb:checked + .cd-resolve-slider::after{
  background:var(--aidc-green-500)
}

html[data-page="canvas"] .cd-bell-btn.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .arrow-type-popup__btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .arrow-type-popup__btn.is-selected{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .ep-tab{
  color:var(--aidc-text-muted)
}

html[data-page="canvas"] .ep-tab:hover{
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .ep-tab.is-active{
  color:var(--aidc-action-primary-from);
  border-bottom-color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .ep-search::placeholder{
  color:var(--aidc-text-muted)
}



/* Canvas multi-selection and grid settings chrome.
   Grid swatch colors and custom color picker stay functional/user-owned. */

html[data-page="canvas"] .multi-sel-more-menu,
html[data-page="canvas"] .grid-settings-popup{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary);
  box-shadow:var(--aidc-shadow-popover)
}

html[data-page="canvas"] .multi-sel-bar__menu-item,
html[data-page="canvas"] .multi-sel-more-menu__item,
html[data-page="canvas"] .gs-radio-row{
  color:var(--aidc-text-secondary)
}

html[data-page="canvas"] .multi-sel-bar__menu-item:hover,
html[data-page="canvas"] .multi-sel-more-menu__item:hover,
html[data-page="canvas"] .gs-radio-row:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .multi-sel-bar__menu-item.active,
html[data-page="canvas"] .multi-sel-bar__btn.is-active,
html[data-page="canvas"] .gs-radio-row.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 40%,transparent);
  color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .multi-sel-bar__menu-count,
html[data-page="canvas"] .gs-section-title,
html[data-page="canvas"] .gs-radio-icon,
html[data-page="canvas"] .gs-toggle-icon{
  color:var(--aidc-text-muted)
}

html[data-page="canvas"] .multi-sel-more-menu__item--danger{
  color:var(--aidc-red-500)
}

html[data-page="canvas"] .multi-sel-more-menu__item--danger:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent)
}

html[data-page="canvas"] .multi-sel-more-menu__sep,
html[data-page="canvas"] .gs-sep{
  background:var(--aidc-border-subtle)
}

html[data-page="canvas"] .gs-radio-label,
html[data-page="canvas"] .gs-toggle-label{
  color:var(--aidc-text-secondary)
}

html[data-page="canvas"] .gs-radio-dot{
  border-color:var(--aidc-border-strong)
}

html[data-page="canvas"] .gs-radio-row.is-active .gs-radio-dot{
  border-color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .gs-radio-row.is-active .gs-radio-dot::after{
  background:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .gs-toggle{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-default)
}

html[data-page="canvas"] .gs-toggle::after{
  background:var(--aidc-text-secondary)
}

html[data-page="canvas"] .gs-toggle.is-on{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 24%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 46%,transparent)
}

html[data-page="canvas"] .gs-toggle.is-on::after{
  background:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .gs-color-swatch:hover{
  border-color:var(--aidc-border-strong)
}

html[data-page="canvas"] .gs-color-swatch.is-active,
html[data-page="canvas"] .gs-color-custom.is-active{
  border-color:var(--aidc-text-primary)
}

/* Selection status is application chrome, not board content. The old inline
   pale-blue copy disappeared against light Canvas chrome; semantic tokens own
   both modes and deliberately override those legacy inline declarations. */
html[data-page="canvas"] .selection-hud,
html[data-page="canvas"] .selection-hud__info{
  background:var(--aidc-canvas-chrome-bg)!important;
  border-color:var(--aidc-canvas-chrome-border)!important;
  color:var(--aidc-canvas-control-text)!important;
  box-shadow:none!important
}

html[data-page="canvas"] .selection-hud .label{
  color:var(--aidc-text-muted)!important;
  -webkit-text-fill-color:var(--aidc-text-muted)!important;
  opacity:1!important
}

html[data-page="canvas"] #selection-label,
html[data-page="canvas"] .selection-hud__info :where(strong,b,[data-selection-label]){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important
}



/* Mobile/TG Canvas visual adapter.
   Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css.
   Every selector is route-scoped because this adapter is also re-imported through tg.css
   to guarantee late cascade ownership on the Canvas route only. */

@media (max-width:1024px){
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] html.tg .toolbar[aria-label]{
    background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent);
    border-color:var(--aidc-border-subtle);
    box-shadow:var(--aidc-shadow-popover)
  }
}

@media (max-width:767px){
  html[data-page="canvas"].canvas-dashboard-mode .site-header{
    border-bottom-color:var(--aidc-border-subtle)
  }

  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls,
  html[data-page="canvas"] .hud-panel,
  html[data-page="canvas"] .multi-sel-bar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover)
  }

  html[data-page="canvas"] .tool-btn,
  html[data-page="canvas"] .zoom-btn,
  html[data-page="canvas"] .multi-sel-bar__btn{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .tool-btn:hover,
  html[data-page="canvas"] .zoom-btn:hover,
  html[data-page="canvas"] .multi-sel-bar__btn:hover{
    background:var(--aidc-btn-secondary-bg-hover);
    border-color:var(--aidc-border-strong);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .tool-btn.active,
  html[data-page="canvas"] .tool-btn.is-active,
  html[data-page="canvas"] .zoom-btn.active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
    color:var(--aidc-action-primary-from)
  }

  html[data-page="canvas"] .shapes-menu,
  html[data-page="canvas"] .arrow-type-popup,
  html[data-page="canvas"] .emoji-popup,
  html[data-page="canvas"] .export-menu,
  html[data-page="canvas"] .comment-dialog,
  html[data-page="canvas"] .canvas-ctx-menu,
  html[data-page="canvas"] .frames-panel,
  html[data-page="canvas"] .connector-panel,
  html[data-page="canvas"] .dt-popover,
  html[data-page="canvas"] .canvas-format-bar,
  html[data-page="canvas"] .freehand-format-bar{
    background:var(--aidc-bg-popover);
    border-color:var(--aidc-border-default);
    box-shadow:var(--aidc-shadow-popover);
    color:var(--aidc-text-primary)
  }

  html[data-page="canvas"] .drawing-toolbar{
    background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important;
    border-color:var(--aidc-border-default)!important;
    box-shadow:var(--aidc-shadow-popover)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn{
    background:var(--aidc-btn-secondary-bg)!important;
    border-color:var(--aidc-border-default)!important;
    color:var(--aidc-text-secondary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{
    background:var(--aidc-btn-secondary-bg-hover)!important;
    color:var(--aidc-text-primary)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-btn.active,
  html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{
    background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important;
    color:var(--aidc-action-primary-from)!important;
    border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important
  }

  html[data-page="canvas"] .drawing-toolbar .dt-sep{
    background:var(--aidc-border-subtle)!important
  }

  html[data-page="canvas"] .board-topbar .pill{
    background:var(--aidc-btn-secondary-bg);
    border-color:var(--aidc-border-default);
    color:var(--aidc-text-secondary)
  }

  html[data-page="canvas"] .board-topbar .pill--board-title{
    color:var(--aidc-text-primary)
  }
}

/* canvas-format-bars.js injects dark literal colors at runtime. The format bar
   is chrome, not board content, so its controls must follow the app theme. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-color:var(--aidc-border-default)!important;
  background-color:var(--aidc-btn-secondary-bg)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important
}
/* Runtime frame bars also emit plain spans for W/H and preset metadata. */
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  opacity:1!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option,
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{
  background:var(--aidc-bg-popover)!important;
  color:var(--aidc-text-primary)!important
}
html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider),
html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){
  background:var(--aidc-border-default)!important;
  border-color:var(--aidc-border-default)!important
}

@media (pointer:coarse){
  html[data-page="canvas"] .toolbar[aria-label],
  html[data-page="canvas"].tg .toolbar[aria-label],
  html[data-page="canvas"] .board-topbar,
  html[data-page="canvas"] .zoom-controls{
    box-shadow:none
  }
}



/* Canvas board visual contract.
   The large legacy inline block in canvas/index.html still owns geometry and
   interaction behaviour. This adapter owns board/chrome visuals for BOTH modes.
   User content colors and custom board backgrounds remain user-owned. */

html[data-page="canvas"] body {
  background: var(--aidc-bg-page) !important;
  color: var(--aidc-text-primary) !important;
}

/* Preserve an explicitly selected --canvas-bg, but make the semantic Canvas
   token the fallback instead of the historical dark-only literal. */
html[data-page="canvas"] body .board-shell {
  background: var(--canvas-bg, var(--aidc-canvas-board-bg)) !important;
}

html[data-page="canvas"] body .board-topbar,
html[data-page="canvas"] body .toolbar[aria-label],
html[data-page="canvas"] body .hud-panel,
html[data-page="canvas"] body .zoom-controls,
html[data-page="canvas"] body .drawing-toolbar,
html[data-page="canvas"] body .multi-sel-bar {
  background: var(--aidc-canvas-chrome-bg) !important;
  border-color: var(--aidc-canvas-chrome-border) !important;
  color: var(--aidc-canvas-control-text) !important;
  box-shadow: var(--aidc-shadow-popover) !important;
}

html[data-page="canvas"] body .pill,
html[data-page="canvas"] body .tool-btn,
html[data-page="canvas"] body .zoom-btn,
html[data-page="canvas"] body .fmt-btn,
html[data-page="canvas"] body .anchor-menu__btn,
html[data-page="canvas"] body .drawing-toolbar .dt-btn,
html[data-page="canvas"] body .multi-sel-bar__btn {
  background: var(--aidc-canvas-control-bg) !important;
  border-color: var(--aidc-canvas-chrome-border) !important;
  color: var(--aidc-canvas-control-text) !important;
}

html[data-page="canvas"] body .pill:hover,
html[data-page="canvas"] body .tool-btn:hover,
html[data-page="canvas"] body .zoom-btn:hover,
html[data-page="canvas"] body .fmt-btn:hover,
html[data-page="canvas"] body .anchor-menu__btn:hover,
html[data-page="canvas"] body .drawing-toolbar .dt-btn:hover,
html[data-page="canvas"] body .multi-sel-bar__btn:hover {
  background: var(--aidc-canvas-control-hover) !important;
  border-color: var(--aidc-border-strong) !important;
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body .tool-btn.active,
html[data-page="canvas"] body .tool-btn.is-active,
html[data-page="canvas"] body .zoom-btn.active,
html[data-page="canvas"] body .zoom-btn.is-active,
html[data-page="canvas"] body .drawing-toolbar .dt-btn.active,
html[data-page="canvas"] body .drawing-toolbar .dt-btn.is-active,
html[data-page="canvas"] body .multi-sel-bar__btn.is-active {
  background: var(--aidc-canvas-control-active-bg) !important;
  border-color: var(--aidc-canvas-control-active-border) !important;
  color: var(--aidc-canvas-control-active-text) !important;
  box-shadow: 0 0 0 3px var(--aidc-action-focus-ring) !important;
}

html[data-page="canvas"] body .tool-sep,
html[data-page="canvas"] body .zoom-divider,
html[data-page="canvas"] body .drawing-toolbar .dt-sep {
  background: var(--aidc-border-subtle) !important;
}

html[data-page="canvas"] body .canvas-tooltip,
html[data-page="canvas"] body .anchor-menu,
html[data-page="canvas"] body .shapes-menu,
html[data-page="canvas"] body .arrow-type-popup,
html[data-page="canvas"] body .emoji-popup,
html[data-page="canvas"] body .export-menu,
html[data-page="canvas"] body .comment-dialog,
html[data-page="canvas"] body .canvas-ctx-menu,
html[data-page="canvas"] body .frames-panel,
html[data-page="canvas"] body .connector-panel,
html[data-page="canvas"] body .dt-popover,
html[data-page="canvas"] body .canvas-format-bar,
html[data-page="canvas"] body .freehand-format-bar {
  background: var(--aidc-bg-popover) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: var(--aidc-shadow-popover) !important;
}

html[data-page="canvas"] body select,
html[data-page="canvas"] body .fmt-select,
html[data-page="canvas"] body .conn-select {
  background-color: var(--aidc-bg-elevated) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body select:hover,
html[data-page="canvas"] body select:focus,
html[data-page="canvas"] body .fmt-select:hover,
html[data-page="canvas"] body .fmt-select:focus,
html[data-page="canvas"] body .conn-select:hover,
html[data-page="canvas"] body .conn-select:focus {
  background-color: var(--aidc-btn-secondary-bg-hover) !important;
  border-color: var(--aidc-border-strong) !important;
}

html[data-page="canvas"] body select option,
html[data-page="canvas"] body .fmt-select option,
html[data-page="canvas"] body .conn-select option {
  background: var(--aidc-bg-popover) !important;
  color: var(--aidc-text-primary) !important;
}

/* Dashboard card footer was a dark-only gradient in the legacy dashboard CSS. */
html[data-page="canvas"] body .board-card__info,
html[data-page="canvas"] body .template-card__info {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--aidc-bg-card) 4%, transparent),
    var(--aidc-bg-card) 34%
  ) !important;
  border-top-color: var(--aidc-border-subtle) !important;
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body .board-card__title,
html[data-page="canvas"] body .template-card__title,
html[data-page="canvas"] body .board-card__name,
html[data-page="canvas"] body .template-card__name {
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body .board-card__meta,
html[data-page="canvas"] body .template-card__meta {
  color: var(--aidc-text-muted) !important;
}

/* "Мои шаблоны" runtime modal is currently created by
   canvas-dashboard-enhancements.js with dark inline/injected visuals.
   Keep its behaviour in JS and move visual ownership here. */
html[data-page="canvas"] body .aidc-tpl-modal {
  background: var(--aidc-backdrop) !important;
}

html[data-page="canvas"] body .aidc-tpl-modal__panel {
  background: var(--aidc-bg-modal) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: var(--aidc-shadow-modal) !important;
}

html[data-page="canvas"] body .aidc-tpl-modal__title,
html[data-page="canvas"] body .aidc-preview-card__name {
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body .aidc-tpl-modal__close,
html[data-page="canvas"] body .aidc-preview-card__menu {
  background: var(--aidc-btn-secondary-bg) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-secondary) !important;
}

html[data-page="canvas"] body .aidc-tpl-modal__close:hover,
html[data-page="canvas"] body .aidc-preview-card__menu:hover {
  background: var(--aidc-btn-secondary-bg-hover) !important;
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body .aidc-preview-card {
  background: var(--aidc-bg-card) !important;
  border-color: var(--aidc-border-subtle) !important;
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body .aidc-preview-card:hover {
  border-color: var(--aidc-border-strong) !important;
}

html[data-page="canvas"] body .aidc-preview-card__visual {
  background: var(--aidc-bg-elevated) !important;
  border-color: var(--aidc-border-subtle) !important;
}

html[data-page="canvas"] body .aidc-preview-card__meta,
html[data-page="canvas"] body .aidc-tpl-modal__empty {
  color: var(--aidc-text-muted) !important;
}

html[data-page="canvas"] body .aidc-tpl-context {
  background: var(--aidc-bg-popover) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: var(--aidc-shadow-popover) !important;
}

html[data-page="canvas"] body .aidc-tpl-context button {
  background: transparent !important;
  color: var(--aidc-text-secondary) !important;
}

html[data-page="canvas"] body .aidc-tpl-context button:hover {
  background: var(--aidc-btn-secondary-bg-hover) !important;
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body .aidc-tpl-context button[data-action="delete"] {
  color: var(--aidc-red-500) !important;
}

/* Mini-map is application chrome, not document content. Keep the canvas itself
   untouched while its shell, close control and viewport indicator follow the
   shared light/dark contract. */
html[data-page="canvas"] body .canvas-minimap {
  background: var(--aidc-bg-popover) !important;
  border: 1px solid var(--aidc-border-default) !important;
  box-shadow: var(--aidc-shadow-popover) !important;
}

html[data-page="canvas"] body .minimap-toggle-btn {
  background: var(--aidc-btn-secondary-bg) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-secondary) !important;
}

html[data-page="canvas"] body .minimap-toggle-btn:hover {
  background: var(--aidc-btn-secondary-bg-hover) !important;
  border-color: var(--aidc-border-strong) !important;
  color: var(--aidc-text-primary) !important;
}

html[data-page="canvas"] body .minimap-viewport {
  border-color: var(--aidc-canvas-control-active-border) !important;
  background: var(--aidc-canvas-control-active-bg) !important;
}

html[data-page="canvas"] body .grid-settings-popup :where(.gs-section-title,.gs-radio-label,.gs-toggle-label) {
  color: var(--aidc-text-secondary) !important;
}

html[data-page="canvas"] body .grid-settings-popup .gs-section-title {
  color: var(--aidc-text-muted) !important;
}

/* Canvas dashboard and board still contain old !important pink CTA rules in
   the inline legacy sheet. Higher route specificity keeps them within the new
   application button contract without touching canvas behaviour. */
html[data-aidc-color-mode="light"][data-page="canvas"] body :where(.btn-primary,.pill-btn.primary) {
  background: var(--aidc-btn-primary-bg) !important;
  border: 1px solid var(--aidc-btn-primary-border) !important;
  color: var(--aidc-btn-primary-text) !important;
  box-shadow: var(--aidc-btn-primary-shadow) !important;
  filter: none !important;
}

html[data-aidc-color-mode="light"][data-page="canvas"] body :where(.btn-primary,.pill-btn.primary):hover:not(:disabled) {
  background: var(--aidc-btn-primary-bg-hover) !important;
  border-color: var(--aidc-btn-primary-border-hover) !important;
  color: var(--aidc-btn-primary-text) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Canvas reuses the TG header/burger component. Geometry and palette come from
   the same canonical component as every WebApp route. */


/* AI Design Space — canonical WebApp burger-menu contract.
   This component owns BOTH geometry and semantic colors for the header menu.
   Route CSS and light/dark adapters must not resize it.

   Geometry is intentionally taken from the approved compact dark-theme WebApp
   menu. Theme switching changes palette only, never width, row height, typography
   or icon scale.

   IMPORTANT: geometry is scoped to .tg-dropdown__menu itself instead of relying
   on a .tg-dropdown--header ancestor. Some WebApp routes temporarily position or
   portal the menu, and the menu must keep exactly the same scale after that move. */

:root {
  --aidc-tg-menu-width: 176px;
  --aidc-tg-menu-max-width: calc(100vw - 20px);
  --aidc-tg-menu-padding: 4px;
  --aidc-tg-menu-radius: 10px;
  --aidc-tg-menu-row-min-height: 32px;
  --aidc-tg-menu-row-padding-y: 5px;
  --aidc-tg-menu-row-padding-x: 7px;
  --aidc-tg-menu-row-gap: 7px;
  --aidc-tg-menu-row-margin-y: 2px;
  --aidc-tg-menu-row-radius: 9px;
  --aidc-tg-menu-font-size: 12px;
  --aidc-tg-menu-line-height: 1.25;
  --aidc-tg-menu-icon-box: 18px;
  --aidc-tg-menu-icon-size: 18px;
  --aidc-tg-menu-inline-icon-size: 16px;
  --aidc-tg-menu-section-font-size: 10px;
}

/* Open burger is global application chrome and must sit above route-local fixed
   surfaces (for example Projects details at z=1500/1600). Raise the whole header
   host only while the menu is open, so normal dialogs/overlays keep their usual
   stacking order when the burger is closed. */
html.tg-menu-open body.aidc-tg #tg-header-root,
body.aidc-tg.tg-menu-open #tg-header-root {
  position: sticky !important;
  top: 0 !important;
  z-index: 200020 !important;
  overflow: visible !important;
}

html.tg-menu-open body.aidc-tg #tg-header-root .tg-topbar,
body.aidc-tg.tg-menu-open #tg-header-root .tg-topbar {
  z-index: 200021 !important;
  overflow: visible !important;
}

html.tg-menu-open body.aidc-tg #tg-header-root .tg-dropdown,
body.aidc-tg.tg-menu-open #tg-header-root .tg-dropdown {
  position: relative !important;
  z-index: 200022 !important;
}

html.tg-menu-open body.aidc-tg #tg-header-root .tg-dropdown__menu,
body.aidc-tg.tg-menu-open #tg-header-root .tg-dropdown__menu {
  z-index: 200023 !important;
}

/* Stable menu shell — same dimensions in light and dark themes, including when
   the menu is positioned fixed or portalled outside the header container. */
.tg-dropdown__menu {
  box-sizing: border-box !important;
  width: min(var(--aidc-tg-menu-width), var(--aidc-tg-menu-max-width)) !important;
  min-width: 0 !important;
  max-width: var(--aidc-tg-menu-max-width) !important;
  max-height: calc(100dvh - 88px) !important;
  padding: var(--aidc-tg-menu-padding) !important;
  border-radius: var(--aidc-tg-menu-radius) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--aidc-bg-popover) !important;
  border: 1px solid var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: var(--aidc-shadow-popover) !important;
  opacity: 1 !important;
  font-family: var(--aidc-font-family-ui) !important;
  font-size: var(--aidc-tg-menu-font-size) !important;
}

/* Stable row geometry — no theme-specific grid or enlarged light rows. */
.tg-dropdown__menu .tg-top-btn {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--aidc-tg-menu-row-min-height) !important;
  height: auto !important;
  padding: var(--aidc-tg-menu-row-padding-y) var(--aidc-tg-menu-row-padding-x) !important;
  margin: var(--aidc-tg-menu-row-margin-y) 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--aidc-tg-menu-row-gap) !important;
  border-radius: var(--aidc-tg-menu-row-radius) !important;
  text-align: left !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--aidc-text-secondary) !important;
  opacity: 1 !important;
  transform: none !important;
  font-size: var(--aidc-tg-menu-font-size) !important;
  line-height: var(--aidc-tg-menu-line-height) !important;
}

.tg-dropdown__menu .tg-top-btn .tg-svg,
.tg-dropdown__menu .tg-top-btn .tg-top-btn__inline-icon {
  box-sizing: border-box !important;
  flex: 0 0 var(--aidc-tg-menu-icon-box) !important;
  width: var(--aidc-tg-menu-icon-box) !important;
  min-width: var(--aidc-tg-menu-icon-box) !important;
  max-width: var(--aidc-tg-menu-icon-box) !important;
  height: var(--aidc-tg-menu-icon-box) !important;
  min-height: var(--aidc-tg-menu-icon-box) !important;
  max-height: var(--aidc-tg-menu-icon-box) !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  opacity: 1 !important;
}

.tg-dropdown__menu .tg-top-btn .tg-svg svg {
  width: var(--aidc-tg-menu-icon-size) !important;
  height: var(--aidc-tg-menu-icon-size) !important;
  min-width: var(--aidc-tg-menu-icon-size) !important;
  max-width: var(--aidc-tg-menu-icon-size) !important;
  min-height: var(--aidc-tg-menu-icon-size) !important;
  max-height: var(--aidc-tg-menu-icon-size) !important;
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}

.tg-dropdown__menu .tg-top-btn .tg-top-btn__inline-icon svg,
.tg-dropdown__menu .tg-top-btn > svg {
  width: var(--aidc-tg-menu-inline-icon-size) !important;
  height: var(--aidc-tg-menu-inline-icon-size) !important;
  min-width: var(--aidc-tg-menu-inline-icon-size) !important;
  max-width: var(--aidc-tg-menu-inline-icon-size) !important;
  min-height: var(--aidc-tg-menu-inline-icon-size) !important;
  max-height: var(--aidc-tg-menu-inline-icon-size) !important;
  display: block !important;
  flex: 0 0 var(--aidc-tg-menu-inline-icon-size) !important;
  color: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}

.tg-dropdown__menu .tg-top-btn > span:last-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: var(--aidc-tg-menu-font-size) !important;
  line-height: var(--aidc-tg-menu-line-height) !important;
  letter-spacing: .02em !important;
  font-weight: 400 !important;
  text-align: left !important;
  color: currentColor !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

.tg-dropdown__menu .tg-dropdown__divider {
  box-sizing: border-box !important;
  height: 1px !important;
  margin: 6px 4px !important;
  border: 0 !important;
  border-top: 1px solid var(--aidc-border-subtle) !important;
  background: transparent !important;
}

.tg-dropdown__menu .tg-dropdown__section-label {
  box-sizing: border-box !important;
  padding: 3px 7px 4px !important;
  margin: 0 !important;
  font-size: var(--aidc-tg-menu-section-font-size) !important;
  line-height: 1.25 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  color: var(--aidc-text-muted) !important;
  opacity: 1 !important;
}

.tg-dropdown__menu .tg-top-btn:hover,
.tg-dropdown__menu .tg-top-btn:focus-visible,
.tg-dropdown__menu .tg-top-btn:active {
  background: var(--aidc-btn-secondary-bg-hover) !important;
  border-color: var(--aidc-border-subtle) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

.tg-dropdown__menu .tg-top-btn.is-active {
  background: var(--aidc-control-selected-bg) !important;
  border-color: var(--aidc-control-selected-border) !important;
  color: var(--aidc-action-primary-from) !important;
  box-shadow: none !important;
}

/* Cascade hardening. A previously deployed light-only adapter used a more
   specific selector and could survive browser HTTP cache after an app update.
   These rules are mode-agnostic (the attribute may be light OR dark) and repeat
   only the SAME canonical geometry tokens, so stale theme CSS cannot enlarge
   rows, icons or typography again. */
html[data-aidc-color-mode] body .tg-dropdown__menu {
  width: min(var(--aidc-tg-menu-width), var(--aidc-tg-menu-max-width)) !important;
  min-width: 0 !important;
  max-width: var(--aidc-tg-menu-max-width) !important;
  padding: var(--aidc-tg-menu-padding) !important;
  border-radius: var(--aidc-tg-menu-radius) !important;
  font-size: var(--aidc-tg-menu-font-size) !important;
}
html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn {
  min-height: var(--aidc-tg-menu-row-min-height) !important;
  height: auto !important;
  padding: var(--aidc-tg-menu-row-padding-y) var(--aidc-tg-menu-row-padding-x) !important;
  margin: var(--aidc-tg-menu-row-margin-y) 0 !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: var(--aidc-tg-menu-row-gap) !important;
  font-size: var(--aidc-tg-menu-font-size) !important;
  line-height: var(--aidc-tg-menu-line-height) !important;
  transform: none !important;
}
html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn .tg-svg,
html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn .tg-top-btn__inline-icon {
  flex-basis: var(--aidc-tg-menu-icon-box) !important;
  width: var(--aidc-tg-menu-icon-box) !important;
  min-width: var(--aidc-tg-menu-icon-box) !important;
  max-width: var(--aidc-tg-menu-icon-box) !important;
  height: var(--aidc-tg-menu-icon-box) !important;
  min-height: var(--aidc-tg-menu-icon-box) !important;
  max-height: var(--aidc-tg-menu-icon-box) !important;
}
html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn .tg-svg svg {
  width: var(--aidc-tg-menu-icon-size) !important;
  min-width: var(--aidc-tg-menu-icon-size) !important;
  max-width: var(--aidc-tg-menu-icon-size) !important;
  height: var(--aidc-tg-menu-icon-size) !important;
  min-height: var(--aidc-tg-menu-icon-size) !important;
  max-height: var(--aidc-tg-menu-icon-size) !important;
}
html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn .tg-top-btn__inline-icon svg,
html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn > svg {
  width: var(--aidc-tg-menu-inline-icon-size) !important;
  min-width: var(--aidc-tg-menu-inline-icon-size) !important;
  max-width: var(--aidc-tg-menu-inline-icon-size) !important;
  height: var(--aidc-tg-menu-inline-icon-size) !important;
  min-height: var(--aidc-tg-menu-inline-icon-size) !important;
  max-height: var(--aidc-tg-menu-inline-icon-size) !important;
}
html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn > span:last-child {
  font-size: var(--aidc-tg-menu-font-size) !important;
  line-height: var(--aidc-tg-menu-line-height) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Theme switching is palette-only. These selectors deliberately repeat no
   geometry values, which prevents light mode from changing menu scale. */
html[data-aidc-color-mode="light"] .tg-dropdown__menu {
  background: var(--aidc-bg-popover) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
}

html[data-aidc-color-mode="light"] .tg-dropdown__menu .tg-top-btn {
  color: var(--aidc-text-secondary) !important;
}

html[data-aidc-color-mode="light"] .tg-dropdown__menu .tg-top-btn:hover,
html[data-aidc-color-mode="light"] .tg-dropdown__menu .tg-top-btn:focus-visible {
  color: var(--aidc-text-primary) !important;
}

html[data-aidc-color-mode="light"] .tg-dropdown__menu .tg-top-btn.is-active {
  color: var(--aidc-action-primary-to) !important;
}

/* Selected-object bars, context menus and runtime popovers. */


/* Canonical Canvas object-control contract.
   Owns geometry and semantic chrome for every selection/action surface.
   Board content colors are intentionally excluded. */
html[data-page="canvas"]{
  --aidc-canvas-control-h:38px;
  --aidc-canvas-control-radius:10px;
  --aidc-canvas-menu-row-h:40px;
  --aidc-canvas-control-gap:4px;
  --aidc-canvas-icon-size:18px;
}

/* All object format bars use one control height: frame, media, text, shape,
   emoji, freehand, connector, callout, multi-selection and mind-map. */
html[data-page="canvas"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .connector-panel,
  .dt-popover,
  .multi-sel-bar,
  .drawing-toolbar
){
  color:var(--aidc-text-primary)!important;
  border-color:var(--aidc-border-default)!important;
  background:var(--aidc-bg-popover)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
}

html[data-page="canvas"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .connector-panel,
  .dt-popover,
  .multi-sel-bar,
  .drawing-toolbar
) :is(button:not(.fmt-fs-arrow),select,input[type="text"],input[type="number"]){
  box-sizing:border-box!important;
  height:var(--aidc-canvas-control-h)!important;
  min-height:var(--aidc-canvas-control-h)!important;
  border-radius:var(--aidc-canvas-control-radius)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  background-color:var(--aidc-btn-secondary-bg)!important;
  opacity:1!important;
  line-height:1!important;
}

/* Icon buttons stay square; text/select controls may remain wider. */
html[data-page="canvas"] :is(
  .fmt-btn,
  .mm-fb-btn,
  .dt-btn,
  .multi-sel-bar__btn,
  .ffb-lock-ar
){
  min-width:var(--aidc-canvas-control-h)!important;
  min-height:var(--aidc-canvas-control-h)!important;
}
html[data-page="canvas"] :is(.ffb-lock-ar,#ffb-fill-btn){
  width:var(--aidc-canvas-control-h)!important;
  height:var(--aidc-canvas-control-h)!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html[data-page="canvas"] :is(.ffb-dim-input,.fmt-select){
  height:var(--aidc-canvas-control-h)!important;
  min-height:var(--aidc-canvas-control-h)!important;
}
html[data-page="canvas"] .fmt-group,
html[data-page="canvas"] .mm-fb-group{
  min-height:var(--aidc-canvas-control-h)!important;
  align-items:center!important;
  gap:var(--aidc-canvas-control-gap)!important;
}
html[data-page="canvas"] :is(.fmt-sep,.fmt-divider,.dt-sep){
  background:var(--aidc-border-default)!important;
  border-color:var(--aidc-border-default)!important;
}

/* Runtime SVG helpers encode stroke/fill intent. Non-filled toolbar icons are
   always outline icons; explicitly filled helpers retain their fill semantics. */
html[data-page="canvas"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .connector-panel,
  .dt-popover,
  .multi-sel-bar,
  .drawing-toolbar
) svg{
  width:var(--aidc-canvas-icon-size)!important;
  height:var(--aidc-canvas-icon-size)!important;
  color:var(--aidc-text-secondary)!important;
  opacity:1!important;
}
html[data-page="canvas"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .connector-panel,
  .dt-popover,
  .multi-sel-bar,
  .drawing-toolbar
) svg:not(.svg--filled){
  fill:none!important;
  stroke:currentColor!important;
}
html[data-page="canvas"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .connector-panel,
  .dt-popover,
  .multi-sel-bar,
  .drawing-toolbar
) svg:not(.svg--filled) :is(path,rect,circle,polygon,polyline,line,ellipse){
  fill:none!important;
  stroke:currentColor!important;
}
html[data-page="canvas"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar
) svg.svg--filled{
  fill:currentColor!important;
  stroke:none!important;
}
html[data-page="canvas"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar
) svg.svg--filled :is(path,rect,circle,polygon,polyline,ellipse){
  fill:currentColor!important;
  stroke:none!important;
}
html[data-page="canvas"] #ffb-lock-ar svg,
html[data-page="canvas"] #ffb-lock-ar svg :is(path,rect){
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}

/* Color controls keep the selected color but no longer read as a solid black
   icon. The real color is shown in a small inset sample inside an outline. */
html[data-page="canvas"] :is(#ffb-fill-sw,#mfb-fill-swatch,[data-swatch="fill"],.fmt-color-swatch:not(.fmt-color-swatch--stroke)){
  box-sizing:border-box!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  margin:0!important;
  padding:4px!important;
  border:2px solid var(--aidc-text-secondary)!important;
  border-radius:6px!important;
  background-clip:content-box!important;
  box-shadow:none!important;
}

/* Text font-size is one 38px control. The two arrows are nested controls and
   must split that height instead of inheriting 38px each (which doubled the
   toolbar height on desktop). */
html[data-page="canvas"] .fmt-fontsize{
  box-sizing:border-box!important;
  height:var(--aidc-canvas-control-h)!important;
  min-height:var(--aidc-canvas-control-h)!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
}
html[data-page="canvas"] .fmt-fs-val{
  height:var(--aidc-canvas-control-h)!important;
  min-height:var(--aidc-canvas-control-h)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
html[data-page="canvas"] .fmt-fs-arrows{
  box-sizing:border-box!important;
  width:20px!important;
  height:var(--aidc-canvas-control-h)!important;
  min-height:var(--aidc-canvas-control-h)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:6px!important;
}
html[data-page="canvas"] .fmt-fs-arrow{
  box-sizing:border-box!important;
  width:20px!important;
  min-width:20px!important;
  height:calc(var(--aidc-canvas-control-h) * .5)!important;
  min-height:0!important;
  max-height:calc(var(--aidc-canvas-control-h) * .5)!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:var(--aidc-btn-secondary-bg)!important;
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  line-height:1!important;
  flex:1 1 50%!important;
}
html[data-page="canvas"] .fmt-fs-arrow--up{border-radius:6px 6px 0 0!important}
html[data-page="canvas"] .fmt-fs-arrow--dn{border-radius:0 0 6px 6px!important}
html[data-page="canvas"] .fmt-fs-arrow:hover,
html[data-page="canvas"] .fmt-fs-arrow:focus-visible{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  color:var(--aidc-text-primary)!important;
  outline:none!important;
}
html[data-page="canvas"] .fmt-fs-arrow svg{
  width:10px!important;
  height:6px!important;
  min-width:10px!important;
  min-height:6px!important;
}

/* Keep every object bar centered around the same baseline. */
html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar){
  box-sizing:border-box!important;
  align-items:center!important;
  gap:var(--aidc-canvas-control-gap)!important;
  padding:5px 8px!important;
  min-height:calc(var(--aidc-canvas-control-h) + 10px)!important;
}

/* Plain labels W/H, dimensions and metadata must remain readable. */
html[data-page="canvas"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .connector-panel,
  .dt-popover
) :is(span,label,.fmt-label,.ffb-dim-label,.ffb-dim-x){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important;
}

/* Frame preset popup is appended to body with inline dark styles. */
html[data-page="canvas"] #ffb-preset-list{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
}
html[data-page="canvas"] #ffb-preset-list [data-value]{
  box-sizing:border-box!important;
  min-height:var(--aidc-canvas-menu-row-h)!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  border-radius:8px!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
}

/* Shared text/mind-map submenus and object popovers. */
html[data-page="canvas"] :is(
  .te-submenu,
  .mm-submenu,
  .fmt-leader-line-picker,
  .frame-preset-menu,
  .remove-bg-panel,
  .anchor-menu,
  .shapes-menu,
  .arrow-type-popup,
  .emoji-popup,
  .export-menu
){
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
}
html[data-page="canvas"] :is(.te-submenu-item,.mm-submenu button,.frame-preset-menu button,.remove-bg-panel button,.anchor-menu__btn){
  box-sizing:border-box!important;
  min-height:var(--aidc-canvas-menu-row-h)!important;
  border-radius:8px!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
}

/* Canonical long-press / three-dot object menu. The legacy inline stylesheet
   hardcodes dark text; this layer owns both themes and disabled visibility. */
html[data-page="canvas"] .canvas-ctx-menu{
  background:var(--aidc-bg-popover)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
  padding:6px!important;
}
html[data-page="canvas"] .canvas-ctx-menu button{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:var(--aidc-canvas-menu-row-h)!important;
  height:var(--aidc-canvas-menu-row-h)!important;
  padding:0 12px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  font-size:14px!important;
  line-height:1.15!important;
  opacity:1!important;
}
html[data-page="canvas"] .canvas-ctx-menu button:hover,
html[data-page="canvas"] .canvas-ctx-menu button:focus-visible{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  outline:none!important;
}
html[data-page="canvas"] .canvas-ctx-menu button:disabled,
html[data-page="canvas"] .canvas-ctx-menu button[aria-disabled="true"]{
  color:var(--aidc-text-muted)!important;
  -webkit-text-fill-color:var(--aidc-text-muted)!important;
  opacity:.62!important;
}
html[data-page="canvas"] .canvas-ctx-menu button svg{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  color:var(--aidc-text-secondary)!important;
  fill:none!important;
  stroke:currentColor!important;
  opacity:1!important;
}
html[data-page="canvas"] .canvas-ctx-menu button svg :is(path,rect,circle,polygon,polyline,line,ellipse){
  fill:none!important;
  stroke:currentColor!important;
}
html[data-page="canvas"] .canvas-ctx-menu .ctx-shortcut{
  margin-left:auto!important;
  color:var(--aidc-text-muted)!important;
  -webkit-text-fill-color:var(--aidc-text-muted)!important;
  font-size:12px!important;
  opacity:1!important;
}
html[data-page="canvas"] .canvas-ctx-menu .canvas-ctx-danger{
  color:var(--aidc-red-500)!important;
  -webkit-text-fill-color:var(--aidc-red-500)!important;
}
html[data-page="canvas"] .canvas-ctx-menu .canvas-ctx-danger svg{
  color:var(--aidc-red-500)!important;
}
html[data-page="canvas"] .canvas-ctx-sep{
  background:var(--aidc-border-subtle)!important;
}

/* Light mode: neutral controls are never solid black; active controls use the
   selection token rather than a dark legacy fill. */
html[data-page="canvas"][data-aidc-color-mode="light"] :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .connector-panel,
  .dt-popover,
  .multi-sel-bar,
  .drawing-toolbar
) :is(button:not(.fmt-fs-arrow),select,input[type="text"],input[type="number"]){
  background-color:var(--aidc-btn-secondary-bg)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"][data-aidc-color-mode="light"] :is(
  .fmt-btn.is-active,
  .mm-fb-btn.is-active,
  .dt-btn.active,
  .dt-btn.is-active,
  .ffb-lock-ar.is-active
){
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  -webkit-text-fill-color:var(--aidc-action-primary-to)!important;
  box-shadow:none!important;
}

/* Final standard for every object-specific control generated by canvas-format-bars.
   Nested font-size arrows are explicitly excluded: together they form one control. */
html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) > :is(button:not(.fmt-fs-arrow),select,input),
html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) :is(
  button:not(.fmt-fs-arrow),
  [role="button"],
  .fmt-btn,
  .fmt-font-btn,
  .fmt-select,
  .fmt-input,
  .ffb-lock-ar,
  .ffb-dim-input,
  #ffb-fill-btn,
  [data-swatch],
  [data-action][type="button"]
){
  box-sizing:border-box!important;
  height:var(--aidc-canvas-control-h)!important;
  min-height:var(--aidc-canvas-control-h)!important;
  border-radius:var(--aidc-canvas-control-radius)!important;
}
html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) :is(
  .fmt-btn,
  .ffb-lock-ar,
  #ffb-fill-btn,
  [data-swatch],
  button[aria-label]:not(.fmt-font-btn):not(.fmt-fs-arrow)
){
  width:var(--aidc-canvas-control-h)!important;
  min-width:var(--aidc-canvas-control-h)!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) :is(.fmt-swatch,[data-swatch])::before,
html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) :is(.fmt-swatch,[data-swatch])::after{
  max-width:24px!important;
  max-height:24px!important;
}

/* Every object dropdown/menu uses the same row geometry. */
html[data-page="canvas"] :is(
  .canvas-ctx-menu,
  .export-menu,
  .anchor-menu,
  .te-submenu,
  .mm-submenu,
  .fmt-leader-line-picker,
  .frame-preset-menu,
  .remove-bg-panel,
  .arrow-type-popup,
  .shapes-menu,
  #ffb-preset-list
) :is(button,[role="menuitem"],[data-value]){
  box-sizing:border-box!important;
  min-height:var(--aidc-canvas-menu-row-h)!important;
  height:var(--aidc-canvas-menu-row-h)!important;
  padding-block:0!important;
  display:flex!important;
  align-items:center!important;
}

/* Final light-theme floor for context/dropdown text. This intentionally has
   higher specificity than the dark inline rules in canvas/index.html. */
html[data-page="canvas"][data-aidc-color-mode="light"] body :is(
  .canvas-ctx-menu,
  .export-menu,
  .anchor-menu,
  .te-submenu,
  .mm-submenu,
  .fmt-leader-line-picker,
  .frame-preset-menu,
  .remove-bg-panel,
  .arrow-type-popup,
  .shapes-menu,
  #ffb-preset-list
){
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"][data-aidc-color-mode="light"] body :is(
  .canvas-ctx-menu,
  .export-menu,
  .anchor-menu,
  .te-submenu,
  .mm-submenu,
  .fmt-leader-line-picker,
  .frame-preset-menu,
  .remove-bg-panel,
  .arrow-type-popup,
  .shapes-menu,
  #ffb-preset-list
) :is(button,[role="menuitem"],[data-value]){
  background:transparent!important;
  border-color:transparent!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important;
}
html[data-page="canvas"][data-aidc-color-mode="light"] body :is(
  .canvas-ctx-menu,
  .export-menu,
  .anchor-menu,
  .te-submenu,
  .mm-submenu,
  .fmt-leader-line-picker,
  .frame-preset-menu,
  .remove-bg-panel,
  .arrow-type-popup,
  .shapes-menu,
  #ffb-preset-list
) :is(button,[role="menuitem"],[data-value]):is(:hover,:focus-visible){
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-default)!important;
}
html[data-page="canvas"][data-aidc-color-mode="light"] body .canvas-ctx-menu :is(span,strong,.ctx-shortcut){
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
  opacity:1!important;
}
html[data-page="canvas"][data-aidc-color-mode="light"] body .canvas-ctx-menu button:disabled{
  color:var(--aidc-text-muted)!important;
  -webkit-text-fill-color:var(--aidc-text-muted)!important;
  opacity:.62!important;
}
html[data-page="canvas"][data-aidc-color-mode="light"] body .canvas-ctx-menu .canvas-ctx-danger{
  color:var(--aidc-red-500)!important;
  -webkit-text-fill-color:var(--aidc-red-500)!important;
}

@media (max-width:767px){
  html[data-page="canvas"]{
    --aidc-canvas-control-h:42px;
    --aidc-canvas-menu-row-h:44px;
    --aidc-canvas-control-gap:5px;
    --aidc-canvas-icon-size:20px;
  }
  html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar){
    max-width:calc(100vw - 16px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    gap:var(--aidc-canvas-control-gap)!important;
  }
  html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar)::-webkit-scrollbar{
    display:none!important;
  }
  html[data-page="canvas"] .canvas-ctx-menu{
    min-width:min(320px,calc(100vw - 24px))!important;
  }
  html[data-page="canvas"] .canvas-ctx-menu button{
    font-size:14px!important;
    gap:10px!important;
  }
}

/* Runtime popups that still inject dark inline styles. */


/* Canvas popover finalization.
   Runtime modules still create several menus with dark inline styles. This is
   the last Canvas visual ownership layer and intentionally wins over those
   literals without changing document/content colors. */

html[data-page="canvas"]{
  --aidc-canvas-popup-row-h:40px;
  --aidc-canvas-popup-radius:12px;
}

/* One semantic surface for every Canvas application menu/popover. */
html[data-page="canvas"] body :is(
  #ffb-color-popup,
  #ffb-preset-list,
  #mm-template-popup,
  .te-submenu,
  .mm-submenu,
  .fmt-leader-line-picker,
  .frame-preset-menu,
  .remove-bg-panel,
  .arrow-type-popup,
  .shapes-menu,
  .anchor-menu,
  .export-menu,
  .emoji-popup,
  .grid-settings-popup,
  .connector-panel,
  .dt-popover,
  .comment-dialog,
  .canvas-ctx-menu,
  .custom-select__dropdown,
  .cb-insert-dropdown,
  .canvas-connector-bar
){
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
}

/* Strong, visible press/selected state for every selected-object toolbar. */
html[data-page="canvas"] body :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .drawing-toolbar,
  .multi-sel-bar
) :is(
  .fmt-btn,
  .ffb-lock-ar,
  .mm-fb-btn,
  .dt-btn,
  .multi-sel-bar__btn,
  button[aria-pressed="true"],
  button.is-active,
  button.active
):is(.is-active,.active,[aria-pressed="true"]){
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  -webkit-text-fill-color:var(--aidc-action-primary-to)!important;
  box-shadow:inset 0 0 0 1px var(--aidc-workspace-selection-border)!important;
}
html[data-page="canvas"] body :is(
  .canvas-format-bar,
  .freehand-format-bar,
  .mm-format-bar,
  .drawing-toolbar,
  .multi-sel-bar
) :is(.fmt-btn,.ffb-lock-ar,.mm-fb-btn,.dt-btn,.multi-sel-bar__btn):active{
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  transform:translateY(1px);
}

/* -------------------------------------------------------------------------
   Frame background popup (#ffb-color-popup)
   ------------------------------------------------------------------------- */
html[data-page="canvas"] body #ffb-color-popup{
  background:var(--aidc-bg-popover)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
}
html[data-page="canvas"] body #ffb-color-popup > div:first-child,
html[data-page="canvas"] body #ffb-color-popup label{
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important;
}
html[data-page="canvas"] body #ffb-color-popup :is(#ffb-eyedropper,#ffb-clear-fill){
  box-sizing:border-box!important;
  min-height:32px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  background:var(--aidc-btn-secondary-bg)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-radius:8px!important;
  opacity:1!important;
}
html[data-page="canvas"] body #ffb-color-popup :is(#ffb-eyedropper,#ffb-clear-fill):hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-strong)!important;
}
html[data-page="canvas"] body #ffb-color-popup #ffb-eyedropper svg,
html[data-page="canvas"] body #ffb-color-popup #ffb-eyedropper svg :is(path,rect,line,polyline,circle){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  fill:none!important;
}
html[data-page="canvas"] body #ffb-color-presets > *{
  border:1px solid var(--aidc-border-strong)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aidc-bg-page) 15%,transparent)!important;
}
html[data-page="canvas"] body #ffb-custom-color{
  border:1px solid var(--aidc-border-strong)!important;
  background:var(--aidc-bg-elevated)!important;
}

/* -------------------------------------------------------------------------
   Frame preset list rendered directly in body.
   ------------------------------------------------------------------------- */
html[data-page="canvas"] body #ffb-preset-list{
  background:var(--aidc-bg-popover)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  scrollbar-color:var(--aidc-scrollbar-thumb) transparent!important;
}
html[data-page="canvas"] body #ffb-preset-list [data-value]{
  box-sizing:border-box!important;
  min-height:var(--aidc-canvas-popup-row-h)!important;
  margin:2px 4px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important;
}
html[data-page="canvas"] body #ffb-preset-list [data-value]:hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-default)!important;
}
html[data-page="canvas"] body #ffb-preset-list [data-value][style*="#ff008c"]{
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  -webkit-text-fill-color:var(--aidc-action-primary-to)!important;
}

/* -------------------------------------------------------------------------
   Shared text/stroke picker. Inline headings and active line/corner buttons
   still use dark-theme literals in canvas-text-editor.js.
   ------------------------------------------------------------------------- */
html[data-page="canvas"] body .te-submenu{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"] body .te-submenu :is(
  .te-submenu-item,
  .te-font-item,
  .te-font-add-btn,
  .te-eyedropper-btn
){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-color:transparent!important;
  opacity:1!important;
}
html[data-page="canvas"] body .te-submenu :is(.te-submenu-item,.te-font-item):hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-default)!important;
}
html[data-page="canvas"] body .te-submenu .te-submenu-item.is-active,
html[data-page="canvas"] body .te-submenu .te-submenu-item[style*="rgba(111,124,255,0.22)"],
html[data-page="canvas"] body .te-submenu .te-submenu-item[style*="rgba(111, 124, 255, 0.22)"]{
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  -webkit-text-fill-color:var(--aidc-action-primary-to)!important;
}
html[data-page="canvas"] body .te-submenu :is(
  div[style*="color:#a0a8c0"],
  div[style*="color: #a0a8c0"],
  span[style*="color:#a0a8c0"],
  span[style*="color: #a0a8c0"]
){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important;
}
html[data-page="canvas"] body .te-submenu .te-submenu-item svg:not(.svg--filled),
html[data-page="canvas"] body .te-submenu .te-submenu-item svg:not(.svg--filled) :is(path,rect,circle,line,polyline,polygon,ellipse){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  fill:none!important;
  opacity:1!important;
}
/* Color swatches keep their real fill, but receive a visible outline. */
html[data-page="canvas"] body .te-submenu button[style*="background"]:not(.te-submenu-item){
  border-color:var(--aidc-border-strong)!important;
}

/* -------------------------------------------------------------------------
   Arrow type popup from canvas/index.html. Its SVG paths carry inline #e4e8f8.
   ------------------------------------------------------------------------- */
html[data-page="canvas"] body .arrow-type-popup{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"] body .arrow-type-popup__title{
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important;
}
html[data-page="canvas"] body .arrow-type-popup__btn{
  box-sizing:border-box!important;
  min-height:var(--aidc-canvas-popup-row-h)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  opacity:1!important;
}
html[data-page="canvas"] body .arrow-type-popup__btn:hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-default)!important;
}
html[data-page="canvas"] body .arrow-type-popup__btn.is-selected{
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  -webkit-text-fill-color:var(--aidc-action-primary-to)!important;
}
html[data-page="canvas"] body .arrow-type-popup__btn svg,
html[data-page="canvas"] body .arrow-type-popup__btn svg :is(path,line,polyline,rect,circle,polygon){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  fill:none!important;
  opacity:1!important;
}
html[data-page="canvas"] body .arrow-type-popup__btn.is-selected svg,
html[data-page="canvas"] body .arrow-type-popup__btn.is-selected svg :is(path,line,polyline,rect,circle,polygon){
  color:var(--aidc-action-primary-to)!important;
}
html[data-page="canvas"] body .arrow-type-popup__sep{
  background:var(--aidc-border-subtle)!important;
}

/* Shapes/export/anchor menus use the same row and icon rules. */
html[data-page="canvas"] body :is(.shapes-menu__btn,.export-menu__btn,.anchor-menu__btn){
  box-sizing:border-box!important;
  min-height:var(--aidc-canvas-popup-row-h)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  background:transparent!important;
  border-color:transparent!important;
  opacity:1!important;
}
html[data-page="canvas"] body :is(.shapes-menu__btn,.export-menu__btn,.anchor-menu__btn):hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-default)!important;
}
html[data-page="canvas"] body :is(.shapes-menu__btn,.export-menu__btn,.anchor-menu__btn) svg{
  color:var(--aidc-text-secondary)!important;
  opacity:1!important;
}

/* -------------------------------------------------------------------------
   Mind-map template picker created by canvas-mindmap.js with inline dark styles.
   Keep preview artwork untouched; only popup chrome/cards/labels are themed.
   ------------------------------------------------------------------------- */
html[data-page="canvas"] body #mm-template-popup{
  background:var(--aidc-bg-popover)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
}
html[data-page="canvas"] body #mm-template-popup > div:first-child{
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important;
}
html[data-page="canvas"] body #mm-template-popup > div:nth-child(2) > div{
  background:var(--aidc-bg-elevated)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"] body #mm-template-popup > div:nth-child(2) > div:hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
}
html[data-page="canvas"] body #mm-template-popup > div:nth-child(2) > div > div:last-child{
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important;
}

/* Dashboard/custom selects and remaining Canvas chrome dropdowns. */
html[data-page="canvas"] body .custom-select__dropdown{
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"] body .custom-select__option{
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  background:transparent!important;
}
html[data-page="canvas"] body .custom-select__option:hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
}
html[data-page="canvas"] body .custom-select__option.active{
  background:var(--aidc-workspace-selection-bg)!important;
  color:var(--aidc-action-primary-to)!important;
  -webkit-text-fill-color:var(--aidc-action-primary-to)!important;
}

/* Final light-mode specificity floor. This beats legacy inline dark literals
   while preserving semantic dark mode through the same token contract. */
html[data-page="canvas"][data-aidc-color-mode="light"] body :is(
  #ffb-color-popup,
  #ffb-preset-list,
  #mm-template-popup,
  .te-submenu,
  .mm-submenu,
  .fmt-leader-line-picker,
  .frame-preset-menu,
  .remove-bg-panel,
  .arrow-type-popup,
  .shapes-menu,
  .anchor-menu,
  .export-menu,
  .emoji-popup,
  .grid-settings-popup,
  .connector-panel,
  .dt-popover,
  .comment-dialog,
  .canvas-ctx-menu,
  .custom-select__dropdown,
  .cb-insert-dropdown,
  .canvas-connector-bar
){
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important;
}

@media (max-width:767px){
  html[data-page="canvas"]{--aidc-canvas-popup-row-h:44px}
}

/* Absolute final audit for late-injected tab/connector/frame menu CSS. */


/* Runtime menu audit: modules that inject their own dark CSS after page load.
   This file is intentionally the final Canvas import. */

/* Board tabs: add menu, tab context menu and existing-board picker. */
html[data-page="canvas"] body :is(.canvas-tab-ctxmenu,.canvas-board-picker){
  background:var(--aidc-bg-popover)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
}
html[data-page="canvas"] body .canvas-tab-ctxmenu button,
html[data-page="canvas"] body .canvas-board-picker__item{
  box-sizing:border-box!important;
  min-height:40px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-radius:8px!important;
  opacity:1!important;
}
html[data-page="canvas"] body .canvas-tab-ctxmenu button:hover,
html[data-page="canvas"] body .canvas-board-picker__item:hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-default)!important;
}
html[data-page="canvas"] body .canvas-tab-ctxmenu button.danger{
  color:var(--aidc-red-500)!important;
  -webkit-text-fill-color:var(--aidc-red-500)!important;
}
html[data-page="canvas"] body .canvas-tab-ctxmenu button svg{
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
}
html[data-page="canvas"] body .canvas-board-picker__search{
  box-sizing:border-box!important;
  min-height:36px!important;
  background:var(--aidc-bg-elevated)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-radius:8px!important;
}
html[data-page="canvas"] body .canvas-board-picker__search::placeholder,
html[data-page="canvas"] body :is(.canvas-board-picker__loading,.canvas-board-picker__empty,.canvas-board-picker__date){
  color:var(--aidc-text-muted)!important;
  -webkit-text-fill-color:var(--aidc-text-muted)!important;
  opacity:1!important;
}
html[data-page="canvas"] body .canvas-board-picker__title{
  color:var(--aidc-text-primary)!important;
}

/* Connector toolbar/dropdowns. */
html[data-page="canvas"] body :is(.canvas-connector-bar,.cb-more-dropdown,.cb-insert-dropdown){
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
}
html[data-page="canvas"] body .canvas-connector-bar .cb-btn{
  box-sizing:border-box!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:1px solid var(--aidc-border-default)!important;
  border-radius:10px!important;
  background:var(--aidc-btn-secondary-bg)!important;
  color:var(--aidc-text-secondary)!important;
}
html[data-page="canvas"] body .canvas-connector-bar .cb-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"] body .canvas-connector-bar .cb-btn:is(.is-active,.active,[aria-pressed="true"]){
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
}
html[data-page="canvas"] body .canvas-connector-bar .cb-btn svg,
html[data-page="canvas"] body .canvas-connector-bar .cb-btn svg :is(path,line,polyline,rect,circle,polygon){
  color:inherit!important;
  stroke:currentColor!important;
  fill:none!important;
}
html[data-page="canvas"] body :is(.cb-more-item,.cb-insert-btn){
  box-sizing:border-box!important;
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  background:transparent!important;
  border:1px solid transparent!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important;
}
html[data-page="canvas"] body :is(.cb-more-item,.cb-insert-btn):hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-default)!important;
}
html[data-page="canvas"] body .cb-more-item span,
html[data-page="canvas"] body .cb-insert-dropdown > div:first-child{
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"] body :is(.cb-shortcut,.cb-insert-dropdown > div:first-child){
  color:var(--aidc-text-muted)!important;
  -webkit-text-fill-color:var(--aidc-text-muted)!important;
  opacity:1!important;
}
html[data-page="canvas"] body :is(.cb-more-sep,.cb-insert-dropdown hr){
  background:var(--aidc-border-subtle)!important;
  border-color:var(--aidc-border-subtle)!important;
}
html[data-page="canvas"] body .cb-insert-btn svg,
html[data-page="canvas"] body .cb-insert-btn svg :is(path,line,polyline,rect,circle,polygon){
  color:var(--aidc-text-secondary)!important;
  stroke:currentColor!important;
  fill:none!important;
}

/* Frames side panel is application chrome and is injected with dark literals. */
html[data-page="canvas"] body .frames-panel{
  background:var(--aidc-bg-panel)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-modal)!important;
}
html[data-page="canvas"] body :is(.frames-panel__header,.frames-panel__footer){
  border-color:var(--aidc-border-subtle)!important;
}
html[data-page="canvas"] body :is(.frames-panel__title,.frames-panel__name){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
}
html[data-page="canvas"] body :is(.frames-panel__select-all-label,.frames-panel__size,.frames-panel__num,.frames-panel__selection-info,.frames-panel__sel-count){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
}
html[data-page="canvas"] body .frames-panel__item{
  background:var(--aidc-bg-elevated)!important;
  border-color:var(--aidc-border-subtle)!important;
}
html[data-page="canvas"] body .frames-panel__item:hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-strong)!important;
}
html[data-page="canvas"] body .frames-panel__item:is(.is-active,.is-selected){
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
}
html[data-page="canvas"] body :is(
  .frames-panel__close,
  .frames-panel__slides-btn,
  .frames-panel__play-btn,
  .frames-panel__focus-btn,
  .frames-panel__menu-btn,
  .frames-panel__export-png,
  .frames-panel__export-pdf,
  .frames-panel__export-assets,
  .frames-panel__add
){
  background:var(--aidc-btn-secondary-bg)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
}
html[data-page="canvas"] body :is(
  .frames-panel__close,
  .frames-panel__slides-btn,
  .frames-panel__play-btn,
  .frames-panel__focus-btn,
  .frames-panel__menu-btn,
  .frames-panel__export-png,
  .frames-panel__export-pdf,
  .frames-panel__export-assets,
  .frames-panel__add
):hover:not(:disabled){
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-strong)!important;
  color:var(--aidc-text-primary)!important;
}

/* Light mode needs an explicit final floor because all modules above inject
   their styles after DOMContentLoaded. */
html[data-page="canvas"][data-aidc-color-mode="light"] body :is(
  .canvas-tab-ctxmenu,
  .canvas-board-picker,
  .canvas-connector-bar,
  .cb-more-dropdown,
  .cb-insert-dropdown,
  .frames-panel
){
  background:var(--aidc-bg-popover)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  border-color:var(--aidc-border-default)!important;
  opacity:1!important;
}

@media (max-width:767px){
  html[data-page="canvas"] body .canvas-connector-bar .cb-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  html[data-page="canvas"] body :is(.canvas-tab-ctxmenu button,.canvas-board-picker__item,.cb-more-item,.cb-insert-btn){
    min-height:44px!important;
  }
}

/* Last owner for the shared color/stroke picker used by every object type. */


/* Canonical Canvas color/stroke picker contract.
   canvas-text-editor.js is the single shared owner for text, shapes, callouts,
   mind-map nodes and connectors. Some legacy light-theme rules still beat the
   runtime inline swatch backgrounds with !important; this final adapter restores
   the semantic picker surface and the actual palette colors deterministically. */

html[data-page="canvas"]{
  --aidc-canvas-picker-swatch:24px;
  --aidc-canvas-picker-row:40px;
}

html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker){
  background:var(--aidc-bg-popover)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:var(--aidc-shadow-popover)!important;
  opacity:1!important;
}

html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) :is(.te-cp-title,div[style*="color:#a0a8c0"],div[style*="color: #a0a8c0"],span[style*="color:#a0a8c0"],span[style*="color: #a0a8c0"]){
  color:var(--aidc-text-secondary)!important;
  -webkit-text-fill-color:var(--aidc-text-secondary)!important;
  opacity:1!important;
}

html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-grid{
  display:grid!important;
  grid-template-columns:repeat(10,var(--aidc-canvas-picker-swatch))!important;
  gap:5px!important;
  margin:0 0 10px!important;
  align-items:center!important;
  justify-content:start!important;
  min-height:var(--aidc-canvas-picker-swatch)!important;
}

html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch{
  box-sizing:border-box!important;
  width:var(--aidc-canvas-picker-swatch)!important;
  height:var(--aidc-canvas-picker-swatch)!important;
  min-width:var(--aidc-canvas-picker-swatch)!important;
  min-height:var(--aidc-canvas-picker-swatch)!important;
  max-width:var(--aidc-canvas-picker-swatch)!important;
  max-height:var(--aidc-canvas-picker-swatch)!important;
  padding:0!important;
  margin:0!important;
  border:2px solid color-mix(in srgb,var(--aidc-border-strong) 76%,transparent)!important;
  border-radius:6px!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aidc-bg-page) 18%,transparent)!important;
  opacity:1!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:hover{
  border-color:var(--aidc-action-focus)!important;
  box-shadow:0 0 0 2px var(--aidc-action-focus-ring)!important;
  transform:scale(1.08)!important;
}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch.is-active{
  border-color:var(--aidc-action-primary-from)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--aidc-action-primary-from) 24%,transparent)!important;
}

html[data-page="canvas"] body .te-color-picker .te-cp-grid > .te-cp-swatch:first-child[style*="background: transparent"]{
  background:linear-gradient(45deg,transparent 46%,var(--aidc-red-500) 47% 53%,transparent 54%),var(--aidc-bg-elevated)!important;
  color:var(--aidc-red-500)!important;
  -webkit-text-fill-color:var(--aidc-red-500)!important;
  border-style:dashed!important;
}

html[data-page="canvas"] body .te-color-picker .te-cp-custom{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:36px!important;
  padding:4px 0 8px!important;
  margin:0!important;
}
html[data-page="canvas"] body .te-color-picker .te-cp-custom::before{
  content:"Свой цвет";
  color:var(--aidc-text-secondary)!important;
  font-size:12px;
  line-height:1;
}
html[data-page="canvas"] body .te-color-picker .te-cp-custom input[type="color"],
html[data-page="canvas"] body .te-stroke-picker input[type="color"]{
  box-sizing:border-box!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:32px!important;
  min-width:42px!important;
  max-width:42px!important;
  padding:2px!important;
  border:1px solid var(--aidc-border-strong)!important;
  border-radius:8px!important;
  background:var(--aidc-bg-elevated)!important;
  color-scheme:light dark;
  cursor:pointer!important;
  opacity:1!important;
}
html[data-page="canvas"] body .te-color-picker .te-cp-custom input[type="color"]::-webkit-color-swatch-wrapper,
html[data-page="canvas"] body .te-stroke-picker input[type="color"]::-webkit-color-swatch-wrapper{padding:2px!important}
html[data-page="canvas"] body .te-color-picker .te-cp-custom input[type="color"]::-webkit-color-swatch,
html[data-page="canvas"] body .te-stroke-picker input[type="color"]::-webkit-color-swatch{
  border:1px solid var(--aidc-border-default)!important;
  border-radius:5px!important;
}

html[data-page="canvas"] body .te-stroke-picker .te-submenu-item{
  box-sizing:border-box!important;
  min-height:36px!important;
  background:var(--aidc-btn-secondary-bg)!important;
  border:1px solid var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important;
}
html[data-page="canvas"] body .te-stroke-picker .te-submenu-item:hover{
  background:var(--aidc-btn-secondary-bg-hover)!important;
  border-color:var(--aidc-border-strong)!important;
}
html[data-page="canvas"] body .te-stroke-picker .te-submenu-item:is(.is-active,[style*="rgba(111,124,255,0.22)"],[style*="rgba(111, 124, 255, 0.22)"]){
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  -webkit-text-fill-color:var(--aidc-action-primary-to)!important;
}
html[data-page="canvas"] body .te-stroke-picker .te-submenu-item svg,
html[data-page="canvas"] body .te-stroke-picker .te-submenu-item svg :is(path,rect,circle,line,polyline,polygon,ellipse){
  color:currentColor!important;
  stroke:currentColor!important;
  fill:none!important;
  opacity:1!important;
}
html[data-page="canvas"] body .te-stroke-picker input[type="range"]{
  accent-color:var(--aidc-action-focus)!important;
  opacity:1!important;
}

html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) > .te-submenu-item{
  min-height:var(--aidc-canvas-picker-row)!important;
  border-radius:8px!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important;
}

html[data-page="canvas"][data-aidc-color-mode="light"] body :is(.te-color-picker,.te-stroke-picker){
  background:var(--aidc-bg-popover)!important;
  border-color:var(--aidc-border-default)!important;
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
}

html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF3366" i],[style*="rgb(255, 51, 102)"]){background-color:#FF3366!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF6633" i],[style*="rgb(255, 102, 51)"]){background-color:#FF6633!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF9933" i],[style*="rgb(255, 153, 51)"]){background-color:#FF9933!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFCC33" i],[style*="rgb(255, 204, 51)"]){background-color:#FFCC33!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFFF33" i],[style*="rgb(255, 255, 51)"]){background-color:#FFFF33!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CCFF33" i],[style*="rgb(204, 255, 51)"]){background-color:#CCFF33!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#66FF33" i],[style*="rgb(102, 255, 51)"]){background-color:#66FF33!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33FF66" i],[style*="rgb(51, 255, 102)"]){background-color:#33FF66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33FFCC" i],[style*="rgb(51, 255, 204)"]){background-color:#33FFCC!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33CCFF" i],[style*="rgb(51, 204, 255)"]){background-color:#33CCFF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#3366FF" i],[style*="rgb(51, 102, 255)"]){background-color:#3366FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#6633FF" i],[style*="rgb(102, 51, 255)"]){background-color:#6633FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CC33FF" i],[style*="rgb(204, 51, 255)"]){background-color:#CC33FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF33CC" i],[style*="rgb(255, 51, 204)"]){background-color:#FF33CC!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF3399" i],[style*="rgb(255, 51, 153)"]){background-color:#FF3399!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF6666" i],[style*="rgb(255, 102, 102)"]){background-color:#FF6666!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF9966" i],[style*="rgb(255, 153, 102)"]){background-color:#FF9966!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFCC66" i],[style*="rgb(255, 204, 102)"]){background-color:#FFCC66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFFF66" i],[style*="rgb(255, 255, 102)"]){background-color:#FFFF66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CCFF66" i],[style*="rgb(204, 255, 102)"]){background-color:#CCFF66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#66FF66" i],[style*="rgb(102, 255, 102)"]){background-color:#66FF66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33FF99" i],[style*="rgb(51, 255, 153)"]){background-color:#33FF99!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33FFFF" i],[style*="rgb(51, 255, 255)"]){background-color:#33FFFF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#66CCFF" i],[style*="rgb(102, 204, 255)"]){background-color:#66CCFF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#6699FF" i],[style*="rgb(102, 153, 255)"]){background-color:#6699FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#9966FF" i],[style*="rgb(153, 102, 255)"]){background-color:#9966FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CC66FF" i],[style*="rgb(204, 102, 255)"]){background-color:#CC66FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF66CC" i],[style*="rgb(255, 102, 204)"]){background-color:#FF66CC!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFFFFF" i],[style*="rgb(255, 255, 255)"]){background-color:#FFFFFF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CCCCCC" i],[style*="rgb(204, 204, 204)"]){background-color:#CCCCCC!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#999999" i],[style*="rgb(153, 153, 153)"]){background-color:#999999!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#666666" i],[style*="rgb(102, 102, 102)"]){background-color:#666666!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#333333" i],[style*="rgb(51, 51, 51)"]){background-color:#333333!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#1a1a2e" i],[style*="rgb(26, 26, 46)"]){background-color:#1a1a2e!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#0a0e1a" i],[style*="rgb(10, 14, 26)"]){background-color:#0a0e1a!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#0f1420" i],[style*="rgb(15, 20, 32)"]){background-color:#0f1420!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#1c1230" i],[style*="rgb(28, 18, 48)"]){background-color:#1c1230!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#2D1B69" i],[style*="rgb(45, 27, 105)"]){background-color:#2D1B69!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#001F3F" i],[style*="rgb(0, 31, 63)"]){background-color:#001F3F!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#2D4A22" i],[style*="rgb(45, 74, 34)"]){background-color:#2D4A22!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#3C1518" i],[style*="rgb(60, 21, 24)"]){background-color:#3C1518!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#0D2F2F" i],[style*="rgb(13, 47, 47)"]){background-color:#0D2F2F!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#8B4513" i],[style*="rgb(139, 69, 19)"]){background-color:#8B4513!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF6B35" i],[style*="rgb(255, 107, 53)"]){background-color:#FF6B35!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#0074D9" i],[style*="rgb(0, 116, 217)"]){background-color:#0074D9!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#3CB371" i],[style*="rgb(60, 179, 113)"]){background-color:#3CB371!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#8B0000" i],[style*="rgb(139, 0, 0)"]){background-color:#8B0000!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#4B0082" i],[style*="rgb(75, 0, 130)"]){background-color:#4B0082!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFB6C1" i],[style*="rgb(255, 182, 193)"]){background-color:#FFB6C1!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#E8F4FD" i],[style*="rgb(232, 244, 253)"]){background-color:#E8F4FD!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF9A8B" i],[style*="rgb(255, 154, 139)"]){background-color:#FF9A8B!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}
html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#B7E4C7" i],[style*="rgb(183, 228, 199)"]){background-color:#B7E4C7!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */}


/* Canvas visual chrome adapter.
   Scope: dashboard panels/cards, neutral controls, mobile toolbar/topbar and menus.
   Excluded intentionally: node colors, drawing colors, mindmap palette,
   export/render content colors and dynamic board content.
 */

html[data-page="canvas"],
html[data-page="canvas"] body {
  background: var(--aidc-bg-page);
  color: var(--aidc-text-primary);
}

html[data-page="canvas"] .canvas-dashboard .panel,
html[data-page="canvas"] .panel-templates {
  background: var(--aidc-bg-panel);
  border-color: var(--aidc-border-subtle);
  box-shadow: var(--aidc-shadow-popover);
}

html[data-page="canvas"] .panel-title,
html[data-page="canvas"] .template-card__label,
html[data-page="canvas"] .board-card__title,
html[data-page="canvas"] .col-name .list-title {
  color: var(--aidc-text-primary);
}

html[data-page="canvas"] .boards-filters label,
html[data-page="canvas"] .boards-sort label,
html[data-page="canvas"] .board-card__meta,
html[data-page="canvas"] .boards-list-header,
html[data-page="canvas"] .col-users,
html[data-page="canvas"] .col-opened,
html[data-page="canvas"] .col-owner {
  color: var(--aidc-text-muted);
}

html[data-page="canvas"] .template-card,
html[data-page="canvas"] .board-card {
  background: var(--aidc-bg-card);
  border-color: var(--aidc-border-subtle);
}

html[data-page="canvas"] .template-card:hover,
html[data-page="canvas"] .board-card:hover {
  border-color: var(--aidc-border-strong);
  box-shadow: var(--aidc-shadow-popover);
}

html[data-page="canvas"] .template-card__thumb,
html[data-page="canvas"] .board-card__thumb {
  background: var(--aidc-bg-elevated);
}

html[data-page="canvas"] .template-card--blank .template-card__thumb {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 8%, var(--aidc-bg-elevated) 92%);
  color: var(--aidc-action-primary-from);
}

html[data-page="canvas"] .btn-primary {
  background: linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  color: var(--aidc-text-inverse);
  box-shadow: 0 0 18px var(--aidc-action-primary-glow);
}

html[data-page="canvas"] .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 24px var(--aidc-action-primary-glow);
}

html[data-page="canvas"] .btn-outline,
html[data-page="canvas"] .view-btn,
html[data-page="canvas"] .list-fav-btn,
html[data-page="canvas"] .list-menu-btn {
  background: var(--aidc-btn-secondary-bg);
  border-color: var(--aidc-border-default);
  color: var(--aidc-text-secondary);
}

html[data-page="canvas"] .btn-outline:hover,
html[data-page="canvas"] .view-btn:hover,
html[data-page="canvas"] .list-fav-btn:hover,
html[data-page="canvas"] .list-menu-btn:hover {
  background: var(--aidc-btn-secondary-bg-hover);
  border-color: var(--aidc-border-strong);
  color: var(--aidc-text-primary);
}

html[data-page="canvas"] .view-btn.active {
  background: color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  border-color: color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent);
  color: var(--aidc-text-inverse);
}

html[data-page="canvas"] .custom-select__trigger,
html[data-page="canvas"] .boards-search-box input,
html[data-page="canvas"] .board-card__title-input {
  background: var(--aidc-bg-elevated);
  border-color: var(--aidc-border-default);
  color: var(--aidc-text-primary);
}

html[data-page="canvas"] .custom-select__trigger:hover,
html[data-page="canvas"] .custom-select.open .custom-select__trigger,
html[data-page="canvas"] .boards-search-box input:focus,
html[data-page="canvas"] .board-card__title-input:focus {
  border-color: var(--aidc-action-focus);
  box-shadow: 0 0 0 3px var(--aidc-action-focus-ring);
  outline: none;
}

html[data-page="canvas"] .custom-select__dropdown,
html[data-page="canvas"] .shapes-menu,
html[data-page="canvas"] .arrow-type-popup,
html[data-page="canvas"] .emoji-popup,
html[data-page="canvas"] .export-menu,
html[data-page="canvas"] .anchor-menu,
html[data-page="canvas"] .canvas-ctx-menu,
html[data-page="canvas"] .canvas-tooltip {
  background: var(--aidc-bg-popover);
  border-color: var(--aidc-border-default);
  color: var(--aidc-text-primary);
  box-shadow: var(--aidc-shadow-popover);
}

/* Light Canvas finalization: board content itself keeps its own user/system
   colors; only application chrome, dashboard metadata and actions are changed. */
html[data-page="canvas"][data-aidc-color-mode="light"] :where(
  .boards-filters label,.boards-sort label,.board-card__meta,.boards-list-header,
  .col-users,.col-opened,.col-owner
){
  color:var(--aidc-text-secondary)!important;
  opacity:1!important
}

html[data-page="canvas"][data-aidc-color-mode="light"] :where(
  .btn-primary,.button.primary,.pill-btn.primary
):not(.danger):not(.btn-danger){
  background:var(--aidc-btn-primary-bg)!important;
  border:1px solid var(--aidc-btn-primary-border)!important;
  color:var(--aidc-btn-primary-text)!important;
  box-shadow:none!important;
  filter:none!important
}

html[data-page="canvas"][data-aidc-color-mode="light"] :where(
  .btn-primary,.button.primary,.pill-btn.primary
):not(.danger):not(.btn-danger):hover:not(:disabled),
html[data-page="canvas"][data-aidc-color-mode="light"] :where(
  .btn-primary,.button.primary,.pill-btn.primary
):not(.danger):not(.btn-danger):focus-visible{
  background:var(--aidc-btn-primary-bg-hover)!important;
  border-color:var(--aidc-btn-primary-border-hover)!important;
  color:var(--aidc-btn-primary-text)!important;
  box-shadow:none!important;
  filter:none!important;
  outline:none!important
}

html[data-page="canvas"][data-aidc-color-mode="light"] .view-btn.active{
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  box-shadow:none!important
}


/* Canvas comments and popup chrome.
   Comment pin colors, emoji content and sticker artwork remain content-owned. */

html[data-page="canvas"] .comment-dialog{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary);
  box-shadow:var(--aidc-shadow-popover)
}

html[data-page="canvas"] .comment-dialog__header,
html[data-page="canvas"] .comment-dialog__input,
html[data-page="canvas"] .ep-tabs,
html[data-page="canvas"] .arrow-type-popup__sep{
  border-color:var(--aidc-border-subtle)
}

html[data-page="canvas"] .comment-dialog__resolve,
html[data-page="canvas"] .cd-bell-btn,
html[data-page="canvas"] .cd-more-btn,
html[data-page="canvas"] .shapes-menu__btn,
html[data-page="canvas"] .emoji-popup__btn,
html[data-page="canvas"] .ep-sticker-btn{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

html[data-page="canvas"] .comment-dialog__resolve:hover,
html[data-page="canvas"] .cd-bell-btn:hover,
html[data-page="canvas"] .cd-more-btn:hover,
html[data-page="canvas"] .shapes-menu__btn:hover,
html[data-page="canvas"] .emoji-popup__btn:hover,
html[data-page="canvas"] .ep-sticker-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .comment-dialog__messages{
  scrollbar-color:var(--aidc-border-default) transparent
}

html[data-page="canvas"] .comment-dialog__messages::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)
}

html[data-page="canvas"] .comment-dialog__messages::-webkit-scrollbar-thumb:hover{
  background:var(--aidc-border-strong)
}

html[data-page="canvas"] .comment-msg__author,
html[data-page="canvas"] .cd-resolve-label,
html[data-page="canvas"] .arrow-type-popup__title,
html[data-page="canvas"] .ep-sticker-section__title{
  color:var(--aidc-text-muted)
}

html[data-page="canvas"] .comment-msg__text,
html[data-page="canvas"] .arrow-type-popup__btn{
  color:var(--aidc-text-secondary)
}

html[data-page="canvas"] .comment-msg__time{
  color:var(--aidc-text-muted)
}

html[data-page="canvas"] .comment-dialog__input input,
html[data-page="canvas"] .ep-search{
  background:var(--aidc-bg-elevated);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .comment-dialog__input input:focus,
html[data-page="canvas"] .ep-search:focus{
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring);
  outline:none
}

html[data-page="canvas"] .comment-dialog__input button{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
  color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .comment-dialog__input button:hover{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 18%,transparent)
}

html[data-page="canvas"] .cd-resolve-slider{
  background:var(--aidc-btn-secondary-bg-hover)
}

html[data-page="canvas"] .cd-resolve-slider::after{
  background:var(--aidc-text-muted)
}

html[data-page="canvas"] .cd-resolve-cb:checked + .cd-resolve-slider{
  background:color-mix(in srgb,var(--aidc-green-500) 34%,transparent)
}

html[data-page="canvas"] .cd-resolve-cb:checked + .cd-resolve-slider::after{
  background:var(--aidc-green-500)
}

html[data-page="canvas"] .cd-bell-btn.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .arrow-type-popup__btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .arrow-type-popup__btn.is-selected{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .ep-tab{
  color:var(--aidc-text-muted)
}

html[data-page="canvas"] .ep-tab:hover{
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .ep-tab.is-active{
  color:var(--aidc-action-primary-from);
  border-bottom-color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .ep-search::placeholder{
  color:var(--aidc-text-muted)
}



/* Canvas multi-selection and grid settings chrome.
   Grid swatch colors and custom color picker stay functional/user-owned. */

html[data-page="canvas"] .multi-sel-more-menu,
html[data-page="canvas"] .grid-settings-popup{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-primary);
  box-shadow:var(--aidc-shadow-popover)
}

html[data-page="canvas"] .multi-sel-bar__menu-item,
html[data-page="canvas"] .multi-sel-more-menu__item,
html[data-page="canvas"] .gs-radio-row{
  color:var(--aidc-text-secondary)
}

html[data-page="canvas"] .multi-sel-bar__menu-item:hover,
html[data-page="canvas"] .multi-sel-more-menu__item:hover,
html[data-page="canvas"] .gs-radio-row:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

html[data-page="canvas"] .multi-sel-bar__menu-item.active,
html[data-page="canvas"] .multi-sel-bar__btn.is-active,
html[data-page="canvas"] .gs-radio-row.is-active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 40%,transparent);
  color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .multi-sel-bar__menu-count,
html[data-page="canvas"] .gs-section-title,
html[data-page="canvas"] .gs-radio-icon,
html[data-page="canvas"] .gs-toggle-icon{
  color:var(--aidc-text-muted)
}

html[data-page="canvas"] .multi-sel-more-menu__item--danger{
  color:var(--aidc-red-500)
}

html[data-page="canvas"] .multi-sel-more-menu__item--danger:hover{
  background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent)
}

html[data-page="canvas"] .multi-sel-more-menu__sep,
html[data-page="canvas"] .gs-sep{
  background:var(--aidc-border-subtle)
}

html[data-page="canvas"] .gs-radio-label,
html[data-page="canvas"] .gs-toggle-label{
  color:var(--aidc-text-secondary)
}

html[data-page="canvas"] .gs-radio-dot{
  border-color:var(--aidc-border-strong)
}

html[data-page="canvas"] .gs-radio-row.is-active .gs-radio-dot{
  border-color:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .gs-radio-row.is-active .gs-radio-dot::after{
  background:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .gs-toggle{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-default)
}

html[data-page="canvas"] .gs-toggle::after{
  background:var(--aidc-text-secondary)
}

html[data-page="canvas"] .gs-toggle.is-on{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 24%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 46%,transparent)
}

html[data-page="canvas"] .gs-toggle.is-on::after{
  background:var(--aidc-action-primary-from)
}

html[data-page="canvas"] .gs-color-swatch:hover{
  border-color:var(--aidc-border-strong)
}

html[data-page="canvas"] .gs-color-swatch.is-active,
html[data-page="canvas"] .gs-color-custom.is-active{
  border-color:var(--aidc-text-primary)
}

/* Selection status is application chrome, not board content. The old inline
   pale-blue copy disappeared against light Canvas chrome; semantic tokens own
   both modes and deliberately override those legacy inline declarations. */
html[data-page="canvas"] .selection-hud,
html[data-page="canvas"] .selection-hud__info{
  background:var(--aidc-canvas-chrome-bg)!important;
  border-color:var(--aidc-canvas-chrome-border)!important;
  color:var(--aidc-canvas-control-text)!important;
  box-shadow:none!important
}

html[data-page="canvas"] .selection-hud .label{
  color:var(--aidc-text-muted)!important;
  -webkit-text-fill-color:var(--aidc-text-muted)!important;
  opacity:1!important
}

html[data-page="canvas"] #selection-label,
html[data-page="canvas"] .selection-hud__info :where(strong,b,[data-selection-label]){
  color:var(--aidc-text-primary)!important;
  -webkit-text-fill-color:var(--aidc-text-primary)!important;
  opacity:1!important
}


/* =========================================================
   Canvas Dashboard — Miro-style board management page
   ========================================================= */

/* --- Layout --- */
.canvas-dashboard {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
}

/* --- Panels (shared) --- */
.panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px 28px 24px;
}

/* --- Boards panel: stretch to fill, internal scroll --- */
.panel-boards {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.boards-grid,
.boards-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
  scrollbar-width: thin;
}
.boards-grid::-webkit-scrollbar,
.boards-list::-webkit-scrollbar {
  width: 6px;
}
.boards-grid::-webkit-scrollbar-track,
.boards-list::-webkit-scrollbar-track {
  border-radius: 10px;
}
.boards-grid::-webkit-scrollbar-thumb,
.boards-list::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 1px solid transparent;
  background-clip: content-box;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- TEMPLATES SLIDER --- */
.panel-templates {
  padding: 20px 24px 12px;
  flex: 0 0 auto;
  /* Standalone section — no .panel class, no stretch */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
}

.panel-templates .panel-header {
  margin-bottom: 12px;
}

.templates-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.templates-slider::-webkit-scrollbar {
  height: 5px;
}
.templates-slider::-webkit-scrollbar-track {
  background: transparent;
}
.templates-slider::-webkit-scrollbar-thumb {
  border-radius: 8px;
}

.template-card {
  flex: 0 0 auto;
  width: 140px;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.18s;
  position: relative;
}
.template-card:hover {
  transform: translateY(-2px);
}
.template-card--blank {
  border-style: dashed;
}
.template-card--blank:hover {
}
.template-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  user-select: none;
}
.template-card__thumb svg {
  width: 32px;
  height: 32px;
}
/* Template thumbnail image (when thumbnail_url is provided) */
.template-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px 14px 0 0;
  display: block;
}
.template-card--blank .template-card__thumb {
  font-size: 36px;
}
.template-card--blank .template-card__thumb svg {
  width: 36px;
  height: 36px;
}
.template-card__label {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* User template cards */
.template-card--user {
}
.template-card--user:hover {
}
.template-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  pointer-events: none;
}
.template-card__menu {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.12s, background 0.12s;
}
.template-card--user:hover .template-card__menu {
  opacity: 1;
}
.template-card__menu:hover {
}

/* User templates section */
.panel-user-templates {
  padding: 0 32px;
  margin-bottom: 8px;
}
.panel-user-templates .panel-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* --- BOARDS SECTION --- */

.boards-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.boards-actions {
  display: flex;
  gap: 10px;
}

/* Buttons */
.btn-primary {
  padding: 9px 22px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.22s, transform 0.16s;
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-outline {
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.22s, color 0.22s;
}
.btn-outline:hover {
}

/* --- FILTERS ROW --- */
.boards-filters-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.boards-filters,
.boards-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.boards-filters label,
.boards-sort label {
  font-size: 13px;
  font-weight: 500;
}

.custom-select {
  position: relative;
  display: inline-block;
  min-width: 140px;
}

.custom-select__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  padding-right: 28px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  text-align: left;
  position: relative;
}
.custom-select__trigger:hover,
.custom-select.open .custom-select__trigger {
}

.custom-select__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select__arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  transition: transform 0.2s;
  pointer-events: none;
}
.custom-select.open .custom-select__arrow {
  transform: translateY(-50%) rotate(180deg);
}

.custom-select__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  z-index: 1000;
  padding: 4px 0;
  backdrop-filter: blur(16px);
  scrollbar-width: thin;
  animation: ctx-fade-in 0.15s ease;
}
.custom-select.open .custom-select__dropdown {
  display: block;
}

.custom-select__dropdown::-webkit-scrollbar {
  width: 4px;
}
.custom-select__dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.custom-select__dropdown::-webkit-scrollbar-thumb {
  border-radius: 4px;
}

.custom-select__option {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  margin: 0 4px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.custom-select__option:hover {
}
.custom-select__option.active {
}
.custom-select__option.active:hover {
}

.boards-view-toggle {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.view-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.view-btn:hover {
}
.view-btn.active {
}

/* --- SEARCH --- */
.boards-search-box {
  position: relative;
  flex: 0 0 220px;
}
.boards-search-box input {
  width: 100%;
  padding: 7px 12px 7px 34px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.boards-search-box input:focus {
}
.boards-search-box .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}

/* --- GRID VIEW --- */
.boards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.board-card {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.18s;
}
.board-card:hover {
  transform: translateY(-2px);
}

.board-card__thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.board-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.board-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-card__thumb-placeholder svg {
  width: 40px;
  height: 40px;
}

/* Fav star on card */
.board-card__fav {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  backdrop-filter: blur(6px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: color 0.2s, background 0.2s;
  z-index: 2;
  opacity: 0;
}
.board-card:hover .board-card__fav,
.board-card__fav.active {
  opacity: 1;
}
.board-card__fav.active,
.board-card__fav.active:hover {
}
.board-card__fav svg {
  width: 14px;
  height: 14px;
}

/* Context menu trigger */
.board-card__menu-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  backdrop-filter: blur(6px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.18s, background 0.18s;
}
.board-card:hover .board-card__menu-btn {
  opacity: 1;
}
.board-card__menu-btn svg {
  width: 16px;
  height: 16px;
}
.board-card__menu-btn:hover {
}

/* Badge */
.board-card__badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  z-index: 2;
}

/* Info area — overlay on bottom of card */
.board-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}
.board-card__title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-card__meta {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline rename */
.board-card__title-input {
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  outline: none;
  width: 100%;
}

/* --- LIST VIEW --- */
.boards-list {
  width: 100%;
}

.boards-list-header {
  display: grid;
  grid-template-columns: 1fr 100px 160px 140px 50px;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.boards-list-row {
  display: grid;
  grid-template-columns: 1fr 100px 160px 140px 50px;
  gap: 8px;
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.18s;
  border-radius: 8px;
}
.boards-list-row:hover {
}

.col-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.col-name .list-thumb {
  width: 48px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-name .list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.col-name .list-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-users,
.col-opened,
.col-owner {
  font-size: 13px;
}

.col-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.list-fav-btn,
.list-menu-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s, background 0.18s;
}
.list-fav-btn:hover,
.list-menu-btn:hover {
}
.list-fav-btn.active,
.list-fav-btn.active:hover {
}

/* --- CONTEXT MENU --- */
.board-ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  padding: 6px 0;
  display: none;
  animation: ctx-fade-in 0.15s ease;
}
.board-ctx-menu.visible {
  display: block;
}

@keyframes ctx-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.ctx-item:hover {
}
.ctx-item--danger {
}
.ctx-item--danger:hover {
}
.ctx-item .ctx-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ctx-item .ctx-icon svg {
  width: 16px;
  height: 16px;
}

.ctx-divider {
  height: 1px;
  margin: 4px 0;
}

/* --- EMPTY STATE --- */
.boards-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 16px;
  text-align: center;
}
.boards-empty__icon {
  font-size: 48px;
  opacity: 0.5;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boards-empty__icon svg {
  width: 48px;
  height: 48px;
}
.boards-empty__text {
  font-size: 16px;
  max-width: 340px;
}
.boards-empty__btn {
  margin-top: 12px;
}

/* --- LOADING --- */
.boards-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 12px;
  font-size: 14px;
}
.boards-loading .spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-top-color: #00b4ff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Board detail panel (info sidebar, future) --- */
.board-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
}
.board-info-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 9999;
  padding: 28px 24px;
  display: none;
  overflow-y: auto;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .canvas-dashboard {
    padding: 24px 16px 48px;
  }
}

@media (max-width: 840px) {
  .boards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .boards-filters-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .boards-view-toggle {
    margin-left: 0;
  }
  .boards-list-header,
  .boards-list-row {
    grid-template-columns: 1fr 80px 50px;
  }
  .col-opened,
  .col-owner {
    display: none;
  }
}

@media (max-width: 640px) {
  .canvas-dashboard {
    padding: 16px 10px 32px;
  }
  .panel {
    padding: 18px 14px;
    border-radius: 18px;
  }
  .boards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .boards-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .boards-actions {
    width: 100%;
  }
  .btn-primary,
  .btn-outline {
    flex: 1;
    text-align: center;
  }
  .template-card {
    width: 120px;
  }
}

/* =========================================================================
   Template Sub-template Picker Modal
   ========================================================================= */
.tpl-sub-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.tpl-sub-modal-popup {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 24px;
  max-width: 420px;
  width: 100%;
  font-family: "Inter", system-ui, sans-serif;
}
.tpl-sub-modal-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}
.tpl-sub-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tpl-sub-modal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.tpl-sub-modal-card:hover {
}
.tpl-sub-modal-card__icon {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}
.tpl-sub-modal-card__icon svg {
  width: 36px;
  height: 36px;
}
.tpl-sub-modal-card__label {
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

/* ── Rotation angle badge (shown during Transformer rotate) ── */
#canvas-rotation-badge {
  position: fixed;
  z-index: 10010;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(143, 179, 255, 0.25);
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  display: none;
}