/* Warm Pearl: stable content surfaces; translucent material on functional controls. */
:root {
  color-scheme: light dark;
  --ui-font: -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif; --display-font: var(--ui-font);
  --bg: #f8f7f5; --surface: #fff; --surface-soft: #f1efec; --settings-surface: #f4f2ef;
  --text: #20242a; --muted: #5c626b; --muted-strong: #5c626b;
  --line: #d9d9de; --line-strong: #cbc8c4;
  --danger: #b42318; --accent: #9d4e31; --accent-weak: #f6e8e0;
  --pearl-apricot: #c87959; --pearl-lilac: #8471b3;
  --pearl-glass: rgba(255,255,255,.76);
  --pearl-glass-line: rgba(255,255,255,.9);
  --pearl-glass-shadow: 0 5px 18px rgba(61,47,36,.08), inset 0 1px 2px rgba(255,255,255,.95);
  --shadow: 0 12px 36px rgba(61,47,36,.09);
  --radius-control: 24px; --radius-card: 28px;
  --focus-surface: #f6f3ee; --page-inset: 20px;
  --space-md: 20px;
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
@supports (font: -apple-system-body) { @media (hover: none) { html { font: -apple-system-body; } } }
body { font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif; background: var(--bg); color: var(--text); }
body:not(.is-logged-out) { --mobile-ink: var(--text); --mobile-muted: var(--muted); --mobile-green: var(--accent); --mobile-green-soft: var(--accent-weak); --mobile-line: var(--line); --mobile-paper: var(--bg); }
.mobile-review-metrics strong, .mobile-review-form h3, .mobile-plan-review-card button b, .mobile-page-heading h1, .mobile-review-heading h1, .mobile-content-section h2, .mobile-review-form h2, .mobile-today-summary strong, .mobile-review-completion strong, .mobile-plan-title, .mobile-plan-percent, .mobile-week-day strong, .mobile-task-open strong, .mobile-todo-row time { font-family: inherit; }
button, input, textarea, select { color: var(--text); font-size: 1rem; }
button { min-height: 44px; border-radius: 24px; border-color: var(--line); background: var(--surface); color: var(--text); font-weight: 600; }
button.secondary, button.ghost { color: var(--text); background: var(--surface); }
button.ghost { background: transparent; }
button:hover:not(:disabled) { background: var(--surface-soft); color: var(--text); }
button:active:not(:disabled) { transform: scale(.98); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
input, textarea, select { background: var(--surface); border-color: var(--line); border-radius: 16px; min-height: 44px; }
.ui-icon { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: none; }
.icon-forward { transform: rotate(180deg); }
.pearl-glass, .pearl-icon-button, .mobile-page-action-button, .mobile-avatar, .task-sheet-submit, .manual-plan-close,
.mobile-start-button, .mobile-review-submit, .pearl-tool-group, .mobile-week-button {
  background: var(--pearl-glass); border: 1px solid var(--pearl-glass-line); box-shadow: var(--pearl-glass-shadow); color: var(--text);
  -webkit-backdrop-filter: blur(22px) saturate(1.08); backdrop-filter: blur(22px) saturate(1.08);
}
.pearl-glass { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; border-radius: 28px; }
.pearl-icon-button, .mobile-page-action-button, .mobile-avatar, .mobile-week-button { display: inline-grid; place-items: center; width: 46px; min-width: 46px; height: 46px; padding: 10px; border-radius: 50%; }
.panel, .today-priority, .today-work-card, .mobile-review-summary, .mobile-review-form, .mobile-plan-review-card, .detail-section { border-color: var(--line); background: var(--surface); border-radius: var(--radius-card); box-shadow: none; }
.bar-fill, .mobile-plan-progress span, .mobile-progress-track span { background: var(--pearl-apricot); }
.mobile-category-chip { display: none !important; }
.status-line:empty { display: none; }
.connection-status { background: var(--accent-weak); border-radius: 0 0 20px 20px; }
.connection-status.error, .field-error, .status-line.error { color: var(--danger); }
.pearl-password-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pearl-password-field input { flex: 1 1 12rem; min-width: 0; }
.pearl-password-field button { flex: 0 0 auto; padding: 8px 12px; min-width: 52px; min-height: 44px; width: auto; background: transparent; border: 0; white-space: nowrap; }
.pearl-plan-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: .85rem; color: var(--muted); margin-bottom: 16px; }
.pearl-plan-filter select { flex: 1 1 13rem; min-width: 0; width: auto; max-width: 100%; border: 0; background: transparent; font-size: .85rem; min-height: 44px; }

/* Monthly grid: rectangular weeks, with a small date selection marker. */
.pearl-calendar-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.pearl-calendar-tools > .pearl-glass { min-width: 80px; min-height: 56px; padding: 12px 20px; font-size: 1rem; font-weight: 500; }
.pearl-tool-group { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; min-height: 56px; border-radius: 28px; padding: 5px; }
.pearl-tool-group .pearl-icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; background: transparent; box-shadow: none; border: 0; appearance: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pearl-tool-group .pearl-icon-button:hover:not(:disabled) { background: var(--surface-soft); }
.pearl-calendar-mode { position: relative; display: flex; align-items: center; margin: 0; padding-right: 12px; border: 0; }
.pearl-calendar-mode::after { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 24px; transform: translateY(-50%); background: var(--line); }
.pearl-calendar-mode select { display: block; width: 72px; min-width: 72px; min-height: 44px; border: 0; background: transparent; border-radius: 22px; font-size: 1rem; font-weight: 500; padding: 8px 10px; }
.pearl-calendar-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.pearl-calendar-heading p { color: var(--muted); margin: 0 0 2px; font-size: 1rem; }
.pearl-calendar-heading #calendarViewTitle { font-size: 2.65rem; line-height: 1.1; font-weight: 700; letter-spacing: -.035em; background: transparent; border: 0; border-radius: 0; padding: 0; text-align: start; min-height: 44px; box-shadow: none; }
.pearl-month-arrows { display: flex; gap: 8px; }
.calendar-shell-card { padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.calendar-view { min-height: 0; }
.calendar-weekday-row { display: grid; min-width: 308px; grid-template-columns: repeat(7,minmax(44px,1fr)); gap: 0; padding: 0 0 12px; font-size: .8rem; font-weight: 400; color: var(--muted); }
.calendar-month-grid { display: grid; min-width: 308px; grid-template-columns: repeat(7,minmax(44px,1fr)); gap: 0; border-top: 1px solid var(--line); }
.calendar-month-day { min-width: 0; min-height: 100px; border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid color-mix(in srgb,var(--line) 40%,transparent); border-radius: 0; background: transparent; padding: 6px 3px; gap: 5px; box-shadow: none; overflow: hidden; font-weight: 400; }
.calendar-month-day:nth-child(7n) { border-right: 0; }
.calendar-month-day:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-month-day.today, .calendar-month-day.selected { background: transparent; border-color: var(--line); }
.calendar-month-day.outside-month { opacity: 1; color: var(--muted); }
.calendar-month-day:hover:not(:disabled) { background: var(--surface-soft); }
.calendar-day-number { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 1px; font-size: 1rem; font-weight: 450; }
.calendar-month-day.today .calendar-day-number { width: 24px; height: 24px; border-radius: 50%; background: var(--pearl-apricot); color: #20242a; }
.calendar-month-day.selected:not(.today) .calendar-day-number { background: var(--text); color: var(--surface); border-radius: 50%; }
.calendar-event-chip { display: flex; align-items: center; gap: 3px; border-radius: 0; color: var(--calendar-ink,var(--muted)); background: transparent; line-height: 1.45; font-size: .75rem; font-weight: 500; min-width: 0; }
.calendar-event-chip .event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-chip.done { color: var(--muted); text-decoration: none; }
.calendar-event-chip .ui-icon { width: 10px; height: 10px; flex-basis: 10px; }
.calendar-color-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--calendar-ink,var(--muted)); flex: 0 0 5px; }
.calendar-event-more { font-size: .8125rem; padding-left: 8px; color: var(--muted); }
.calendar-week-card, .calendar-task-row { background: var(--surface); border-color: var(--line); border-radius: 20px; }
.calendar-task-row { grid-template-columns: 44px minmax(0,1fr); }
.calendar-task-check { width: 44px; }
.calendar-task-edit { background: transparent; border: 0; text-align: start; }
.calendar-task-edit small { color: var(--muted); }

/* Sheets retain native date/time inputs, with visible field errors and a reachable save action. */
.drawer-backdrop.open { background: rgba(46,39,31,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.manual-plan-drawer, .plan-drawer, .onboarding-drawer { background: var(--bg); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); }
.manual-plan-header { display: grid; grid-template-columns: 80px minmax(0,1fr) 80px; align-items: center; gap: 8px; padding: 20px; background: var(--bg); border: 0; position: relative; }
.manual-plan-header::before { content: ""; position: absolute; top: 8px; left: calc(50% - 20px); width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); }
.manual-plan-title { font-size: 1.15rem; text-align: center; margin: 0; font-weight: 650; }
.manual-plan-close, .task-sheet-submit { width: auto; min-width: 64px; height: 44px; padding: 0 15px; border-radius: 24px; font-size: .95rem; }
.manual-plan-form { min-height: 0; flex: 1; }
.manual-plan-body { padding: 16px 20px 28px; }
.manual-form-section { background: transparent; padding: 0; border: 0; box-shadow: none; }
.manual-field { min-width: 0; }
.manual-field label { font-size: .95rem; color: var(--text); }
.manual-field .field-hint, .field-hint { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.field-error { font-size: .85rem; line-height: 1.45; }
.field-error:empty { display: none; }
.manual-field input, .manual-field select { background: var(--surface); border: 1px solid var(--line); }
#quickTodoForm .manual-plan-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#quickTodoForm .manual-field.full { grid-column: 1 / -1; }
#quickTodoForm .manual-field:has(> #quickTodoMinutes) { grid-column: auto; }
button.task-sheet-submit, .manual-plan-header .manual-plan-close { background: var(--pearl-glass); color: var(--text); border: 1px solid var(--pearl-glass-line); box-shadow: var(--pearl-glass-shadow); }
#quickTodoSubmit, #todoEditorSubmit { background: var(--pearl-glass); color: var(--text); border: 1px solid var(--pearl-glass-line); box-shadow: var(--pearl-glass-shadow); }
#quickTodoTitleInput:focus-visible { outline: none; box-shadow: 0 1px 0 var(--line-strong); }
body:not(.is-logged-out) input:focus-visible, body:not(.is-logged-out) textarea:focus-visible, body:not(.is-logged-out) select:focus-visible, body:not(.is-logged-out) button:focus-visible { outline-color: var(--text); }
#quickTodoTitleInput { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 10px 0 24px; min-height: 80px; font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; }
#quickTodoTitleInput::placeholder { color: var(--muted); opacity: .7; }
#quickTodoDate, #quickTodoEndTime { width: 100%; min-height: 44px; border: 0; background: transparent; text-align: start; padding: 4px 0; }
#quickTodoForm .manual-field:has(> #quickTodoDate), #quickTodoForm .manual-field:has(> #quickTodoEndTime) { grid-column: 1 / -1; padding: 14px 18px; background: var(--surface); border-radius: 22px; display: grid; grid-template-columns: minmax(80px,.8fr) minmax(0,1.2fr); align-items: center; gap: 6px; }
#quickTodoForm .manual-field:has(> #quickTodoDate) { border-radius: 24px 24px 0 0; margin-bottom: -12px; border-bottom: 1px solid var(--line); }
#quickTodoForm .manual-field:has(> #quickTodoEndTime) { border-radius: 0 0 24px 24px; }
#quickTodoForm .manual-field:has(> #quickTodoDate) .field-error, #quickTodoForm .manual-field:has(> #quickTodoEndTime) .field-error { grid-column: 1 / -1; }
#quickTodoForm .manual-field:has(> #quickTodoMinutes) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 26px; border: 1px solid var(--pearl-glass-line); background: var(--pearl-glass); box-shadow: var(--pearl-glass-shadow); }
#quickTodoForm label[for=quickTodoMinutes] { display: flex; align-items: center; gap: 5px; font-size: .8rem; }
#quickTodoForm .manual-field:has(> #quickTodoMinutes)::after { content: "分钟"; font-size: .85rem; }
#quickTodoForm label[for=quickTodoMinutes] .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
#quickTodoMinutes { width: 2.3em; border: 0; min-height: 44px; padding: 0; background: transparent; font-size: 1rem; }
.quick-todo-advanced { grid-column: auto !important; border: 0; background: transparent; padding: 0; }
.quick-todo-advanced > summary { min-height: 62px; border-radius: 28px; padding: 18px 14px; background: var(--pearl-glass); box-shadow: var(--pearl-glass-shadow); border: 1px solid var(--pearl-glass-line); font-size: .95rem; color: var(--text); cursor: pointer; }
.quick-todo-advanced > summary > small { display: none; }
.quick-todo-advanced > summary { display: flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; text-align: center; list-style: none; }
.quick-todo-advanced > summary::-webkit-details-marker { display: none; }
.quick-todo-advanced > summary .ui-icon { width: 18px; height: 18px; flex-basis: 18px; transform: rotate(-90deg); }
.quick-todo-advanced[open] > summary .ui-icon { transform: rotate(90deg); }
.quick-todo-advanced[open] { grid-column: 1 / -1 !important; }
.quick-todo-advanced .manual-plan-fields { margin-top: 16px; padding: 18px; background: var(--surface); border-radius: 24px; }
.pearl-color-field { display: flex; gap: 10px; }
.pearl-color-field input[type=color] { width: 52px; min-width: 52px; padding: 4px; }
.task-sheet-description { line-height: 1.5; }
.pearl-sheet-body { padding: 8px 20px max(36px,env(safe-area-inset-bottom)); overscroll-behavior: contain; flex: 1; min-height: 0; overflow-y: auto; }
#pearlSheetStatus { margin: 0 20px 18px; }
.pearl-detail-title { font-size: 1.35rem; font-weight: 700; line-height: 1.3; letter-spacing: -.025em; margin: 20px 0; overflow-wrap: anywhere; }
.pearl-detail-plan { color: var(--muted); display: flex; align-items: center; gap: 10px; }
.pearl-detail-facts { margin: 16px 0; padding: 4px 16px; background: var(--surface); border-radius: 20px; }
.pearl-detail-facts > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pearl-detail-facts > div:last-child { border-bottom: 0; }
.pearl-detail-facts dt { color: var(--muted); }
.pearl-detail-facts dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.pearl-detail-actions { display: grid; gap: 12px; }
.pearl-detail-actions button { min-height: 52px; width: 100%; }
.pearl-task-more { margin-top: 18px; }
.pearl-task-more > summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.pearl-task-more > summary::-webkit-details-marker { display: none; }
.pearl-task-more[open] > summary .ui-icon { transform: rotate(90deg); }
#pearlTaskParts { min-height: 160px; font: inherit; resize: vertical; }
.pearl-calendar-list { margin: 16px 0; background: var(--surface); border-radius: 26px; padding: 6px 18px; }
.pearl-calendar-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pearl-calendar-row:last-child { border-bottom: 0; }
.pearl-calendar-row strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.pearl-calendar-row small { display: block; font-size: .8rem; margin-top: 3px; color: var(--muted); }
.pearl-calendar-row button { background: transparent; border: 0; padding: 6px; }
.pearl-calendar-visibility .ui-icon { color: var(--calendar-ink); }
.pearl-calendar-visibility[aria-pressed=false] { opacity: .6; }
.pearl-calendar-form { display: grid; gap: 14px; }
.pearl-calendar-form > label:first-child { grid-template-columns: 52px minmax(0,1fr); align-items: center; padding: 10px 12px; background: var(--surface); border-radius: 24px; }
.pearl-calendar-form > div > p { margin: 0 0 8px; color: var(--muted); font-size: .85rem; }
.pearl-calendar-form > label { display: grid; gap: 8px; }
.pearl-swatches { display: grid; grid-template-columns: repeat(auto-fit,44px); justify-content: space-between; gap: 10px; padding: 12px; border-radius: 24px; background: var(--surface); }
.pearl-calendar-form .pearl-swatch { display: grid; place-items: center; box-sizing: border-box; width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; max-height: 44px; aspect-ratio: 1; border: 4px solid var(--surface); background: var(--swatch); border-radius: 50%; padding: 0; line-height: 0; box-shadow: none; }
.pearl-swatch[aria-pressed=true] { outline: 2px solid var(--text); outline-offset: 0; }
.pearl-swatch:hover:not(:disabled) { background: var(--swatch); }
.pearl-swatch .ui-icon { display: block; width: 18px; height: 18px; margin: 0; color: #20242a; }
.pearl-calendar-preview { background: var(--surface); border-radius: 22px; padding: 18px; color: var(--calendar-ink); }
.pearl-calendar-preview p { margin: 8px 0 0; font-size: .9rem; }
.pearl-preview-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; color: var(--text); text-align: center; }
.pearl-preview-week > span { display: grid; justify-items: center; gap: 3px; }
.pearl-preview-week small { color: var(--muted); font-size: .7rem; }
.pearl-preview-week strong { display: grid; place-items: center; min-width: 28px; min-height: 28px; border-radius: 50%; font-size: .9rem; font-weight: 500; }
.pearl-preview-week .selected { background: var(--calendar-ink); color: var(--surface); }
.pearl-calendar-preview .calendar-color-dot { width: 8px; height: 8px; margin-right: 8px; }
.pearl-switch-label { display: flex !important; align-items: center; justify-content: space-between; }
.pearl-switch-label { min-height: 44px; }
.pearl-switch-label input { appearance: none; -webkit-appearance: none; position: relative; width: 50px; min-width: 50px; min-height: 30px; height: 30px; padding: 0; border-radius: 18px; border: 0; background: var(--line-strong); cursor: pointer; }
.pearl-switch-label input::before { content: ""; position: absolute; width: 24px; height: 24px; top: 3px; left: 3px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pearl-switch-label input:checked { background: var(--text); }
.pearl-switch-label input:checked::before { left: 23px; }

/* Focus is a task-linked view of the existing server session. */
.pearl-focus-view { background: var(--focus-surface); }
.pearl-focus-view .manual-plan-header::before { display: none; }
.pearl-focus-view .manual-plan-header { padding-top: max(20px,env(safe-area-inset-top)); }
.pearl-focus-view .manual-plan-header h2 { margin: 0; font-size: 1.1rem; text-align: center; }
.pearl-focus-content { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; text-align: center; padding: 24px 20px; }
.pearl-focus-content > * { flex-shrink: 0; max-width: 100%; overflow-wrap: anywhere; }
.pearl-focus-plan { color: var(--muted); display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.pearl-focus-content h3 { font-size: 1.7rem; line-height: 1.35; margin: 0 0 42px; max-width: 100%; overflow-wrap: anywhere; }
.pearl-focus-timer { font-size: clamp(3.2rem,18vw,5.5rem); line-height: 1; font-weight: 400; letter-spacing: -.055em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.pearl-focus-content #pearlFocusState { color: var(--muted); margin: 16px 0 5px; }
.pearl-focus-content #pearlFocusEstimate { color: var(--muted); margin: 0; font-size: .95rem; }
.pearl-focus-content #pearlFocusStatus { font-size: .9rem; }
.pearl-focus-footer { padding: 0 20px max(36px,env(safe-area-inset-bottom)); display: grid; gap: 16px; }
.plan-drawer .drawer-header > div:first-child { flex: 1; min-width: 0; }
.plan-drawer .drawer-header-actions { flex: 0 0 auto; }
.plan-drawer .drawer-header-actions button { white-space: nowrap; }
.pearl-focus-control-group { display: grid; grid-template-columns: 1fr 1fr; background: var(--pearl-glass); border: 1px solid var(--pearl-glass-line); box-shadow: var(--pearl-glass-shadow); border-radius: 36px; padding: 6px; }
.pearl-focus-control-group button, .pearl-complete { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; background: transparent; border: 0; }
.pearl-focus-control-group button:first-child { border-right: 1px solid var(--line); border-radius: 30px 0 0 30px; }
.pearl-complete { background: var(--pearl-glass); border: 1px solid var(--pearl-glass-line); }
.pearl-actual-review { background: var(--surface); padding: 24px; border-radius: 30px; margin-bottom: 20px; }
.pearl-actual-review h2 { margin: 0 0 8px; font-size: .95rem; font-weight: 500; color: var(--muted); }
.pearl-actual-review > strong { display: block; font-size: 2.2rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.pearl-actual-review > p { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.pearl-time-chart { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.pearl-time-chart > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .7rem; color: var(--muted); }
.pearl-time-track { height: 70px; width: 100%; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.pearl-time-bar { display: block; height: var(--bar-height); width: 100%; background: var(--pearl-apricot); border-radius: 6px 6px 0 0; }
.mobile-review-summary { padding: 20px; }
.mobile-review-summary .mobile-review-completion strong { font-size: 1.7rem; }
.mobile-plan-card, .mobile-plan-card.featured { background: var(--surface); border: 0; border-radius: 28px; padding: 22px; box-shadow: none; }
.mobile-plan-open { display: flex; align-items: flex-start; padding: 8px 0 16px; background: transparent; color: var(--text); border: 0; box-shadow: none; }
.mobile-plan-title { font-size: 1.25rem; font-weight: 650; }
.mobile-plan-percent { font-size: .95rem; color: var(--muted); }
.mobile-plan-card-topline { color: var(--muted); }
.mobile-plan-next { margin-top: 16px; background: transparent; padding: 0; border: 0; }
.mobile-plan-next span, .mobile-plan-facts { color: var(--muted); font-size: .8rem; }
.mobile-plan-tabs { background: var(--surface-soft); padding: 4px; border-radius: 28px; border: 0; margin-bottom: 12px; }
.mobile-plan-tab { min-height: 44px; background: transparent; color: var(--muted); border: 0; border-radius: 24px; }
/* A retained touch hover must not override the selected segment. */
.mobile-plan-tabs .mobile-plan-tab[aria-selected=true] { background: var(--surface); box-shadow: 0 2px 7px rgba(61,47,36,.06); color: var(--text); }
.energy-option { border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.energy-option.active { color: var(--text); border-color: var(--text); background: var(--surface-soft); }
.mobile-week-day.complete, .mobile-week-day.partial, .mobile-week-day.today { background: var(--surface-soft); color: var(--text); border-color: var(--line); }

@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=color]):not([type=radio]), textarea, select { font-size: max(1rem,16px); }
  .workspace { padding: max(24px,env(safe-area-inset-top)) max(var(--page-inset),env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom)) max(var(--page-inset),env(safe-area-inset-left)); }
  .mobile-header { position: absolute; right: var(--page-inset); top: max(24px,env(safe-area-inset-top)); z-index: 5; min-height: 0; border: 0; margin: 0; padding: 0; background: transparent; backdrop-filter: none; justify-content: flex-end; }
  .mobile-topbar-copy { display: none; }
  body[data-mobile-view=today] .mobile-header { position: absolute; right: var(--page-inset); top: max(24px,env(safe-area-inset-top)); z-index: 5; }
  body[data-mobile-view=calendar] .mobile-header { display: none; }
  .mobile-page-heading { position: relative; align-items: center; min-height: 68px; padding-right: 116px; margin: 0 0 20px; gap: 12px; }
  .mobile-page-heading > .mobile-page-action-button { position: absolute; right: 56px; top: 0; }
  .mobile-page-heading h1 { font-size: 1.9rem; line-height: 1.2; font-weight: 750; letter-spacing: -.035em; margin: 2px 0 0; }
  .mobile-page-date { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; }
  .mobile-greeting { display: none; }
  .mobile-today-view > .mobile-page-heading { padding-right: 116px; }
  .mobile-today-summary { display: block; border: 0; padding: 0; margin: 0 0 20px; background: transparent; box-shadow: none; border-radius: 0; }
  .mobile-today-summary > div:first-child { display: flex; align-items: center; gap: 5px; }
  .mobile-today-summary > div:first-child > span { display: none; }
  .mobile-today-summary strong { font-size: .95rem; color: var(--muted); font-weight: 450; }
  .mobile-today-summary strong b { color: inherit; font-size: inherit; font-weight: inherit; }
  .mobile-avatar { border-color: var(--pearl-glass-line); font-size: .85rem; font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px; }
  .mobile-today-summary strong::after { content: " 项已完成"; }
  .mobile-today-summary > div:nth-child(2), .mobile-today-summary .mobile-progress-track { display: none; }
  #mobileNextHeading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-content-section { margin: 0 0 20px; }
  .mobile-section-heading { margin-bottom: 8px; }
  .mobile-content-section h2 { color: var(--text); font-size: 1rem; margin: 0; font-weight: 650; }
  .mobile-section-heading span { font-size: .85rem; color: var(--muted); }
  .mobile-next-card { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; padding: 20px; border: 0; border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: none; }
  .mobile-next-card .mobile-next-check { display: none; }
  .mobile-next-card .mobile-next-time { display: none; }
  .mobile-next-card .mobile-task-open { grid-area: auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; text-align: start; padding: 0 0 20px; border: 0; background: transparent; box-shadow: none; }
  .pearl-next-plan { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--text); font-weight: 600; }
  .pearl-next-plan .ui-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .mobile-next-card .mobile-task-open strong { font-size: 1.35rem; line-height: 1.3; letter-spacing: -.025em; font-weight: 700; }
  .mobile-next-card .mobile-task-open small { color: var(--muted); font-size: .85rem; line-height: 1.5; }
  .mobile-next-card .mobile-focus-controls { grid-area: auto; display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
  .mobile-start-button { display: flex; justify-content: center; align-items: center; gap: 18px; width: 100%; min-height: 52px; border-radius: 28px; font-size: 1.05rem; padding: 10px 15px; }
  .mobile-start-button .focus-label { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
  .mobile-next-card .focus-stop-button { display: none; }
  .mobile-agenda-list, .mobile-task-list { display: grid; gap: 0; }
  .mobile-todo-row, .mobile-todo-row.has-time, .mobile-todo-row.done, .mobile-todo-row.has-time.done { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; grid-template-areas: "check content more"; column-gap: 8px; padding: 8px 0; min-height: 72px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .mobile-todo-row .mobile-todo-check { grid-area: check; position: relative; display: grid; place-items: center; width: 44px; min-height: 44px; align-self: center; }
  .mobile-todo-row .mobile-todo-check input { position: absolute; inset: 0; width: 44px; height: 44px; min-height: 44px; opacity: 0; margin: 0; cursor: pointer; }
  .mobile-todo-row .mobile-todo-check span { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; pointer-events: none; }
  .mobile-todo-row .mobile-todo-check input:checked + span { border-color: var(--muted); background: var(--muted); color: var(--surface); }
  .mobile-todo-row .mobile-todo-check input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
  .mobile-todo-row .mobile-todo-check .ui-icon { width: 17px; height: 17px; }
  .mobile-todo-row .mobile-task-open { grid-area: content; display: grid; padding: 4px 0; gap: 4px; border: 0; background: transparent; text-align: start; }
  .mobile-todo-row .mobile-task-open strong { font-size: .98rem; line-height: 1.4; color: var(--text); font-weight: 600; }
  .mobile-todo-row .mobile-task-open small { color: var(--muted); font-size: .9rem; line-height: 1.45; }
  .mobile-todo-row.done .mobile-task-open strong { color: var(--muted); text-decoration: none; }
  .mobile-todo-row time { display: none; }
  .mobile-todo-row .mobile-row-focus-controls { display: none; }
  .pearl-row-more { grid-area: more; background: transparent !important; box-shadow: none; border: 0; padding: 10px; min-width: 44px; }
  .mobile-inline-empty { color: var(--muted); padding: 12px 0; background: transparent; border: 0; font-size: .9rem; line-height: 1.6; }
  .pearl-today-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 370px; text-align: center; gap: 18px; }
  .pearl-today-empty > .ui-icon { width: 56px; height: 56px; flex-basis: 56px; }
  .pearl-today-empty h2 { font-size: 1.4rem; }
  .pearl-today-empty p { color: var(--muted); font-size: .95rem; }
  .pearl-today-empty button { width: 100%; }
  .mobile-nav { position: fixed; inset: auto var(--page-inset) calc(14px + env(safe-area-inset-bottom)); width: auto; max-width: 640px; margin: 0 auto; min-height: 68px; height: auto; padding: 4px; border: 1px solid var(--pearl-glass-line); border-radius: 38px; background: var(--pearl-glass); box-shadow: var(--pearl-glass-shadow); backdrop-filter: blur(24px) saturate(1.08); -webkit-backdrop-filter: blur(24px) saturate(1.08); }
  .mobile-nav-item { min-height: 58px; padding: 6px; border-radius: 32px; font-size: .7rem; font-weight: 500; color: var(--muted); gap: 3px; }
  .mobile-nav-item.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 12px rgba(61,47,36,.06); }
  .mobile-nav-item:hover:not(:disabled):not(.active) { background: transparent; }
  .mobile-nav-item svg { width: 24px; height: 24px; }
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .calendar-page { margin: 0; }
  .calendar-month-day { min-height: 84px; }
  .calendar-view { margin: 0 -12px; }
  .calendar-month-grid { min-height: 0; }
  .mobile-review-heading { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 10px; align-items: center; margin: 0 0 22px; }
  .mobile-review-heading h1 { text-align: start; font-size: 1.9rem; color: var(--text); margin: 0; }
  .mobile-review-heading p { color: var(--muted); font-size: .85rem; }
  .mobile-review-form { padding: 22px; }
  .mobile-review-form textarea { border: 0; background: var(--surface-soft); padding: 14px; margin: 14px 0; }
  .mobile-review-submit { min-height: 52px; border-radius: 28px; margin-top: 16px; }
  .manual-plan-drawer { --sheet-top-gap: max(0px,var(--app-visible-height,100dvh) - 680px); right: 0; left: 0; width: 100%; top: calc(var(--app-visible-top,0px) + max(0px,var(--app-visible-height,100dvh) - 680px)); bottom: auto; height: min(680px,var(--app-visible-height,100dvh)); max-height: var(--app-visible-height,100dvh); border-radius: 32px 32px 0 0; border: 0; padding-bottom: env(safe-area-inset-bottom); }
  .manual-plan-drawer.open { transform: none; }
  #pearlSheet[data-sheet-kind=calendars] { --sheet-top-gap: max(0px,var(--app-visible-height,100dvh) - 480px); top: calc(var(--app-visible-top,0px) + max(0px,var(--app-visible-height,100dvh) - 480px)); height: min(480px,var(--app-visible-height,100dvh)); }
  #quickTodoDrawer { --sheet-top-gap: max(0px,var(--app-visible-height,100dvh) - 620px); top: calc(var(--app-visible-top,0px) + max(0px,var(--app-visible-height,100dvh) - 620px)); height: min(620px,var(--app-visible-height,100dvh)); }
  .manual-plan-header { flex-shrink: 0; padding: max(26px,calc(env(safe-area-inset-top) - var(--sheet-top-gap,0px))) 20px 16px; }
  .manual-plan-footer { padding: 0 20px max(16px,env(safe-area-inset-bottom)); background: transparent; border: 0; }
  .pearl-focus-view { top: var(--app-visible-top,0px); height: var(--app-visible-height,100dvh); max-height: none; border-radius: 0; }
  .plan-drawer { border-radius: 32px 32px 0 0; background: var(--bg); }
  .plan-drawer .detail-section { border: 0; padding: 20px; }
  .plan-drawer .drawer-header { padding: 24px 20px 16px; border: 0; }
  .plan-drawer .drawer-title { font-size: 1.6rem; font-weight: 700; }
  .plan-drawer .drawer-body { padding: 0 20px 32px; }
  .plan-drawer .drawer-progress { position: static; margin-top: 0; padding: 20px; background: var(--surface); border-radius: 24px; }
  .plan-drawer .drawer-progress .bar { margin-top: 12px; }
  .future-task { width: 100%; align-items: flex-start; text-align: start; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; }
  .future-task small { color: var(--muted); }
  .pearl-plan-background { margin: 18px 0; color: var(--muted); }
  .pearl-plan-background > summary { min-height: 44px; cursor: pointer; }
  .pearl-plan-lifecycle { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .pearl-plan-lifecycle .plan-menu { margin: 0; }
  .pearl-plan-lifecycle > .plan-state-button { flex: 1 1 9em; white-space: nowrap; }
  .pearl-plan-lifecycle > [data-plan-sync] { flex: 1 0 100%; width: 100%; }
  .profile-panel { padding: 0; background: transparent; border: 0; }
  .profile-panel .panel-heading { margin-bottom: 24px; }
  .profile-panel .panel-title { font-size: 2rem; }
  .my-settings-section, .account-security-section, .insight-section { border-radius: 26px; background: var(--surface); border: 0; }
}
@media (max-width: 380px) { :root { --page-inset: 16px; } .mobile-next-card { padding: 20px; } .calendar-month-day { padding: 6px 2px; } }
@media (prefers-color-scheme: dark) {
  :root { --bg: #16171b; --surface: #222328; --surface-soft: #2d2e34; --text: #f4f6f8; --muted: #b0b7c2; --muted-strong: #b0b7c2; --line: #45474f; --line-strong: #67625c; --pearl-apricot: #e5aa8d; --pearl-lilac: #beade1; --accent: #e3a184; --accent-weak: #493127; --pearl-glass: rgba(45,46,52,.84); --pearl-glass-line: rgba(137,131,123,.3); --pearl-glass-shadow: 0 6px 22px rgba(0,0,0,.15),inset 0 1px 1px rgba(255,255,255,.12); --focus-surface: #16171b; --danger: #ffb4ab; }
  .calendar-event-chip { color: var(--calendar-dark-ink,var(--muted)); }
  .calendar-color-dot { background: var(--calendar-dark-ink,var(--muted)); }
  .pearl-calendar-preview, .pearl-calendar-visibility .ui-icon { color: var(--calendar-dark-ink); }
  .pearl-swatch .ui-icon { color: #20242a; }
}
@media (prefers-reduced-transparency: reduce) { :root { --pearl-glass: var(--surface); } * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } button:active:not(:disabled) { transform: none; } }
@media (prefers-contrast: more) { :root { --line: var(--muted); --pearl-glass-line: var(--muted); --pearl-glass: var(--surface); } .calendar-month-day { border-right-color: var(--line); } .calendar-event-chip { font-weight: 650; } }
/* Month stays a seven-column grid at every text size. Day buttons retain full spoken dates. */
html.large-text .calendar-weekday-row, html.large-text .calendar-month-grid { grid-template-columns: repeat(7,minmax(44px,1fr)); min-width: max(100%,21em); }
html.large-text .calendar-month-day { min-height: 104px; padding: 8px 4px; overflow: hidden; }
html.large-text .calendar-day-number { width: auto; height: auto; min-width: 44px; min-height: 44px; font-size: 1rem; }
html.large-text .calendar-event-chip { display: none; }
#calendarView { overflow-x: auto; }
.pearl-calendar-tools { flex-wrap: wrap; gap: 8px; }
.pearl-calendar-tools > button { min-height: 44px; white-space: normal; }
.duration-unit { white-space: nowrap; }
.connection-status:not([hidden]) { position: relative; z-index: auto; font-size: .9375rem; padding: 8px 16px; }
html.large-text .mobile-avatar { width: max(46px,2.4em); min-width: max(46px,2.4em); height: max(46px,2.4em); padding: .15em; line-height: 1; }
html.large-text body[data-mobile-view=today] .mobile-header { position: relative; right: auto; top: auto; }
html.large-text .mobile-today-view > .mobile-page-heading { padding-right: 0; }
html.large-text .mobile-plan-tabs { display: grid; grid-template-columns: minmax(0,1fr); }
html.large-text .mobile-plan-tab { font-size: .85rem; padding: 12px; white-space: normal; }
html.large-text .pearl-plan-filter { display: grid; grid-template-columns: minmax(0,1fr); }
html.large-text .pearl-plan-filter select { width: 100%; }
html.large-text .plan-drawer .drawer-header { flex-wrap: wrap; }
html.large-text .plan-drawer .drawer-header > div:first-child { flex-basis: 100%; }
html.large-text .pearl-focus-view { overflow-y: auto; overscroll-behavior: contain; }
html.large-text .pearl-focus-view .manual-plan-header { position: static; }
html.large-text .pearl-focus-content { flex: 0 0 auto; overflow: visible; justify-content: flex-start; }
html.large-text .pearl-focus-timer { font-size: 1.4rem; line-height: 1.25; letter-spacing: normal; }
html.large-text .pearl-focus-footer { flex-shrink: 0; }
html.large-text .pearl-focus-control-group { grid-template-columns: minmax(0,1fr); border-radius: 28px; }
html.large-text .pearl-focus-control-group button:first-child { border-right: 0; border-bottom: 1px solid var(--line); border-radius: 24px 24px 0 0; }
[hidden] { display: none !important; }

/* My: one type scale and one alignment for account, settings and disclosures. */
#profilePanel { font-size: 1rem; line-height: 1.5; }
#profilePanel [hidden] { display: none !important; }
#profilePanel > .panel-heading { display: grid; grid-template-columns: minmax(0,1fr); justify-items: start; gap: 24px; align-items: start; margin-bottom: 24px; }
#profilePanel .panel-title { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.pearl-my-account { display: grid; grid-template-columns: minmax(0,1fr) 20px; align-items: center; gap: 12px; padding: 16px; margin-bottom: 24px; border-radius: 20px; background: var(--settings-surface,var(--surface-soft)); color: var(--text); text-decoration: none; }
.pearl-my-account > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pearl-my-account strong { font-size: 1rem; line-height: 1.4; font-weight: 400; overflow-wrap: anywhere; }
.pearl-my-account small { color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.pearl-my-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-weak); font-size: 1.0625rem; font-weight: 500; }
.my-settings-list { background: var(--settings-surface,var(--surface-soft)); border-radius: 20px; }
#profilePanel .my-settings-list > details { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
#profilePanel .my-settings-list > details > summary,
#profilePanel .my-privacy-entry,
#profilePanel .my-notification-entry {
  display: grid; grid-template-columns: minmax(0,1fr) 20px; align-items: center; gap: 12px;
  box-sizing: border-box; width: 100%; min-height: 56px; padding: 16px;
  margin: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--text); font: inherit; font-weight: 400; text-align: start; text-decoration: none; list-style: none; cursor: pointer;
}
#profilePanel .my-settings-list > details > summary span { font-size: 1rem; font-weight: 400; }
#profilePanel .my-settings-list > details > summary::after { content: none; }
#profilePanel .my-settings-list > details > summary::-webkit-details-marker { display: none; }
#profilePanel .my-settings-list > details::after,
#profilePanel .my-notification-entry::after { content: ''; display: block; height: 1px; margin-inline: 16px; background: color-mix(in srgb,var(--line) 65%,transparent); }
#profilePanel .my-notification-entry { position: relative; }
#profilePanel .my-notification-entry::after { position: absolute; inset: auto 0 0; }
#profilePanel .my-settings-list .ui-icon,
.pearl-my-account > .ui-icon { width: 20px; height: 20px; color: var(--muted); }
#profilePanel .my-settings-list > details[open] > summary .ui-icon { transform: rotate(-90deg); }
#profilePanel .my-settings-list > details > summary:focus-visible,
#profilePanel .my-privacy-entry:focus-visible,
.pearl-my-account:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 16px; }
#profilePanel .my-detail-content { border: 0; padding: 0 16px 16px; }
#profilePanel #profileForm, #profilePanel #profileForm .form-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
#profileForm > .field:has(> label) { grid-column: 1 / -1; }
#profileForm .field:has(> label) { display: grid; grid-template-columns: minmax(5em,.8fr) minmax(0,1.4fr); align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding-block: 6px; border-bottom: 1px solid var(--line); }
#profileForm .field > label { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--text); }
#profileForm .field > :is(input,select) { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-soft); color: var(--text); font-size: max(16px,1rem); font-weight: 400; line-height: 1.4; }
#profileForm .ui-more { grid-column: 1 / -1; margin: 0; padding: 0; }
#profileForm .ui-more > summary { display: grid; grid-template-columns: minmax(0,1fr) 20px; align-items: center; gap: 12px; min-height: 56px; padding: 16px 0; color: var(--text); font: inherit; font-weight: 400; text-align: start; }
#profileForm .ui-more > summary::after { content: none; }
#profileForm .ui-more[open] > summary { padding-bottom: 16px; }
#profileForm .ui-more[open] > summary .ui-icon { transform: rotate(-90deg); }
#profilePanel .my-preferences { position: relative; }
#profilePanel .my-preferences > .my-detail-content { padding-bottom: 0; }
#profilePanel .my-preferences[open]:has(> #profileSave:not([hidden])) > summary { padding-right: 112px; }
#profilePanel .my-preferences[open]:has(> #profileSave:not([hidden])) > summary .ui-icon { visibility: hidden; }
#profileSave { position: absolute; top: 6px; right: 12px; min-width: 76px; min-height: 44px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--accent); font: inherit; font-weight: 500; }
#profileSave:disabled { opacity: 1; color: var(--muted); }
#profilePanel > .status-line { margin: 16px 0 0; font-size: .875rem; line-height: 1.5; }
#profilePanel > .mobile-profile-logout { display: block; width: 100%; min-height: 48px; margin: 24px 0 0; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--surface); color: var(--danger); font-size: 1rem; font-weight: 400; }
.app-filing { margin: 20px 0 0; text-align: center; font-size: .75rem; line-height: 1.5; }
.app-filing a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--muted); text-decoration: none; }
html.large-text .pearl-my-account { grid-template-columns: minmax(0,1fr) 20px; }

html.large-text .pearl-my-account > span:first-child { grid-column: 1; }
html.large-text .pearl-my-account > .ui-icon { grid-column: 2; grid-row: 1 / span 2; }
html.large-text #profileForm .field:has(> label) { grid-template-columns: minmax(0,1fr); gap: 6px; padding-block: 12px; }
html.large-text #profilePanel #profileForm { grid-template-columns: minmax(0,1fr); }
@media (min-width: 901px) { #profilePanel { max-width: 640px; margin-inline: auto; } }

/* Recurring task rules stay separate from the compact task form. */
.pearl-repeat-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:12px 0; background:transparent; color:inherit; border:0; border-radius:0; text-align:left; }
.pearl-repeat-row > span:nth-child(2) { margin-left:auto; min-width:0; overflow-wrap:anywhere; color:var(--muted); }
.pearl-repeat-weekdays { display:flex; flex-wrap:wrap; gap:8px; border:0; margin:0; padding:12px 0; }
.pearl-repeat-weekdays legend { font-weight:600; }
.pearl-repeat-weekdays label { display:flex; align-items:center; gap:5px; min-width:74px; min-height:44px; }
.pearl-repeat-weekdays input { width:20px; height:20px; }
.manual-plan-fields .pearl-checkbox-row { display:flex; align-items:center; gap:12px; min-height:44px; font-size:.95rem; line-height:1.45; }
.manual-plan-fields .pearl-checkbox-row input[type="checkbox"] { flex:0 0 20px; width:20px; height:20px; min-height:20px; margin:0; padding:0; accent-color:var(--accent); }
.pearl-checkbox-row span { flex:1; min-width:0; }
.recurrence-preview-dates { list-style:none; padding:0; margin:20px 0; }
.recurrence-preview-dates li { display:flex; flex-direction:column; gap:8px; padding:16px 0; border-bottom:1px solid var(--line); }
.recurrence-preview-dates li strong, .recurrence-preview-dates li span { min-width:0; overflow-wrap:anywhere; }
.recurrence-preview-dates li span { font-size:.9rem; line-height:1.5; }
.pearl-repeat-preview { list-style:none; padding:0; margin:20px 0; }
.pearl-repeat-preview li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:16px 0; border-bottom:1px solid var(--line); }
.pearl-repeat-preview li strong { flex:1 1 100%; min-width:0; overflow-wrap:anywhere; font-size:.9rem; }
#quickRecurrencePreviewBody p { overflow-wrap:anywhere; }
#quickRecurrenceRules > button, #quickRecurrencePreview > button { min-height:52px; margin:12px 0; width:100%; white-space:normal; }

.standalone-plan-card .standalone-category { color: var(--calendar-ink); }
.standalone-plan-card { border-inline-start: 4px solid var(--swatch, var(--border)); }
.standalone-plan-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 13px; }
.standalone-plan-card .mobile-plan-open { width: 100%; text-align: start; }

/* Shared control and sheet contracts. Data writes retain their existing handlers. */
button.ui-primary, .mobile-start-button, #quickTodoSubmit, #todoEditorSubmit,
#manualPlanSubmit, #pearlSheetSave, .mobile-review-submit {
  background: var(--text); color: var(--bg); border: 1px solid var(--text);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  min-height: 48px;
}
button.ui-primary:hover:not(:disabled), .mobile-start-button:hover:not(:disabled),
#manualPlanSubmit:hover:not(:disabled), #pearlSheetSave:hover:not(:disabled) { background: var(--muted); color: var(--bg); border-color: var(--muted); }
button.ui-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: none; min-height: 48px; }
.manual-plan-header > h2 { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; text-align: center; overflow-wrap: anywhere; font-size: 1.05rem; line-height: 1.4; }
.manual-plan-header > button:first-child { grid-column: 1; grid-row: 1; justify-self: start; }
.manual-plan-header > button:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
.manual-plan-header > div { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
.manual-plan-header > div .manual-plan-title { text-align: start; }
.manual-plan-header .manual-plan-close, .manual-plan-header .pearl-cancel {
  width: auto; min-width: 0; padding: 8px 4px; border: 0; border-radius: 10px;
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.manual-plan-header #pearlSheetSave, .manual-plan-header .task-sheet-submit { padding: 8px 12px; min-width: 60px; min-height: 44px; border-radius: 12px; }
.manual-plan-header .sheet-header-spacer { grid-column: 3; }
.manual-field, .manual-plan-fields, .manual-plan-fields > *, .pearl-calendar-form > * { min-inline-size: 0; }
.manual-field input:not([type=checkbox]):not([type=radio]):not([type=color]),
.manual-field select, .manual-field textarea, .pearl-calendar-form input:not([type=checkbox]):not([type=color]),
.pearl-calendar-form select, .pearl-calendar-form textarea {
  display: block; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%;
}
input[type=date], input[type=time], input[type=datetime-local] { -webkit-appearance: none; appearance: none; min-inline-size: 0; }
input::-webkit-date-and-time-value { min-inline-size: 0; inline-size: 100%; text-align: start; }
.pearl-calendar-row > div { min-width: 0; }
.pearl-calendar-row.pearl-series-row { grid-template-columns: minmax(0,1fr) auto; gap: 16px; }
.pearl-series-row strong { display: block; line-height: 1.45; }
.pearl-series-row > button { width: auto; max-width: 7em; min-height: 44px; white-space: normal; }
.pearl-detail-actions { gap: 12px; margin-block: 16px; }
.pearl-detail-actions > button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; }
.pearl-detail-actions > button > .ui-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.pearl-detail-feedback, #pearlSheetBody > button, #captureReportBody > button { display: block; width: 100%; margin-block: 12px; min-height: 44px; }
.pearl-create-options { display: grid; gap: 12px; }
.pearl-create-options > button { width: 100%; }
.pearl-create-options p { margin: 0 0 16px; }
.pearl-custom-color { display: grid; grid-template-columns: minmax(0,1fr) 56px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pearl-custom-color input[type=color] { width: 56px; height: 44px; min-height: 44px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.pearl-icon-button, .mobile-page-action-button, .mobile-avatar { box-shadow: none; border-color: var(--line); }
@media (max-width: 900px) {
  .mobile-tab-view, .calendar-page, #profilePanel { padding-bottom: calc(100px + env(safe-area-inset-bottom)); scroll-margin-bottom: 100px; }
  .mobile-review-heading { min-height: 68px; padding-right: 0; text-align: start; }
  body[data-mobile-view=settings] .mobile-header { display: none; }
  .profile-panel .panel-heading { min-height: 56px; align-items: center; }
  .pearl-calendar-tools { gap: 8px; margin-bottom: 20px; }
  .pearl-calendar-tools > button { min-height: 44px; box-shadow: none; padding: 8px 12px; font-size: .9rem; }
  .pearl-calendar-heading #calendarViewTitle { font-size: 2rem; }
  .calendar-task-check { position: relative; display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .calendar-task-check input { position: absolute; inset: 0; width: 44px; height: 44px; min-height: 44px; opacity: 0; margin: 0; cursor: pointer; }
  .calendar-task-check span { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; pointer-events: none; }
  .calendar-task-check .ui-icon { width: 17px; height: 17px; visibility: hidden; }
  .calendar-task-check input:checked + span { background: var(--muted); border-color: var(--muted); color: var(--surface); }
  .calendar-task-check input:checked + span .ui-icon { visibility: visible; }
  .calendar-task-check input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
  .manual-plan-drawer { min-height: 0; overflow: hidden; }
  .manual-plan-header { flex: 0 0 auto; }
  #pearlSheetBody, .manual-plan-form-body { overscroll-behavior: contain; padding-bottom: max(32px,env(safe-area-inset-bottom)); }
  #pearlSheet[data-sheet-kind=calendars] { height: min(580px,var(--app-visible-height,100dvh)); top: calc(var(--app-visible-top,0px) + max(0px,var(--app-visible-height,100dvh) - 580px)); --sheet-top-gap: max(0px,var(--app-visible-height,100dvh) - 580px); }
}
@media (max-width: 620px) {
  .manual-plan-fields { grid-template-columns: minmax(0,1fr); }
  #quickTodoForm .manual-plan-fields { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 380px) { .manual-plan-header { grid-template-columns: 68px minmax(0,1fr) 68px; padding-inline: 16px; } }
button.ui-danger { color: var(--danger); background: transparent; border: 1px solid var(--danger); box-shadow: none; }
.pearl-series-coverage { border-block: 1px solid var(--line); padding-block: 8px; margin-block: 20px; }
.pearl-series-coverage summary { display: list-item; list-style-position: inside; min-height: 44px; padding-block: 10px; cursor: pointer; }
button.scope-choice { display: flex; align-items: start; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; text-align: start; }
.scope-choice small { color: var(--muted); font-size: .85rem; line-height: 1.5; font-weight: 400; }

.plan-drawer .chat-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.plan-drawer .chat-actions > button { min-height: 48px; margin: 0; }
.plan-drawer .drawer-title, .pearl-detail-facts dd { overflow-wrap: anywhere; }
@media (max-width: 620px) { .plan-drawer .chat-actions { grid-template-columns: minmax(0,1fr); } }

@media (max-width: 900px) {
  #pearlSheet[data-sheet-kind=create-options] { --sheet-top-gap: max(0px,var(--app-visible-height,100dvh) - 360px); top: calc(var(--app-visible-top,0px) + var(--sheet-top-gap)); height: min(360px,var(--app-visible-height,100dvh)); }
}

/* Secondary explanations share one quiet, keyboard-operable More disclosure. */
.ui-more { margin-top: 16px; color: var(--muted); }
.ui-more > summary { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; padding: 10px 0; list-style: none; color: var(--muted); font-size: .875rem; line-height: 1.5; font-weight: 500; cursor: pointer; }
.ui-more > summary::-webkit-details-marker { display: none; }
.ui-more > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); flex: 0 0 6px; margin: -4px 3px 0 0; }
.ui-more[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.ui-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.ui-more-content { padding-top: 12px; font-size: .875rem; line-height: 1.55; }
.ui-more-content > h3 { margin: 20px 0 8px; font-size: .9375rem; font-weight: 600; color: var(--text); }
.ui-more-content > h3:first-child { margin-top: 0; }
.ui-more-content > p { margin: 0 0 12px; }
.manual-plan-form .field-hint:empty { display: none; }
@media (max-width: 900px) { .mobile-page-heading h1, .mobile-review-heading h1, .pearl-calendar-heading #calendarViewTitle { font-size: 1.75rem; } }

.mobile-plan-status-copy { font-size: .9375rem; }
.mobile-plan-facts { font-size: .9375rem; }
.mobile-plan-card-topline:has(> :only-child:empty) { display: none; }
.pearl-plan-filter select { font-size: .9375rem; }
@media(max-width:900px) {
 .mobile-header, body[data-mobile-view=today] .mobile-header { position: relative; inset: auto; z-index: auto; margin: 0; min-height: 46px; }
 .mobile-page-heading { padding-right: 56px; }
 .mobile-page-heading > .mobile-page-action-button { right: 0; }
 .mobile-today-view > .mobile-page-heading { padding-right: 56px; }
}


#calendarView .calendar-week-card.calendar-week-empty { min-height: 64px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.calendar-week-event { white-space: normal; overflow-wrap: anywhere; }
.standalone-series-group > summary .series-expand { display: inline; margin: 0; }
.standalone-series-group[open] > summary .series-expand { display: none; }

.my-notification-entry[hidden] { display: none; }
.operations-panel > summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font-size: 1rem; font-weight: 600; }

/* Keep sheet actions readable at accessibility sizes without shrinking the text. */
html.large-text .manual-plan-header { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
html.large-text .manual-plan-header > h2,
html.large-text .manual-plan-header > div { grid-column: 1 / -1; grid-row: 2; text-align: start; }
html.large-text .manual-plan-header > button:last-child,
html.large-text .manual-plan-header > .sheet-header-spacer { grid-column: 2; grid-row: 1; }
html.large-text .manual-plan-header > button { height: auto; min-height: 44px; white-space: nowrap; line-height: 1.4; }
.pearl-calendar-form > label { font-size: .95rem; line-height: 1.4; }
.pearl-calendar-form > p { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
html.large-text .mobile-page-heading { flex-wrap: wrap; padding-inline-end: 0; }
html.large-text .mobile-page-heading > div { flex: 1 1 100%; min-width: 0; }
html.large-text .mobile-page-heading > .mobile-page-action-button { position: static; }
html.large-text .mobile-todo-row,
html.large-text .mobile-todo-row.has-time,
html.large-text .mobile-todo-row.done,
html.large-text .mobile-todo-row.has-time.done { grid-template-columns: minmax(0,1fr) 44px; grid-template-areas: "check more" "content content"; }
html.large-text .mobile-todo-row .mobile-task-open { grid-template-columns: minmax(0,1fr); }
html.large-text .mobile-todo-row .mobile-task-open strong { display: block; min-width: 0; overflow: visible; -webkit-line-clamp: unset; overflow-wrap: anywhere; word-break: break-word; }
html.large-text .mobile-task-open small { overflow-wrap: anywhere; }

/* Account entry and startup share a quiet, stable layout. */
body [hidden] { display: none !important; }
.auth-restore { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; background: var(--bg); }
.auth-restore-brand { font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -.035em; }
.auth-restore p { max-width: 24em; margin: 16px 0; color: var(--muted); font-size: .9375rem; }
.auth-restore button { margin-top: 8px; padding: 10px 20px; }
body.auth-pending .login-view { display: none !important; }
.my-entry { justify-self: end; align-self: center; min-width: 60px; min-height: 44px; padding: 8px 4px 8px 16px; background: transparent; border: 0; box-shadow: none; font-size: 1rem; font-weight: 500; color: var(--text); }
body.capture-enabled .mobile-review-heading { grid-template-columns: minmax(0,1fr) auto; }
body.capture-enabled #mobileReviewRange { display: none; }
#profileForm .timezone-choose { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-weight: 400; text-align: right; box-shadow: none; min-width: 0; }
.timezone-choose span { min-width: 0; overflow-wrap: anywhere; }
.timezone-choose .ui-icon { width: 16px; height: 16px; flex-basis: 16px; color: var(--muted); }
.timezone-dialog { position: fixed; inset: 0; margin: auto; width: min(520px,calc(100% - 32px)); max-height: calc(var(--app-visible-height,100dvh) - 64px); padding: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); color: var(--text); overflow: hidden; }
.timezone-dialog[open] { display: flex; flex-direction: column; }
.timezone-dialog::backdrop { background: #20242a55; }
.editor-header { display: grid; grid-template-columns: 64px minmax(0,1fr) 64px; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.editor-header h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; text-align: center; }
.editor-header > button { min-height: 44px; padding: 8px 0; border: 0; border-radius: 10px; background: transparent; color: var(--text); box-shadow: none; font: inherit; font-size: 1.0625rem; font-weight: 500; }
.editor-header h2:focus { outline: none; }
.editor-header > button:first-child { justify-self: start; }
.editor-header > button:last-child { justify-self: end; color: var(--accent); }
.editor-header > button:disabled { color: var(--muted); opacity: .45; cursor: default; }
.timezone-controls { display: grid; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.timezone-controls label { font-size: .8125rem; color: var(--muted); }
.timezone-controls select, .timezone-controls input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--text); }
.timezone-cities { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px max(12px,env(safe-area-inset-bottom)); }
.timezone-city { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 0; min-height: 60px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; color: var(--text); font: inherit; text-align: left; }
.timezone-city small { display: block; margin-top: 3px; font-size: .8125rem; color: var(--muted); }
.timezone-city[aria-pressed=true] { color: var(--accent); }
.timezone-empty { padding: 16px 20px; color: var(--muted); font-size: .9375rem; }
@media(prefers-color-scheme:dark) { :root { --settings-surface: #262626; } }

/* Notification preferences use grouped rows; only the floating toolbar is glass. */
#pearlSheet[data-sheet-kind=notification-settings] { background: var(--bg); }
#pearlSheet[data-sheet-kind=notification-settings] .manual-plan-header {
  background: rgba(248,247,245,.88);
  background: color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  backdrop-filter: blur(20px) saturate(1.12);
  border-bottom: 1px solid var(--line);
  z-index: 1;
}
#pearlSheet[data-sheet-kind=notification-settings] .manual-plan-title { font-size: 1.0625rem; font-weight: 600; color: var(--text); }
#pearlSheet[data-sheet-kind=notification-settings] .manual-plan-title:focus { outline: none; }
#pearlSheet[data-sheet-kind=notification-settings] .pearl-cancel {
  grid-column: 3; justify-self: end; padding: 8px 14px; min-width: 60px;
  font: inherit; font-size: 1rem; font-weight: 500; color: var(--text);
  border: 1px solid var(--pearl-glass-line); border-radius: 24px;
  background: var(--pearl-glass); box-shadow: 0 1px 3px #00000008;
}
#pearlSheet[data-sheet-kind=notification-settings] #pearlSheetBody { padding: 24px 20px max(32px,env(safe-area-inset-bottom)); scroll-padding-block: 20px; }
.native-settings { display: grid; gap: 20px; min-width: 0; font-size: 1rem; line-height: 1.5; color: var(--text); }
.native-settings-group { margin: 0; min-width: 0; border: 0; border-radius: 18px; background: var(--settings-surface,var(--surface-soft)); overflow: hidden; }
.native-settings .native-settings-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 56px; margin: 0; padding: 12px 16px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--text); font: inherit; font-weight: 400; text-align: start; text-decoration: none;
}
.native-settings-row + .native-settings-row::after { content: ''; position: absolute; top: 0; right: 16px; left: 16px; height: 1px; background: var(--line); opacity: .65; }
.native-settings-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.native-settings-value { color: var(--muted); font-size: .9375rem; flex-shrink: 0; }
.native-settings-row select { min-width: 0; width: auto; max-width: 54%; min-height: 44px; margin: -6px -4px -6px 0; padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-weight: 400; text-align: right; }
.native-settings .native-settings-action { cursor: pointer; }
.native-settings .native-settings-action:hover:not(:disabled) { background: var(--surface-soft); }
.native-settings .native-settings-action:active:not(:disabled) { background: var(--line); transform: none; }
.native-settings .pearl-switch-label input { flex: 0 0 50px; margin: 0; }
.native-settings .native-settings-more { margin-top: 0; color: var(--text); }
.native-settings-more > summary {
  justify-content: space-between; min-height: 56px; padding: 12px 16px;
  color: var(--text); font: inherit; font-weight: 400; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.native-settings-more[open] > summary { border-bottom: 1px solid var(--line); }
.native-settings-notes { padding: 4px 16px 16px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.native-settings-notes p { margin: 8px 0 0; }
.native-settings-status { margin: -4px 4px 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.native-settings-status:empty { display: none; }
@media (prefers-color-scheme:dark) {
  #pearlSheet[data-sheet-kind=notification-settings] .manual-plan-header { background: rgba(22,23,25,.9); background: color-mix(in srgb,var(--bg) 86%,transparent); }
}
@media (prefers-reduced-transparency:reduce) {
  #pearlSheet[data-sheet-kind=notification-settings] .manual-plan-header,
  #pearlSheet[data-sheet-kind=notification-settings] .pearl-cancel { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Every navigation return uses one material, hit target and chevron.
   Keep each control's existing text/aria name and click behavior. */
:root :is(button,a).navigation-back {
  --navigation-back-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.5 3.5-8.5 8.5 8.5 8.5' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: inline-grid; place-items: center; box-sizing: border-box;
  width: 48px; min-width: 48px; max-width: 48px; height: 48px; min-height: 48px; max-height: 48px;
  flex: 0 0 48px; margin: 0; padding: 0; border: 1px solid var(--pearl-glass-line); border-radius: 50%;
  background: var(--pearl-glass); box-shadow: var(--pearl-glass-shadow); color: var(--text);
  font-size: 0; line-height: 0; text-decoration: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  -webkit-tap-highlight-color: transparent; pointer-events: auto;
}
:root :is(button,a).navigation-back::before {
  content: ''; display: block; width: 26px; height: 26px; background: currentColor;
  -webkit-mask: var(--navigation-back-icon) center / contain no-repeat;
  mask: var(--navigation-back-icon) center / contain no-repeat;
}
:root :is(button,a).navigation-back > svg { display: none; }
:root :is(button,a).navigation-back:hover:not(:disabled) { background: var(--pearl-glass); color: var(--text); border-color: var(--pearl-glass-line); }
:root :is(button,a).navigation-back:active { box-shadow: inset 0 1px 4px rgba(0,0,0,.1); }
:root :is(button,a).navigation-back:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 50%; }
@media (min-width:901px) { :root button.assistant-workspace-back.navigation-back { display: none; } }
@media (prefers-reduced-transparency:reduce) {
  :root :is(button,a).navigation-back { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}