:root{--ink:#172033;--muted:#667085;--line:#e6e9ef;--paper:#f6f8fb;--panel:#fff;--blue:#0099D8;--purple:#8B5CF6;--teal:#14B8A6;--orange:#F59E0B;--radius:18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}.topbar{height:82px;background:#101827;color:#fff;display:flex;align-items:center;padding:0 28px;gap:13px;border-bottom:1px solid #263247}.brandmark{width:66px;height:42px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 5px 14px #0099d84d)}.brand{font-size:16px;font-weight:800;letter-spacing:.1px}.brand span{color:#9cdcf7;font-weight:600}.subbrand{font-size:11px;color:#aab6c8;margin-top:4px}.top-actions{margin-left:auto;display:flex;gap:9px}.layout{display:grid;grid-template-columns:350px minmax(0,1fr);gap:22px;max-width:1600px;margin:auto;padding:22px}.sidebar,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 28px #16223b08}.sidebar{padding:20px;align-self:start;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}.workspace{display:grid;gap:18px;min-width:0}.panel{padding:22px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.45px;color:var(--muted);margin:0 0 6px}.section-head h2{font-size:20px;line-height:1.2;margin:0;letter-spacing:-.5px}.count{background:#eef6fb;color:#0f6a93;font-size:11px;font-weight:700;padding:6px 9px;border-radius:8px;white-space:nowrap}.search-label{display:block;font-size:11px;font-weight:700;color:#667085;margin:13px 0 7px}.field{width:100%;border:1px solid #dfe4ec;border-radius:10px;background:#fff;padding:11px 12px;font:inherit;font-size:12px;color:var(--ink);outline:none}.field:focus{border-color:#45a9d4;box-shadow:0 0 0 3px #0099d81a}.filter-row{margin-bottom:15px}.swatch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.swatch-card{padding:0;border:1px solid #e4e8ef;border-radius:11px;background:#fff;overflow:hidden;text-align:left;cursor:pointer;min-width:0;transition:transform .15s,border-color .15s,box-shadow .15s}.swatch-card:hover{transform:translateY(-2px);box-shadow:0 5px 13px #16223b12}.swatch-card:focus-visible{outline:2px solid #0099D8;outline-offset:2px}.swatch-card.selected{border:2px solid #172033;box-shadow:0 0 0 2px #fff inset}.swatch-colour{height:58px;position:relative}.swatch-colour:after{content:'+';position:absolute;right:7px;top:6px;width:20px;height:20px;border-radius:50%;background:#ffffffc9;color:#1c2638;display:grid;place-items:center;font-size:15px;opacity:0}.swatch-card:hover .swatch-colour:after,.swatch-card:focus-visible .swatch-colour:after{opacity:1}.swatch-info{padding:8px 8px 9px}.swatch-id{font-size:10px;font-weight:800;letter-spacing:.25px}.swatch-name{font-size:10px;color:#5c6678;margin:3px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatch-hex{font-size:9px;font-family:ui-monospace,monospace;color:var(--muted)}.fineprint{font-size:10px;line-height:1.55;color:var(--muted);margin:15px 0 0}.btn{border:0;border-radius:10px;padding:10px 14px;font-size:11px;font-weight:750;cursor:pointer;transition:transform .12s,opacity .12s}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn:focus-visible{outline:2px solid #0099D8;outline-offset:2px}.btn.primary{background:#172033;color:#fff}.btn.secondary{background:#f0f3f7;color:#283349;border:1px solid #e1e6ee}.sync-status{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;padding:7px 10px;border-radius:8px;background:#232f45;color:#aab6c8;opacity:0;transform:translateY(-2px);transition:opacity .18s,transform .18s;pointer-events:none}.sync-status.visible{opacity:1;transform:translateY(0)}.sync-status.pending{background:#17344a;color:#7fd0f3}.sync-status.success{background:#143a30;color:#6fe3bb}.sync-status.error{background:#3a1f1a;color:#f3a68c}.sync-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}@media(prefers-reduced-motion:reduce){.sync-status{transition:none}}.text-btn{border:0;background:none;color:var(--muted);font-size:11px;cursor:pointer}.text-btn:focus-visible{outline:2px solid #0099D8;outline-offset:2px;border-radius:4px}.palette-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.palette-slot{border:1px solid #e3e7ef;border-radius:12px;overflow:hidden;background:#fff;min-width:0}.slot-colour-wrap{position:relative}.slot-colour{display:block;width:100%;height:74px;border:0;padding:0;font:inherit;cursor:pointer}.slot-colour:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #0099D8}.remove-slot{position:absolute;right:6px;top:6px;border:0;border-radius:50%;width:22px;height:22px;background:#ffffffd9;cursor:pointer;font-size:13px;line-height:1}.remove-slot:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #172033}.slot-label{padding:9px 10px 10px}.slot-role{font-size:10px;font-weight:800}.slot-id{font-size:9px;color:var(--muted);margin-top:4px}.slot-hex{font-family:ui-monospace,monospace;font-size:10px;margin-top:5px;overflow-wrap:anywhere}.empty-slot{height:74px;display:grid;place-items:center;color:#98a1af;background:repeating-linear-gradient(135deg,#f8fafc,#f8fafc 8px,#f0f3f7 8px,#f0f3f7 16px);font-size:11px}.harmony-panel{margin-top:16px}.harmony-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.harmony-head .search-label{margin:0}.harmony-select{width:auto;min-width:168px}.harmony-swatches{display:flex;gap:9px;flex-wrap:wrap;margin-top:9px}.harmony-swatch{position:relative;width:56px;height:56px;border-radius:12px;border:1px solid #ffffff55;cursor:pointer;overflow:hidden;box-shadow:0 4px 14px #16223b14,inset 0 0 0 1px #ffffff26;transition:transform .16s ease,box-shadow .16s ease}.harmony-swatch:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 22px #16223b22,inset 0 0 0 1px #ffffff40}.harmony-swatch:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #0099D8}.harmony-label{position:absolute;inset:auto 0 0 0;padding:4px 5px 3px;font-size:7px;font-weight:800;letter-spacing:.2px;color:#fff;text-shadow:0 1px 3px #0009;background:linear-gradient(180deg,transparent,#00000078);opacity:0;transition:opacity .15s}.harmony-swatch:hover .harmony-label,.harmony-swatch:focus-visible .harmony-label{opacity:1}.harmony-panel .fineprint{margin-top:9px}@media(prefers-reduced-motion:reduce){.harmony-swatch,.harmony-label,.swatch-card,.btn{transition:none}}
.selected-details{display:flex;align-items:center;gap:12px;border:1px solid #e7ebf1;background:#fafbfc;border-radius:12px;padding:10px;margin-top:15px}.selected-chip{width:42px;height:42px;border-radius:9px;background:#e9edf3;border:1px solid #e0e4eb;flex:none}.selected-copy{min-width:0;flex:1}.selected-name{font-size:12px;font-weight:800}.muted{font-size:10px;color:var(--muted);margin-top:4px}.custom-picker{font-size:10px;color:#667085;display:flex;align-items:center;gap:8px;white-space:nowrap}.custom-picker input{width:32px;height:30px;border:0;background:none;padding:0;cursor:pointer}.palette-controls{display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:12px;margin-top:17px}.control span{display:block;font-size:10px;font-weight:750;color:#657084;margin-bottom:7px}.gradient-preview{height:82px;border-radius:12px;margin-top:14px;background:linear-gradient(135deg,#0099D8,#8B5CF6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;text-shadow:0 1px 5px #0005;letter-spacing:.2px}.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.contrast-results{margin-top:12px;padding:12px;background:#f7f9fc;border-radius:10px;font-size:11px;line-height:1.8}.segmented,.device-switch{display:flex;background:#f0f3f7;border-radius:9px;padding:3px;gap:2px}.segmented button,.device-switch button{border:0;background:transparent;border-radius:7px;padding:7px 11px;font-size:10px;color:#55606f;cursor:pointer}.segmented button:focus-visible,.device-switch button:focus-visible{outline:2px solid #0099D8;outline-offset:2px}.segmented button.active,.device-switch button.active{background:white;color:#182338;box-shadow:0 1px 3px #18233812;font-weight:800}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.site-frame{margin:0 auto;border:1px solid #dfe4eb;border-radius:13px;overflow:hidden;background:#fff;transition:max-width .2s;max-width:100%}@media(prefers-reduced-motion:reduce){.site-frame{transition:none}}.site-frame.tablet{max-width:760px}.site-frame.mobile{max-width:390px}.mock-site{--primary:#0099D8;--secondary:#8B5CF6;--accent:#14B8A6;--surface:#f5f7fa;--text:#182338;--muted-text:#697386;background:var(--surface);color:var(--text);font-family:inherit}.mock-nav{display:flex;align-items:center;gap:18px;padding:17px 5.5%;background:var(--surface);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}.mock-logo{font-size:10px;font-weight:900;letter-spacing:1px;display:flex;align-items:center;gap:7px;white-space:nowrap}.mock-logo i{display:block;width:13px;height:13px;border-radius:4px;background:var(--primary);transform:rotate(45deg)}.mock-links{display:flex;gap:18px;margin-left:auto;font-size:9px;color:var(--muted-text)}.mock-cta,.mock-primary{border:0;background:var(--primary);color:white;border-radius:6px;padding:9px 12px;font-size:9px;font-weight:800;white-space:nowrap}.mock-hero{padding:37px 5.5% 32px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:18px;background:var(--surface)}.mock-kicker{font-size:8px;letter-spacing:1.5px;font-weight:850;color:var(--secondary);margin-bottom:12px}.mock-copy h3{font-size:clamp(24px,3.2vw,43px);line-height:1.02;letter-spacing:-1.8px;margin:0 0 12px;max-width:370px}.mock-copy h3 em{font-style:normal;color:var(--primary)}.mock-copy p{font-size:10px;line-height:1.7;color:var(--muted-text);max-width:300px;margin:0 0 16px}.mock-primary b{margin-left:9px}.mock-proof{display:flex;align-items:center;gap:6px;font-size:8px;color:var(--muted-text);margin-top:14px}.proof-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.hero-art{height:195px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 20%,var(--surface)),color-mix(in srgb,var(--secondary) 19%,var(--surface)))}.art-orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:130px;height:130px;background:var(--primary);opacity:.7;top:-25px;right:-10px}.orb-two{width:95px;height:95px;background:var(--accent);opacity:.8;bottom:-20px;left:4px}.art-card{position:relative;width:65%;min-height:125px;padding:16px;border-radius:10px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid #ffffff8c;box-shadow:0 12px 25px #10182724;backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:space-between}.art-card span{font-size:7px;letter-spacing:1.3px;color:var(--muted-text)}.art-card strong{font-size:19px;line-height:1.08;letter-spacing:-.5px}.art-stripes{height:5px;width:70%;background:linear-gradient(90deg,var(--primary) 0 35%,var(--secondary) 35% 70%,var(--accent) 70%);border-radius:4px}.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 5.5% 25px;background:var(--surface)}.mock-cards>div{padding:14px 12px;background:color-mix(in srgb,var(--primary) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--text) 9%,transparent);border-radius:9px}.mock-cards small{font-size:7px;font-weight:800;color:var(--secondary);letter-spacing:1px}.mock-cards h4{font-size:12px;margin:9px 0 5px}.mock-cards p{font-size:8px;line-height:1.5;color:var(--muted-text);margin:0}.mock-footer{display:flex;justify-content:space-between;padding:13px 5.5%;font-size:7px;letter-spacing:.5px;color:var(--muted-text);border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}.site-frame.dark .mock-site{--surface:#111827;--text:#f4f7fb;--muted-text:#b1bdcf}.site-frame.dark .mock-nav{border-color:#ffffff16}.site-frame.dark .mock-cards>div{border-color:#ffffff17}.preview-note{font-size:10px;color:#8b94a3;margin-top:10px;line-height:1.5}.saved-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.saved-card{border:1px solid #e3e7ef;border-radius:11px;padding:10px;min-width:0}.saved-colours{height:35px;display:flex;border-radius:7px;overflow:hidden;margin-bottom:9px}.saved-colours span{flex:1}.saved-title{font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-meta{font-size:9px;color:var(--muted);margin-top:4px}.saved-actions{display:flex;gap:6px;margin-top:9px}.saved-actions button{border:1px solid #e3e7ef;background:#f7f9fb;border-radius:7px;padding:6px 8px;font-size:9px;cursor:pointer}.saved-actions button:focus-visible{outline:2px solid #0099D8;outline-offset:2px}.empty-saved{padding:20px;border:1px dashed #dfe4ec;border-radius:10px;color:#8992a1;font-size:11px;text-align:center}
.typography-panel{position:relative;overflow:hidden}.typography-panel:before{content:'';position:absolute;inset:-30% -8% auto auto;width:240px;height:240px;background:radial-gradient(circle,#8B5CF61f,transparent 70%);pointer-events:none}.tier-badge{font-size:10px;font-weight:800;letter-spacing:.3px;padding:6px 11px;border-radius:999px;background:#f0f3f7;color:#566178;border:1px solid #e1e6ee;white-space:nowrap}.tier-badge.custom{background:linear-gradient(135deg,#0099D81a,#8B5CF61f);color:#0b6fa0;border-color:#0099d84d}.type-controls{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;margin-top:16px;position:relative}.type-controls input[type=range]{width:100%;accent-color:#0099D8}.type-controls .control span{display:flex;align-items:baseline;justify-content:space-between;gap:6px}.range-val{font-size:9px;color:#8992a1;font-family:ui-monospace,monospace;font-weight:600}.pairing-presets{margin-top:20px;position:relative}.premium-tag{display:inline-block;margin-left:7px;font-size:9px;font-weight:800;letter-spacing:.3px;color:#6d28d9;background:#8B5CF61a;border-radius:999px;padding:3px 8px;vertical-align:middle}.pairing-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:10px}.pairing-chip{position:relative;text-align:left;border:1px solid #e3e7ef;background:#fff;border-radius:12px;padding:11px 36px 11px 12px;cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;gap:4px}.pairing-chip:hover{transform:translateY(-2px);box-shadow:0 8px 20px #16223b14}.pairing-chip:focus-visible{outline:2px solid #0099D8;outline-offset:2px}.pairing-chip.locked{background:repeating-linear-gradient(135deg,#f8fafc,#f8fafc 8px,#f3f1fb 8px,#f3f1fb 16px);border-style:dashed;color:#7a7f8c}.pairing-name{font-size:11px;font-weight:800}.pairing-fonts{font-size:9px;color:var(--muted)}.lock-ico{position:absolute;right:10px;top:10px;font-size:11px}.type-preview{margin-top:18px;padding:22px;border:1px solid #e7ebf1;border-radius:14px;background:linear-gradient(165deg,#fafbfd,#f4f6fa);position:relative;overflow:hidden}.type-preview h3{margin:0 0 10px;color:var(--ink)}.type-preview p{margin:0;color:#4b5565}.fallback-note{margin-top:10px;font-size:10px;color:#7a4f10;background:#fff6e8;border:1px solid #f3dca9;border-radius:8px;padding:8px 10px}.fallback-note:before{content:'⚠ ';font-weight:800}@media(prefers-reduced-motion:reduce){.pairing-chip{transition:none}}
.graphic-panel{position:relative;overflow:hidden}.graphic-panel:before{content:'';position:absolute;inset:-30% auto auto -8%;width:220px;height:220px;background:radial-gradient(circle,#14B8A620,transparent 70%);pointer-events:none}.gl-key-gate{position:relative;padding:16px;border:1px solid #e3e7ef;border-radius:14px;background:linear-gradient(165deg,#fafffe,#f3fbf9)}.gl-key-gate .action-row{margin-top:10px}.gl-key-gate input{flex:1;min-width:0}.gl-search-area .action-row{align-items:center}.gl-search-area input{flex:1;min-width:0}.gl-status{min-height:14px;margin:10px 0;font-size:11px}.gl-status.pending{color:#147aa4}.gl-status.success{color:#07704f}.gl-status.error{color:#c24a2f}.gl-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.gl-result{position:relative;border:1px solid #e3e7ef;border-radius:12px;overflow:hidden;padding:0;cursor:pointer;background:#eef1f5;aspect-ratio:4/3;transition:transform .15s,box-shadow .15s}.gl-result:hover{transform:translateY(-2px);box-shadow:0 8px 20px #16223b1a}.gl-result:focus-visible{outline:2px solid #14B8A6;outline-offset:2px}.gl-result img{width:100%;height:100%;object-fit:cover;display:block}.gl-result-credit{position:absolute;inset:auto 0 0 0;padding:5px 7px;font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 3px #0009;background:linear-gradient(180deg,transparent,#00000085);text-align:left}.gl-empty{grid-column:1/-1;padding:20px;text-align:center}.gl-detail-body{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:12px}.gl-detail-img{width:100%;border-radius:12px;display:block;background:#eef1f5;max-height:320px;object-fit:cover}.gl-detail-meta h3{margin:0 0 10px;font-size:14px}.gl-meta-list{display:grid;gap:8px;margin:0 0 10px}.gl-meta-list>div{display:flex;gap:8px;font-size:11px}.gl-meta-list dt{flex:none;width:92px;color:var(--muted);font-weight:700}.gl-meta-list dd{margin:0;min-width:0}.gl-attribution{background:#f7f9fc;border:1px solid #e7ebf1;border-radius:8px;padding:8px 10px}@media(prefers-reduced-motion:reduce){.gl-result{transition:none}}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#172033;color:#fff;padding:11px 16px;border-radius:10px;font-size:11px;box-shadow:0 8px 30px #0002;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}@media(prefers-reduced-motion:reduce){.toast{transition:opacity .01s}}
@media(max-width:1000px){.layout{grid-template-columns:300px 1fr;padding:14px;gap:14px}.sidebar{padding:14px}.panel{padding:16px}.swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-slots{grid-template-columns:repeat(5,minmax(0,1fr))}.mock-links{display:none}.type-controls{grid-template-columns:1fr 1fr}}@media(max-width:760px){.topbar{height:auto;min-height:72px;padding:12px 14px;flex-wrap:wrap}.top-actions{width:100%;margin-left:55px}.layout{display:flex;flex-direction:column;padding:10px}.sidebar{position:static;max-height:none}.swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.workspace{width:100%}.palette-slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.slot-colour,.empty-slot{height:48px}.slot-label{padding:6px}.slot-role{font-size:8px}.slot-id{font-size:8px}.slot-hex{font-size:8px}.palette-controls{grid-template-columns:1fr 1fr}.control:first-child{grid-column:1/-1}.selected-details{flex-wrap:wrap}.custom-picker{margin-left:auto}.harmony-swatch{width:48px;height:48px}.type-controls{grid-template-columns:1fr}.pairing-list{grid-template-columns:1fr 1fr}.mock-hero{grid-template-columns:1fr;padding-top:28px}.hero-art{height:150px}.mock-copy h3{font-size:35px}.mock-cards{grid-template-columns:1fr}.mock-cards>div{padding:12px}.preview-toolbar{align-items:flex-start;gap:10px;flex-direction:column}.site-frame.mobile .mock-nav{padding:12px}.site-frame.mobile .mock-cta{display:none}.site-frame.mobile .mock-hero{padding:22px 5.5%}.site-frame.mobile .mock-copy h3{font-size:30px}.site-frame.mobile .hero-art{height:130px}.site-frame.mobile .mock-cards{padding-bottom:16px}.gl-key-gate .action-row,.gl-search-area .action-row{flex-direction:column;align-items:stretch}.gl-detail-body{grid-template-columns:1fr}}@media(max-width:430px){.swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.palette-slots{grid-template-columns:repeat(5,minmax(0,1fr))}.section-head h2{font-size:18px}.panel{padding:13px}.action-row .btn{flex:1}.top-actions{margin-left:0}.pairing-list{grid-template-columns:1fr}.gl-results{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== M8 — premium-3d-uiux visual pass (2026-11-12) =====
   Additive only: no existing selector's text colour, focus-visible ring or
   ARIA from the M4 accessibility pass is changed below — these rules only
   add shadow/transform/gradient depth and :active press feedback, all
   reusing the brand tokens already defined in :root above. See
   docs/MEMORY.md for what was re-verified live in the browser afterward. */
:root{
  --shadow-xs:0 1px 2px #16223b0a;
  --shadow-sm:0 1px 2px #16223b08,0 6px 14px #16223b12;
  --shadow-md:0 2px 4px #16223b0a,0 14px 32px #16223b14;
  --shadow-lg:0 4px 10px #16223b0f,0 24px 52px #16223b18;
  --ring-highlight:inset 0 1px 0 #ffffffb0;
  --glow-blue:0 0 0 1px color-mix(in srgb,var(--blue) 18%,transparent),0 10px 26px color-mix(in srgb,var(--blue) 14%,transparent);
}
body{position:relative}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px 480px at 6% -8%,color-mix(in srgb,var(--blue) 15%,transparent),transparent 60%),radial-gradient(560px 420px at 104% 6%,color-mix(in srgb,var(--purple) 13%,transparent),transparent 60%),radial-gradient(540px 480px at 50% 112%,color-mix(in srgb,var(--teal) 11%,transparent),transparent 60%)}
.topbar{position:relative;box-shadow:var(--ring-highlight),0 16px 36px #05081433}
.topbar:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--blue),var(--purple) 55%,var(--teal),transparent);opacity:.55;pointer-events:none}
.sidebar,.panel{box-shadow:var(--shadow-md)}
.sidebar{box-shadow:var(--shadow-lg)}
.swatch-card{box-shadow:var(--shadow-xs)}
.swatch-card:hover{box-shadow:var(--shadow-sm)}
.swatch-card:active{transform:translateY(0) scale(.98)}
.swatch-card.selected{box-shadow:var(--glow-blue),0 0 0 2px #fff inset}
.btn{box-shadow:var(--shadow-xs)}
.btn.primary{background:linear-gradient(165deg,#1c2941,#101827);box-shadow:var(--shadow-sm),0 1px 0 #ffffff1f inset}
.btn.primary:hover{box-shadow:var(--shadow-md),0 1px 0 #ffffff26 inset}
.btn:active{transform:translateY(0) scale(.97)}
.palette-slot{box-shadow:var(--shadow-xs);transition:box-shadow .15s,transform .15s}
.palette-slot:has(.slot-colour):hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.saved-card{box-shadow:var(--shadow-xs);transition:box-shadow .15s,transform .15s}
.saved-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.pairing-chip{box-shadow:var(--shadow-xs)}
.gl-result{box-shadow:var(--shadow-xs)}
.segmented button.active,.device-switch button.active{box-shadow:0 1px 3px #18233820,0 1px 0 #ffffffc0 inset}
@media(prefers-reduced-motion:reduce){.palette-slot,.saved-card{transition:none}}
@media(max-width:760px){body:before{background:radial-gradient(420px 360px at 20% -10%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 60%)}}

/* ===== Theme preset picker (feature, 2026-11-12) — reuses .harmony-panel/.harmony-head/
   .search-label layout; new rules only style the mini swatch-row preview and apply button. */
.theme-preview{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;min-height:28px}
.theme-swatch{width:28px;height:28px;border-radius:8px;border:1px solid #ffffff55;box-shadow:0 2px 8px #16223b14,inset 0 0 0 1px #ffffff26}
.theme-actions{margin-top:10px}
@media(prefers-reduced-motion:reduce){.theme-swatch{transition:none}}

/* ===== Graphic Library -> hero-art placement (feature, 2026-11-12; PRD.md §7c) */
.gl-hero-status{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;border-radius:9px;background:color-mix(in srgb,var(--teal) 12%,transparent);color:#07704f;font-size:12px;font-weight:600}
.hero-art.has-photo{background-size:cover;background-position:center}