/* PA Studio visual finish: system typography, quiet surfaces, clear controls.
   Layout, thumbnail sizes, player positions and visibility belong to the pages. */
:root{
  color-scheme:dark;
  --pa-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Arial,sans-serif;
  --pa-text:#f5f5f7;
  --pa-secondary:#b7b8be;
  --pa-stroke:rgba(255,255,255,.13);
  --pa-control:linear-gradient(180deg,rgba(52,54,59,.96),rgba(31,33,37,.96));
  --pa-panel:linear-gradient(160deg,rgba(29,31,35,.94),rgba(16,18,21,.96));
  --pa-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 30px rgba(0,0,0,.22);
  --pa-gold:#d6b987;
}
body{
  font-family:var(--pa-font)!important;
  color:var(--pa-text);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  font-kerning:normal;
}
button,input,select,textarea{font-family:var(--pa-font)}
h1,h2,h3,h4{font-family:var(--pa-font)!important}
.hero h1,.title,.hero-caption h1,.events-intro h1,.box h1{
  font-weight:600;
  letter-spacing:-.035em;
  color:var(--pa-text);
}
.title,.events-intro h1,.box h1{line-height:1.15}
.kicker,.events-kicker{letter-spacing:.18em;font-weight:600}
.sub,.local-note,.artist-track,.event-description,.events-intro p{color:var(--pa-secondary)}
.card h3,.reader-link h3,.media-panel h2,.library-block-heading h3,.event-card h3{
  font-weight:600;letter-spacing:-.015em;
}
.video-clock,.clip-clock,.dj-progress-times,.track-card-time{
  font-variant-numeric:tabular-nums;
}

/* Navigation retains its existing desktop and phone arrangement. */
nav{
  background:linear-gradient(180deg,rgba(27,29,33,.98),rgba(16,18,21,.97))!important;
  border-bottom-color:rgba(255,255,255,.11)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.16);
}
.links a{letter-spacing:0;font-weight:500}
.links a[aria-current="page"]{font-weight:600}
.links.is-open{
  background:var(--pa-panel)!important;
  border-color:var(--pa-stroke);
  box-shadow:var(--pa-shadow);
}
.page-back,.nav>.back,.lang-toggle,.menu-toggle,.account-btn{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  font-weight:500;letter-spacing:0;
}
.lang-toggle,.menu-toggle{border-radius:12px}
.page-back:hover,.nav>.back:hover,.lang-toggle:hover,.account-btn:hover{
  border-color:rgba(214,185,135,.52);
  background:rgba(214,185,135,.12);
  color:#f1d9b0!important;
}
.links a.account-btn:hover{
  background:rgba(214,185,135,.12)!important;
  color:#f1d9b0!important;
}

/* Content stays flatter than the floating controls. */
.card,.about-box,.reader-link,.chat-card,.playlist-panel,.video-panel,
.media-panel,.artist-card,.event-card,.box{
  background:var(--pa-panel);
  box-shadow:var(--pa-shadow);
}
.reader-icon,.library-step,.events-tab-icon{
  border-color:rgba(214,185,135,.3);
  background:rgba(214,185,135,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.video-tabs{
  background:rgba(31,33,37,.9);
  border-color:var(--pa-stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.video-tab{font-weight:600;letter-spacing:0}
.video-tab.is-selected{
  background:linear-gradient(180deg,#e3cda8,#d6b987);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 2px 5px rgba(0,0,0,.18);
}
.genre-button,.artist-filter,.event-filter,.album-button{
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.btn,.send,.event-publish,.box form button,.submit-add-video,.add-audio-dialog button[type="submit"]{
  font-family:var(--pa-font);font-weight:600;letter-spacing:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 3px 8px rgba(0,0,0,.16);
}
.btn.alt{box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}

/* Refine player surfaces without changing compact dimensions or drag geometry. */
.dj-panel{background:var(--pa-panel);box-shadow:var(--pa-shadow)}
.dj-now-playing,.dj-equalizer{
  border-color:rgba(255,255,255,.11);
  background:rgba(255,255,255,.035);
}
.dj-action:not(.is-on):not(:hover),.dj-compact-toggle,.dj-genre-picker summary{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065);
}
.dj-main-action{
  background:linear-gradient(180deg,#e3cda8,#d6b987);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 8px rgba(0,0,0,.2);
}
.dj-eq-bands{
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.055) 0 1px,transparent 1px 12px);
}
.dj-eq-band input,.dj-eq-preamp input{accent-color:#0a84ff}
.video-controls,.clip-controls,.pa-dj-actions,.artist-dj-actions,.dj-genre-menu{
  background:var(--pa-control);
  border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.3);
}
.video-control-btn:hover,.clip-control:hover{
  background:rgba(255,255,255,.13);
}

/* Forms use the same quiet finish, with native file controls kept usable. */
.add-video-dialog,.add-audio-dialog,.event-dialog{
  background:linear-gradient(160deg,#24262a,#17191d);
  border-color:rgba(255,255,255,.19);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 28px 70px rgba(0,0,0,.5);
}
.artist-search:not(:focus),.artist-track-search:not(:focus),
.box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(:focus),
.add-audio-fields input:not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(:focus),
.add-video-fields input:not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(:focus),
.event-form-grid input:not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(:focus),
.add-audio-fields select:not(:focus),.add-audio-fields textarea:not(:focus),
.event-form-grid select:not(:focus),.event-form-grid textarea:not(:focus),.chat-compose textarea:not(:focus){
  background:rgba(0,0,0,.2);
  border-color:rgba(255,255,255,.17);
  color:var(--pa-text);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
input::placeholder,textarea::placeholder{color:#a3a5ad;opacity:1}
.box .back,.box .links a{font-weight:500}
footer{color:#a0a2aa;border-top-color:rgba(255,255,255,.1)}
::selection{background:rgba(214,185,135,.35);color:#fff}
@media(hover:hover) and (pointer:fine){
  .artist-card:hover{transform:translateY(-2px) scale(.85)}
}
@media(forced-colors:active){
  .card,.reader-link,.artist-card,.event-card,.box{border:1px solid CanvasText}
}