:root {
  color-scheme: light dark;
  --paper: #f5f3ee;
  --white: #fffefa;
  --ink: #20332d;
  --muted: #78827b;
  --line: #e8e7df;
  --green: #2b6250;
  --green-dark: #214b3d;
  --mint: #e7f0e9;
  --coral: #c7745d;
  --shadow: 0 16px 48px rgb(34 49 40 / 6%);
  --surface-1: var(--white);
  --surface-2: #f6f7f1;
  --surface-3: #f0f1eb;
  --surface-inset: #f7f8f4;
  --text-2: #4a5b52;
  --text-3: var(--muted);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 99px;
  --shadow-1: 0 2px 8px rgb(34 49 40 / 8%);
  --shadow-2: 0 8px 30px rgb(34 49 40 / 14%);
  --btn-h: 42px;
  --btn-h-sm: 36px;
  --page-max: 1080px;
  --page-narrow: 760px;
  --dock-clearance: 96px;
  --danger: #a95f4c;
  --danger-strong: #a34738;
  --danger-surface: #f8ece8;
  --danger-border: #e8c9c1;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
html, body { touch-action: manipulation; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted, .field-hint { color: var(--muted); line-height: 1.7; }
.eyebrow { margin: 0 0 8px; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: .16em; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 18% 10%, #e4eee6 0, transparent 38%), var(--paper); }
.auth-card { width: min(100%, 410px); padding: 40px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow); }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: var(--green); color: white; font-family: "Noto Sans SC", sans-serif; font-size: 22px; font-weight: 700; }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-logo strong, .auth-logo small { display: block; }
.auth-logo strong { font-size: 16px; }
.auth-logo small { margin-top: 4px; color: var(--text-3); font-size: 11px; letter-spacing: .15em; }
.auth-card h1 { margin: 0; font-size: 30px; }
.auth-card > .muted { margin: 10px 0 24px; font-size: 13px; }
.stack { display: grid; gap: 12px; }
label { color: #4a5b52; font-size: 12px; font-weight: 600; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); color: var(--ink); outline: none; }
input:not([type=file]), textarea, select { padding: 12px 13px; }
input[type=file] { padding: 9px; color: var(--muted); font-size: 11px; }
input:focus, textarea:focus, select:focus { border-color: #82a795; box-shadow: 0 0 0 3px rgb(43 98 80 / 9%); }
textarea { resize: vertical; }
.field-hint { margin: -5px 0 0; font-size: 12px; }
.auth-legal-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 400; }
.auth-legal-consent input { width: auto; margin: 0 3px 0 0; accent-color: var(--green); }
.auth-legal-link { padding: 0; border: 0; background: transparent; color: var(--green); font-size: inherit; font-weight: 600; text-decoration: underline; }
.legal-dialog { width: min(560px, calc(100% - 28px)); max-height: min(80vh, 720px); overflow: auto; }
.legal-dialog::backdrop { background: rgb(25 34 29 / 45%); }
.legal-dialog h2 { margin: 0; font-size: 19px; }
.legal-document { color: var(--muted); font-size: 12px; line-height: 1.75; }
.legal-document p { margin: 8px 0; }
.legal-document h3 { margin: 14px 0 3px; color: var(--ink); font-size: 13px; }
.error-message { min-height: 20px; margin: 14px 0 0; color: #a83e3e; font-size: 12px; }
.auth-mode-toggle { display: block; margin: 14px auto 0; padding: 6px; border: 0; background: transparent; color: var(--green); font-size: 12px; font-weight: 600; }
.auth-mode-toggle:hover { color: var(--green-dark); text-decoration: underline; }
.password-input-wrap { position: relative; }
.password-input-wrap input { padding-right: 46px; }
.password-toggle { position: absolute; top: 50%; right: 8px; display: grid; width: 32px; height: 32px; transform: translateY(-50%); place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.password-toggle:hover { color: var(--green); background: var(--mint); }
.password-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle-slash { opacity: 0; }
.password-toggle[aria-pressed="true"] .password-toggle-slash { opacity: 1; }
.password-strength { display: grid; gap: 5px; margin-top: -4px; }
.password-strength-track { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); }
.password-strength-track span { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .2s ease, background .2s ease; }
.password-strength-label { font-size: 11px; font-weight: 600; }
.captcha-row { display: flex; align-items: center; gap: 8px; }
.captcha-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .12em; }
.captcha-image { display: grid; width: 140px; height: 48px; flex: none; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface-1); cursor: pointer; }
.captcha-image img { width: 100%; height: 100%; object-fit: contain; }
.captcha-refresh { display: grid; width: 38px; height: 48px; flex: none; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-1); color: var(--green); font-size: 20px; cursor: pointer; }
.captcha-refresh:hover { border-color: var(--green); background: var(--mint); }

.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 10px; font-size: 12px; font-weight: 600; transition: transform .18s, background .18s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--green); color: white; }
.button-primary:hover { background: var(--green-dark); }
.button-dark { background: var(--ink); color: white; }
.button-quiet { background: transparent; color: var(--muted); }
.button-quiet:hover { background: var(--surface-3); }
.full-width { width: 100%; }

.app-shell { min-height: 100vh; }
.main-content { max-width: 1440px; margin: 0 auto; padding: 0 clamp(22px, 4.5vw, 68px) 120px; }
.pull-refresh-indicator { position: fixed; z-index: 20; top: env(safe-area-inset-top); left: 50%; display: flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 15px; transform: translate(-50%, calc(-100% + var(--pull-distance, 0px))); border: 1px solid var(--line); border-radius: 0 0 14px 14px; background: var(--white); color: var(--muted); box-shadow: var(--shadow); font-size: 11px; transition: transform .18s ease-out; pointer-events: none; }
.pull-refresh-indicator:not(.is-refreshing) { transition: none; }
.pull-refresh-spinner { width: 14px; height: 14px; border: 2px solid #dce5dc; border-top-color: var(--green); border-radius: 50%; }
.pull-refresh-indicator.is-refreshing { transform: translate(-50%, 0); }
.pull-refresh-indicator.is-refreshing .pull-refresh-spinner { animation: pull-refresh-spin .8s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
.app-page { animation: page-enter .2s ease-out; }
@keyframes page-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 26px; }
.page-heading h1 { margin: 0; font-size: 28px; font-weight: 600; }
.page-heading .muted { margin: 8px 0 0; font-size: 12px; }
.welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0 28px; }
.welcome-copy { min-width: 0; }
.welcome-row h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.04em; }
.category-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; }
.category-controls .button { min-height: 42px; border: 1px solid var(--line); }
.stat-card { display: grid; min-width: 154px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.stat-card span, .stat-card small { color: var(--muted); font-size: 11px; }
.stat-card strong { margin: 3px 0; color: var(--green); font-size: 30px; line-height: 1.1; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: var(--shadow); }
.task-panel, .current-panel { padding: 22px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; font-size: 19px; font-weight: 600; }
.count-pill { padding: 7px 10px; border-radius: 99px; background: var(--mint); color: var(--green); font-size: 11px; }
.task-form, .record-form { display: grid; gap: 9px; }
.task-form { display: grid; gap: 9px; margin-top: 20px; padding: 16px; border-radius: 13px; background: var(--surface-2); }
.task-form input:not([type=file]), .task-form textarea, .record-form textarea { font-size: 11px; }
.optional { color: var(--text-3); font-weight: 400; }
.task-form .button { margin-top: 4px; }
.task-create-page { max-width: 760px; margin: 0 auto; }
.task-create-heading { align-items: flex-end; }
.task-create-form { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.task-assignees { min-width: 0; margin: 4px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.task-assignees legend { padding: 0 5px; font-size: 11px; font-weight: 600; }
.task-assignee-options { display: flex; flex-wrap: wrap; gap: 8px; }
.task-assignee-option { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-1); font-size: 11px; cursor: pointer; }
.task-assignee-option input { width: auto; margin: 0; accent-color: var(--green); }
.task-assignees .optional { color: var(--muted); font-weight: 400; }
.task-assigned-to { display: block; margin-top: 6px; color: var(--green-dark); font-size: 11px; }
.list-heading { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 10px; }
.list-heading h3 { margin: 0; font-size: 12px; }
.list-heading span { color: var(--muted); font-size: 11px; }
.task-list { display: grid; gap: 9px; }
.task-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.task-thumb { width: 72px; height: 72px; border-radius: 8px; background: var(--mint); object-fit: cover; }
.task-thumb-frame { position: relative; width: 72px; height: 72px; overflow: hidden; border-radius: 8px; background: var(--mint); }
.task-thumb-frame .task-thumb { display: block; width: 100%; height: 100%; cursor: pointer; }
.task-card h4 { margin: 2px 0 5px; font-size: 12px; }
.task-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.task-created-at { display: block; margin-top: 5px; color: var(--text-3); font-size: 11px; }
.task-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.small-button { padding: 5px 8px; border: 0; border-radius: 7px; background: var(--mint); color: var(--green); font-size: 11px; }
.small-button:hover { background: #d7e8dc; }
.small-button.danger { background: var(--danger-surface); color: var(--danger); }
.done-heading { margin-top: 25px; }
.done-card { grid-template-columns: 48px minmax(0, 1fr); opacity: .8; }
.done-card .task-thumb { width: 48px; height: 48px; }
.done-card .task-thumb-frame { width: 48px; height: 48px; }
.empty-list { padding: 15px 10px; color: var(--text-3); font-size: 11px; text-align: center; }
.right-column { display: grid; gap: 18px; }
.selected-task { margin: 19px 0; padding: 13px; border-radius: 11px; background: var(--surface-2); }
.selected-task strong { display: block; margin-bottom: 5px; font-size: 12px; }
.selected-task p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.selected-task .task-created-at { margin-top: 7px; }
.selected-task-reference-label { display: block; margin-top: 11px; color: var(--muted); font-size: 11px; }
.selected-task-media { display: block; width: 100%; max-height: 180px; margin-top: 7px; border-radius: 8px; background: var(--mint); object-fit: contain; cursor: pointer; }
.selected-task-media:hover { box-shadow: 0 0 0 2px var(--green); }
.empty-state { color: var(--muted); font-size: 11px; }
.record-form { border-top: 1px solid var(--line); padding-top: 17px; }
.quote-card { position: relative; overflow: hidden; min-height: 150px; padding: 22px 25px; border-radius: 17px; background: var(--mint); }
.quote-card > span { position: absolute; top: -20px; right: 14px; color: rgb(43 98 80 / 13%); font-family: Georgia, serif; font-size: 140px; line-height: 1; }
.quote-card p { position: relative; margin: 4px 0 15px; color: var(--green-dark); font-size: 18px; font-weight: 600; line-height: 1.6; }
.quote-card small { color: var(--text-3); font-size: 11px; letter-spacing: .15em; }
.records-panel { margin-top: 18px; padding: 22px; }
.records-heading { margin-bottom: 15px; }
.records-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.record-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); }
.record-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.record-media { width: 100%; height: 160px; background: var(--surface-3); object-fit: cover; cursor: zoom-in; }
.record-meta { padding: 13px; }
.record-meta h3 { margin: 0 0 4px; font-size: 11px; }
.record-date { color: var(--text-3); font-size: 11px; }
.record-comment { width: 100%; margin-top: 10px; font-size: 11px; }
.record-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }
.record-placeholder { display: grid; min-height: 130px; place-items: center; color: var(--text-3); font-size: 11px; }
.toast { position: fixed; right: 24px; bottom: calc(var(--dock-clearance) + env(safe-area-inset-bottom)); z-index: 10; max-width: min(90vw, 390px); margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: white; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }

.album-page { max-width: 1040px; margin: 0 auto; }
.album-heading-actions { display: grid; min-width: 0; justify-items: end; gap: 10px; }
.album-usage { display: grid; width: min(230px, 100%); gap: 6px; text-align: right; }
.album-usage-text { color: var(--muted); font-size: 11px; }
.album-usage-track { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.album-usage-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width .25s ease; }
.album-usage-fill.is-full { background: var(--danger); }
@media (max-width: 680px) {
  .album-usage { width: min(190px, 100%); }
}
.album-upload { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.album-grid { display: grid; gap: 25px; margin-top: 20px; }
.album-month-heading { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.album-month-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
.album-month-count { color: var(--muted); font-size: 11px; }
.album-month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 14px 10px; }
.album-item { min-width: 0; }
.album-media-frame { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: var(--surface-3); }
.album-item-uploader { display: block; margin-top: 7px; color: var(--ink); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.album-item-time { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.album-load-more { justify-self: center; margin-top: 12px; border: 1px solid var(--green); background: var(--green); color: white; }
.album-load-more:hover { background: var(--green-dark); }
.chat-page { max-width: 1080px; margin: 0 auto; }
.chat-page-heading { padding-bottom: 18px; }
.chat-shell { display: grid; height: calc(100dvh - 315px - env(safe-area-inset-bottom)); min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
.chat-room-header { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.chat-clear-button { margin-left: auto; white-space: nowrap; }
.chat-room-avatar { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 12px; background: var(--green); color: white; font-size: 20px; font-weight: 700; }
.chat-room-header h2 { margin: 0; font-size: 14px; }
.chat-room-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.chat-messages { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 20px; background: var(--surface-inset); }
.chat-empty { display: grid; flex: 1; place-items: center; color: var(--muted); font-size: 12px; }
.chat-loading { display: flex; align-items: center; justify-content: center; gap: 9px; }
.chat-loading::before { width: 14px; height: 14px; border: 2px solid #dce5dc; border-top-color: var(--green); border-radius: 50%; animation: chat-loading-spin .8s linear infinite; content: ""; }
@keyframes chat-loading-spin { to { transform: rotate(360deg); } }
.chat-message { display: flex; max-width: min(78%, 560px); align-self: flex-start; align-items: flex-end; gap: 8px; }
.chat-message.own-message { align-self: flex-end; flex-direction: row-reverse; }
.chat-message-avatar { display: grid; width: 32px; height: 32px; flex: none; overflow: hidden; place-items: center; border-radius: 10px; background: var(--mint); color: var(--green); font-size: 15px; font-weight: 700; }
.chat-message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-bubble { min-width: 120px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 4px 12px 12px; background: var(--surface-1); }
.own-message .chat-bubble { border-color: var(--green); border-radius: 12px 4px 12px 12px; background: var(--green); color: white; }
.chat-message-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.chat-message-meta strong { font-size: 11px; font-weight: 700; }
.chat-message-meta time { color: var(--muted); font-size: 11px; }
.own-message .chat-message-meta time { color: rgb(255 255 255 / 72%); }
.chat-quoted-message { margin: 0 0 8px; padding: 6px 8px; border-left: 2px solid #aeb8b0; border-radius: 0 6px 6px 0; background: rgb(0 0 0 / 4%); }
.own-message .chat-quoted-message { border-left-color: rgb(255 255 255 / 65%); background: rgb(255 255 255 / 12%); }
.chat-quoted-message strong, .chat-quote-preview strong { display: block; font-size: 11px; }
.chat-quoted-message p, .chat-quote-preview p { margin: 3px 0 0; overflow: hidden; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 12px; line-height: 1.6; }
.chat-message-attachments { display: grid; max-width: 320px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.chat-message-attachments.single-attachment { grid-template-columns: minmax(0, 1fr); }
.chat-message-media { display: block; width: 100%; height: 150px; max-width: 100%; border-radius: 8px; background: var(--surface-3); object-fit: cover; }
.chat-message-attachments.single-attachment .chat-message-media { height: auto; max-height: 320px; object-fit: contain; }
.chat-composer { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--white); }
.chat-composer-main { display: grid; gap: 8px; }
.chat-quote-preview { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-left: 3px solid var(--green); border-radius: 7px; background: #f3f5ef; }
.chat-quote-preview[hidden] { display: none; }
.chat-quote-preview-content { min-width: 0; overflow: hidden; }
.chat-quote-preview p { color: var(--muted); }
.chat-quote-cancel { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.chat-composer textarea { min-height: 48px; max-height: 120px; resize: vertical; font-size: 12px; }
.chat-composer-actions { display: flex; align-items: center; justify-content: space-between; }
.chat-composer-tools { position: relative; display: flex; gap: 6px; }
.chat-tool-button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 21px; }
.chat-tool-button:hover { background: var(--mint); color: var(--green); }
.chat-tool-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-emoji-picker { position: absolute; z-index: 4; bottom: 44px; left: 0; display: grid; grid-template-columns: repeat(6, 36px); gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: var(--shadow); }
.chat-emoji-picker[hidden] { display: none; }
.chat-emoji-picker button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 7px; background: transparent; font-size: 20px; }
.chat-emoji-picker button:hover { background: var(--mint); }
.chat-attachment-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; padding: 7px 10px; border-radius: 8px; background: #f3f5ef; }
.chat-attachment-preview[hidden] { display: none; }
.chat-attachment-chip { display: flex; min-width: 0; max-width: 100%; flex: 1 1 180px; align-items: center; gap: 8px; }
.chat-attachment-thumb { width: 40px; height: 40px; flex: none; border-radius: 6px; object-fit: cover; }
.chat-attachment-video { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 6px; background: var(--mint); color: var(--green); font-size: 11px; }
.chat-attachment-name { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-remove { flex: none; margin-left: auto; border: 0; background: transparent; color: var(--danger); font-size: 11px; }
.chat-composer .button { min-width: 76px; }
/* 语音消息 */
.chat-composer [hidden], .match-message-form [hidden] { display: none !important; }
.chat-tool-button[aria-pressed="true"] { background: var(--mint); color: var(--green); }
.voice-record-button { width: 100%; min-height: 48px; border: 1px dashed var(--green); border-radius: 9px; background: var(--mint); color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: .04em; touch-action: none; user-select: none; -webkit-user-select: none; }
.voice-record-button.is-recording { border-style: solid; background: var(--green); color: #fff; }
.voice-record-button.is-cancelling { border-color: var(--danger); background: var(--danger); color: #fff; }
.voice-record-button:disabled { opacity: .55; }
.voice-bubble { display: flex; width: 100%; min-width: 110px; max-width: 220px; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgb(0 0 0 / 4%); color: inherit; cursor: pointer; text-align: left; }
.chat-message-attachments .voice-bubble { grid-column: 1 / -1; }
.own-message .voice-bubble { border-color: rgb(255 255 255 / 55%); background: rgb(255 255 255 / 12%); color: #fff; }
.voice-bubble-bars { display: flex; height: 16px; flex: 1; align-items: center; justify-content: center; gap: 4px; }
.voice-bubble-bar { width: 3px; height: 5px; border-radius: 2px; background: currentColor; opacity: .65; }
.voice-bubble-bar:nth-child(2) { height: 10px; }
.voice-bubble-bar:nth-child(3) { height: 14px; }
.voice-bubble-bar:nth-child(4) { height: 8px; }
.voice-bubble.is-playing .voice-bubble-bar { animation: voice-bar-pulse .7s ease-in-out infinite alternate; }
.voice-bubble.is-playing .voice-bubble-bar:nth-child(2) { animation-delay: .15s; }
.voice-bubble.is-playing .voice-bubble-bar:nth-child(3) { animation-delay: .3s; }
.voice-bubble.is-playing .voice-bubble-bar:nth-child(4) { animation-delay: .45s; }
@keyframes voice-bar-pulse { from { transform: scaleY(.5); } to { transform: scaleY(1.35); } }
/* 匹配成功全局提示 */
.match-success-dialog { max-width: 320px; text-align: center; }
.match-success-text { margin: 6px 0 18px; color: var(--green); font-size: 16px; font-weight: 700; line-height: 1.7; }
.match-success-dialog .dialog-actions { justify-content: center; }
.match-success-dialog .button { min-width: 120px; }
.profile-page { max-width: 980px; margin: 0 auto; }
.profile-heading-actions { display: flex; align-items: center; gap: 8px; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(230px, .9fr) 260px; gap: 18px; align-items: start; }
.profile-posts-panel { grid-column: 1 / -1; grid-row: 2; }
.profile-posts-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.profile-posts-heading h2 { margin: 0; font-size: 16px; }
#myPostsSummary { margin: 6px 0 0; font-size: 11px; }
.posts-view-hint { margin: 0; font-size: 12px; }
.profile-panel, .profile-login-info { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.profile-summary { display: flex; align-items: center; gap: 15px; flex-wrap: nowrap; }
.profile-summary > div:nth-child(2) { flex: 1 1 0; min-width: 0; }
.profile-summary h2, .profile-summary p { overflow-wrap: anywhere; }
.profile-avatar { display: grid; width: 88px; height: 88px; flex: none; overflow: hidden; place-items: center; border: 3px solid var(--white); border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--green), var(--shadow-1); color: var(--green); font-size: 32px; font-weight: 700; cursor: pointer; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-summary h2, .profile-login-info h2 { margin: 0; font-size: 16px; }
.profile-summary p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.profile-summary > button:not(.mood-entry-button) { margin-left: auto; padding: 0; border: 0; background: transparent; line-height: 1; }
.date-wheel { position: relative; display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 8px; height: 144px; padding: 0 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); overflow: hidden; }
.date-wheel-column { height: 144px; padding: 54px 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; }
.date-wheel-column::-webkit-scrollbar { display: none; }
.date-wheel-column:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.date-wheel-item { display: grid; width: 100%; height: 36px; scroll-snap-align: center; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; }
.date-wheel-item.is-selected { color: var(--green-dark); font-size: 16px; font-weight: 700; }
.date-wheel-highlight { position: absolute; top: 54px; right: 6px; left: 6px; height: 36px; border-top: 1px solid var(--green); border-bottom: 1px solid var(--green); background: rgb(43 98 80 / 6%); pointer-events: none; }
#profileAgeDisplay { cursor: pointer; }
#profileAgeDisplay:hover { border-color: var(--green); background: var(--mint); }
.birth-date-dialog { width: min(380px, calc(100vw - 28px)); }
.birth-date-dialog .date-wheel { margin-top: 14px; }
.birth-date-hint { margin-top: 10px; }
.profile-form { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
.profile-form input:not([type=file]), .profile-form textarea { font-size: 12px; }
.profile-edit-form { max-width: 720px; margin: 0 auto; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.profile-edit-form.stack { border-top: 1px solid var(--line); }
.mood-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mood-fieldset legend { margin-bottom: 8px; color: #4a5b52; font-size: 12px; font-weight: 600; }
.mood-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.mood-option { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-1); font-size: 20px; }
.mood-option[aria-pressed="true"] { border-color: var(--green); background: var(--mint); box-shadow: 0 0 0 2px rgb(43 98 80 / 10%); }
.profile-login-info .eyebrow { margin-bottom: 12px; }
.profile-login-info time { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; }
.profile-login-info .button { margin-top: 20px; }
.social-stats { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 18px; margin-top: 12px; }
.social-stat-button { display: inline-flex; min-width: 0; align-items: baseline; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--muted); text-align: left; white-space: nowrap; }
.social-stat-button strong { color: var(--green); font-size: 16px; }
.social-stat-button span { color: var(--muted); font-size: 11px; }
.social-stat-button:hover span { color: var(--green-dark); }
.social-chat-panel { display: grid; height: calc(100vh - 207px); height: calc(100vh - 207px - env(safe-area-inset-bottom)); height: calc(100dvh - 207px - env(safe-area-inset-bottom)); min-height: 0; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
.social-chat-list { display: grid; min-width: 0; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border-right: 1px solid var(--line); background: var(--surface-1); }
.social-chat-sidebar-header { padding: 17px 18px 10px; }
.social-chat-sidebar-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.social-chat-sidebar-title > div { min-width: 0; }
.social-chat-directory-button { min-height: 30px; flex: none; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--green-dark); font-size: 11px; white-space: nowrap; }
.social-chat-directory-button[aria-pressed="true"] { border-color: var(--green); background: var(--mint); }
.social-chat-contact-row.is-directory .social-chat-delete { display: none; }
.social-chat-contact.is-directory .social-chat-contact-details small { color: var(--green-dark); }
.social-chat-sidebar-header h2 { margin: 0; font-size: 17px; }
.social-chat-sidebar-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.social-chat-search { width: calc(100% - 24px); min-height: 36px; margin: 0 12px 10px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 11px; }
.social-chat-contacts { min-height: 0; overflow-y: auto; padding: 0 12px; scrollbar-width: none; }
.social-chat-contacts::-webkit-scrollbar { display: none; }
.social-chat-contact { display: flex; width: 100%; min-height: 74px; align-items: center; gap: 12px; padding: 12px 15px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.social-chat-contact:hover, .social-chat-contact.is-selected { background: #f0f4ee; }
.social-chat-avatar { display: grid; width: 48px; height: 48px; flex: none; place-items: center; overflow: hidden; border-radius: 50%; background: var(--mint); color: var(--green); object-fit: cover; font-weight: 700; }
.social-chat-contact-details { display: grid; min-width: 0; flex: 1; gap: 6px; }
.social-chat-contact-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.social-chat-contact-details strong, .social-chat-contact-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-chat-contact-details strong { font-size: 12px; }
.social-chat-contact-details time { flex: none; color: var(--text-3); font-size: 11px; }
.social-chat-contact-details small { color: var(--muted); font-size: 11px; }
.social-chat-avatar-wrap { position: relative; display: grid; width: 48px; height: 48px; flex: none; place-items: center; }
.social-chat-avatar-wrap .social-chat-avatar { width: 100%; height: 100%; }
.social-chat-contact .social-chat-avatar-wrap:hover .social-chat-avatar { box-shadow: 0 0 0 2px var(--green); }
.social-online-indicator { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border: 2px solid var(--white); border-radius: 50%; background: #b7c0b9; }
.social-chat-avatar-wrap.is-online .social-online-indicator { background: #41a76a; }
.social-chat-online-label { flex: none; margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; }
.social-chat-online-label.is-online { color: #328653; }
.social-chat-contact-title .social-chat-online-label { margin-left: auto; }
.social-chat-contact-row { position: relative; display: flex; align-items: stretch; overflow: hidden; border-radius: var(--radius-md); touch-action: pan-y; }
.social-chat-contact-row .social-chat-contact { width: auto; flex: 1; min-width: 0; transition: transform .18s ease; }
.social-chat-contact-row.is-swiped .social-chat-contact { transform: translateX(-76px); }
.social-chat-delete { position: absolute; top: 0; right: 0; bottom: 0; display: grid; width: 76px; place-items: center; border: 0; background: var(--danger); color: #fff; font-size: var(--fs-sm); font-weight: 600; transform: translateX(100%); transition: transform .18s ease; }
.social-chat-contact-row.is-swiped .social-chat-delete { transform: translateX(0); }
.social-chat-unread { position: absolute; top: -4px; right: -6px; z-index: 2; display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 4px; border: 2px solid var(--white); border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; pointer-events: none; }
.social-chat-unread[hidden] { display: none; }
.social-chat-contact.is-unread .social-chat-contact-details strong { color: var(--green-dark); }
.social-chat-contact.is-unread .social-chat-contact-details small { color: var(--text-2); font-weight: 600; }
.notification-bell { position: relative; display: grid; width: 38px; height: 38px; flex: none; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-1); color: var(--ink); }
.notification-bell:hover { border-color: var(--green); background: var(--mint); }
.notification-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-bell-badge { position: absolute; top: -3px; right: -3px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border: 2px solid var(--white); border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; }
.dialog.notification-dialog { width: min(480px, calc(100vw - 28px)); }
.dialog.notification-dialog .dialog-heading { margin-bottom: 12px; }
.notification-dialog-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.notification-dialog-tools .muted { font-size: var(--fs-xs); }
.notification-list { display: grid; gap: 8px; max-height: min(52vh, 380px); overflow-y: auto; }
.notification-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); }
.notification-item.is-unread { border-color: var(--green); background: var(--mint); }
.notification-icon { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 15px; }
img.notification-icon.notification-avatar { object-fit: cover; border: 1px solid var(--line); }
.notification-content { display: grid; gap: 3px; min-width: 0; flex: 1; }
.notification-content strong { font-size: var(--fs-sm); }
.notification-content p { margin: 0; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.5; }
.notification-content time { color: var(--muted); font-size: 10px; }
.notification-item.is-actionable { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.notification-item.is-actionable:hover { border-color: var(--green); }
.notification-item.is-actionable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--green); }
.notification-action-hint { align-self: flex-start; flex: none; color: var(--green-dark); font-size: 10px; font-weight: 600; white-space: nowrap; }
.notification-detail-dialog { width: min(420px, calc(100vw - 28px)); }
.notification-detail-time { margin: 0 0 10px; font-size: 11px; }
.notification-detail-body { margin: 0; padding: 12px; border-radius: var(--radius-md); background: var(--surface-inset); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.pair-application.is-highlighted, .pair-applications.is-highlighted { box-shadow: inset 0 0 0 2px var(--green); background: var(--mint); }
.social-chat-header .social-chat-avatar-wrap { width: 40px; height: 40px; }
.social-chat-header .social-chat-avatar-wrap .social-online-indicator { width: 10px; height: 10px; }
.social-chat-room { display: grid; min-width: 0; grid-template-rows: auto minmax(0, 1fr) auto; background: #f7f8f5; }
.social-chat-header { display: flex; min-height: 66px; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--white); font-size: 13px; }
.social-chat-header-title { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.social-chat-header-title > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-chat-header .social-chat-avatar { width: 40px; height: 40px; }
.social-chat-back { display: none; }
.social-chat-room .match-messages { min-height: 0; max-height: none; background: transparent; }
.social-chat-room .match-message-form { margin: 0; border-top: 1px solid var(--line); background: var(--white); }
.social-connections-list { display: grid; }
.social-connections-summary { margin: 0; padding: 0 2px 12px; color: var(--muted); font-size: 11px; }
.social-connection-card { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.social-connection-card:last-child { border-bottom: 0; }
.social-connection-card.is-mutual { border-color: var(--line); background: transparent; }
.social-connection-profile { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.social-connection-profile .social-profile-avatar { width: 46px; height: 46px; font-size: 17px; }
.social-connection-profile > span:last-child { display: grid; min-width: 0; gap: 3px; }
.social-connection-profile strong, .social-connection-profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-connection-profile strong { font-size: 13px; font-weight: 600; }
.social-connection-profile small { max-width: 55vw; color: var(--muted); font-size: 11px; }
.social-connection-mutual { color: var(--green-dark); font-size: 10px; font-weight: 600; }
.social-connection-actions { display: flex; flex: none; align-items: center; gap: 2px; }
.social-connection-actions .button { min-height: 32px; padding-inline: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; white-space: nowrap; }
.social-connection-actions .button:hover { transform: none; background: var(--surface-3); }
.social-connection-actions .social-chat-start { color: var(--green-dark); font-weight: 700; }
:root[data-theme="dark"] .social-connection-actions .social-chat-start,
:root[data-theme="dark"] .social-connection-mutual { color: #a8d7bc; }
@media (max-width: 680px) {
  .social-connection-card { gap: 8px; padding: 12px 2px; }
  .social-connection-profile { gap: 10px; }
  .social-connection-profile .social-profile-avatar { width: 42px; height: 42px; font-size: 16px; }
  .social-connection-actions .button { min-height: 30px; padding-inline: 7px; font-size: 10px; }
}
.social-profile-dialog { max-width: 460px; }
.social-profile-content { min-height: 90px; }
.social-profile-summary { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.social-profile-summary h3 { margin: 0 0 5px; font-size: 16px; }
.social-profile-summary p { margin: 0; color: var(--muted); font-size: 12px; }
.social-profile-avatar { display: grid; width: 62px; height: 62px; flex: none; place-items: center; overflow: hidden; border-radius: 50%; background: var(--mint); color: var(--green); object-fit: cover; font-size: 22px; font-weight: 700; }
.social-profile-details { display: grid; gap: 9px; margin: 0; }
.social-profile-details > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
.social-profile-details dt { color: var(--muted); font-size: 11px; }
.social-profile-details dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.social-profile-actions { display: flex; gap: 8px; margin-top: 18px; }
.plaza-avatar { padding: 0; border: 0; cursor: pointer; }
.plaza-author-name, .plaza-comment-author { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--green-dark); font-weight: 700; text-align: left; }
.plaza-post-actions { display: flex; align-items: center; gap: 15px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.plaza-like-button { padding: 5px 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.plaza-like-button.is-liked { color: #c45058; }
.plaza-like-button:disabled { opacity: .6; }
.plaza-comment-count { color: var(--muted); font-size: 11px; }
.plaza-comments { display: grid; gap: 8px; margin-top: 10px; }
.plaza-comment { display: flex; align-items: baseline; gap: 8px; font-size: 11px; overflow-wrap: anywhere; }
.plaza-comment-author { flex: none; font-size: 11px; }
.plaza-comment-form { display: flex; gap: 8px; margin-top: 3px; }
.plaza-comment-input { min-width: 0; flex: 1; padding: 8px 10px; font-size: 12px; }
.plaza-comment-submit { flex: none; min-height: 36px; padding-inline: 18px; font-size: 12px; }
.plaza-comment-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.couple-panel > .muted { margin: 10px 0 0; font-size: 12px; }
.invite-code-panel { display: grid; justify-items: start; gap: 8px; margin-top: 18px; padding: 14px; border-radius: 10px; background: var(--mint); }
.invite-code-panel > span { color: var(--muted); font-size: 11px; }
.invite-code-panel > strong { color: var(--green-dark); font-size: 25px; letter-spacing: .16em; -webkit-user-select: all; user-select: all; }
.pair-applications { width: 100%; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgb(43 98 80 / 12%); }
.pair-applications h3 { margin: 0 0 9px; color: var(--ink); font-size: 12px; }
.pair-application { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid rgb(43 98 80 / 10%); }
.pair-application-info { display: grid; min-width: 0; gap: 3px; }
.pair-application-info small { color: var(--muted); font-size: 11px; }
.pair-application strong { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.pair-application-actions { display: flex; flex: none; gap: 5px; }
.pair-application-actions .button { min-height: 34px; padding-inline: 10px; font-size: 11px; }
.outgoing-pair-application { margin: 12px 0 0; padding: 10px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 11px; line-height: 1.6; }
.paired-space-details { display: grid; gap: 7px; margin-top: 14px; font-size: 12px; }
.paired-space-details p { margin: 0; color: var(--muted); }
.paired-space-details strong { color: var(--ink); font-weight: 600; }
.pair-form { margin-top: 20px; }
.unpair-warning { margin: 0; font-size: 11px; line-height: 1.6; }
.password-form { gap: 9px; }
.password-form h3 { margin: 0 0 2px; font-size: 13px; }
.password-form input { padding: 10px 11px; font-size: 11px; }
.password-form .dialog-heading { margin-bottom: 4px; }
.profile-login-info .account-action { margin-top: 20px; border: 1px solid var(--green); }
.profile-login-info .account-action:hover { background: var(--green-dark); }
.profile-login-info #logoutButton { margin-top: 9px; }
.profile-disclaimer { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.home-page { max-width: 1080px; margin: 0 auto; }
.home-heading { padding-top: 24px; }
.home-heading h1 { font-size: clamp(24px, 4vw, 36px); }
.home-heading .muted { margin: 8px 0 0; }
.mood-entry-button { display: grid; justify-items: center; gap: 2px; min-width: 108px; flex: none; margin-left: auto; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-1); color: var(--ink); }
.mood-entry-button:hover { border-color: var(--green); background: var(--mint); }
.mood-entry-caption, .mood-entry-hint { color: var(--muted); font-size: var(--fs-xs); }
.mood-entry-emoji { font-size: 30px; line-height: 1.1; }
.home-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.plaza-create-button { flex: none; min-height: 36px; margin: 0; white-space: nowrap; }
.home-tabs { flex: 1; min-width: 0; margin-bottom: 0; }
.space-tabs { position: sticky; top: 8px; top: calc(env(safe-area-inset-top) + 8px); z-index: 6; width: min(calc(100% - 24px), 560px); margin: 0 auto 22px; transition: padding .2s ease, border-radius .2s ease, box-shadow .2s ease; }
.space-tabs .dock-item { transition: background .18s, color .18s, min-height .2s ease, font-size .2s ease, gap .2s ease; }
.space-tabs .dock-icon { transition: width .2s ease, height .2s ease; }
.space-tabs.is-stuck { padding: 3px; border-radius: 12px; box-shadow: 0 10px 28px rgb(34 49 40 / 24%); }
.space-tabs.is-stuck .dock-item { min-height: 38px; gap: 1px; font-size: 10px; }
.space-tabs.is-stuck .dock-icon { width: 17px; height: 17px; }
.pill-tabs { display: flex; gap: 5px; padding: 6px; border: 1px solid rgb(232 231 223 / 90%); border-radius: 16px; background: rgb(255 254 250 / 94%); box-shadow: 0 8px 30px rgb(34 49 40 / 14%); backdrop-filter: blur(14px); }
.pill-tabs .dock-item { flex: 1; min-height: 54px; }
.pill-tabs .dock-item[aria-selected="true"] { background: var(--green); color: white; }
.pill-tabs .dock-item[aria-selected="true"]:hover { background: var(--green-dark); color: white; }
.plaza-scope-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin: 0 -12px 4px; border-radius: 0 0 12px 12px; background: var(--paper); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); }
.plaza-scope-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); }
.plaza-scope-tab { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.plaza-scope-tab[aria-pressed="true"] { background: var(--green); color: white; box-shadow: var(--shadow-1); }
.plaza-composer, .plaza-post, .match-card, .match-chat { border: 1px solid var(--line); border-radius: 15px; background: var(--white); box-shadow: var(--shadow); }
.plaza-composer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
.plaza-composer textarea { min-height: 88px; font-size: 13px; }
.plaza-composer > * { min-width: 0; max-width: 100%; }
.plaza-file-label { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-1); color: var(--green-dark); cursor: pointer; }
.plaza-file-label > span { flex: none; }
.plaza-file-label input { flex: 1 1 0; min-width: 0; width: auto; max-width: 100%; overflow: hidden; padding: 0; border: 0; font-size: 11px; }
.plaza-visibility-choice { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-1); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.plaza-visibility-choice input { width: auto; margin: 0; }
.plaza-visibility-choice small { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; }
/* 返回 / 取消类按钮：统一胶囊风格，与设置按钮同一视觉语言 */
.back-button,
.cancel-match-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--green-dark);
  box-shadow: var(--shadow-1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.back-button::before { content: "←"; font-size: 15px; line-height: 1; }
.back-button:hover,
.cancel-match-button:hover { border-color: var(--green); background: var(--mint); color: var(--green-dark); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.back-button:active,
.cancel-match-button:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.back-button:focus-visible,
.cancel-match-button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cancel-match-button { color: var(--danger); border-color: var(--danger-border); }
.cancel-match-button:hover { border-color: var(--danger); background: var(--danger-surface); color: var(--danger-strong); }
.cancel-match-button:focus-visible { outline-color: var(--danger); }
:root[data-theme="dark"] .back-button { background: var(--surface-2); border-color: #3c5447; color: #a8d7bc; }
:root[data-theme="dark"] .back-button:hover { background: #2c4336; border-color: var(--green); color: #cdeed9; }
:root[data-theme="dark"] .cancel-match-button { background: var(--surface-2); border-color: #5c3630; color: #e7a08b; }
:root[data-theme="dark"] .cancel-match-button:hover { background: #3a2622; border-color: var(--danger); color: #f0b8a6; }
:root[data-theme="dark"] .social-chat-back { background: var(--surface-2); border-color: #3c5447; color: #a8d7bc; }
:root[data-theme="dark"] .social-chat-back:hover { background: #2c4336; border-color: var(--green); color: #cdeed9; }
.plaza-invite-fieldset { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); }
.plaza-invite-fieldset legend { padding: 0 5px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.plaza-invite-choice { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink); font-size: var(--fs-sm); cursor: pointer; }
.plaza-invite-choice input { width: auto; margin: 0; }
.plaza-invite-choice strong { color: var(--green-dark); letter-spacing: .1em; }
.plaza-location-note { margin: 0; color: var(--muted); font-size: 11px; }
.plaza-feed { display: grid; gap: 12px; margin-top: 16px; }
.plaza-post { min-width: 0; padding: 17px; }
.plaza-post-header { display: flex; align-items: center; gap: 10px; }
.plaza-avatar { display: grid; width: 40px; height: 40px; flex: none; place-items: center; overflow: hidden; border-radius: 50%; background: var(--mint); color: var(--green-dark); font-weight: 700; }
.plaza-avatar img { width: 100%; height: 100%; object-fit: cover; }
.plaza-identity { display: grid; min-width: 0; gap: 4px; }
.plaza-identity strong { font-size: 12px; }
.plaza-identity span, .plaza-post-time { color: var(--muted); font-size: 11px; }
.plaza-post-time { display: block; margin-top: 8px; }
.plaza-delete { align-self: flex-start; margin-left: auto; padding: 5px; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.plaza-post-text { margin: 14px 0 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.plaza-media-frame { position: relative; width: min(100%, 520px); aspect-ratio: 4 / 3; overflow: hidden; margin-top: 12px; border-radius: 10px; background: var(--surface-3); }
.plaza-post-image { display: block; width: 100%; height: 100%; background: var(--mint); object-fit: cover; cursor: zoom-in; }
.plaza-live-badge { position: absolute; top: 9px; left: 9px; padding: 3px 9px; border-radius: var(--radius-pill); background: rgb(20 30 26 / 72%); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; }
.plaza-invite { display: flex; width: fit-content; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); }
.plaza-invite span { color: var(--muted); font-size: 11px; }
.plaza-invite strong { color: var(--green-dark); font-size: 14px; letter-spacing: .12em; -webkit-user-select: all; user-select: all; }
.plaza-empty { padding: 34px 12px; color: var(--muted); text-align: center; font-size: 12px; }
.match-card { max-width: 560px; margin: 0 auto; padding: 24px; }
.match-card h2 { margin: 0; font-size: 21px; }
.match-card > .muted { margin: 8px 0 20px; font-size: 12px; }
.match-preferences { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 11px; }
.match-preferences .button { grid-column: 1 / -1; margin-top: 7px; }
.match-status { min-height: 20px; margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.match-chat { display: grid; max-width: 720px; margin: 16px auto 0; overflow: hidden; }
.match-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.match-chat-header > div { min-width: 0; }
.match-chat-header h3 { margin: 0; font-size: 15px; }
.match-chat-header .eyebrow, .match-chat-header .muted { margin: 0 0 4px; font-size: 11px; }
.match-chat-heading-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.match-chat-header .match-chat-heading-row .eyebrow { margin: 0; }
.match-type-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--mint); color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.match-type-badge[data-match-type="random"] { background: #fff0dc; color: #96540a; }
.match-type-badge[hidden] { display: none; }
:root[data-theme="dark"] .match-type-badge[data-match-type="random"] { background: #4a3418; color: #ffcb7a; }
.match-chat-actions { display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 6px; }
.match-end-button { flex: none; min-height: 36px; padding-inline: 12px; white-space: nowrap; }
.match-reveal-button { min-height: 34px; padding-inline: 12px; white-space: nowrap; }
.match-reveal-hint { max-width: 170px; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: right; }
.match-partner-identity { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.match-partner-avatar-button { display: grid; width: 42px; height: 42px; flex: none; place-items: center; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--green); color: #fff; cursor: pointer; }
.match-partner-avatar { width: 100%; height: 100%; object-fit: cover; }
.match-partner-avatar-fallback { font-size: 16px; font-weight: 700; }
.match-follow-button { min-height: 32px; padding-inline: 14px; font-size: 11px; white-space: nowrap; }
.match-follow-button.is-following { background: var(--mint); color: var(--green); }
.match-partner-identity[hidden], .match-reveal-button[hidden], .match-reveal-hint[hidden], .match-partner-avatar[hidden], .match-partner-avatar-fallback[hidden] { display: none !important; }
.match-messages { display: flex; min-height: 180px; max-height: 42vh; flex-direction: column; gap: 8px; overflow-y: auto; padding: 16px; }
.match-message { width: fit-content; max-width: min(80%, 460px); padding: 9px 12px; border-radius: 12px 12px 12px 3px; background: var(--surface-3); overflow-wrap: anywhere; }
.match-message p { margin: 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.match-message time { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.own-match-message { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: var(--mint); }
.match-messages-empty { margin: auto; color: var(--muted); font-size: 11px; }
.match-message-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.match-message-form textarea { min-height: 42px; max-height: 120px; font-size: 12px; }
.dock-navigation { position: fixed; z-index: 8; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; display: flex; width: min(calc(100% - 24px), 560px); gap: 5px; margin-inline: auto; padding: 6px; border: 1px solid rgb(232 231 223 / 90%); border-radius: 16px; background: rgb(255 254 250 / 94%); box-shadow: 0 8px 30px rgb(34 49 40 / 14%); backdrop-filter: blur(14px); }
.dock-item { display: grid; min-width: 0; min-height: 58px; flex: 1; place-items: center; align-content: center; gap: 3px; padding: 5px 9px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; transition: background .18s, color .18s; }
.dock-item:hover { background: var(--surface-3); color: var(--ink); }
.dock-item[aria-current="page"] { background: var(--green); color: white; }
.dock-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dialog { width: min(900px, calc(100vw - 28px)); max-height: 88vh; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 0 24px 90px rgb(0 0 0 / 22%); }
.dialog::backdrop { background: rgb(26 39 33 / 55%); backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; }
.dialog-heading h2 { margin: 0; font-size: 21px; }
.compact-dialog { width: min(440px, calc(100vw - 28px)); }
.compact-dialog form { display: grid; gap: 10px; }
.compact-dialog .dialog-heading { margin-bottom: 2px; }
.compact-dialog .error-message { min-height: 0; margin: 0; }
.clear-records-warning { margin: 0; font-size: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.settings-entry { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--white); color: var(--green-dark); box-shadow: var(--shadow-1); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.settings-entry-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .32s ease; }
.settings-entry:hover { border-color: var(--green); background: var(--mint); color: var(--green-dark); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.settings-entry:hover .settings-entry-icon { transform: rotate(45deg); }
.settings-entry:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.settings-entry:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
:root[data-theme="dark"] .settings-entry { background: var(--surface-2); border-color: #3c5447; color: #a8d7bc; }
:root[data-theme="dark"] .settings-entry:hover { background: #2c4336; border-color: var(--green); color: #cdeed9; }
.settings-item-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-dialog { width: min(460px, calc(100vw - 28px)); }
.settings-dialog .dialog-heading { margin-bottom: 18px; }
.settings-groups { display: grid; gap: 16px; }
.settings-group { display: grid; gap: 7px; }
.settings-group h3 { margin: 0; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; }
.settings-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); color: var(--ink); font-size: var(--fs-md); text-align: left; }
.settings-item:hover { border-color: var(--green); background: var(--mint); }
.settings-item-label { flex: 1; white-space: nowrap; }
.settings-item-arrow { color: var(--muted); font-size: 18px; line-height: 1; }
.settings-field { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); font-size: var(--fs-md); }
.settings-field .settings-item-label { flex: none; }
.settings-field select, .settings-field input { width: auto; min-width: 110px; flex: 1; margin: 0; padding: 6px 9px; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.mood-dialog .mood-picker { gap: 8px; }
.mood-dialog .mood-option { width: 44px; height: 44px; font-size: 22px; }
.confirm-dialog-message { margin: 8px 0 18px; font-size: var(--fs-md); }
.icon-button { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; outline: none; }
.icon-button:hover, .icon-button:focus-visible { color: var(--ink); }
.icon-button:focus-visible { outline: none; }
.native-media-viewer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000; touch-action: manipulation; }
.native-media-viewer[hidden] { display: none; }
.native-media-stage { display: grid; width: 100%; height: 100%; place-items: center; transition: transform .22s ease-out; }
.native-media-viewer.is-swiping .native-media-stage { transition: none; }
.native-media-stage img, .native-media-stage video { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.native-media-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 2; color: #fff; }
.native-media-close:hover, .native-media-close:focus-visible { color: #fff; opacity: .75; }
body.native-media-open { overflow: hidden; }
.media-video-thumb { cursor: pointer; }
.plaza-media-frame, .chat-message-media, .social-chat-media, .record-media,
.selected-task-media, .home-timeline-media, .task-thumb-frame { margin-inline: auto; }
.chat-message-attachments { justify-items: center; }
.home-timeline-media { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; background: var(--surface-3); object-fit: contain; }
.upload-row { display: flex; gap: 10px; margin-top: 8px; }
.upload-row input { flex: 1; min-width: 0; }
.album-media-frame img, .album-media-frame video { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.album-media-frame > .small-button { position: absolute; right: 7px; bottom: 7px; }
.album-media-frame .album-item-actions { position: absolute; right: 7px; bottom: 7px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100% - 14px); }
.album-upload-status { margin: 10px 0 0; color: var(--green-dark); font-size: 12px; font-weight: 600; }
.album-share-preview { margin: 0; font-size: 12px; line-height: 1.6; }

/* 统一设计层：布局、组件、无障碍、暗色 */
.home-page, .album-page, .chat-page, .space-page, .profile-page { max-width: var(--page-max); margin-inline: auto; }
.profile-page.task-create-page { max-width: var(--page-narrow); }
.page-heading h1, .home-heading h1, .welcome-row h1 { font-size: clamp(24px, 3vw, 30px); }
.eyebrow { font-size: var(--fs-xs); letter-spacing: .1em; opacity: .82; }
.quote-card { min-height: 0; padding: 16px 18px; }
.quote-card > span { font-size: 96px; }
.button-danger { background: var(--danger); color: white; }
.button-danger:hover { background: var(--danger-strong); }
.button-danger-ghost { border: 1px solid var(--danger-border); background: transparent; color: var(--danger-strong); }
.button-danger-ghost:hover { background: var(--danger-surface); }
.button:active { transform: translateY(0) scale(.985); }
.plaza-empty, .match-messages-empty, .chat-empty, .empty-list, .empty-state,
.record-placeholder, .admin-empty, .social-chat-empty {
  color: var(--text-3); font-size: var(--fs-sm); line-height: 1.7;
}
.match-messages, .chat-messages, .social-chat-room .match-messages { background: var(--surface-inset); }
.match-message, .match-message-form textarea, .social-chat-room .match-message { font-size: var(--fs-sm); }
.match-message-form, .chat-composer, .social-chat-room .match-message-form {
  border-top: 1px solid var(--line); background: var(--surface-1);
}
.chat-bubble { border-radius: var(--radius-md); }
.chat-message .chat-bubble, .match-message { box-shadow: var(--shadow-1); }
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shift 1.2s ease-in-out infinite;
}
@keyframes skeleton-shift { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-card { min-height: 96px; margin-bottom: 12px; }
.skeleton-line { height: 11px; margin: 8px 0; }
.plaza-load-more-wrap { display: flex; justify-content: center; margin-top: 16px; }
.plaza-load-more-wrap .button { min-width: 180px; }
.chat-quote-preview { background: var(--surface-2); }
.social-chat-composer { grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
.social-chat-composer .chat-composer-main { display: grid; min-width: 0; gap: 6px; }
.social-chat-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.social-chat-composer-actions .chat-composer-tools { position: relative; display: flex; gap: 4px; }
.social-chat-message-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.social-chat-quote-button { padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font-size: 11px; }
.social-chat-quote-button:hover { background: var(--surface-3); color: var(--green); }
.social-chat-message .chat-message-attachments { max-width: min(320px, 100%); }
.social-chat-media { border-radius: 8px; }
.chat-tool-button:disabled { opacity: .45; cursor: not-allowed; }
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161d19;
  --white: #1e2823;
  --ink: #e8eee9;
  --muted: #9aa89f;
  --line: #314038;
  --green: #3d8a6c;
  --green-dark: #2f6f56;
  --mint: #253a30;
  --coral: #c98a74;
  --surface-2: #232f29;
  --surface-3: #2a372f;
  --surface-inset: #202b25;
  --text-2: #c2cdc5;
  --text-3: #9aa89f;
  --danger: #c07059;
  --danger-strong: #d78a72;
  --danger-surface: #3a2622;
  --danger-border: #5c3630;
  --shadow: 0 16px 48px rgb(0 0 0 / 34%);
  --shadow-1: 0 2px 8px rgb(0 0 0 / 30%);
  --shadow-2: 0 8px 30px rgb(0 0 0 / 40%);
}
:root[data-theme="dark"] .dock-navigation,
:root[data-theme="dark"] .pill-tabs { background: rgb(30 40 35 / 94%); border-color: rgb(60 78 68 / 90%); }
:root[data-theme="dark"] .toast { background: #33463c; }
:root[data-theme="dark"] .dialog::backdrop { background: rgb(0 0 0 / 62%); }
:root[data-theme="dark"] .chat-quoted-message { background: rgb(255 255 255 / 8%); }

@media (max-width: 1020px) {
  .main-content { padding-inline: 23px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .right-column { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
@media (max-width: 680px) {
  .app-page input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .app-page textarea,
  .app-page select,
  dialog input:not([type=checkbox]):not([type=radio]):not([type=file]),
  dialog textarea,
  dialog select { font-size: 16px; }
  .main-content { padding: 0 14px 120px; }
  .welcome-row { align-items: flex-start; padding: 12px 0 19px; }
  .welcome-row h1 { font-size: 23px; }
  .welcome-row .muted { max-width: 260px; font-size: 11px; }
  .stat-card { min-width: 90px; padding: 11px; }
  .stat-card strong { font-size: 24px; }
  .stat-card span, .stat-card small { font-size: 11px; }
  .right-column { grid-template-columns: 1fr; }
  .records-list { grid-template-columns: 1fr; }
  .task-panel, .current-panel, .records-panel { padding: 17px; }
  .auth-card { padding: 33px 25px; }
  .captcha-image { width: 104px; }
  .captcha-row input { padding-inline: 9px; letter-spacing: .06em; }
  .profile-summary { flex-wrap: nowrap; gap: 10px; }
  .mood-entry-button { min-width: 0; padding: 6px 9px; }
  .mood-entry-caption, .mood-entry-hint { font-size: 9px; }
  .mood-entry-emoji { font-size: 24px; }
  .upload-row { align-items: stretch; flex-direction: column; }
  .page-heading { padding: 14px 0 20px; }
  .page-heading h1 { font-size: 23px; }
  .chat-page-heading { padding-bottom: 14px; }
  .chat-shell { height: calc(100dvh - 281px - env(safe-area-inset-bottom)); min-height: 0; }
  .chat-room-header { gap: 8px; padding: 12px; }
  .chat-clear-button { padding: 7px 9px; font-size: 11px; }
  .chat-messages { padding: 14px 10px; }
  .chat-message { max-width: 94%; }
  .chat-message-media { height: 120px; }
  .chat-message-attachments.single-attachment .chat-message-media { max-height: 240px; }
  .chat-composer { gap: 7px; padding: 10px; }
  .chat-composer .button { min-width: 62px; padding-inline: 10px; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-posts-panel { grid-column: auto; grid-row: auto; }
  .plaza-visibility-choice { flex-wrap: wrap; }
  .plaza-visibility-choice small { width: 100%; margin-left: 0; }
  .notification-list { max-height: 52vh; }
  /* 顶部标题约 78px + 底部 dock 占位约 74px + 与 dock 保留 50px 间距 = 202px */
  .social-chat-panel { height: calc(100vh - 202px); height: calc(100vh - 202px - env(safe-area-inset-bottom)); height: calc(100dvh - 202px - env(safe-area-inset-bottom)); min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .social-chat-list { max-height: none; grid-row: 1; border-right: 0; border-bottom: 0; }
  .social-chat-sidebar-header { padding-top: 12px; }
  .social-chat-room { display: none; min-height: 0; grid-row: 1; grid-template-rows: auto minmax(0, 1fr) auto; }
  .social-chat-panel.has-active-chat .social-chat-list { display: none; }
  .social-chat-panel.has-active-chat .social-chat-room { display: grid; }
  .social-chat-back { display: inline-flex; width: 36px; min-height: 36px; flex: none; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--green-dark); box-shadow: var(--shadow-1); font-size: 24px; }
  .social-chat-back:hover { border-color: var(--green); background: var(--mint); }
  .social-chat-room .match-message-form { grid-template-columns: 1fr; align-items: stretch; padding: 9px; }
  .social-chat-room .match-message-form textarea { min-height: 42px; }
  .social-chat-room .match-message-form .button { min-height: 42px; }
  .plaza-file-label { padding-inline: 10px; }
  .plaza-file-label input { flex: 1 1 0; min-width: 0; width: auto; max-width: 100%; }
  .plaza-post { padding: 13px; }
  .plaza-post-header { gap: 7px; }
  .plaza-post-time { font-size: 11px; }
  .match-card { padding: 18px; }
  .match-preferences { grid-template-columns: 72px minmax(0, 1fr); }
  .match-chat-header { align-items: flex-start; gap: 8px; padding: 12px; }
  .match-end-button { min-height: 34px; padding-inline: 9px; font-size: 11px; }
  .match-reveal-button { min-height: 32px; padding-inline: 9px; font-size: 11px; }
  .match-reveal-hint { max-width: 128px; font-size: 9px; }
  .match-partner-avatar-button { width: 36px; height: 36px; }
  .match-partner-identity { gap: 7px; }
  .match-message-form { grid-template-columns: 1fr; }
  .settings-entry { min-height: 34px; padding-inline: 10px; gap: 5px; font-size: 11px; }
  .settings-entry-icon { width: 15px; height: 15px; }
  .profile-heading-actions { gap: 5px; }
  .profile-heading-actions .button:not(.back-button) { min-height: 38px; padding-inline: 11px; font-size: 11px; }
  .button.back-button,
  .button.cancel-match-button { min-height: 34px; padding-inline: 10px; gap: 5px; font-size: 11px; }
  .home-toolbar { flex-wrap: wrap; }
  .home-tabs { flex: 1 1 100%; }
  .plaza-create-button { margin: 0 0 0 auto; }
  .plaza-scope-bar { gap: 7px; padding-inline: 8px; margin-inline: -8px; }
  .plaza-scope-tab { padding-inline: 11px; }
  .dock-navigation { bottom: calc(10px + env(safe-area-inset-bottom)); justify-content: space-between; }
  .space-tabs { margin-top: 0; margin-bottom: 16px; }
  .pill-tabs .dock-item { min-height: 50px; font-size: 11px; }
  .pill-tabs .dock-icon { width: 20px; height: 20px; }
}

/* 广场作者在线状态 */
.plaza-author-line { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.plaza-author-presence { white-space: nowrap; }
.plaza-author-presence.is-online { color: #328653; font-weight: 600; }
.plaza-author-presence.is-online::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #41a76a; vertical-align: 1px; }
.plaza-private-badge { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--muted); font-size: 10px; font-weight: 600; white-space: nowrap; }

/* 弹窗统一视觉 */
dialog.dialog .dialog-heading { margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
dialog.dialog .dialog-heading .eyebrow { margin-bottom: 5px; font-weight: 700; letter-spacing: .14em; }
dialog.dialog .dialog-heading h2 { letter-spacing: -.01em; }
dialog.dialog[open] { animation: dialog-enter .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
dialog.dialog .dialog-actions { gap: 10px; margin-top: 12px; }
dialog.dialog .icon-button { transition: color .18s, transform .18s; }
dialog.dialog .icon-button:hover { transform: scale(1.12); }
dialog.dialog .field-hint { line-height: 1.7; }

/* 我的积分 / 每日签到 */
.profile-points-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.profile-points-card h2 { margin: 0; font-size: 14px; }
.profile-points-value { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.profile-points-value strong { color: var(--green); font-size: 22px; }
.profile-points-actions { display: grid; justify-items: end; gap: 6px; }
.profile-points-actions .muted { margin: 0; font-size: 11px; }
#dailyCheckInButton:disabled { opacity: .6; cursor: default; }

/* 广场统一媒体尺寸 */
.plaza-media-frame .plaza-post-image { cursor: zoom-in; }
.plaza-live-photo { position: absolute; right: 9px; bottom: 9px; padding: 4px 10px; border: 0; border-radius: var(--radius-pill); background: rgb(20 30 26 / 72%); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.plaza-live-photo:hover { background: rgb(20 30 26 / 88%); }

@media (max-width: 680px) {
  .profile-points-card { align-items: flex-start; flex-direction: column; padding: 16px 0 0; }
  .profile-points-actions { width: 100%; justify-items: start; }
}

/* 通知工具条：操作按钮整体靠右排列 */
.notification-dialog-tools { justify-content: flex-end; }

/* 弹窗打开时锁定背景滚动，避免手指滑动穿透到下一层页面 */
html.dialog-open, body.dialog-open { overflow: hidden; overscroll-behavior: none; }
dialog.dialog { overflow-y: auto; overscroll-behavior: contain; }

/* 功能介绍入口与介绍弹窗 */
.guide-entry-desc { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.guide-dialog {
  width: 92vw;
  width: min(920px, calc(100vw - 28px));
  max-width: 920px;
  max-height: 88vh;
  max-height: 88dvh;
  padding: 0 24px 22px;
  --shot-frame: #dbe5dc;
  --shot-screen: #fffefa;
  --shot-card: #f3f6f0;
  --shot-line: #d9e1d6;
  --shot-mint: #e7f0e9;
  --shot-accent: #2b6250;
  --shot-accent-fade: #a8c5b5;
  --shot-photo: #c9dccc;
  --shot-dock: #f0f4ee;
  --shot-dot: #b0bdb1;
  --shot-text: #4a5b52;
  --shot-title: #20332d;
  --shot-sub: #78827b;
  --shot-danger: #c07059;
}
dialog.dialog .guide-heading { position: sticky; top: 0; z-index: 2; margin-bottom: 0; padding: 20px 0 14px; background: var(--white); }
.guide-overview { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.guide-overview h3 { margin: 6px 0 12px; font-size: 18px; font-weight: 600; }
.guide-overview p { margin: 0 0 10px; color: var(--text-2); font-size: 12px; line-height: 1.85; }
.guide-overview strong { color: var(--ink); }
.guide-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; }
.guide-highlights > div { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); }
.guide-highlights strong { color: var(--green-dark); font-size: 12px; }
.guide-highlights span { color: var(--muted); font-size: 11px; line-height: 1.6; }
.guide-overview .guide-shot-note { margin: 0; color: var(--muted); font-size: 11px; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 6px; }
.guide-nav button { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--green-dark); font-size: 11px; font-weight: 600; }
.guide-nav button:hover { border-color: var(--green); background: var(--mint); }
.guide-section { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 76px; }
.guide-index { margin: 0 0 6px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.guide-copy { min-width: 0; }
.guide-copy h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; }
.guide-lead { margin: 0 0 14px; color: var(--text-2); font-size: 12px; line-height: 1.8; }
.guide-points { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--text-2); font-size: 12px; line-height: 1.75; }
.guide-points li::marker, .guide-notes li::marker { color: var(--green); }
.guide-figure { min-width: 0; margin: 0; }
.guide-shot, .guide-shot-img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.guide-figure figcaption { margin-top: 9px; color: var(--muted); font-size: 10px; text-align: center; }
.guide-notes { padding: 24px 0 6px; }
.guide-notes h3 { margin: 0 0 12px; font-size: 16px; }
.guide-notes ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.guide-actions { padding-top: 14px; border-top: 1px solid var(--line); }

.guide-shot text { font-family: inherit; }
.guide-shot .s-frame { fill: var(--shot-frame); }
.guide-shot .s-screen { fill: var(--shot-screen); }
.guide-shot .s-card { fill: var(--shot-card); }
.guide-shot .s-line { fill: var(--shot-line); }
.guide-shot .s-mint { fill: var(--shot-mint); }
.guide-shot .s-accent { fill: var(--shot-accent); }
.guide-shot .s-accent-fade { fill: var(--shot-accent-fade); }
.guide-shot .s-photo { fill: var(--shot-photo); }
.guide-shot .s-dock { fill: var(--shot-dock); }
.guide-shot .s-dotic { fill: var(--shot-dot); }
.guide-shot .s-danger { fill: var(--shot-danger); }
.guide-shot .s-white { fill: #fff; }
.guide-shot .s-clock { fill: var(--shot-sub); font-size: 7px; font-weight: 600; }
.guide-shot .s-eyebrow { fill: var(--shot-sub); font-size: 6px; font-weight: 700; letter-spacing: .1em; }
.guide-shot .s-title { fill: var(--shot-title); font-size: 14px; font-weight: 700; }
.guide-shot .s-text-bold { fill: var(--shot-title); font-size: 9px; font-weight: 700; }
.guide-shot .s-label { fill: var(--shot-text); font-size: 8px; }
.guide-shot .s-label-white { fill: #fff; font-size: 8px; font-weight: 600; }
.guide-shot .s-label-accent { fill: var(--shot-accent); font-size: 8px; font-weight: 600; }

:root[data-theme="dark"] .guide-dialog {
  --shot-frame: #2c3a31;
  --shot-screen: #1e2823;
  --shot-card: #26332b;
  --shot-line: #3c4d41;
  --shot-mint: #253a30;
  --shot-accent: #3d8a6c;
  --shot-accent-fade: #4e7c65;
  --shot-photo: #3a5142;
  --shot-dock: #232f29;
  --shot-dot: #5a6b5d;
  --shot-text: #c2cdc5;
  --shot-title: #e8eee9;
  --shot-sub: #9aa89f;
}
:root[data-theme="dark"] .guide-shot .s-label-white { fill: #f2f7f3; }

@media (max-width: 680px) {
  .guide-dialog { padding: 0 16px 18px; }
  dialog.dialog .guide-heading { padding: 16px 0 12px; }
  .guide-overview h3 { font-size: 16px; }
  .guide-highlights { grid-template-columns: minmax(0, 1fr); }
  .guide-section { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 0; scroll-margin-top: 68px; }
  .guide-copy h3 { font-size: 17px; }
  .guide-figure { max-width: 240px; margin: 0 auto; }
}
.notification-list { overscroll-behavior: contain; }