/* Shared color roles and type scale. Canvas artwork keeps its own colors. */
html[data-skin] { --type-page:32px; --type-section:18px; --type-item:16px; --type-body:14px; --type-label:13px; --type-meta:12px; }
html.appearance-changing *,html.appearance-changing *::before,html.appearance-changing *::after { transition:none!important; }
html[data-skin] body { font-size:var(--type-body); line-height:1.65; }
html[data-skin] :is(input,select,textarea,button) { font-family:inherit; }
html[data-skin] body.teacher-native,html[data-skin] body.teacher-native[data-workspace-module] { --app-accent:var(--paper-accent); --app-tint:var(--paper-tint); --app-card:var(--paper-glass); }
html[data-skin] :is(.teacher-native .manager-header h1,.paper-admin .page-title) { font-size:var(--type-page); font-weight:600; line-height:1.3; letter-spacing:-.025em; }
html[data-skin] :is(.teacher-native .panel-head h2,.teacher-native .card-title,.paper-admin .card-title,.app-collage-step-title) { font-size:var(--type-section); font-weight:600; line-height:1.5; letter-spacing:0; }
html[data-skin] :is(.teacher-native .panel-head p,.card-desc,.field-help,.page-desc,.empty-text,.collage-library-status,.collage-library-dialog p,.collage-library-footer p) { font-size:var(--type-label); line-height:1.75; color:var(--wb-muted); }
html[data-skin] :is(.form-label,.teacher-native .manager-shell label>span) { font-size:var(--type-label); line-height:1.6; font-weight:500; }
html[data-skin] :is(.teacher-native .button,.teacher-native .btn,.paper-admin .btn,.paper-admin .button,.appearance-entry) { font-size:var(--type-body); line-height:1.5; }
html[data-skin] :is(.form-input,.teacher-native .manager-shell input,.teacher-native .manager-shell select,.teacher-native .manager-shell textarea) { font-size:var(--type-body); line-height:1.6; color:var(--wb-text); background-color:var(--wb-secondary); }
html[data-skin] :is(select.form-input,.teacher-native .manager-shell select) { font-weight:400; }
html[data-skin] :is(.teacher-native .teacher-brand,.teacher-native small,.collage-selected-template small,.collage-library-dialog small,.collage-library-item p,.paper-proportion-heading,.paper-proportion-legend,.paper-overview-scope,.paper-metric-label,.paper-metric-index,.collage-thumb small) { font-size:var(--type-meta); line-height:1.65; }
html[data-skin] :is(.teacher-native .teacher-activity-card h3,.teacher-native .teacher-event-item h3,.teacher-native .teacher-public-item h3,.teacher-native .teacher-todo-title,.teacher-native .record h3,.collage-library-dialog h3,.collage-selected-template strong) { font-size:var(--type-item); line-height:1.6; }
html[data-skin] :is(.teacher-native .collage-copy-row,.paper-admin .collage-copy-row) { grid-template-columns:54px minmax(0,1fr) 40px; gap:10px; align-items:start; }
html[data-skin] .collage-copy-row .form-label { grid-column:auto; padding-top:10px; margin:0; white-space:nowrap; }
html[data-skin] .collage-copy-row textarea { min-height:64px; max-height:200px; padding:10px 12px; overflow-y:auto; resize:vertical; }
html[data-skin] :is(.teacher-native .collage-advanced,.paper-admin .collage-advanced) { padding:16px; background:var(--wb-secondary); border:1px solid var(--wb-line); border-radius:12px; }
html[data-skin] .collage-advanced summary { font-size:var(--type-body); line-height:1.6; font-weight:600; color:var(--wb-text); }
html[data-skin] .app-collage-step-title { margin:0 0 20px; }
html[data-skin] :is(.card,.panel,.stat-card,.login-card,.register-card,.collage-preview-card,.admin-modal-panel,.mobile-sheet-panel,.collage-library-dialog,.appearance-dialog,.image-export-dialog,.compose-calendar,.cp-calendar) { background:var(--wb-surface); color:var(--wb-text); border-color:var(--wb-line); box-shadow:none; }
html[data-skin] :is(.card,.panel,.stat-card) { backdrop-filter:none; }
html[data-skin] :is(.paper-admin .card,.teacher-native .panel,.teacher-native .teacher-collage .card) { background:var(--wb-surface); border:1px solid var(--wb-line); box-shadow:none; }
html[data-skin] .paper-metric { background:var(--wb-surface); border-color:var(--wb-line); box-shadow:none; backdrop-filter:none; }
html[data-skin] .paper-pattern-2::before { background:linear-gradient(140deg,var(--paper-pattern-deep),var(--wb-surface) 82%); }
html[data-skin] :is(.teacher-native .app-detail-list .is-expanded,.teacher-native #hm-todo-list.has-expanded .is-expanded,.teacher-native .app-segment button.active,.teacher-native .header-actions .app-account-button,.teacher-native #hm-preview,.teacher-native .collage-preview-card) { background:var(--wb-surface); }
html[data-skin] :is(.teacher-native .workbench-tabbar,.mobile-admin-topbar) { background:var(--wb-chrome); border-color:var(--wb-line); }
html[data-skin] :is(.btn-primary,.button.primary,.teacher-native .button.primary,.teacher-native .teacher-collage .btn-primary,.teacher-native .mobile-sheet-trigger-primary,.paper-admin .btn-primary,.paper-admin .button.primary,.appearance-done,.image-export-share) { background:var(--paper-accent); color:var(--skin-on-accent)!important; border-color:transparent; }
html[data-skin] :is(.compose-calendar-grid button.selected,.cp-calendar-grid button.selected,.matter-option.is-selected i) { background:var(--paper-accent); color:var(--skin-on-accent); }
html[data-skin] :is(.compose-calendar-grid button.in-range,.cp-calendar-grid button.in-range) { background:var(--paper-tint); color:var(--paper-accent); }
html[data-skin] :is(.mobile-sheet-trigger-primary strong,.mobile-sheet-trigger-primary b,.app-flow-tabs button.active b,.paper-sidebar-card strong,.paper-sidebar-card small,.paper-sidebar-card>span,.paper-admin .sidebar-item.active,.teacher-native .module-tab.active,.paper-admin .mobile-nav-item.active,.teacher-native .teacher-quick-table thead th.app-day-active) { color:var(--skin-on-accent)!important; }
html[data-skin] :is(.paper-sidebar-card,.paper-admin .teacher-workspace-link.paper-sidebar-card,.teacher-native .module-tab.active,.paper-admin .sidebar-item.active,.paper-admin .mobile-nav-item.active) { background:var(--paper-accent); }
html[data-skin] .paper-sidebar-card { border-color:transparent; }
html[data-skin] :is(.paper-profile strong,.paper-sidebar-brand,.paper-sidebar-brand>span,.sidebar-brand,.paper-admin .mobile-nav-title,.paper-admin .mobile-nav-head,.paper-admin .mobile-nav-close) { color:var(--skin-sidebar-text); }
html[data-skin] :is(.paper-profile small,.paper-nav-label,.paper-usage-label,.paper-admin .sidebar-logout,.paper-admin .mobile-nav-desc,.paper-sidebar-brand small,.sidebar-brand-copy small) { color:var(--skin-sidebar-muted); }
html[data-skin] :is(.teacher-native .module-tab,.paper-admin .sidebar-item,.paper-admin .mobile-nav-item) { color:var(--skin-sidebar-text); }
html[data-skin] .paper-admin .mobile-nav-panel { background:var(--paper-sidebar)!important; }
html[data-skin] :is(.button.ghost,.btn-ghost,.appearance-close,.image-export-dialog header button) { background:var(--wb-secondary); color:var(--wb-text); border-color:var(--wb-line); }
html[data-skin] :is(.button.danger,.btn-danger,.login-error,.collage-dialog-error,.collage-library-status.is-error,.management-error,.management-message.is-error) { color:var(--skin-danger); }
html[data-skin] :is(.button.danger,.btn-danger) { border-color:var(--skin-danger); background:var(--skin-danger-bg); }
html[data-skin] :is(.toast-err,#toast.toast-err,.teacher-native .toast.is-error,.image-export-status.is-error) { color:var(--skin-danger); background:var(--skin-danger-bg); border-color:var(--skin-danger); }
html[data-skin] :is(.toast-ok,#toast.toast-ok,.teacher-native .toast:not(.is-error)) { color:var(--skin-success); background:var(--skin-success-bg); border-color:var(--skin-success); }
html[data-skin] :is(.management-warning,.register-note) { background:var(--skin-warning-bg); color:var(--skin-warning); }
html[data-skin] :is(.collage-line-remove,.collage-thumb-actions button,.collage-dialog-close,.admin-modal-close,.mobile-sheet-close) { color:var(--wb-text); background:var(--wb-secondary); }
html[data-skin] :is(.teacher-native .teacher-quick-table thead th,.paper-admin .admin-table thead th) { background:var(--wb-secondary); color:var(--wb-text); border-color:var(--wb-line); }
html[data-skin] .teacher-native .teacher-quick-table thead th.app-day-active { background:var(--paper-accent); }
html[data-skin] .teacher-native .teacher-quick-table td.app-day-active { background:var(--paper-tint); border-color:var(--wb-line); }
html[data-skin] :is(.teacher-native .teacher-quick-table td.app-day-active .lesson-subject-label,.collage-template-current,.image-export-file,.image-export-status) { color:var(--paper-accent); }
html[data-skin] .collage-library-dialog .collage-template-delete:hover { color:var(--skin-danger); }
html[data-skin] :is(input,select,textarea,button,a):focus-visible { outline:2px solid var(--paper-accent); outline-offset:3px; }
html[data-skin] :is(input,textarea)::placeholder { color:var(--wb-muted); opacity:1; }
html[data-skin] :is(.form-input,.login-input,.teacher-native .manager-shell input,.teacher-native .manager-shell select,.teacher-native .manager-shell textarea) { border-color:var(--skin-control-line); }
/* Settings stay reachable from either sidebar and on narrow screens. */
.appearance-entry { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid var(--wb-line); border-radius:9px; background:var(--wb-secondary); color:var(--wb-text); font:inherit; cursor:pointer; }
.appearance-sidebar-entry { width:100%; margin-top:12px; text-align:left; justify-content:flex-start; background:var(--paper-side-raised); color:var(--skin-sidebar-text); border-color:var(--paper-side-track); font-size:13px; }
html[data-skin] .paper-account-footer .paper-profile { margin-bottom:16px; }
html[data-skin] .paper-account-footer .appearance-sidebar-entry { margin:0 0 20px; }
html[data-skin] .paper-account-footer .paper-sidebar-card { margin-top:24px; }
.appearance-entry>svg { width:18px; height:18px; flex:none; }
html[data-skin] .paper-admin .mobile-theme-toggle { display:inline-flex; min-height:44px; min-width:44px; color:var(--wb-text); background:var(--wb-secondary); }
html[data-skin] .teacher-native .header-actions { flex-wrap:wrap; gap:8px; }
/* Grid settings have a compact trigger, separate from full editing accordions. */
html[data-skin] .teacher-native .teacher-collage .collage-preview-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; }
html[data-skin] .teacher-native .collage-preview-card> * { grid-column:1 / -1; }
html[data-skin] .teacher-native .collage-preview-card>.homework-card-head { grid-column:1; grid-row:1; min-height:44px; margin:0; align-items:center; }
html[data-skin] .teacher-native .collage-preview-card>.app-grid-settings { grid-column:2; grid-row:1; position:static; align-self:start; margin:0; padding:0; border:0; background:none; }
html[data-skin] .teacher-native .app-grid-settings>summary { min-height:44px; padding:0 12px; font-size:var(--type-label); font-weight:500; line-height:1.5; white-space:nowrap; color:var(--wb-text); border:1px solid var(--wb-line); }
html[data-skin] .teacher-native .collage-preview-card>.app-grid-settings[open] { grid-column:1 / -1; grid-row:auto; padding:12px; border:1px solid var(--wb-line); background:var(--wb-secondary); }
html[data-skin] .teacher-native .app-grid-settings[open]>.form-row { margin-top:12px; }
html[data-skin] .teacher-native .collage-preview-card>.collage-canvas-shell { margin-top:0; }
html[data-skin] .teacher-native .app-collage-stage .collage-link-content>.form-row { margin:16px 0 0; }
html[data-skin] .teacher-native .app-collage-stage .collage-link-content>.card-desc:last-child { margin:16px 0 0; }
html[data-skin] .teacher-native .cp-format>h3 { font-size:var(--type-section); font-weight:600; line-height:1.5; }
html[data-skin] .teacher-native .cp-matter-group h3 { font-size:var(--type-body); font-weight:600; line-height:1.6; color:var(--wb-text); margin:0 0 10px; }
html[data-skin] .teacher-native .cp-matter-group { margin-bottom:24px; }
.appearance-dialog { position:fixed; inset:0; margin:auto; width:min(540px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain; padding:24px; border:1px solid var(--wb-line); border-radius:20px; font:inherit; box-sizing:border-box; }
.appearance-dialog::backdrop { background:rgba(8,14,23,.58); }
.appearance-dialog header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.appearance-dialog h2 { font-size:20px; margin:0; line-height:1.5; }
.appearance-current { font-size:13px; color:var(--wb-muted); margin:6px 0 0; }
.appearance-dialog button { font:inherit; cursor:pointer; min-height:44px; border-radius:9px; }
.appearance-close { width:44px; border:1px solid var(--wb-line); font-size:24px!important; }
.appearance-dialog fieldset { margin:24px 0 0; padding:0; border:0; }
.appearance-dialog legend { font-size:14px; font-weight:600; margin-bottom:12px; }
.appearance-colors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.appearance-colors button { display:flex; align-items:center; gap:8px; padding:12px 10px; border:1px solid var(--wb-line); background:var(--wb-secondary); color:var(--wb-text); font-size:14px; text-align:left; }
.appearance-swatch { width:18px; height:18px; border-radius:50%; flex:none; box-shadow:0 0 0 1px var(--wb-line); }
.appearance-check { margin-left:auto; visibility:hidden; color:var(--paper-accent); }
.appearance-colors button[aria-checked=true] { border-color:var(--paper-accent); background:var(--paper-tint); }
.appearance-colors button[aria-checked=true] .appearance-check { visibility:visible; }
.appearance-modes { display:flex; gap:8px; }
.appearance-modes button { flex:1; padding:10px 8px; border:1px solid var(--wb-line); background:var(--wb-secondary); color:var(--wb-text); font-size:14px; }
.appearance-modes button[aria-checked=true] { background:var(--paper-accent); border-color:var(--paper-accent); color:var(--skin-on-accent); }
.appearance-note { margin:20px 0; color:var(--wb-muted); font-size:13px; line-height:1.75; }
.appearance-dialog footer { display:flex; justify-content:flex-end; border-top:1px solid var(--wb-line); padding-top:16px; }
.appearance-done { padding:10px 24px; border:0; }
/* Admin uses the same five-stage structure as the teacher workbench. */
.paper-admin .app-flow-tabs { display:flex; gap:10px; margin:0 0 24px; }
.paper-admin .app-flow-tabs button { flex:1; display:flex; justify-content:center; align-items:center; gap:8px; min-height:48px; padding:10px; border:1px solid var(--wb-line); border-radius:10px; background:var(--wb-surface); color:var(--wb-text); font:inherit; font-size:13px; cursor:pointer; }
.paper-admin .app-flow-tabs b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--wb-secondary); font-size:12px; }
.paper-admin .app-flow-tabs button.active { color:var(--paper-accent); background:var(--paper-tint); border-color:var(--paper-accent); font-weight:600; }
.paper-admin .app-flow-tabs button.active b { background:var(--paper-accent); }
.paper-admin .app-collage-stage[hidden],.paper-admin .collage-controls[hidden],.paper-admin .app-collage-export-actions[hidden] { display:none!important; }
.paper-admin #page-teacher-collage .collage-controls { padding:24px; }
.paper-admin .app-collage-stage .collage-link-content { margin:0; padding:0; border:0; }
.paper-admin .app-collage-stage .collage-link-content>.card-title,.paper-admin .app-collage-stage>.collage-section-title { display:none; }
.paper-admin .app-collage-stage .admin-collage-context { margin:0; padding:0; border:0; }
.paper-admin .app-collage-stage .admin-collage-context>.card-title { display:none; }
.paper-admin .app-collage-stage .collage-copy-library { margin-top:24px; }
.paper-admin .collage-step-actions { display:flex; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--wb-line); }
.paper-admin .collage-step-actions .btn-primary { flex:1; }
.paper-admin #page-teacher-collage .collage-preview-card { position:sticky; top:24px; }
.paper-admin #page-teacher-collage canvas { max-height:58dvh; width:100%; object-fit:contain; }
.paper-admin #page-teacher-collage[data-flow-step="4"] .collage-workspace { grid-template-columns:1fr; }
.paper-admin #page-teacher-collage[data-flow-step="4"] .collage-preview-card { position:static; }
.paper-admin .app-collage-export-actions { display:flex; flex-wrap:wrap; gap:12px; padding-top:20px; margin-top:20px; border-top:1px solid var(--wb-line); }
@media(max-width:768px) {
  html[data-skin] { --type-page:28px; }
  html[data-skin] :is(input.form-input,textarea.form-input,.teacher-native .manager-shell input,.teacher-native .manager-shell textarea) { font-size:16px; }
  .appearance-colors { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .appearance-dialog { padding:20px; }
  .paper-admin .app-flow-tabs { overflow-x:auto; scrollbar-width:none; gap:8px; }
  .paper-admin .app-flow-tabs button { flex:none; min-width:100px; flex-direction:column; gap:4px; }
  .paper-admin #page-teacher-collage .collage-workspace { grid-template-columns:1fr; }
  .paper-admin #page-teacher-collage:not([data-flow-step="4"]) .collage-preview-card { order:-1; position:static; padding:16px; }
  .paper-admin #page-teacher-collage:not([data-flow-step="4"]) canvas { height:22dvh; max-height:200px; }
  .paper-admin #page-teacher-collage .collage-controls { padding:20px; }
  html[data-skin] .teacher-native .teacher-collage:not([data-flow-step="4"]) :is(.card-title,#ts-collage-summary) { font-size:var(--type-label); }
  html[data-skin] .teacher-native .app-class-chip select { font-size:var(--type-body)!important; }
  .teacher-native .header-actions .appearance-entry { padding:8px 10px; font-size:13px; }
}
@media(max-width:720px) {
  html[data-skin] .teacher-native .manager-header { flex-direction:row; align-items:center; gap:12px; margin-left:0; margin-right:0; }
  html[data-skin] .teacher-native .manager-header>div:first-child { min-width:0; flex:1; }
  html[data-skin] .teacher-native .manager-header .teacher-brand { margin-bottom:6px; letter-spacing:0; }
  html[data-skin] .teacher-native .manager-header h1 { font-size:clamp(22px,5.8vw,26px); margin:0; letter-spacing:-.025em; }
  html[data-skin] .teacher-native .header-actions { width:auto; flex:none; flex-wrap:nowrap; justify-content:flex-end; gap:6px; }
  html[data-skin] .teacher-native .app-class-chip { max-width:90px; }
  html[data-skin] .teacher-native .header-actions .appearance-entry { width:44px; height:44px; padding:0; }
  html[data-skin] .teacher-native .header-actions .appearance-entry>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  html[data-skin] .teacher-native .header-actions .appearance-entry>svg { width:21px; height:21px; }
  html[data-skin] .paper-metric { height:112px; }
}
@media(max-width:360px) { html[data-skin] .teacher-native .app-class-chip { max-width:64px; } }