* { box-sizing: border-box; }

:root {
      color-scheme: light;
      --surface: #ffffff;
      --surface-page: #ffffff;
      --surface-toolbar: rgba(250, 249, 253, 0.78);
      --surface-warm: #f8f6f2;
      --surface-tint: #faf9fd;
      --surface-purple: #f0edf8;
      --surface-purple-hover: #f3f0fa;
      --surface-purple-active: #ede8fb;
      --surface-purple-pressed: #e9e2f7;
      --surface-muted: #f5f5f5;
      --surface-panel-soft: #f8f6fd;
      --surface-info: #e8f0fc;
      --surface-danger-soft: #fce8e8;
      --border-panel-soft: #ded6f1;
      --text-info: #2a4a7c;
      --text-purple-muted: #665a84;
      --brand-hover: #483996;
      --brand-active: #4a3a96;
      --brand-disabled: #a49bc7;
      --text: #333333;
      --text-mid: #444444;
      --text-soft: #555555;
      --text-muted: #666666;
      --text-subtle: #777777;
      --text-faint: #888888;
      --text-disabled: #999999;
      --text-disabled-strong: #bbbbbb;
      --ink-navy: #0b132b;
      --brand: #5946b2;
      --brand-strong: #3a2a78;
      --brand-deep: #241060;
      --on-brand: #ffffff;
      --control-disabled: #aaaaaa;
      --border-neutral: #dddddd;
      --border-neutral-soft: #eeeeee;
      --border-neutral-strong: #cccccc;
      --border-warm: #e5e0d8;
      --border-warm-soft: #e8e2d8;
      --border-warm-muted: #e7e1d8;
      --border-warm-strong: #d8d0c4;
      --border-purple: #d8d0ed;
      --border-purple-soft: #e3dcf3;
      --border-purple-strong: #c8bce8;
      --danger: #a02828;
      --recording: #dc3545;
      --success: #2d8659;
      --paused: #b89640;
      --danger-border: #e2b8b8;
      --danger-surface: #fffafa;
      --danger-surface-hover: #f9eeee;
      --return-text: #33206f;
      --return-surface: #eef7e8;
      --return-surface-hover: #e3f0dc;
      --return-border: #b8d7ad;
      --flag-text: #2f225f;
      --flag-surface: #fff8cc;
      --flag-chip-surface: #fff2a8;
      --flag-border: #eadc86;
    }

@media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        color-scheme: dark;
        --surface: #151827;
        --surface-page: #090d1a;
        --surface-toolbar: rgba(23, 27, 44, 0.86);
        --surface-warm: #111522;
        --surface-tint: #171b2c;
        --surface-purple: #221d3d;
        --surface-purple-hover: #2a244a;
        --surface-purple-active: #302957;
        --surface-purple-pressed: #382f64;
        --surface-muted: #1b2032;
        --surface-panel-soft: #171b2c;
        --surface-info: #17243a;
        --surface-danger-soft: #321b22;
        --border-panel-soft: #383250;
        --text-info: #a9c7ff;
        --text-purple-muted: #b7acd8;
        --brand-hover: #c0b2ff;
        --brand-active: #7f6fe3;
        --brand-disabled: #5f587c;
        --text: #ececf4;
        --text-mid: #deddec;
        --text-soft: #cac8dc;
        --text-muted: #b9b6cc;
        --text-subtle: #a7a3bd;
        --text-faint: #918ca8;
        --text-disabled: #76718b;
        --text-disabled-strong: #67627a;
        --ink-navy: #f3f1ff;
        --brand: #a995ff;
        --brand-strong: #d3c8ff;
        --brand-deep: #ede8ff;
        --on-brand: #ffffff;
        --control-disabled: #5c596b;
        --border-neutral: #32364a;
        --border-neutral-soft: #282c3d;
        --border-neutral-strong: #45495d;
        --border-warm: #343344;
        --border-warm-soft: #393748;
        --border-warm-muted: #343244;
        --border-warm-strong: #4b485c;
        --border-purple: #4a426e;
        --border-purple-soft: #383250;
        --border-purple-strong: #63588e;
        --danger: #ff9b9b;
        --recording: #e0525f;
        --success: #39996d;
        --paused: #cba64d;
        --danger-border: #7d4449;
        --danger-surface: #2b171d;
        --danger-surface-hover: #3a2027;
        --return-text: #dcffd5;
        --return-surface: #173421;
        --return-surface-hover: #1e442b;
        --return-border: #3b7a4e;
        --flag-text: #fff4b8;
        --flag-surface: #3b3213;
        --flag-chip-surface: #5a4a18;
        --flag-border: #8f7831;
      }
    }

:root[data-theme="dark"] {
      color-scheme: dark;
      --surface: #151827;
      --surface-page: #090d1a;
      --surface-toolbar: rgba(23, 27, 44, 0.86);
      --surface-warm: #111522;
      --surface-tint: #171b2c;
      --surface-purple: #221d3d;
      --surface-purple-hover: #2a244a;
      --surface-purple-active: #302957;
      --surface-purple-pressed: #382f64;
      --surface-muted: #1b2032;
      --surface-panel-soft: #171b2c;
      --surface-info: #17243a;
      --surface-danger-soft: #321b22;
      --border-panel-soft: #383250;
      --text-info: #a9c7ff;
      --text-purple-muted: #b7acd8;
      --brand-hover: #c0b2ff;
      --brand-active: #7f6fe3;
      --brand-disabled: #5f587c;
      --text: #ececf4;
      --text-mid: #deddec;
      --text-soft: #cac8dc;
      --text-muted: #b9b6cc;
      --text-subtle: #a7a3bd;
      --text-faint: #918ca8;
      --text-disabled: #76718b;
      --text-disabled-strong: #67627a;
      --ink-navy: #f3f1ff;
      --brand: #a995ff;
      --brand-strong: #d3c8ff;
      --brand-deep: #ede8ff;
      --on-brand: #ffffff;
      --control-disabled: #5c596b;
      --border-neutral: #32364a;
      --border-neutral-soft: #282c3d;
      --border-neutral-strong: #45495d;
      --border-warm: #343344;
      --border-warm-soft: #393748;
      --border-warm-muted: #343244;
      --border-warm-strong: #4b485c;
      --border-purple: #4a426e;
      --border-purple-soft: #383250;
      --border-purple-strong: #63588e;
      --danger: #ff9b9b;
      --recording: #e0525f;
      --success: #39996d;
      --paused: #cba64d;
      --danger-border: #7d4449;
      --danger-surface: #2b171d;
      --danger-surface-hover: #3a2027;
      --return-text: #dcffd5;
      --return-surface: #173421;
      --return-surface-hover: #1e442b;
      --return-border: #3b7a4e;
      --flag-text: #fff4b8;
      --flag-surface: #3b3213;
      --flag-chip-surface: #5a4a18;
      --flag-border: #8f7831;
    }

html, body { height: 100%; margin: 0; padding: 0; }

body {
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 700px;
      margin: 0 auto;
      padding: 16px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: var(--text);
      background: var(--surface-page);
    }

h1 { font-weight: 500; margin: 0; font-size: 22px; }

.status { color: var(--text-faint); font-size: 14px; }

form {
      display: flex;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

input[type="text"] {
      flex: 1;
      padding: 12px;
      border: 1px solid var(--border-neutral-strong);
      border-radius: 8px;
      color: var(--text);
      background: var(--surface);
      font-size: 16px;
      min-width: 0;
    }