/* Outer header/navigation/shell geometry lives exclusively in app-shell.css. */

/* Shared content surface directly below the common page header. */
.pp-content-surface{
  box-sizing:border-box;
  margin-top:0!important;
  border:1px solid rgba(112,74,41,.16)!important;
  border-radius:22px!important;
  background:rgba(250,242,230,.88)!important;
  box-shadow:0 14px 32px rgba(39,25,14,.12)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.pp-content-surface h2{color:#261b13}
@media(max-width:700px){.pp-content-surface{border-radius:18px!important}}

/* Shared inner UI language for primary PianoPi pages. */
.pp-page-shell{
  --pp-inner-bg:rgba(255,252,246,.78);
  --pp-inner-bg-soft:rgba(255,252,246,.58);
  --pp-inner-line:rgba(112,74,41,.14);
  --pp-inner-radius:16px;
  --pp-control-radius:12px;
  --pp-control-height:36px;
}
.pp-page-shell :is(.section-kicker,.kicker,.eyebrow){
  color:#806b59!important;font-size:.76rem!important;font-weight:850!important;
  letter-spacing:.065em!important;text-transform:uppercase!important;
}
.pp-content-surface h2{font-size:1.2rem!important;line-height:1.15!important;letter-spacing:-.01em!important}
.pp-page-shell :is(.play-sound-statusbar,.sound-profile-wrap,.demo-progress,.assistant-step,.assistant-selection-card,.assistant-live-card,.learning-hub-choice){
  border:1px solid var(--pp-inner-line)!important;border-radius:var(--pp-inner-radius)!important;
  background:var(--pp-inner-bg)!important;box-shadow:0 8px 22px rgba(39,25,14,.06)!important;
}

.pp-page-shell :is(.compact-action,.mini-button,.ghost-button,.advanced-link,.track-action-link){
  min-height:var(--pp-control-height)!important;padding:7px 12px!important;
  border:1px solid rgba(112,74,41,.18)!important;border-radius:var(--pp-control-radius)!important;
  background:rgba(255,252,246,.82)!important;color:#3b2b21!important;
  font-size:.82rem!important;font-weight:850!important;box-shadow:0 5px 14px rgba(39,25,14,.06)!important;
}
.pp-page-shell :is(.compact-action,.mini-button,.ghost-button,.advanced-link,.track-action-link):hover{
  background:#f1e3d0!important;
}
.pp-page-shell :is(.primary,.primary-action,.school-action,.musicbox-action){font-weight:900!important}
.pp-page-shell :is(.status-pill,.play-status-item){font-size:.8rem!important;font-weight:850!important}
.pp-page-shell :is(.banner-card,.mini-status){border-radius:22px!important}
.pp-page-shell :is(.panel,.play-sound-card,.play-future-card){border-radius:22px!important}
.pp-page-shell :is(.help,.lead,.assistant-step-copy,.source-hint,.track-artist,.status-text){line-height:1.35!important}

/* Shared typography for integrated primary surfaces. */
.pp-page-shell{font-family:var(--body-font,"Avenir Next","Segoe UI","Helvetica Neue",sans-serif);line-height:1.45}
.pp-content-surface{font-size:1rem;line-height:1.45}
.pp-content-surface h2{font-family:var(--title-font,Georgia,"Times New Roman",serif);font-size:1.2rem!important;line-height:1.15!important;font-weight:700!important;letter-spacing:-.015em}
.pp-content-surface .section-kicker,.pp-content-surface .kicker,.pp-content-surface .eyebrow{font-size:.76rem!important;line-height:1.2;font-weight:850!important;letter-spacing:.06em;text-transform:uppercase}
.pp-content-surface button,.pp-content-surface .mini-button,.pp-content-surface .compact-action{font-family:inherit;font-size:.82rem;line-height:1.2;font-weight:850}
.pp-content-surface .status-pill{font-size:.78rem;line-height:1.2;font-weight:900}
/* Integrated UI polish: keep secondary controls visually identical across modules. */
.pp-page-shell :is(.transport-row button,.bluetooth-power-row button,.bluetooth-action-main button,.bluetooth-action-secondary button){
  min-height:36px!important;padding:7px 12px!important;border:1px solid rgba(112,74,41,.18)!important;
  border-radius:12px!important;background:rgba(255,252,246,.82)!important;color:#3b2b21!important;
  font-family:inherit!important;font-size:.82rem!important;line-height:1.2!important;font-weight:850!important;
  box-shadow:0 5px 14px rgba(39,25,14,.06)!important;
}
.pp-page-shell :is(.transport-row button,.bluetooth-power-row button,.bluetooth-action-main button,.bluetooth-action-secondary button).primary{
  background:linear-gradient(180deg,rgba(122,69,37,.98),rgba(67,40,24,.98))!important;color:#fff!important;border-color:rgba(122,69,37,.4)!important;
}
.pp-page-shell :is(.track-item,.assistant-song-card,.assistant-choice-card){border-radius:var(--pp-inner-radius)!important}
.pp-page-shell :is(.track-item-title,.karaoke-group-title){font-size:.86rem!important;line-height:1.2!important;font-weight:900!important}
.pp-page-shell :is(.track-item-meta,.karaoke-group-meta,.library-notice,.library-selected){font-size:.76rem!important;line-height:1.25!important}
/* Shared secondary configuration surfaces. */
.pp-page-shell :is(.settings-card,.tab-panel){border:1px solid var(--pp-inner-line)!important;border-radius:22px!important;background:rgba(250,242,230,.88)!important;box-shadow:0 12px 28px rgba(39,25,14,.09)!important}
.pp-page-shell :is(.settings-card,.tab-panel) h2{font-family:var(--title-font,Georgia,"Times New Roman",serif);font-size:1.2rem!important;line-height:1.15!important}
/* Start-page secondary controls use the same control rhythm as the modules. */
.pp-page-shell :is(.demo-strip-actions button,.demo-progress-jump button,.demo-controls button){min-height:36px!important;height:36px!important;padding:7px 12px!important;border-radius:12px!important;font-size:.82rem!important;line-height:1.2!important;font-weight:850!important}


/* Low-GFX dark header readability (loaded after feature-specific theme CSS). */
html.lowgfx .pp-page-header,
html.lowgfx .pp-page-header h1,
html.lowgfx .pp-page-header h2,
html.lowgfx .pp-page-header .pp-page-kicker,
html.lowgfx .pp-page-header .kicker,
html.lowgfx .pp-page-header .intro,
html.lowgfx .pp-page-header .muted,
html.lowgfx .pp-page-header .lead,
html.lowgfx .pp-page-header .learning-topbar-title {
  color:#fff9ed!important;
  text-shadow:none!important;
  opacity:1!important;
}
html.lowgfx .pp-page-header .topbar-meta,
html.lowgfx .pp-page-header .musicbox-topbar-meta {
  color:#eadfd2!important;
}
html.lowgfx body.piano-learning-theme .pp-page-header .intro,
html.lowgfx body.piano-learning-theme .pp-page-header .learning-topbar-title {
  color:#fff9ed!important;
  text-shadow:none!important;
  opacity:1!important;
}