/* 檔案：notes-web/public/style.css
 * 數值來源：design.md「Design Source」（Claude Design「共筆網站視覺稿」畫面 01–08）。
 * 桌機照設計稿尺寸；寬度 < 900px 時觸控目標 ≥ 44px、輸入框字級 ≥ 16px（見檔尾）。 */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  /* 顏色 */
  --c-page: #FAFAF7;
  --c-surface: #FFFFFF;
  --c-text: #1D1D1B;
  --c-text-2: #6E6D68;
  --c-text-3: #4A4944;
  --c-placeholder: #8A8882;
  --c-brand: #2E5B94;
  --c-brand-bg: #EEF2F8;
  --c-brand-bg-2: #E6ECF4;
  --c-focus-ring: #E3EAF4;
  --c-border: #E5E3DE;
  --c-border-soft: #EFEDE8;
  --c-border-input: #D6D4CE;
  --c-tag-platform: #EDECE7;
  --c-youtube-dot: #C23B2E;
  --c-hover: #F2F1ED;
  --c-hover-private: #EAE8E3;
  --c-hover-row: #F7F6F2;
  --c-muted-bg: #F4F3EF;
  --c-private-border: #B9B6AE;
  --c-new-bg: #FBF3DC;
  --c-new-border: #F3E2AE;
  --c-new-text: #7A5A10;
  --c-error: #B3412B;
  --c-error-bg: #FBEDEA;
  --c-disabled: #C9C6BF;
  --c-disabled-text: #B5B2AB;
  --c-player-platform: #3B3B38;
  --c-player-youtube: #2B2B29;
  --c-scrim: rgba(29, 29, 27, .4);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .12);

  /* 字型 */
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* 圓角 */
  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-14: 14px;

  /* 版面 */
  --header-h: 56px;
  --content-w: 880px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-page);
  font-family: var(--font-sans);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-text); text-decoration: none; }
a:hover { color: var(--c-brand); }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--c-placeholder); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ── 共用元件 ───────────────────────────────────────── */

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 9px; height: 9px; background: var(--c-brand); flex: none; }
.logo__text { font-size: 19px; font-weight: 700; letter-spacing: .1em; }
.logo--signin { gap: 14px; }
.logo--signin .logo__mark { width: 14px; height: 14px; }
.logo--signin .logo__text { font-size: 44px; letter-spacing: .12em; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12px; color: var(--c-text-3); border-radius: var(--r-4); padding: 3px 8px; line-height: 1.5;
}
.tag__dot { width: 6px; height: 6px; background: var(--c-text-3); }
.tag--platform { background: var(--c-tag-platform); }
.tag--youtube { border: 1px solid var(--c-border-input); padding: 2px 7px; }
.tag--youtube .tag__dot { border-radius: 50%; background: var(--c-youtube-dot); }

.btn {
  height: 40px; padding: 0 22px; border-radius: var(--r-6); font-size: 15px; font-weight: 500;
  border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.btn--primary { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.btn--primary:disabled { background: var(--c-disabled); border-color: var(--c-disabled); }
.btn--secondary { background: var(--c-surface); border-color: var(--c-border-input); color: var(--c-text); font-weight: 400; }
.btn--secondary:hover { border-color: var(--c-text); }
.btn--small { height: 32px; padding: 0 16px; font-size: 13px; }
.btn--small.btn--secondary { padding: 0 14px; }

.btn-ghost {
  background: none; border: none; font-size: 13px; color: var(--c-text-2); padding: 4px 8px; border-radius: var(--r-4);
}
.btn-ghost:hover { background: var(--c-hover); color: var(--c-text); }
.btn-ghost--danger:hover { background: var(--c-error-bg); color: var(--c-error); }

.input {
  height: 40px; width: 100%; border: 1px solid var(--c-border-input); border-radius: var(--r-6); padding: 0 12px;
  font-size: 15px; color: var(--c-text); background: var(--c-surface); outline: none;
}
.input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.input--mono { font-family: var(--font-mono); }
.input.is-invalid { border: 1.5px solid var(--c-error); }
.select { padding: 0 10px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c-text-2); min-width: 0; }
.field__label { font-size: 13px; color: var(--c-text-2); }
.field-error { font-size: 13px; font-weight: 500; color: var(--c-error); }
.field-error:empty { display: none; }

.form-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-8); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.form-card__title { font-size: 15px; font-weight: 700; }

.empty-state { padding: 120px 0; text-align: center; font-size: 16px; color: var(--c-text-2); }
.empty-state--notes { padding: 48px 0; }

.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; font-size: 14px; color: var(--c-text-3); }
.loading--page { min-height: 100vh; }
.spinner {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-disabled); border-top-color: var(--c-text-3);
  animation: spin .9s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.back-link { font-size: 14px; color: var(--c-text-2); align-self: flex-start; }

/* ── 頁首 ───────────────────────────────────────────── */

.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.site-header__row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.site-header__home { display: inline-flex; color: var(--c-text); }
.site-header__home:hover { color: var(--c-text); }
.site-header__nav { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.site-header__email { color: var(--c-text-2); font-family: var(--font-mono); font-size: 13px; }
.site-header__link.is-current { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-header__email-row { display: none; }
.btn-signout {
  height: 32px; padding: 0 14px; background: var(--c-surface); border: 1px solid var(--c-border-input); border-radius: var(--r-6);
  font-size: 14px; color: var(--c-text);
}
.btn-signout:hover { border-color: var(--c-text); }

/* ── 01 登入頁 ──────────────────────────────────────── */

.signin { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 0 24px; }
.btn-google {
  height: 48px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--c-surface); border: 1px solid var(--c-border-input); border-radius: var(--r-6);
  font-size: 16px; font-weight: 500; color: var(--c-text);
}
.btn-google:hover { border-color: var(--c-text); }
.btn-google__g {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--c-text);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

/* ── 02 未受邀頁 ────────────────────────────────────── */

.uninvited {
  width: 420px; max-width: 100%; margin: 0 auto; min-height: calc(100vh - var(--header-h) - 1px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px;
}
.uninvited__title { margin: 0; font-size: 28px; font-weight: 700; }
.uninvited__account { display: flex; flex-direction: column; gap: 6px; }
.uninvited__label { font-size: 14px; color: var(--c-text-2); }
.uninvited__email { font-family: var(--font-mono); font-size: 16px; word-break: break-all; }
.uninvited__signout { margin-top: 8px; }

/* ── 03 影片清單頁 ──────────────────────────────────── */

.page { width: var(--content-w); max-width: 100%; margin: 0 auto; padding: 40px 0 64px; display: flex; flex-direction: column; gap: 40px; }

.register-form__fields { display: flex; gap: 12px; align-items: flex-start; }
.register-form__title { flex: 1; }
.register-form__url { flex: 1.3; }
.register-form__fields > .btn { margin-top: 25px; }

.list-header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--c-text); }
.list-header__title { margin: 0; font-size: 20px; font-weight: 700; }
.list-header__hint { font-size: 13px; color: var(--c-text-2); }

.video-row { display: flex; align-items: center; gap: 20px; padding: 18px 8px; border-bottom: 1px solid var(--c-border); color: var(--c-text); }
.video-row:hover { background: var(--c-hover); color: var(--c-text); }
.video-row__title { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.video-row__meta { display: flex; align-items: center; gap: 20px; flex: none; }
.video-row__duration { width: 72px; text-align: right; font-family: var(--font-mono); font-size: 14px; color: var(--c-text-2); }

/* ── 04 播放頁 ──────────────────────────────────────── */

.video-page { display: flex; height: calc(100vh - var(--header-h) - 1px); height: calc(100dvh - var(--header-h) - 1px); min-height: 0; }
.video-topbar { display: none; }
.video-main { width: 60%; overflow: auto; padding: 20px 28px 32px; display: flex; flex-direction: column; gap: 16px; }

.player { aspect-ratio: 16 / 9; flex: none; background: var(--c-player-platform); border-radius: var(--r-4); overflow: hidden; position: relative; }
.player iframe, .player__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; text-align: center; padding: 0 16px; }
.player-error__icon { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.player-error__text { font-size: 16px; font-weight: 500; }

.video-meta { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.video-meta__title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.video-meta__row { display: flex; align-items: center; gap: 12px; }
.video-meta__duration { font-family: var(--font-mono); font-size: 14px; color: var(--c-text-2); }
.video-meta__duration:empty { display: none; }
.video-meta__spacer { flex: 1; }

/* 筆記面板 */
.notes-panel { width: 40%; border-left: 1px solid var(--c-border); background: var(--c-surface); display: flex; flex-direction: column; min-height: 0; position: relative; }
.notes-header { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 24px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.notes-header__title { font-size: 15px; font-weight: 700; }
.notes-header__count { font-size: 13px; color: var(--c-text-2); }
.notes-header__count.is-filtered { color: var(--c-brand); font-weight: 500; }

.filter-btn {
  margin-left: auto; height: 30px; padding: 0 12px; display: flex; align-items: center; gap: 6px;
  background: var(--c-surface); border: 1px solid var(--c-border-input); border-radius: var(--r-6); font-size: 13px; color: var(--c-text-3);
}
.filter-btn:hover { border-color: var(--c-text); color: var(--c-text); }
.filter-btn__caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid currentColor; }
.filter-btn.is-active { background: var(--c-brand-bg); border-color: var(--c-brand); color: var(--c-brand); font-weight: 500; }

.filter-panel {
  position: absolute; top: 44px; right: 16px; width: 300px; max-height: calc(100% - 60px); overflow: auto;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-8); box-shadow: var(--shadow-pop);
  z-index: 3; padding-bottom: 6px;
}
.sheet-handle, .filter-panel__titlebar { display: none; }
.sheet-backdrop { display: none; }
.filter-panel__shortcuts { display: flex; gap: 8px; padding: 10px 12px; }
.pill { height: 28px; padding: 0 14px; background: var(--c-surface); border: 1px solid var(--c-border-input); border-radius: 999px; font-size: 13px; color: var(--c-text); }
.pill:hover { border-color: var(--c-text); }
.filter-panel__divider { height: 1px; background: var(--c-border-soft); margin: 0 0 4px; }
.filter-row { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 14px; cursor: pointer; }
.filter-row:hover { background: var(--c-hover-row); }
.filter-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-brand); flex: none; }
.filter-row__email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; }
.filter-row__count { font-family: var(--font-mono); font-size: 13px; color: var(--c-text-2); }
.me-tag { font-size: 11px; color: var(--c-brand); background: var(--c-brand-bg); border-radius: var(--r-3); padding: 1px 6px; margin-left: 6px; flex: none; }
.filter-panel__note { padding: 8px 12px 4px; font-size: 12px; color: var(--c-text-2); line-height: 1.5; }

.conn-banner { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: var(--c-muted-bg); border-bottom: 1px solid var(--c-border); font-size: 14px; color: var(--c-text-3); }

.notes-list { flex: 1; min-height: 0; overflow: auto; background: var(--c-page); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }

/* 筆記卡片 */
.note-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-8); padding: 14px 16px; flex: none; }
.note-card.is-private { background: var(--c-muted-bg); border: 1px dashed var(--c-private-border); }
.note-card.is-new { background: var(--c-new-bg); border-color: var(--c-new-border); }
.note-card.is-editing { border-color: var(--c-brand); box-shadow: 0 0 0 2px var(--c-brand); }
.note-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-width: 0; }
.note-card__author { font-size: 13px; color: var(--c-text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-card.is-private .note-card__author { color: var(--c-text-3); }
.note-card__private { margin-left: auto; font-size: 12px; color: var(--c-text-3); flex: none; }
.note-card__new { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--c-new-text); background: var(--c-new-border); border-radius: var(--r-3); padding: 1px 7px; flex: none; }

.time-btn { padding: 0; background: none; border: none; display: inline-flex; align-items: center; flex: none; border-radius: var(--r-4); }
.time-chip { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--c-brand); background: var(--c-brand-bg); border-radius: var(--r-4); padding: 3px 8px; white-space: nowrap; }
.time-btn:hover .time-chip { background: var(--c-brand-bg-2); }
.note-card.is-private .time-chip { background: var(--c-brand-bg-2); }
.note-card.is-new .time-chip { background: var(--c-surface); }

.note-actions { display: flex; gap: 2px; margin: 6px 0 -4px -8px; flex-wrap: wrap; }
.note-action { background: none; border: none; font-size: 13px; color: var(--c-text-2); padding: 4px 8px; border-radius: var(--r-4); }
.note-action:hover { background: var(--c-hover); color: var(--c-text); }
.note-card.is-private .note-action:hover { background: var(--c-hover-private); }
.note-action--danger:hover, .note-card.is-private .note-action--danger:hover { background: var(--c-error-bg); color: var(--c-error); }

/* Markdown 內文（畫面 06） */
.note-body { font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.note-body > :first-child { margin-top: 0; }
.note-body > :last-child { margin-bottom: 0; }
.note-body p { margin: 0 0 6px; }
.note-body ul { margin: 4px 0 6px; padding-left: 1.3em; }
.note-body ol { margin: 4px 0 6px; padding-left: 1.4em; }
.note-body li { margin: 2px 0; }
.note-body blockquote { margin: 0 0 6px; padding: 0 0 0 10px; border-left: 3px solid var(--c-border-input); color: var(--c-text-3); }
.note-body a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 2px; }
.note-body code { font-family: var(--font-mono); font-size: .88em; background: var(--c-hover); border-radius: var(--r-3); padding: 1px 5px; }

.hidden-summary { text-align: center; font-size: 13px; color: var(--c-text-2); padding: 8px 0; flex: none; }
.link-btn { background: none; border: none; padding: 0; font-size: 13px; color: var(--c-brand); text-decoration: underline; }

/* 編輯器（新增與編輯共用） */
.editor { border: 1px solid var(--c-border-input); border-radius: var(--r-6); overflow: hidden; background: var(--c-surface); }
.editor:focus-within { border: 1.5px solid var(--c-brand); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.editor.is-invalid, .editor.is-invalid:focus-within { border: 1.5px solid var(--c-error); box-shadow: none; }
.editor__toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--c-border); }
.tool {
  width: 32px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--r-4); font-size: 14px; color: var(--c-text);
}
.tool:hover:not(:disabled) { background: var(--c-hover-private); }
.tool:active:not(:disabled) { background: var(--c-brand-bg-2); }
.tool:disabled { color: var(--c-disabled-text); }
.tool--bold { font-weight: 700; }
.tool--italic { font-style: italic; font-family: Georgia, serif; }
.tool--strike { text-decoration: line-through; }
.tool--numbered { font-family: var(--font-mono); font-size: 13px; }
.tool--link { font-size: 13px; }
.tool--quote { font-size: 18px; }
.mode-toggle { margin-left: auto; display: flex; border: 1px solid var(--c-border-input); border-radius: var(--r-6); overflow: hidden; flex: none; }
.mode-toggle__btn { height: 28px; padding: 0 10px; border: none; font-size: 13px; background: var(--c-surface); color: var(--c-text-3); }
.mode-toggle__btn[aria-pressed="true"] { background: var(--c-text); color: #fff; }
.editor__input {
  display: block; width: 100%; height: 72px; resize: none; border: none; padding: 10px 12px;
  font-size: 15px; line-height: 1.7; color: var(--c-text); outline: none; background: transparent;
}
.editor__preview { padding: 9px 12px; min-height: 72px; }
.editor__error, .composer__error { font-size: 13px; font-weight: 500; color: var(--c-error); }
.editor__error:empty, .composer__error:empty { display: none; }
.editor__counter { font-size: 12px; color: var(--c-text-2); font-family: var(--font-mono); white-space: nowrap; }

.note-edit { display: flex; flex-direction: column; gap: 6px; }
.note-edit .editor__input { height: 96px; }
.note-edit__actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.note-edit__counter { margin-left: auto; }

/* 輸入區 */
.composer {
  flex: none; border-top: 1px solid var(--c-border); background: var(--c-surface); padding: 14px 24px 18px;
  display: grid; gap: 0 14px; align-items: center;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "time time time"
    "editor editor editor"
    "error error error"
    "cerror cerror cerror"
    "private counter submit";
}
.composer > .time-chip--now { grid-area: time; justify-self: start; }
.composer > .editor { grid-area: editor; margin-top: 10px; }
.composer > .editor__error { grid-area: error; margin-top: 6px; }
.composer > .composer__error { grid-area: cerror; margin-top: 6px; }
.composer > .private-toggle { grid-area: private; margin-top: 10px; }
.composer > .composer__counter { grid-area: counter; margin-top: 10px; }
.composer > .composer__submit { grid-area: submit; height: 36px; font-size: 14px; margin-top: 10px; }
.private-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-text-3); cursor: pointer; }
.private-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-text); }

/* ── 05 白名單頁 ────────────────────────────────────── */

.page--members { padding: 32px 0 64px; gap: 32px; }
.members-heading { display: flex; flex-direction: column; gap: 16px; }
.members-title { display: flex; align-items: baseline; gap: 12px; }
.members-title__text { margin: 0; font-size: 24px; font-weight: 700; }
.members-title__count { font-size: 14px; color: var(--c-text-2); }
.members-form { flex-direction: row; gap: 12px; align-items: flex-start; }
.members-form__email { flex: 1; }
.members-form__role { width: 160px; flex: none; }
.members-form > .btn { margin-top: 25px; padding: 0 24px; }

.members-table__head, .member-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 260px; gap: 16px; align-items: center; }
.is-readonly .members-table__head, .is-readonly .member-row { grid-template-columns: minmax(0, 1fr) 120px; }
.members-table__head { padding: 0 8px 10px; border-bottom: 1px solid var(--c-text); font-size: 13px; color: var(--c-text-2); }
.member-row { padding: 12px 8px; border-bottom: 1px solid var(--c-border); }
.member-row.is-self { background: var(--c-muted-bg); }
.member-row__email { font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; }
.member-row__self { font-family: var(--font-sans); color: var(--c-text-2); }
.member-row__self-mobile { display: none; }
.member-row__role { font-size: 14px; }
.member-row.is-self .member-row__role { font-weight: 500; }
.member-row__actions { display: flex; gap: 8px; }
.btn-row { height: 32px; padding: 0 12px; background: var(--c-surface); border: 1px solid var(--c-border-input); border-radius: var(--r-6); font-size: 13px; color: var(--c-text); }
.btn-row:hover:not(:disabled) { border-color: var(--c-text); }
.btn-row--danger { color: var(--c-error); }
.btn-row--danger:hover:not(:disabled) { border-color: var(--c-error); }
.btn-row:disabled { background: transparent; border-color: var(--c-border); color: var(--c-disabled-text); }

/* ── 寬度 < 900px ────────────────────────────────────
 * 觸控目標 ≥ 44px、輸入框字級 ≥ 16px（避免 iOS 自動放大）。 */
@media (max-width: 899.98px) {
  .logo { gap: 9px; }
  .logo__mark { width: 8px; height: 8px; }
  .logo__text { font-size: 18px; }
  .logo--signin { gap: 12px; }
  .logo--signin .logo__mark { width: 12px; height: 12px; }
  .logo--signin .logo__text { font-size: 36px; }

  .site-header { padding: 0 8px 8px 16px; }
  .site-header__row { padding: 0; }
  .site-header__nav { gap: 0; font-size: 15px; }
  .site-header__nav .site-header__email { display: none; }
  .site-header__link { height: 44px; padding: 0 12px; display: flex; align-items: center; }
  .btn-signout { height: 44px; padding: 0 12px; background: none; border: none; font-size: 15px; }
  .site-header__email-row { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--c-text-2); margin-top: -6px; overflow-wrap: anywhere; }
  body[data-route="uninvited"] .site-header { padding-bottom: 0; }

  .signin { gap: 36px; }
  .btn-google { height: 52px; width: 100%; max-width: 420px; padding: 0 16px; }

  .uninvited { padding: 0 24px 80px; min-height: calc(100vh - var(--header-h) - 1px); min-height: calc(100dvh - var(--header-h) - 1px); }
  .uninvited__title { font-size: 24px; }
  .uninvited__signout { width: 100%; height: 48px; font-size: 16px; }

  .page { padding: 20px 16px 40px; gap: 28px; }
  .form-card { padding: 16px; }
  .input { height: 48px; font-size: 16px; }
  .btn { height: 48px; font-size: 16px; }
  .register-form__fields { flex-direction: column; align-items: stretch; gap: 14px; }
  .register-form__fields > .btn { margin-top: 0; }
  .field-error { font-size: 14px; }

  .list-header { padding-bottom: 10px; }
  .list-header__title { font-size: 18px; }
  .video-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 0; min-height: 44px; }
  .video-row:hover { background: none; }
  .video-row__title { line-height: 1.5; }
  .video-row__meta { gap: 10px; }
  .video-row__duration { width: auto; text-align: left; font-size: 13px; }

  /* 播放頁：固定高度的畫面，頂列＋播放器固定在上，只有筆記列表捲動，輸入列在底部 */
  body[data-route="video"] { overflow: hidden; background: var(--c-surface); }
  body[data-route="video"] .site-header { display: none; }
  .video-page {
    position: fixed; left: 0; right: 0; top: var(--vv-top, 0px);
    height: var(--vv-height, 100dvh);
    flex-direction: column; background: var(--c-surface);
  }
  .video-topbar { height: 48px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 4px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
  .video-topbar__back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
  .video-topbar__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .video-topbar__actions .btn-ghost { height: 44px; padding: 0 12px; font-size: 14px; }
  .video-main { width: 100%; flex: none; overflow: visible; padding: 0; gap: 0; position: sticky; top: 0; }
  .video-main > .back-link, .video-meta { display: none; }
  .player { border-radius: 0; }
  .player-error { gap: 10px; }
  .player-error__icon { width: 30px; height: 30px; font-size: 15px; }
  .player-error__text { font-size: 15px; }

  .notes-panel { width: 100%; flex: 1; border-left: none; position: static; }
  .notes-header { padding: 0 4px 0 16px; }
  .filter-btn { height: 44px; }
  .conn-banner { padding: 10px 16px; }
  .notes-list { padding: 8px 12px; gap: 8px; }

  .note-card { padding: 4px 12px 12px; }
  .note-card__head { margin-bottom: 0; }
  .note-card.is-private .note-card__author { display: none; }
  .note-card.is-private .note-card__private { margin-left: 0; font-size: 13px; }
  .time-btn { height: 44px; }
  .time-chip { font-size: 14px; padding: 4px 9px; }
  .note-body { font-size: 16px; line-height: 1.7; }
  .note-actions { margin: 2px 0 -8px -12px; gap: 0; }
  .note-action { height: 44px; padding: 0 12px; font-size: 14px; border-radius: 0; }
  .btn--small { height: 44px; font-size: 15px; padding: 0 22px; }
  .btn--small.btn--secondary { padding: 0 20px; }

  .tool { width: 44px; height: 44px; font-size: 15px; }
  .tool--numbered, .tool--link { font-size: 13px; }
  .tool--quote { font-size: 18px; }
  /* 7 個 44px 按鈕＋兩段切換放不進 366px：只顯示「切換到另一個模式」的那顆，窄的卡片內允許換行 */
  .editor__toolbar { gap: 0; padding: 0; flex-wrap: wrap; }
  .mode-toggle__btn { height: 36px; min-width: 44px; }
  .mode-toggle__btn[aria-pressed="true"] { display: none; }
  .editor__input { font-size: 16px; }

  /* 輸入區：⏱＋只有我看得到 一列，輸入框＋送出 一列；聚焦時改為工具列＋輸入框＋送出 */
  .composer {
    padding: 4px 12px calc(14px + env(safe-area-inset-bottom)); gap: 4px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "time private"
      "toolbar toolbar"
      "input submit"
      "error error"
      "cerror cerror";
  }
  .composer > .editor { display: contents; }
  .composer > *, .composer > .editor { margin-top: 0; }
  .composer .editor__toolbar { grid-area: toolbar; display: none; }
  .composer .editor__input, .composer .editor__preview {
    grid-area: input; align-self: end; height: 48px; min-height: 48px; padding: 12px; line-height: 1.375; overflow-y: hidden;
    border: 1px solid var(--c-border-input); border-radius: var(--r-6);
  }
  .composer .editor__input:focus { border: 1.5px solid var(--c-brand); padding: 11.5px; }
  .composer .editor__input.is-scrollable { overflow-y: auto; }
  .composer .editor__preview { height: auto; max-height: 140px; overflow: auto; }
  .composer .editor.is-invalid .editor__input { border: 1.5px solid var(--c-error); }
  .composer > .composer__submit { height: 48px; font-size: 16px; padding: 0 18px; align-self: end; }
  .composer > .composer__counter { display: none; }
  .composer > .private-toggle { height: 44px; padding: 0 4px; font-size: 15px; justify-self: end; }
  .private-toggle input { width: 20px; height: 20px; }
  .composer > .time-chip--now { font-size: 14px; padding: 4px 9px; }
  .composer.is-active { padding-top: 0; }
  .composer.is-active .editor__toolbar { display: flex; }
  .composer.is-active > .time-chip--now, .composer.is-active > .private-toggle { display: none; }
  .editor__error, .composer__error { font-size: 14px; }

  /* 篩選：底部面板 */
  .sheet-backdrop { display: block; position: fixed; inset: 0; background: var(--c-scrim); z-index: 20; }
  .filter-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 75vh; max-height: 75dvh;
    border: none; border-radius: var(--r-14) var(--r-14) 0 0; box-shadow: none; z-index: 21;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .sheet-handle { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--c-border-input); margin: 8px auto 4px; }
  .filter-panel__titlebar { display: flex; align-items: center; height: 48px; padding: 0 4px 0 16px; }
  .filter-panel__title { font-size: 16px; font-weight: 700; }
  .filter-panel__done { margin-left: auto; height: 44px; padding: 0 14px; background: none; border: none; font-size: 15px; font-weight: 500; color: var(--c-brand); }
  .filter-panel__shortcuts { padding: 4px 16px 10px; }
  .pill { height: 36px; }
  .filter-panel__divider { margin: 0; }
  .filter-row { height: 44px; padding: 0 16px; font-size: 15px; }
  .filter-row input { width: 20px; height: 20px; }
  .filter-row__email { font-size: 14px; }
  .filter-panel__note { padding: 8px 16px 0; }
  .link-btn { min-height: 44px; }

  /* 白名單 */
  .page--members { padding: 16px 16px 40px; gap: 20px; }
  .members-heading > .back-link { display: none; }
  .members-title { gap: 10px; }
  .members-title__text { font-size: 22px; }
  .members-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px 8px; }
  .members-form__email { flex-basis: 100%; }
  .members-form__role { flex: 1; width: auto; }
  .members-form > .btn { margin-top: 0; padding: 0 28px; }
  .members-table { border-top: 1px solid var(--c-text); }
  .members-table__head { display: none; }
  .member-row, .is-readonly .member-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "email role" "self self" "actions actions";
    gap: 10px 8px; padding: 14px 0; align-items: baseline;
  }
  .member-row.is-self { padding: 14px 12px; gap: 8px; }
  .member-row__email { grid-area: email; font-size: 15px; word-break: break-all; }
  .member-row__email .member-row__self { display: none; }
  .member-row__self-mobile { grid-area: self; display: block; font-size: 13px; color: var(--c-text-2); }
  .member-row__role { grid-area: role; color: var(--c-text-3); }
  .member-row.is-self .member-row__role { color: var(--c-text); }
  .member-row__actions { grid-area: actions; }
  .btn-row { height: 44px; padding: 0 16px; font-size: 15px; }
}

/* ── 隱私權政策（/privacy）──────────────────────────── */
.legal { gap: 0; max-width: 720px; line-height: 1.8; font-size: 15px; }
.legal h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.legal h2 { margin: 32px 0 8px; font-size: 18px; font-weight: 700; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 1.3em; }
.legal li { margin: 4px 0; }
.legal a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 2px; }
.legal code { font-family: var(--font-mono); font-size: .9em; background: var(--c-hover); border-radius: var(--r-3); padding: 1px 5px; }
.legal__updated { font-size: 13px; color: var(--c-text-2); }
.signin__legal { font-size: 13px; color: var(--c-text-2); text-decoration: underline; text-underline-offset: 2px; }