/* Atelier Pergold AP-UI01 – common angular language for AuraSpektra.
   Based on the authored The Race 'architectural' menu parameters:
   fill #18212A, accent #7DBBD1, slant -5deg, bevel 5px, depth 10px.
   No element ID or audio logic is changed by this stylesheet.
*/
html{min-height:100%;background:var(--ap-bg)}
body{font-family:var(--ap-body);background:var(--ap-backdrop) fixed;color:var(--ap-text);min-height:100vh;transition:background-color .2s ease,color .2s ease}
:where(h1,h2,h3,.brand strong,.brand-mark,.workspace-link strong,.workspace-card-title h2,.sectionhead h2,.pad-name,.performance-pad .pad-name,.workspace-main footer strong){font-family:var(--ap-display)!important;letter-spacing:.025em}
:where(button,.filebutton,.sidebar-group-label,.tiny-kicker,.workspace-pill,.workspace-nav .nav-item-text small,.transport-heading,.library-browser-head){font-family:var(--ap-display)!important;letter-spacing:.035em}
:where(button,.filebutton){border-radius:0!important;clip-path:var(--ap-cut-btn);font-weight:650;transition:filter .13s ease,transform .13s ease,background .13s ease;box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -5px 0 var(--ap-depth),0 4px 10px rgba(0,0,0,.34);padding-bottom:calc(11px + 2px);background:linear-gradient(166deg,var(--ap-btn-raised) 0%,var(--ap-btn) 54%,var(--ap-btn-active) 100%);border:1px solid var(--ap-stroke);color:var(--ap-text)}
button:hover:not(:disabled),.filebutton:hover{background:linear-gradient(168deg,var(--ap-btn-top),var(--ap-btn-raised) 30%,var(--ap-btn) 100%);filter:brightness(1.14)}
button:active:not(:disabled),.filebutton:active{transform:translateY(2px);filter:brightness(.9)}
button:focus-visible,.filebutton:focus-within{outline:2px solid var(--ap-accent-strong);outline-offset:3px}
button:disabled{opacity:.42}
button.secondary{background:linear-gradient(168deg,var(--ap-panel-raised),var(--ap-btn-active));border-color:var(--ap-stroke-subtle);color:var(--ap-muted)}
button.record,.transport-bar .record,.sample-bar .sample-record{background:linear-gradient(170deg,#9b4f52,#5d2732 68%,#35151e);border-color:#b97177;color:#ffe3df}
button.record.is-recording,.transport-bar .record.is-recording,.sample-bar .sample-record.is-recording{background:linear-gradient(175deg,#e85b69,#a01e3a)}
#analyze,.filebutton.primary{background:linear-gradient(170deg,var(--ap-accent),var(--ap-btn-raised) 85%);color:var(--ap-text);border-color:var(--ap-accent)}
/* Unified angular cards and dialogs */
:where(.panel,.workspace-nav,.workspace-view,.capture-hero,.workspace-hint,.workspace-pill,.local-label,.studio-head .brand-mark,.metric,.roll-scroll,.roll-controls select,.roll-controls input,.pad-preview,.pad-preview-description>div,.export-card,.library-current,.library-browser,.library-item,.library-chips span,.pad-workbench,.pad-edit-section,.pad-performance-tools,.pad-name-editor,.pad-sound-controls,.pad-waveform-editor,.pad-waveform-viewport,.pad-capture-indicator,.hfc-first-card,.hfc-setup-option,.hfc-folder-list,.hfc-tour-card,.hfc-tour-focus,.hfc-chapter-help,.nav-backdrop,canvas,select,input:not([type=checkbox]):not([type=range]):not([type=radio]),.roll-scroll,.pad-waveform-controls input,.pad-waveform-controls select){border-radius:0!important}
:where(.panel,.workspace-nav,.workspace-view,.capture-hero,.library-current,.library-browser,.library-item,.pad-edit-section,.pad-performance-tools,.pad-name-editor,.pad-sound-controls,.pad-waveform-editor,.hfc-first-card,.hfc-setup-option,.hfc-tour-card){clip-path:var(--ap-cut-card)}
:where(.workspace-pill,.local-label,.library-chips span){clip-path:var(--ap-cut-chip)}
:where(.workspace-nav,.workspace-view,.workspace-transport,.panel,.pad-workbench,.hfc-first-card,.hfc-tour-card){border-color:var(--ap-stroke-subtle);color:var(--ap-text)}
.workspace-nav{background:var(--ap-surface);box-shadow:0 18px 30px rgba(0,0,0,.26),inset 0 2px 0 var(--ap-glow);border-top:2px solid var(--ap-stroke)}
.workspace-view{background:var(--ap-surface);box-shadow:0 18px 35px rgba(0,0,0,.20);border-top:2px solid var(--ap-stroke)}
.workspace-transport{background:var(--ap-panel);border-top:2px solid var(--ap-stroke)}
.workspace-heading{color:var(--ap-text)}
.workspace-heading h1{color:var(--ap-headline);font-weight:750;letter-spacing:.035em}
.workspace-heading p,.workspace-card-title p{color:var(--ap-muted)}
.workspace-card-title h2{color:var(--ap-headline);font-size:clamp(19px,2.5vw,26px);font-weight:750}
.brand strong{font-size:clamp(19px,2.15vw,28px);color:var(--ap-headline);line-height:1.18;letter-spacing:.095em}
.brand small{color:var(--ap-muted)}
.brand-mark{background:linear-gradient(170deg,var(--ap-btn-raised),var(--ap-btn-active));color:var(--ap-accent-strong);border:1px solid var(--ap-accent);border-bottom:5px solid var(--ap-depth)!important;clip-path:var(--ap-cut-card);width:64px!important;height:49px!important;letter-spacing:0;font-size:23px}
.nav-brand-head{padding-bottom:7px;border-bottom:1px solid var(--ap-stroke-subtle)}
.tiny-kicker,.view-kicker,.transport-heading,.settings-title,.pad-topline,.pad-editor-title,.sidebar-heading .tiny-kicker{color:var(--ap-accent)}
.sidebar-group-label,.transport-note,.sidebar-sound{color:var(--ap-dim)}
.sidebar-heading{border-bottom-color:var(--ap-stroke-subtle)}
.workspace-link{background:transparent;border:1px solid transparent;clip-path:var(--ap-cut-btn);box-shadow:none;min-height:53px}
.workspace-link:hover:not(:disabled){background:var(--ap-panel-raised);border-color:var(--ap-stroke)}
.workspace-link.is-active,.workspace-link.is-active:hover{background:linear-gradient(115deg,var(--ap-panel-raised),var(--ap-btn));border-color:var(--ap-accent);box-shadow:inset 4px 0 0 var(--ap-accent-strong);color:var(--ap-text)}
.nav-icon{color:var(--ap-accent);font-size:23px}
.nav-item-text strong{color:var(--ap-text);font-size:14px}
.nav-item-text small{color:var(--ap-dim)}
.workspace-pill,.local-label{border-color:var(--ap-stroke);color:var(--ap-accent)}
.capture-hero,.library-current{background:linear-gradient(115deg,var(--ap-panel-raised),var(--ap-panel-soft))}
.capture-hero{border-top:2px solid var(--ap-stroke)}
.capture-hero strong{font-family:var(--ap-display);color:var(--ap-headline);font-size:17px}
.capture-hero p,.library-current-text p,.library-current-text h3{color:var(--ap-muted)}
.workspace-hint{border-left:3px solid var(--ap-accent);background:var(--ap-panel-soft);color:var(--ap-muted);clip-path:none}
.workspace-hint strong{color:var(--ap-text)}
.workspace-view .panel,.pad-workbench,.pad-preview,.library-browser,.export-card,.export-research{background:var(--ap-panel)!important}
.pad-edit-section,.pad-name-editor,.pad-sound-controls,.pad-waveform-editor,.pad-performance-tools,.library-item{background:var(--ap-panel-soft);border-color:var(--ap-stroke-subtle)}
.pad-topline,.pad-sound-head,.library-browser-head{color:var(--ap-accent)}
.pad-controls select,.pad-performance-tools select,select,input:not([type=checkbox]):not([type=range]):not([type=radio]){background:var(--ap-btn-active);color:var(--ap-text);border-color:var(--ap-stroke-subtle)}
select:focus-visible,input:focus-visible{outline:2px solid var(--ap-accent);outline-offset:1px}
/* Performance pads: same hard-corner card cut; preserve velocity, selected and held states. */
.performance-pad,.performance-grid.is-classic .performance-pad{border-radius:0!important;clip-path:var(--ap-cut-card);border:1px solid var(--ap-stroke);border-bottom:5px solid var(--ap-depth);background:linear-gradient(160deg,var(--ap-btn-top) 0%,var(--ap-panel-raised) 50%,var(--ap-btn-active) 100%);color:var(--ap-text);box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 8px 14px rgba(0,0,0,.34)}
.performance-pad:nth-child(5n+1),.performance-grid.is-classic .performance-pad:nth-child(4n+1){background:linear-gradient(158deg,var(--ap-accent) -160%,var(--ap-panel-raised) 55%,var(--ap-btn-active) 100%);border-color:var(--ap-stroke)}
.performance-pad.is-held{background:linear-gradient(160deg,var(--ap-accent-strong),var(--ap-panel-raised))!important;color:var(--ap-text)}
.performance-pad.is-selected{outline:2px solid var(--ap-accent-strong);outline-offset:1px}
.performance-pad .pad-indicator{background:var(--ap-accent-strong)}
.performance-pad .pad-number{color:var(--ap-muted)}
.performance-pad .pad-name{font-size:clamp(12px,1.45vw,17px);letter-spacing:.035em}
.library-item.is-active{border-color:var(--ap-accent)}
.library-current-icon,.capture-hero-icon{border-color:var(--ap-stroke);background:var(--ap-btn-active);color:var(--ap-accent)}
/* Waves, piano keys and drum samples remain readable in both skins */
#spectrogram,#waveform,.pad-waveform-viewport,#pianoRoll{border-color:var(--ap-stroke-subtle)}
.piano-key.white-key{border-radius:0!important}.piano-key.black-key{border-radius:0!important}
.workspace-main footer strong{color:var(--ap-accent)}
.workspace-main footer span{color:var(--ap-muted)}
/* Welcome and spotlight tutorials share the material and font system. */
.hfc-first-run{background:rgba(6,9,11,.88)}
.hfc-first-card{background:var(--ap-panel);border:1px solid var(--ap-stroke);border-top:3px solid var(--ap-accent)}
.hfc-first-card h1{font-family:var(--ap-display);font-weight:800;color:var(--ap-text);letter-spacing:.01em}
.hfc-first-card p,.hfc-setup-option p{color:var(--ap-muted)}
.hfc-first-card .tiny-kicker,.hfc-first-card a{color:var(--ap-accent)}
.hfc-setup-option,.hfc-folder-list{background:var(--ap-panel-soft);border-color:var(--ap-stroke-subtle);color:var(--ap-text)}
.hfc-tour-card{background:var(--ap-panel);border:1px solid var(--ap-accent);border-top:3px solid var(--ap-accent)}
.hfc-tour-card h2{color:var(--ap-text)}.hfc-tour-card p{color:var(--ap-muted)}
.hfc-tour-focus{border-color:var(--ap-accent-strong);box-shadow:0 0 0 3px var(--ap-glow),0 0 22px var(--ap-glow)}
.hfc-tour-card .hfc-tour-wait{color:var(--ap-accent)}
/* Intro and settings: keep the preview dark even with a warm backdrop. */
:root[data-ap-theme="aurum"] .workspace-view,:root[data-ap-theme="aurum"] .workspace-nav{backdrop-filter:blur(12px)}
:root[data-ap-theme="aurum"] .brand-mark{background:linear-gradient(170deg,#554d36,#282922)}
:root[data-ap-theme="aurum"] .performance-pad.is-selected{outline-color:#f1d695}
:root[data-ap-theme="aurum"] .filebutton.primary,:root[data-ap-theme="aurum"] #analyze{background:linear-gradient(165deg,#766849,#3b3d37);color:#fff4de}
:root[data-ap-theme="aurum"] .workspace-link.is-active{background:linear-gradient(120deg,#6a5c3f,#31312e)}
:root[data-ap-theme="aurum"] .capture-hero-icon{border-radius:50%!important}
/* Accessible theme switch. Buttons retain the very same geometry in both modes. */
.ap-theme-switch{display:flex;gap:2px;align-items:center;border:1px solid var(--ap-stroke-subtle);clip-path:var(--ap-cut-card);padding:4px;background:var(--ap-panel-soft)}
.ap-theme-switch button{min-width:68px;padding:8px 11px 11px;min-height:36px;font-size:13px}
.ap-theme-switch button[aria-pressed="true"]{border-color:var(--ap-accent);color:var(--ap-text);background:linear-gradient(170deg,var(--ap-btn-top),var(--ap-btn));filter:brightness(1.15)}
.ap-theme-switch button[aria-pressed="false"]{opacity:.78}
.ap-theme-switch button:focus-visible{outline:2px solid var(--ap-accent);outline-offset:2px}
/* Settings sometimes contain fine slider ranges; keep thumb circular as physical control. */
input[type=range]{accent-color:var(--ap-accent-strong)}
@media(max-width:800px){.brand strong{font-size:18px}.ap-theme-switch button{padding:7px 8px 9px;min-width:54px;font-size:11px}}
@media(max-width:680px){.nav-brand-head{gap:8px}.brand{gap:7px}.brand strong{font-size:15px}.brand small{font-size:8px}.brand-mark{width:38px!important;height:37px!important;font-size:16px}.brand-trailing{gap:5px;flex-wrap:wrap;justify-content:flex-end}.ap-theme-switch{padding:2px}.ap-theme-switch button{min-width:42px;padding:7px 5px 8px;font-size:10px}.workspace-link{min-height:48px}.performance-pad .pad-name{font-size:clamp(10px,3vw,14px)}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}
/* AP-UI01 polish: legacy PAD_02 :nth-child(5n+1) rules are more specific
   than the shared theme. Override both 4- and 5-column accents in Aurum. */
:root[data-ap-theme="aurum"] .performance-grid .performance-pad,
:root[data-ap-theme="aurum"] .performance-grid.is-classic .performance-pad,
:root[data-ap-theme="aurum"] .performance-grid.is-classic .performance-pad:nth-child(5n+1),
:root[data-ap-theme="aurum"] .performance-grid.is-classic .performance-pad:nth-child(4n+1){
  background:linear-gradient(160deg,#5d5641 0%,#39382f 62%,#262722 100%);
  border-color:#a99a6b;
  border-bottom-color:#191711;
}
:root[data-ap-theme="aurum"] .performance-grid .performance-pad.is-held{background:linear-gradient(165deg,#c5ab70,#675a3e)!important}
:root[data-ap-theme="aurum"] :is(.pad-repeat-toggle,.pad-name-editor label,.pad-tune-grid label output,.pad-waveform-controls output,.pad-sound-head,.library-browser-head,.library-current-text .tiny-kicker){color:var(--ap-accent)!important}
:root[data-ap-theme="aurum"] .performance-pad.is-empty{opacity:.72}
@media(max-width:680px){
 .nav-brand-head{flex-wrap:wrap}
 .nav-brand-head .brand{flex:1 1 100%;min-width:0}
 .nav-brand-head .brand strong{font-size:23px;white-space:nowrap}
 .nav-brand-head .brand small{font-size:9px;max-width:none;letter-spacing:.08em}
 .nav-brand-head .brand-trailing{flex:1 1 100%;justify-content:flex-end}
}