:root {
  --pp-bg: #17110b;
  --pp-panel: rgba(250, 242, 230, 0.78);
  --pp-panel-strong: rgba(250, 242, 230, 0.88);
  --pp-panel-soft: rgba(242, 229, 209, 0.84);
  --pp-line: rgba(112, 74, 41, 0.16);
  --pp-text: #241c15;
  --pp-muted: #7a6755;
  --pp-ok: #176b3a;
  --pp-warn: #9a5b00;
  --pp-stop: #9a1b1b;
  --pp-accent: #7a4525;
  --pp-accent-soft: #f0dcc0;
  --pp-shadow: 0 20px 46px rgba(20, 12, 7, 0.20);
  --pp-body-font: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  --pp-title-font: "Georgia", "Times New Roman", serif;

  --bg: var(--pp-bg); --panel: var(--pp-panel); --panel-strong: var(--pp-panel-strong);
  --panel-soft: var(--pp-panel-soft); --line: var(--pp-line); --text: var(--pp-text);
  --muted: var(--pp-muted); --ink: var(--pp-text); --ok: var(--pp-ok); --warn: var(--pp-warn); --stop: var(--pp-stop);
  --accent: var(--pp-accent); --accent-soft: var(--pp-accent-soft); --shadow: var(--pp-shadow);
  --glass-shadow: var(--pp-shadow); --body-font: var(--pp-body-font); --title-font: var(--pp-title-font);
  --card: rgba(250, 242, 230, 0.82); --soft: var(--pp-panel-soft); --err: #991b1b;
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 20px;
  --panel-radius: 22px; --inner-radius: 16px; --button-radius: 14px;
  --section-fill: rgba(255, 252, 246, 0.56); --section-fill-soft: rgba(255, 252, 246, 0.48);
  --section-line: rgba(112, 74, 41, 0.12);
}
:root {
  --piano-bg: var(--pp-bg); --piano-panel: var(--pp-panel); --piano-panel-strong: var(--pp-panel-strong);
  --piano-panel-soft: var(--pp-panel-soft); --piano-line: var(--pp-line); --piano-text: var(--pp-text);
  --piano-muted: var(--pp-muted); --piano-accent: var(--pp-accent); --piano-shadow: var(--pp-shadow);
  --piano-body-font: var(--pp-body-font); --piano-title-font: var(--pp-title-font);
}

:root.media-surface {
  --bg: #18110b; --panel: rgba(250, 242, 230, 0.84); --panel-strong: rgba(250, 242, 230, 0.92);
  --shadow: 0 22px 44px rgba(20, 12, 7, 0.18);
}

.pp-status-indicator { display:inline-flex; align-items:center; gap:6px; width:max-content; padding:4px 8px; border-radius:999px; font-size:.76rem; font-weight:800; background:#f5dfda; color:#5a312b; }
.pp-status-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#9c2f2f; box-shadow:0 0 0 2px rgba(156,47,47,.12); }
.pp-status-indicator.is-ok { background:#e2f2df; color:#25572a; }
.pp-status-indicator.is-ok .pp-status-dot { background:#3d8a47; box-shadow:0 0 0 2px rgba(61,138,71,.12); }

/* Outer viewport geometry (header/content/footer) lives exclusively in app-shell.css.
   This file intentionally contains reusable component styling only. */