/* Hallmark · shape: app screen · genre: playful · theme: Hum (deal 1/3)
 * nav: single top bar · signature: one shared video with a private admission panel
 * states: loading, unpaired, pending, waiting, connecting, playing, disconnected, error
 * axes: light/rounded-sans/muted-rose · posture: restrained app accent · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, kept one video and one entry panel instead of dashboard stat cards */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-paper: #f9f4eb;
  --color-paper-2: #eee6d9;
  --color-card: #fffaf2;
  --color-ink: #302c38;
  --color-ink-2: #453e4b;
  --color-muted: #665d68;
  --color-rule: #c7bcb8;
  --color-accent: #83445d;
  --color-accent-deep: #6e334b;
  --color-accent-ink: #fff9ef;
  --color-focus: #326a88;
  --color-edge: #b6a99d;
  --color-error: #9b2f38;
  --color-stage: #24232c;
  --color-stage-ink: #f5ede8;
  --color-stage-muted: #c6bac8;
  --font-body: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", ui-rounded, sans-serif;
  --font-display: var(--font-body);
  --font-outlier: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --control-height: 44px;
  --radius-card: 20px;
  --radius-input: 10px;
  --radius-stock: 12px;
}
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
h1, h2 { margin: 0 0 var(--space-md); font-family: var(--font-display); font-weight: 600; color: var(--color-ink); min-width: 0; overflow-wrap: break-word; }
h1 { font-size: 28px; line-height: 1.35; }
h2 { font-size: 21px; line-height: 1.4; }
p { margin: 0 0 var(--space-md); max-width: 65ch; }
a { color: var(--color-accent); }
.topbar { max-width: 1440px; margin: auto; padding: var(--space-lg) var(--space-xl); display: flex; align-items: center; gap: var(--space-md); }
.wordmark { color: var(--color-ink); font-size: 23px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mode { font-size: 14px; color: var(--color-muted); flex: 1; }
.viewer-layout, .sender-layout { width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--space-lg) var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-xl); align-items: start; }
.sender-layout { max-width: 1200px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.watch-area, .entry-panel, .session-panel, .obs-panel { min-width: 0; }
.entry-panel, .obs-panel { padding: var(--space-lg); background: var(--color-card); border-radius: var(--radius-card); }
.session-panel { padding: var(--space-lg) 0; }
.stage { width: 100%; aspect-ratio: 16 / 9; min-height: 240px; background: var(--color-stage); color: var(--color-stage-ink); border-radius: var(--radius-card); display: grid; place-items: center; overflow: clip; }
.stage h1 { color: var(--color-stage-ink); font-size: clamp(22px, 2.8vw, 34px); }
.stage p { color: var(--color-stage-muted); }
.empty-state { padding: var(--space-xl); text-align: center; }
video { width: 100%; height: 100%; object-fit: contain; max-height: 80dvh; }
.playback-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--space-md) 0; gap: var(--space-sm); }
.playback-bar p { margin: 0; font-size: 14px; }
.actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.actions > .primary { margin-top: 0; }
.viewer-layout:has(.entry-panel[hidden]) { grid-template-columns: minmax(0, 1fr); }
form { display: grid; gap: var(--space-sm); }
label { display: block; font-size: 14px; color: var(--color-ink-2); margin-top: var(--space-xs); }
input { width: 100%; min-width: 0; min-height: var(--control-height); border: 1px solid var(--color-muted); background: var(--color-card); color: var(--color-ink); border-radius: var(--radius-input); padding: 0 var(--space-md); font: inherit; }
input[readonly] { background: var(--color-paper-2); font-size: 13px; }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
input:disabled { cursor: not-allowed; opacity: .65; background: var(--color-paper-2); }
input[aria-invalid="true"] { border-color: var(--color-error); }
button { font: inherit; font-size: 14px; font-weight: 600; min-height: var(--control-height); padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-stock); background: var(--color-accent); color: var(--color-accent-ink); cursor: pointer; white-space: nowrap; transition: transform 120ms ease-out; }
button:hover { background: var(--color-accent-deep); }
button:active { transform: translateY(1px); }
button:disabled { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-edge); cursor: not-allowed; opacity: .75; transform: none; }
button[aria-busy="true"] { cursor: progress; }
.quiet, .text-button { color: var(--color-ink); background: var(--color-paper); border-color: var(--color-muted); }
.quiet:hover, .text-button:hover { background: var(--color-paper-2); }
.text-button { margin-top: var(--space-sm); border-color: transparent; padding-inline: var(--space-sm); }
.primary { margin-top: var(--space-sm); }
.muted, .hint, .privacy-note { color: var(--color-muted); }
.hint, .privacy-note { font-size: 13px; margin-top: var(--space-sm); }
.privacy-note { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-lg); }
.form-message { font-size: 14px; margin-top: var(--space-md); color: var(--color-accent); overflow-wrap: anywhere; }
.error { color: var(--color-error); font-size: 14px; overflow-wrap: anywhere; }
details { margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
details button { margin-top: var(--space-sm); }
summary { cursor: pointer; font-size: 14px; min-height: var(--control-height); }
.stat-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); margin: var(--space-md) 0 var(--space-lg); font-size: 14px; }
.stat-list dt, .stat-list dd { margin: 0; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); overflow-wrap: anywhere; }
.stat-list dt { color: var(--color-muted); }
.stat-list dd { font-variant-numeric: tabular-nums; }
.pair-request { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
footer { max-width: 1440px; margin: var(--space-md) auto; padding: 0 var(--space-xl) var(--space-xl); font-size: 13px; color: var(--color-muted); }
.skip { position: absolute; left: var(--space-md); top: -80px; padding: var(--space-sm) var(--space-md); background: var(--color-card); z-index: 10; }
.skip:focus-visible { top: var(--space-md); }
@media (max-width: 960px) { .viewer-layout, .sender-layout { grid-template-columns: minmax(0, 1fr); } .entry-panel { max-width: 520px; width: 100%; } }
@media (max-width: 540px) { .topbar, .viewer-layout, .sender-layout { padding: var(--space-md); } .topbar { flex-wrap: wrap; } .wordmark { font-size: 21px; } .mode { font-size: 13px; } .stage { min-height: 210px; } .empty-state { padding: var(--space-lg); } h1 { font-size: 25px; } footer { padding: 0 var(--space-md) var(--space-lg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }