/* Command Center / Material Atelier — purposeful glass, not overlay clutter. */
.garage-lab{--config-width:400px}
.garage-lab #config{border-radius:22px;background:linear-gradient(150deg,#16202be8,#080d15f5 70%);box-shadow:0 30px 80px #0009,inset 0 1px #d3edff20}
.garage-lab .brand b{letter-spacing:2.3px}.garage-lab .lab-steps::before{background:linear-gradient(135deg,#a9253c70,#54152255);border-color:#ff7e8b55;box-shadow:0 5px 25px #a8132920,inset 0 1px #ffc4cb24}.garage-lab .lab-steps button.active span{color:#ff8e9e}
.lab-hud{left:26px;top:101px}.lab-eyebrow{font-size:9px;letter-spacing:2px}.lab-readouts{border:0;background:none;backdrop-filter:none;padding:0;gap:28px;margin-top:15px}.lab-readouts small{font-size:8px;color:#91a8b9}.lab-readouts b{font-size:21px;font-weight:300;color:#e7f8ff}
.cc-console{position:absolute;z-index:12;left:25px;top:195px;width:218px;border:1px solid #c3e2f22a;border-radius:17px;background:linear-gradient(140deg,#1e2a37db,#090f1be8);box-shadow:0 12px 45px #0005,inset 0 1px #d3f2ff19;backdrop-filter:blur(22px);font:12px Arial,sans-serif}
.cc-console summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:13px 12px;min-height:57px;font-size:9px;letter-spacing:1px;color:#e2eff6}.cc-console summary::-webkit-details-marker{display:none}.cc-console summary small{display:block;font-size:9px;color:#829aaf;letter-spacing:0;margin-top:5px}.cc-console summary b{margin-left:auto;font-size:16px;font-weight:400;color:#9be5ee;transition:transform .2s}.cc-console[open] summary b{transform:rotate(180deg)}.cc-orbit{font:25px Arial,sans-serif;color:#f04b64}.cc-console-body{padding:0 12px 12px;border-top:1px solid #e0f4ff12}
.cc-environment{font:8px Arial,sans-serif;letter-spacing:1.5px;color:#90a9bc;display:block;margin:13px 0 10px}.cc-environment select{display:block;width:100%;margin-top:7px;min-height:41px;border:1px solid #afddf02b;border-radius:9px;background:#0b1420;color:#e0f2fa;padding:8px 10px;font:12px Arial,sans-serif;letter-spacing:0}
.cc-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.cc-mode-grid button{display:flex;flex-direction:column;gap:8px;text-align:left;min-height:75px;padding:11px 9px;background:#9dd9f006;border:1px solid #b9e3f51d;border-radius:10px;color:#bbd2e2;font:10px/1.4 Arial,sans-serif;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}.cc-mode-grid button i{font-style:normal;font-size:21px;color:#96b8ce}.cc-mode-grid button:hover{background:#d2efff0d;border-color:#caeaff66;transform:translateY(-2px)}.cc-mode-grid button[aria-pressed=true]{background:linear-gradient(130deg,#ce2e4833,#48202b20);border-color:#ff678266;color:#ffe4e9}.cc-mode-grid button[aria-pressed=true] i{color:#ff7a8f}.cc-console button:disabled,.cc-console select:disabled{opacity:.4;cursor:wait;transform:none}.cc-state{font:10px/1.6 Arial,sans-serif;color:#92adbf;margin:12px 0 0}.cc-skip{width:100%;margin-top:8px;background:#9de8ef14;border:1px solid #9de8ef40;padding:10px;color:#c5f3f8;border-radius:8px;cursor:pointer}
.cc-atelier{border:1px solid #d3e9f51f;border-radius:15px;padding:15px;background:linear-gradient(135deg,#a5cfe807,#05101a55);margin-bottom:5px}.cc-section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.cc-section-heading span{font:10px ui-monospace,Consolas,monospace;letter-spacing:1.7px;color:#dcecf8}.cc-section-heading small{font:7px Arial,sans-serif;letter-spacing:1px;color:#7e9fb2}.cc-surface-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:#030a1380;border:1px solid #c1e3f21b;border-radius:9px;padding:4px}.cc-surface-tabs button,.cc-family button{border:0;background:transparent;color:#8aa7bc;min-height:36px;font:11px Arial,sans-serif;border-radius:6px;cursor:pointer}.cc-surface-tabs button[aria-pressed=true]{background:#243745;color:#d7f5ff;box-shadow:0 2px 8px #0004}.cc-material-hero{display:grid;grid-template-columns:85px 1fr;gap:15px;align-items:center;margin:20px 0}.cc-hero-sample{height:85px;width:85px;background-size:cover;border-radius:11px;transform:perspective(300px) rotateY(-14deg) rotateX(5deg);border:1px solid #ffffff45;box-shadow:7px 9px 0 #0003,10px 15px 25px #0005;transition:background .35s}.cc-material-hero small{text-transform:uppercase;color:#8bb9cb;font:9px ui-monospace,monospace;letter-spacing:1.5px}.cc-material-hero h3{font:500 21px/1.1 Arial,sans-serif;color:#f1f7fb;margin:7px 0 6px;letter-spacing:-.5px}.cc-material-hero p{font:10px/1.6 Arial,sans-serif;color:#839bae;margin:0}.cc-family{display:flex;gap:5px;border-bottom:1px solid #c1e3f21a;margin-bottom:14px}.cc-family button{padding:6px 11px;border-radius:0;position:relative}.cc-family button[aria-pressed=true]{color:#eefaff}.cc-family button[aria-pressed=true]::after{content:'';height:2px;background:#fb607b;position:absolute;bottom:-1px;left:10px;right:10px;box-shadow:0 0 12px #fb607b66}
.cc-material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}.cc-material{background:transparent;border:1px solid transparent;border-radius:10px;padding:4px;color:#a3bbcd;min-width:0;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;text-align:left}.cc-material:hover{background:#d4f5ff0a;transform:translateY(-2px)}.cc-material[aria-pressed=true]{border-color:#b3edfc75;background:#afd9ee0a;color:#e9fbff}.cc-sample{height:51px;display:block;background-size:cover;border:1px solid #ffffff2a;border-radius:7px;box-shadow:inset 0 1px #ffffff20}.cc-sample-name{display:block;font:10px/1.35 Arial,sans-serif;padding:6px 2px 1px;min-height:34px;overflow-wrap:anywhere}.cc-material[aria-pressed=true] .cc-sample::after{content:'✓';display:block;float:right;margin:4px;background:#08131fcc;border:1px solid #d4f5ff55;color:#e9fcff;border-radius:50%;width:17px;height:17px;font:11px/17px Arial;text-align:center}
.cc-material-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.cc-material-actions button,.cc-edit-colors{border:1px solid #b4d9eb30;border-radius:9px;min-height:42px;background:#b4d9eb08;color:#c9e8f6;font:11px Arial,sans-serif;cursor:pointer;padding:9px}.cc-material-actions button:disabled{opacity:.4;cursor:wait}.cc-material-notice{font:11px/1.5 Arial,sans-serif;color:#c2dfea;margin:10px 0 0;min-height:0}.cc-material-notice:empty{display:none}.cc-edit-colors{width:100%;margin:8px 0}
.cc-comparison{width:min(1050px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:26px;background:linear-gradient(130deg,#1d2a36,#080e18 70%);color:#e3f2fa;border:1px solid #badcec42;border-radius:22px;box-shadow:0 25px 90px #000a;font-family:Arial,sans-serif}.cc-comparison::backdrop{background:#02050bd9;backdrop-filter:blur(12px)}.cc-comparison header{display:flex;align-items:center;justify-content:space-between}.cc-comparison header small{font:10px ui-monospace,monospace;letter-spacing:2px;color:#9bc4d6}.cc-comparison h2{font-size:27px;font-weight:500;letter-spacing:-.7px;margin:9px 0}.cc-comparison>p{font:12px/1.7 Arial,sans-serif;color:#9fb7c9;max-width:720px;margin:12px 0 22px}.cc-comparison button{cursor:pointer;border:1px solid #bce5f83a;border-radius:9px;background:#a3d5eb0c;color:#d5edf7;padding:11px 15px;min-height:43px;font:12px Arial,sans-serif}.cc-comparison button.cc-close{font-size:25px;padding:4px 12px}.cc-comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.cc-comparison-item{min-width:0;border:1px solid #bce5f825;border-radius:13px;padding:14px;background:#06101b66}.cc-comparison-item h3{font:10px ui-monospace,monospace;letter-spacing:2px;color:#fb8b9f;margin:0 0 12px}.cc-comparison-item img{width:100%;height:220px;object-fit:contain;display:block;background:#040a12;border-radius:7px}.cc-comparison-item p{font:11px/1.7 Arial,sans-serif;color:#a3bacb;min-height:40px}.cc-comparison-empty{height:220px;display:grid;place-items:center;background:radial-gradient(ellipse,#263b4a45,#030810);border:1px dashed #a4cadb30;border-radius:7px;color:#7897aa;font-size:12px;margin-bottom:12px}.cc-comparison footer{text-align:right;margin-top:20px}.cc-comparison footer button{background:#b92e46;border-color:#f5688150;color:white}
@media(min-width:821px) and (max-width:1190px){.garage-lab{--config-width:355px}.cc-console{left:20px;top:177px;width:190px}.cc-mode-grid button{font-size:9px;padding:9px 7px}.cc-console summary{font-size:8px}.lab-readouts{gap:20px}.lab-readouts b{font-size:18px}.cc-atelier{padding:12px}.cc-material-hero{grid-template-columns:68px 1fr;gap:11px}.cc-hero-sample{height:68px;width:68px}.cc-material-hero h3{font-size:19px}.cc-surface-tabs button{font-size:10px}}
@media(max-width:820px){.cc-console{left:auto;right:14px;top:122px;width:212px;max-height:calc(100dvh - 210px);overflow-y:auto;border-radius:13px}.cc-console:not([open]){width:auto}.cc-console summary{padding:9px 11px;min-height:42px;font-size:8px;gap:6px}.cc-console summary small{display:none}.cc-orbit{font-size:21px}.cc-console-body{padding:0 10px 10px}.cc-console[open]{box-shadow:0 15px 65px #000c;background:#0d1727f5}.cc-mode-grid button{min-height:64px}.garage-lab #app.panel-open .cc-console{top:109px;max-height:calc(44dvh - 155px);max-width:calc(100vw - 28px)}.garage-lab #app.panel-open .cc-console[open]{position:fixed;top:110px;bottom:auto;max-height:calc(100dvh - 170px);z-index:30}.lab-hud{left:19px;top:80px}.lab-readouts{gap:21px}.lab-readouts b{font-size:16px}.lab-readouts small{font-size:7px}.cc-atelier{padding:13px}.cc-material-hero{grid-template-columns:85px 1fr}.cc-material-grid{gap:10px}.cc-sample{height:59px}.cc-sample-name{font-size:11px}.cc-material-actions button{font-size:11px;min-height:45px}.cc-surface-tabs button{min-height:40px;font-size:11px}.cc-comparison{padding:17px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:17px}.cc-comparison-grid{grid-template-columns:1fr}.cc-comparison h2{font-size:23px}.cc-comparison-item img,.cc-comparison-empty{height:190px}.cc-comparison-item p{min-height:0}.cc-comparison footer button{width:100%}}
@media(max-width:360px){.cc-console{right:10px;top:119px}.cc-console summary{font-size:7px;letter-spacing:.7px}.cc-section-heading small{display:none}.cc-material-hero{grid-template-columns:68px 1fr;gap:12px}.cc-hero-sample{width:68px;height:68px}.cc-material-hero h3{font-size:19px}.cc-surface-tabs button{font-size:10px}.cc-material-grid{gap:6px}.cc-material-actions{grid-template-columns:1fr}.cc-sample{height:48px}}
@media(prefers-reduced-motion:reduce){.cc-console *,.cc-atelier *{transition:none!important;animation:none!important}.cc-material:hover,.cc-mode-grid button:hover{transform:none}}
.garage-lab .lab-steps{position:sticky;top:0;z-index:8;background:#08111ef2;backdrop-filter:blur(20px);box-shadow:0 5px 20px #0005}
.cc-precision-hint{position:absolute;left:32px;bottom:155px;z-index:9;color:#b8dce8;background:#07111ddd;padding:9px 12px;border:1px solid #9cd9e32a;border-radius:9px;font:11px/1.5 Arial,sans-serif;pointer-events:none;max-width:calc(100% - var(--config-width) - 85px)}@media(max-width:820px){.cc-precision-hint{left:14px;right:14px;bottom:190px;max-width:none;text-align:center;font-size:10px}.garage-lab #app.panel-open .cc-precision-hint{bottom:calc(56dvh + 52px);left:12px;right:12px;padding:5px 7px;font-size:9px}}
@media(max-width:820px){.garage-lab #app:not(.panel-open) .cc-console{top:155px}}
@media(max-width:820px){.garage-lab #app.panel-open .lab-hud .cc-mode-badge{display:flex;font-size:6px;letter-spacing:.45px;gap:5px;margin-bottom:5px;white-space:nowrap}.garage-lab #app.panel-open .cc-mode-badge>span{width:3px;height:3px}.garage-lab #app.panel-open .lab-hud{top:61px}.cc-mode-badge{font-size:7px;letter-spacing:.7px}}@media(max-width:360px){.garage-lab #app.panel-open .lab-hud .cc-mode-badge{font-size:5.5px;letter-spacing:.2px}}
/* One framed view dock: product actions above camera positions. */
.cc-viewdock{position:absolute;left:28px;bottom:23px;z-index:11;max-width:calc(100% - var(--config-width) - 75px);border:1px solid #bddde52d;border-radius:17px;background:linear-gradient(140deg,#1a2c3ae8,#0b1421ef);backdrop-filter:blur(22px);box-shadow:0 15px 40px #0006,inset 0 1px #d3efff16;padding:6px}
.garage-lab #app .cc-viewdock .lab-view-actions{position:static;display:flex;gap:4px;padding:0 2px 5px;border-bottom:1px solid #c2dfea1b;margin:0 0 3px}
.garage-lab #app .cc-viewdock .lab-view-actions button{font-size:11px;width:auto;min-width:0;min-height:33px;border-radius:9px;border-color:transparent;background:transparent;padding:7px 10px;backdrop-filter:none;color:#abc7d8}
.garage-lab #app .cc-viewdock .lab-view-actions button span{font-size:13px;margin-right:5px}
.garage-lab #app .cc-viewdock .lab-view-actions button[aria-pressed=true]{border-color:#a5dfe32d;background:#9edce30c;color:#d1f0fa}
.garage-lab #app .cc-viewdock #sceneTools{position:static;left:auto;right:auto;bottom:auto;max-width:none;width:auto;display:flex;flex-wrap:nowrap;gap:1px;overflow-x:auto;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;backdrop-filter:none;margin:0}
.garage-lab #app .cc-viewdock #sceneTools button{min-height:35px;white-space:nowrap;padding:8px 10px;font-size:11px;transform:none;background:transparent;box-shadow:none;border-radius:8px}
.garage-lab #app .cc-viewdock #sceneTools button:hover{background:#a8dbea12}.garage-lab #app .cc-viewdock #sceneTools button[aria-pressed=true]{background:#a8dbea16}
.cc-precision-hint{bottom:132px}
@media(min-width:821px) and (max-width:1100px){.cc-viewdock{left:20px;max-width:calc(100% - var(--config-width) - 55px)}.garage-lab #app .cc-viewdock #sceneTools button{font-size:10px;padding:8px}}
@media(max-width:820px){.cc-viewdock{left:12px;right:12px;bottom:82px;max-width:none;padding:4px;border-radius:14px}.garage-lab #app .cc-viewdock .lab-view-actions{padding:0 2px 4px;margin-bottom:2px}.garage-lab #app .cc-viewdock .lab-view-actions button{font-size:10px;min-height:31px;padding:6px 9px}.garage-lab #app .cc-viewdock #sceneTools button{min-height:32px;padding:7px 9px;font-size:10px}.garage-lab #app.panel-open .cc-viewdock{bottom:calc(56dvh + 7px);left:10px;right:10px;padding:3px}.garage-lab #app.panel-open .cc-viewdock .lab-view-actions button{min-height:25px;padding:4px 8px;font-size:9px}.garage-lab #app.panel-open .cc-viewdock .lab-view-actions button span{font-size:11px}.garage-lab #app.panel-open .cc-viewdock #sceneTools button{min-height:26px;font-size:9px;padding:5px 8px}.cc-precision-hint{bottom:182px}.garage-lab #app.panel-open .cc-precision-hint{bottom:calc(56dvh + 83px)}}
@media(max-width:360px){.garage-lab #app .cc-viewdock #sceneTools button{padding:7px;font-size:9px}.garage-lab #app.panel-open .cc-viewdock #sceneTools button{padding:5px 6px;font-size:8px}}
.profile-preview{display:grid;grid-template-columns:104px 1fr;gap:12px;margin-top:14px;padding:12px;background:#102129;border:1px solid #34565b;border-radius:12px}.profile-preview svg{width:104px;align-self:center}.profile-preview strong{font-size:12px;color:#d5faff}.profile-preview p{font-size:11px;line-height:1.5;margin:6px 0;color:#b7c8d0}.profile-preview button{width:100%;background:#25474e;color:#e4fdff;border:1px solid #5c949c;padding:9px 6px;border-radius:7px;cursor:pointer;font:600 11px sans-serif}.profile-preview small{display:block;color:#a7bbc4;font-size:9px;line-height:1.4;margin-top:8px}@media(max-width:420px){.profile-preview{grid-template-columns:88px 1fr;gap:8px}.profile-preview svg{width:88px}}
.cc-env{display:grid;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid #b9e3f51a}.cc-env-label{font:600 8px/1 'Barlow Condensed',Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#7f9bb0}.cc-env-seg{display:grid;grid-template-columns:1fr 1fr;gap:5px}.cc-env-seg button{min-height:34px;padding:7px 8px;background:#9dd9f006;border:1px solid #b9e3f51d;border-radius:9px;color:#bbd2e2;font:600 11px/1 'Barlow Condensed',Arial,sans-serif;letter-spacing:.4px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.cc-env-seg button:hover{border-color:#b9e3f550;color:#fff}.cc-env-seg button[aria-pressed=true]{background:linear-gradient(140deg,#e2384b33,#e2384b14);border-color:#ff5a6a88;color:#fff}
