/* Complete interface skins. Geometry and material identity never change with a skin. */
body[data-skin]{--ink:#17121f;--panel:#211a2b;--raised:#30283f;--surface:#272034;--well:#14101c;--text:#fbf8ff;--white:var(--text);--muted:#c7bed2;--line:#81718e66;--orange:#ffb866;--hot:#ff943e;--accent-ink:#28172a;--soft:#ffb86616;--band:#251c32;--header:#f6f1e9;--header-ink:#3b3147;--wallpaper:url('assets/paw-wallpaper-dark.png');--shade:#14111fc9;color:var(--text);background:linear-gradient(var(--shade),var(--shade)),var(--wallpaper) center 120px/1500px auto fixed}
body[data-skin=daylight]{--ink:#fff;--panel:#fff;--raised:#edf1f4;--surface:#f6f8fa;--well:#e8edf1;--text:#192d39;--muted:#425665;--line:#9baab780;--orange:#94440d;--hot:#703006;--accent-ink:#fff;--soft:#9b490e10;--band:#f0f4f6;--header:#fff;--header-ink:#243843;--wallpaper:url('assets/paw-wallpaper.png');--shade:#fffffff2}
body[data-skin=graphite]{--ink:#121a22;--panel:#19242e;--raised:#293845;--surface:#202e3b;--well:#101820;--text:#f3f7fa;--muted:#bccbd5;--line:#7c96a366;--orange:#ffbf70;--hot:#ffd09a;--accent-ink:#1d2932;--soft:#ffbf7015;--band:#17232d;--header:#dbe3e4;--header-ink:#243440;--shade:#101b26f2}
body[data-skin=blueprint]{--ink:#0b1b30;--panel:#10293f;--raised:#183c58;--surface:#12334c;--well:#081a2c;--text:#f2fbff;--muted:#b5d4e3;--line:#6397ad70;--orange:#85e0f1;--hot:#b0f1fa;--accent-ink:#09273c;--soft:#85e0f115;--band:#0b243b;--header:#dcebf0;--header-ink:#183c58;--shade:#081d34ec}
body[data-skin=philadelphia]{--ink:#0c2829;--panel:#123739;--raised:#21494a;--surface:#183e40;--well:#082628;--text:#f1fbf7;--muted:#bdd6ce;--line:#83afa66b;--orange:#bde7db;--hot:#def8ee;--accent-ink:#103430;--soft:#bde7db15;--band:#103133;--header:#dce8e2;--header-ink:#153f3d;--shade:#092b2ced}
body[data-skin]:before{background:none}
body[data-skin] .top-nav{background:var(--panel);border-color:var(--line)}
body[data-skin] :is(.nav-wordmark,.nav-links,.library-actions){color:var(--text)}
body[data-skin] :is(.hero-visual,.room-card,.planswift-steps,.relationship-demo,.lesson-card,.question-panel,.math-panel,.assembly-costs,.capability-panel,.study-controls,.study-viewer,.study-sidebar,.workflow-panel){background:var(--surface);border-color:var(--line);color:var(--text)}
body[data-skin] .hero-visual:after{background:radial-gradient(ellipse,var(--soft),transparent 65%)}
body[data-skin] :is(.capability-strip,.playground-section,.review-section,.access-section,.capabilities-section){background:var(--band);border-color:var(--line)}
body[data-skin] :is(.studio-shell,.studio-title,.model-tabs,.parts-panel,.model-panel,dialog){background:var(--panel);border-color:var(--line);color:var(--text)}
body[data-skin] :is(.studio-rail,.model-toolbar,.dimension-bar,.selection-info,.marking-controls,.cost-table th){background:var(--raised);color:var(--text);border-color:var(--line)}
body[data-skin] :is(.model-tabs button,.segmented button,.part-button,.plan-choices button,.btn,.answer-option,.study-list button,.capability-tabs button){background:var(--raised);border-color:var(--line);color:var(--text)}
body[data-skin] :is(.btn.primary,.skip){background:var(--orange);color:var(--accent-ink);border-color:var(--orange)}
body[data-skin] :is(.model-tabs .active,.segmented .active,.part-button.active,.plan-choices .active,.answer-option.selected,.study-list button[aria-pressed=true],.capability-tabs button[aria-selected=true]){background:var(--soft);color:var(--orange);border-color:var(--orange)}
body[data-skin] :is(input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea,select,.cost-table input,.cost-table select,.library-actions input){background:var(--well);color:var(--text);border-color:var(--line)}
body[data-skin] input::placeholder,body[data-skin] textarea::placeholder{color:var(--muted);opacity:.9}
body[data-skin] :is(p,.lead,.hero-copy .lead,.room-card p,.lesson-card p,.faq-grid p,.learning-loop p,.workflow-line p,.relationship-result p,.selection-basis,.demo-caption,.small-note,.model-hint,.tag,.model-source small,.hero-footnote,.library-actions .text-link,.learning-section>.small-note,.annotation-controls>span,.cost-table small,.cost-footer>span,.cost-footer>div>span,.purchase-unit,.purchase-quantity){color:var(--muted)}
body[data-skin] :is(.eyebrow,.room-number,.room-link,.hero-copy h1 span,.plan-copy h2 span,.section-heading h2 span,.selection-dimensions,.cost-footer strong,.cost-extension,.model-source strong,.lesson-card summary,.part-description span,.marking-controls #marking-status,.workflow-line b,.footer a,.explode-control output,.dimension-bar output){color:var(--orange)}
body[data-skin] :is(.plan-explanation,.workflow-line,.learning-loop,.faq-grid details,.tag,.cost-table td,.parts-panel,.explode-control){border-color:var(--line)}
body[data-skin] .relationship-result{background:var(--well);color:var(--text)}
body[data-skin] .relationship-result strong{color:var(--text)}
body[data-skin] .relationship-result[data-status=conflict]{border-color:#e8936f}
body[data-skin] .relationship-result[data-status=scoped-clear]{border-color:#64b59a}
body[data-skin] .component-tags span,body[data-skin] .purchase-card,body[data-skin] .dot-mode .purchase-card{background:var(--panel);color:var(--text);border-color:var(--line)}
body[data-skin] :is(.purchase-title,.purchase-name,.purchase-price){color:var(--text)}
body[data-skin] .purchase-pin{background:var(--orange);color:var(--accent-ink);border-color:var(--text)}
body[data-skin] .purchase-number{background:var(--orange);color:var(--accent-ink)}
body[data-skin] .toast{background:var(--orange);color:var(--accent-ink)}
body[data-skin] .dialog-close{color:var(--text)}
body[data-skin=daylight] .model-stage{background:linear-gradient(155deg,#f9fbfc,#e5ecf0)}
body[data-skin=daylight] .hero-visual{background:linear-gradient(155deg,#fff,#e8eef2)}
body[data-skin] .drawing-panel,body[data-skin] .plan-sheet{background:#faf8f3;color:#2c3440}
body[data-skin] .drawing-panel .small-note,body[data-skin] .drawing-legend,body[data-skin] .panel-label{color:#56616d}
body[data-skin] .plan-sheet :is(.sheet-top,.sheet-bottom){color:#59616c}
body[data-skin] .hero-callout{background:var(--panel);color:var(--text);border-color:var(--line)}
.skin-trigger{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;padding:9px 12px}
.skin-indicator{width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:inset 0 0 0 4px var(--raised);border:1px solid var(--orange)}
#skin-dialog{max-width:760px;padding:30px;max-height:90vh;overflow:auto}#skin-dialog h2{font-size:36px;margin:12px 0}#skin-dialog>p{font-size:15px;max-width:600px}
.skin-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.skin-choice{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:9px;cursor:pointer;position:relative}.skin-choice:has(input:checked){border:2px solid var(--orange);padding:12px;background:var(--soft)}.skin-choice input{accent-color:var(--orange);width:17px;height:17px;flex-shrink:0}.skin-choice strong{display:block;font-size:16px;margin-bottom:5px}.skin-choice small{display:block;color:var(--muted);font-size:13px;line-height:1.45}.skin-preview{display:block;width:55px;height:61px;flex-shrink:0;border-radius:5px;background:var(--preview-bg);border:1px solid #80808077;position:relative;overflow:hidden}.skin-preview i{position:absolute;inset:0 0 auto;height:10px;background:var(--preview-accent)}.skin-preview b{position:absolute;inset:16px 6px 6px 13px;background:var(--preview-panel);border-radius:2px}.skin-preview em{position:absolute;width:21px;height:6px;right:10px;bottom:11px;background:var(--preview-accent);border-radius:2px}.comfort-option{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:18px 0;font-size:15px}.comfort-option input{width:19px;height:19px;accent-color:var(--orange)}#skin-status{font-size:13px;min-height:42px}.skin-dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.skin-dialog-actions small{font-size:12px;line-height:1.5;color:var(--muted)}
body[data-calm=true] *,body[data-calm=true] *:before,body[data-calm=true] *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
@media(max-width:600px){.skin-choices{grid-template-columns:1fr}#skin-dialog{padding:24px}.skin-trigger{font-size:11px;padding:9px 7px}.skin-trigger .skin-label{display:none}.skin-dialog-actions{align-items:start;flex-direction:column}.skin-preview{height:48px}.top-nav{padding-left:15px;padding-right:15px}}