:root {
  color-scheme: light;
  --bg: #f5f6f2;
  --surface: #ffffff;
  --surface-soft: #f8f9f6;
  --surface-muted: #f0f2ed;
  --ink: #20231f;
  --ink-soft: #555b54;
  --ink-faint: #686e67;
  --line: #dfe3dc;
  --line-strong: #cfd5cc;
  --green: #416b55;
  --green-strong: #315642;
  --green-soft: #e8f0ea;
  --green-pale: #f1f6f2;
  --progress-0: #eee9e2;
  --progress-1: #cfe0d2;
  --progress-2: #b5cdbb;
  --progress-3: #94b29b;
  --progress-4: #6c9176;
  --progress-5: #416b55;
  --completion-track: #e3e7e1;
  --amber: #8b6531;
  --amber-soft: #f6eee0;
  --stage-gold: #b58a3c;
  --stage-gold-strong: #76581f;
  --stage-gold-soft: #f6f0e3;
  --stage-gold-line: #d9c18f;
  --danger: #a34740;
  --danger-soft: #faecea;
  --shadow-sm: 0 1px 2px rgba(30, 38, 31, 0.04);
  --shadow-md: 0 18px 50px rgba(37, 45, 38, 0.08);
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --content: 1160px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #20211f;
  --surface: #292a27;
  --surface-soft: #252623;
  --surface-muted: #30312e;
  --ink: #f0f0eb;
  --ink-soft: #b8bab3;
  --ink-faint: #989b94;
  --line: #3d3f3a;
  --line-strong: #50534c;
  --green: #7fa88a;
  --green-strong: #a8cab0;
  --green-soft: #2e3c32;
  --green-pale: #273229;
  --progress-0: #35322d;
  --progress-1: #344237;
  --progress-2: #3f5544;
  --progress-3: #526e59;
  --progress-4: #668c71;
  --progress-5: #7ba586;
  --completion-track: #42443f;
  --amber: #d3ad70;
  --amber-soft: #3b3123;
  --stage-gold: #c79c56;
  --stage-gold-strong: #e0bd79;
  --stage-gold-soft: #373022;
  --stage-gold-line: #62543a;
  --danger: #e3948d;
  --danger-soft: #3d2927;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.32);
}

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

html {
  min-width: 280px;
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
summary {
  cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(1.85rem, 3vw, 2.55rem);
}

h2 {
  font-size: 1.15rem;
}

h3 {
  font-size: 0.95rem;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid rgba(65, 107, 85, 0.28);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.muted {
  color: var(--ink-soft);
}

.eyebrow,
.card-kicker {
  margin-bottom: 6px;
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #aec1b2;
  border-radius: 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: none;
}

.brand-mark-large {
  width: 48px;
  height: 48px;
  margin-bottom: 25px;
  border-radius: 14px;
  font-size: 1.35rem;
}

.boot-view {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--ink-faint);
}

.boot-view p {
  margin: 0;
  font-size: 0.9rem;
}

.boot-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--surface);
  color: var(--green);
  font-family: Georgia, serif;
  font-weight: 700;
  animation: boot-pulse 1.5s ease-in-out infinite;
}

@keyframes boot-pulse {
  50% { opacity: 0.58; transform: scale(0.97); }
}

/* Authentication */
.auth-layout {
  width: min(100% - 40px, 950px);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  align-items: center;
  gap: clamp(56px, 9vw, 120px);
  padding: 50px 0;
}

.auth-intro {
  max-width: 430px;
}

.auth-intro h1 {
  max-width: 390px;
  margin-bottom: 18px;
}

.auth-intro-copy {
  max-width: 410px;
  margin-bottom: 28px;
  color: var(--ink-soft);
  font-size: 1rem;
}

.auth-points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--ink-soft);
  list-style: none;
}

.auth-points li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-points span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
}

.auth-trust-note {
  max-width: 390px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.84rem;
}

.auth-card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 12px 36px rgba(37, 45, 38, 0.06);
}

.auth-card-header {
  margin-bottom: 21px;
}

.auth-card-header h2 {
  margin-bottom: 7px;
  font-size: 1.45rem;
}

.auth-card-header p {
  margin-bottom: 0;
}

.mobile-brand {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
}

.auth-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 21px;
  padding: 3px;
  border: 1px solid #e7e9e4;
  border-radius: 10px;
  background: var(--surface-muted);
}

.auth-tab {
  flex: 1 1 0;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.auth-tab:not([aria-selected="true"]):hover {
  background: rgba(255, 255, 255, 0.52);
  color: var(--ink);
}

.auth-tab.is-active,
.auth-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.auth-tabs.is-single {
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.auth-tabs.is-single .auth-tab {
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.registration-kind {
  min-width: 0;
  margin: 0;
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border: 1px solid #e7e9e4;
  border-radius: 11px;
  background: var(--surface-muted);
}

.registration-kind-option {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-faint);
  cursor: pointer;
}

.registration-kind-option input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  min-height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.registration-kind-option span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.registration-kind-option strong {
  color: inherit;
  font-size: 0.8rem;
  line-height: 1.3;
}

.registration-kind-option small {
  overflow: hidden;
  font-size: 0.67rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registration-kind-option.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.registration-kind-option:has(input:focus-visible) {
  outline: 3px solid rgba(65, 107, 85, 0.28);
  outline-offset: 2px;
}

.registration-fields {
  display: grid;
  gap: 18px;
}

#register-viewer-code,
#register-manager-invite,
#connect-space-code,
#refresh-viewer-code-confirmation {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
}

.form-stack,
.dialog-form {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field label,
.counter-field label {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 650;
}

.field-label-row,
.field-help-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.field input,
.field textarea,
.password-field input,
.stepper input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 38px 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field input,
.password-field input {
  height: 44px;
  padding: 0 13px;
}

.field textarea {
  padding: 11px 13px;
  line-height: 1.6;
  resize: vertical;
}

.field input:hover,
.field textarea:hover,
.password-field input:hover,
.stepper input:hover {
  border-color: #b9c0b7;
}

.field select:hover {
  border-color: #b9c0b7;
}

.field input:focus,
.field textarea:focus,
.password-field input:focus,
.stepper input:focus {
  border-color: var(--green);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(65, 107, 85, 0.12);
}

.field select:focus {
  border-color: var(--green);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(65, 107, 85, 0.12);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.password-field {
  position: relative;
  min-width: 0;
}

.password-field input {
  padding-right: 58px;
}

.input-action {
  position: absolute;
  top: 50%;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 32px;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.76rem;
  line-height: 1;
  transform: translateY(-50%);
  touch-action: manipulation;
}

.input-action:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.password-field:focus-within .input-action {
  color: var(--green-strong);
}

.field-help,
.auth-footnote,
.data-footnote {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.75rem;
  line-height: 1.5;
}

.field-help-end {
  text-align: right;
}

.auth-footnote {
  margin: 22px 0 0;
  text-align: center;
}

.form-message,
.page-message {
  padding: 10px 12px;
  border: 1px solid #ecd0cc;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: #823932;
  font-size: 0.83rem;
}

.form-message.is-success,
.page-message.is-success {
  border-color: #c9dccc;
  background: var(--green-pale);
  color: var(--green-strong);
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #d7e2d8;
  border-radius: var(--radius-sm);
  background: var(--green-pale);
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.notice p {
  margin: 0;
}

.notice strong {
  color: var(--ink);
}

.notice-icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
}

.notice-warning {
  border-color: #ead7b5;
  background: var(--amber-soft);
}

.notice-warning .notice-icon {
  background: #ead7b5;
  color: #6d4d26;
}

.notice-danger {
  border-color: #e6c8c3;
  background: var(--danger-soft);
}

.notice-danger .notice-icon {
  background: #e7c7c2;
  color: var(--danger);
}

/* Buttons */
.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button-primary {
  border-color: var(--green-strong);
  background: var(--green-strong);
  color: #fff;
  box-shadow: 0 1px 2px rgba(27, 56, 38, 0.15);
}

.button-primary:hover:not(:disabled) {
  border-color: #294b38;
  background: #294b38;
}

.button-secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.button-secondary:hover:not(:disabled),
.button-quiet:hover:not(:disabled) {
  border-color: #bdc6bb;
  background: var(--surface-muted);
}

.button-quiet {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink-soft);
}

.button-stage {
  border-color: var(--stage-gold-strong);
  background: var(--stage-gold-strong);
  color: #fff;
  box-shadow: 0 1px 2px rgba(90, 65, 22, 0.14);
}

.button-stage:hover:not(:disabled) {
  border-color: #654917;
  background: #654917;
}

.button-danger,
.button-danger-quiet:hover {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.button-danger-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--danger);
}

.button-block {
  width: 100%;
}

.button-small {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 0.78rem;
}

.text-button,
.icon-text-button {
  min-height: 34px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 650;
}

.text-button:hover,
.icon-text-button:hover {
  background: var(--green-pale);
}

.icon-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.25rem;
}

.icon-button:hover {
  border-color: var(--line);
  background: var(--surface-soft);
}

/* App header */
.app-view {
  min-height: 100vh;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(207, 213, 204, 0.82);
  background: rgba(250, 251, 248, 0.87);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header-inner {
  width: min(100% - 40px, var(--content));
  min-height: 66px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}

.site-brand-copy {
  display: grid;
  line-height: 1.25;
}

.site-brand-copy strong {
  font-size: 0.93rem;
  letter-spacing: -0.01em;
}

.site-brand-copy span {
  color: var(--ink-faint);
  font-size: 0.7rem;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.view-switcher {
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 9px;
  background: var(--surface-muted);
}

.view-switch {
  min-height: 32px;
  padding: 5px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.76rem;
  font-weight: 650;
}

.view-switch.is-active,
.view-switch[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.role-badge,
.private-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-soft);
  color: var(--ink-faint);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.role-badge.is-owner {
  border-color: #c9d8cb;
  background: var(--green-pale);
  color: var(--green);
}

.account-menu {
  position: relative;
}

.account-menu > summary {
  list-style: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-trigger {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.account-trigger:hover,
.account-menu[open] .account-trigger {
  border-color: var(--line);
  background: var(--surface);
}

.account-avatar {
  display: inline-grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #e3ebe4;
  color: var(--green-strong);
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
}

.account-email-short {
  max-width: 142px;
  overflow: hidden;
  font-size: 0.77rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.account-menu-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  width: min(285px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(30, 36, 31, 0.13);
}

.account-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px;
}

.account-summary p {
  min-width: 0;
  margin: 0;
  display: grid;
}

.account-summary strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary span {
  color: var(--ink-faint);
  font-size: 0.7rem;
}

.account-avatar-large {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.menu-separator {
  height: 1px;
  margin: 4px 0;
  background: var(--line);
}

.menu-button {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-align: left;
}

.menu-button:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.menu-button-danger {
  color: var(--danger);
}

.workspace-menu {
  position: relative;
  min-width: 0;
}

.workspace-menu > summary {
  list-style: none;
}

.workspace-menu > summary::-webkit-details-marker {
  display: none;
}

.workspace-trigger {
  max-width: 190px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.workspace-trigger:hover,
.workspace-menu[open] .workspace-trigger {
  border-color: var(--line);
  background: var(--surface);
}

.workspace-mark,
.workspace-option-mark {
  display: inline-grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #ced9cf;
  border-radius: 9px;
  background: var(--green-pale);
  color: var(--green-strong);
  font-size: 0.72rem;
  font-weight: 760;
  text-transform: uppercase;
}

.workspace-trigger-copy {
  min-width: 0;
  display: grid;
  line-height: 1.2;
}

.workspace-trigger-copy strong,
.workspace-trigger-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-trigger-copy strong {
  font-size: 0.75rem;
  font-weight: 680;
}

.workspace-trigger-copy small {
  color: var(--ink-faint);
  font-size: 0.64rem;
}

.workspace-menu-panel {
  position: absolute;
  z-index: 65;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, calc(100vw - 28px));
  max-height: min(520px, calc(100dvh - 92px));
  padding: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(30, 36, 31, 0.13);
}

.workspace-menu-heading {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 7px 8px;
}

.workspace-menu-heading p {
  min-width: 0;
  margin: 0;
  display: grid;
  line-height: 1.3;
}

.workspace-menu-heading strong {
  font-size: 0.8rem;
}

.workspace-menu-heading span {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.workspace-add-button {
  flex: 0 0 auto;
}

.workspace-list {
  display: grid;
  gap: 3px;
}

.workspace-list-empty {
  margin: 0;
  padding: 16px 9px;
  color: var(--ink-faint);
  font-size: 0.76rem;
  text-align: center;
}

.workspace-option-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 2px;
}

.workspace-option {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
}

.workspace-option:hover,
.workspace-option.is-current {
  background: var(--surface-muted);
  color: var(--ink);
}

.workspace-option > span:nth-child(2) {
  min-width: 0;
  display: grid;
  line-height: 1.3;
}

.workspace-option strong,
.workspace-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-option strong {
  font-size: 0.78rem;
}

.workspace-option small {
  color: var(--ink-faint);
  font-size: 0.67rem;
}

.workspace-option-indicator {
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.workspace-option-disconnect {
  min-width: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.67rem;
  white-space: nowrap;
}

.workspace-option-disconnect:hover,
.workspace-option-disconnect:focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

.workspace-option-disconnect:disabled {
  opacity: 0.55;
}

.workspace-option.is-revoked .workspace-option-mark {
  border-color: #ead2cf;
  background: var(--danger-soft);
  color: var(--danger);
}

.workspace-option.is-revoked small {
  color: var(--danger);
}

.workspace-option.is-blocked .workspace-option-mark {
  border-color: #dfcca8;
  background: var(--amber-soft);
  color: var(--amber);
}

.workspace-option.is-blocked small {
  color: var(--amber);
}

.workspace-option-platform .workspace-option-mark {
  border-color: #d5c49f;
  background: var(--stage-gold-soft);
  color: var(--stage-gold-strong);
}

.workspace-connect-button {
  margin-top: 4px;
  text-align: center;
}

.workspace-view-actions-mobile {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: 6px 0 3px;
  padding: 3px;
  border-radius: 9px;
  background: var(--surface-muted);
}

.preview-banner {
  border-bottom: 1px solid #d8e2d9;
  background: var(--green-pale);
}

.preview-banner-inner {
  width: min(100% - 40px, var(--content));
  min-height: 51px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.preview-banner p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.79rem;
}

.preview-banner strong {
  color: var(--green-strong);
}

/* Dashboard */
.dashboard-main {
  width: min(100% - 40px, var(--content));
  min-height: calc(100vh - 150px);
  margin: 0 auto;
  padding: 42px 0 56px;
}

.page-message {
  margin-bottom: 18px;
}

.page-heading,
.visitor-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}

.page-heading h1,
.visitor-heading h1 {
  margin-bottom: 8px;
}

.page-heading-copy,
.visitor-heading > div > p:last-child {
  margin: 0;
  color: var(--ink-soft);
}

.streak-card {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  font-size: 0.78rem;
  white-space: nowrap;
}

.streak-card strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.streak-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-soft);
}

.owner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(290px, 0.78fr);
  align-items: start;
  gap: 20px;
}

.owner-primary-column,
.owner-side-column,
.visitor-layout {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.owner-side-column {
  position: static;
}

/* Long-term direction */
.goal-banner,
.goal-route-drawer {
  --goal-accent: #718ca5;
  --goal-accent-strong: #3f5f7b;
  --goal-soft: #edf3f7;
  --goal-soft-strong: #dce8f0;
  --goal-line: #bfd0dd;
}

[data-goal-color="sage"] { --goal-accent: #78927b; --goal-accent-strong: #46694c; --goal-soft: #eef4ee; --goal-soft-strong: #dfeade; --goal-line: #c3d4c2; }
[data-goal-color="gold"] { --goal-accent: #b58a3c; --goal-accent-strong: #76581f; --goal-soft: #f7f1e5; --goal-soft-strong: #eee1c5; --goal-line: #d9c18f; }
[data-goal-color="violet"] { --goal-accent: #8d82a8; --goal-accent-strong: #5d5278; --goal-soft: #f2eff7; --goal-soft-strong: #e4dfee; --goal-line: #cbc2dc; }
[data-goal-color="clay"] { --goal-accent: #a97867; --goal-accent-strong: #744a3c; --goal-soft: #f7efec; --goal-soft-strong: #ebddd7; --goal-line: #d8bdb3; }
[data-goal-color="slate"] { --goal-accent: #7c878d; --goal-accent-strong: #4e5a60; --goal-soft: #f0f2f3; --goal-soft-strong: #e0e5e7; --goal-line: #c7cfd2; }

.goal-banner {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) 84px;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid var(--goal-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--goal-soft), rgba(255, 255, 255, 0.94) 65%);
  box-shadow: var(--shadow-sm);
}

.goal-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--goal-accent);
}

.goal-banner-main,
.goal-banner-progress { min-width: 0; }
.goal-banner-kicker,
.goal-route-label { margin: 0; color: var(--goal-accent-strong); font-size: 0.66rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.goal-banner h2 { margin: 5px 0 0; color: var(--ink); font-size: clamp(1.08rem, 2vw, 1.36rem); line-height: 1.35; overflow-wrap: anywhere; }
.goal-banner-description { margin: 6px 0 0; display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.6; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.goal-banner-next { width: fit-content; max-width: 100%; margin: 10px 0 0; display: flex; gap: 7px; align-items: baseline; color: var(--ink-soft); font-size: 0.72rem; }
.goal-banner-next span { flex: 0 0 auto; color: var(--goal-accent-strong); font-weight: 700; }
.goal-banner-next strong { min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.goal-banner-actions { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.goal-banner-progress { padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--goal-line) 78%, transparent); border-radius: 12px; background: rgba(255, 255, 255, 0.58); }
.goal-banner-progress-heading,
.goal-route-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink-faint); font-size: 0.68rem; }
.goal-banner-progress-heading strong,
.goal-route-progress strong { color: var(--goal-accent-strong); font-size: 1.08rem; }
.goal-progress-track { height: 7px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: var(--goal-soft-strong); }
.goal-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--goal-accent); transition: width 260ms ease; }
.goal-banner-progress > p { margin: 9px 0 0; color: var(--ink-faint); font-size: 0.67rem; line-height: 1.5; }
.goal-banner-mascot { width: 84px; height: 76px; margin: 0; display: grid; place-items: end center; align-self: end; opacity: 0.82; transition: transform 220ms ease, opacity 220ms ease; }
.goal-banner-mascot img { display: block; width: 78px; max-height: 74px; object-fit: contain; filter: saturate(0.82); }
.goal-banner[data-goal-state="near"] .goal-banner-mascot { transform: translateY(-2px); opacity: 0.94; }
.goal-banner[data-goal-state="complete"] .goal-banner-mascot { transform: translateY(-3px) rotate(-1deg); opacity: 1; }
.goal-banner.is-empty .goal-banner-progress,
.goal-banner.is-empty .goal-banner-mascot { opacity: 0.5; }
.goal-banner-readonly { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }

.stage-subgoal-summary { margin: -2px 0 0; padding: 9px 10px; border-left: 2px solid var(--stage-gold-line); border-radius: 0 8px 8px 0; background: rgba(246, 240, 227, 0.54); color: var(--ink-soft); font-size: 0.7rem; line-height: 1.5; overflow-wrap: anywhere; }

.stage-card {
  position: relative;
  overflow: hidden;
  border-color: var(--stage-gold-line);
  background:
    linear-gradient(145deg, rgba(246, 240, 227, 0.72), rgba(255, 255, 255, 0.92) 54%),
    var(--surface);
}

.stage-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--stage-gold);
  opacity: 0.78;
}

.stage-card-header {
  align-items: center;
}

.stage-status {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--stage-gold-line);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--stage-gold-strong);
  font-size: 0.67rem;
  font-weight: 700;
  white-space: nowrap;
}

.stage-status.is-active {
  background: var(--stage-gold-soft);
}

.stage-active {
  display: grid;
  gap: 13px;
}

.stage-title {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.03rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.stage-description {
  margin: -3px 0 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.79rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.stage-card.is-expanded .stage-title,
.stage-card.is-expanded .stage-description {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.stage-expand-toggle {
  width: fit-content;
  min-height: 34px;
  margin: -5px 0 -3px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--stage-gold-strong);
  font-size: 0.7rem;
  font-weight: 650;
  text-align: left;
}

.stage-meta,
.record-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(217, 193, 143, 0.72);
  border-radius: 9px;
  background: rgba(217, 193, 143, 0.65);
}

.stage-meta div,
.record-dates div {
  min-width: 0;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.72);
}

.stage-meta dt,
.record-dates dt {
  color: var(--ink-faint);
  font-size: 0.63rem;
}

.stage-meta dd,
.record-dates dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.stage-actions {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 8px;
}

.stage-actions .button {
  width: 100%;
}

.stage-empty {
  display: grid;
  gap: 9px;
}

.stage-empty p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

.stage-empty strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.stage-empty-readonly {
  min-height: 92px;
  align-content: center;
}

.last-stage-link {
  width: 100%;
  display: grid;
  gap: 2px;
  margin-top: 15px;
  padding: 11px 0 0;
  border: 0;
  border-top: 1px solid rgba(217, 193, 143, 0.72);
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
}

.last-stage-link:hover strong {
  color: var(--stage-gold-strong);
}

.last-stage-link span,
.last-stage-link small {
  color: var(--ink-faint);
  font-size: 0.65rem;
}

.last-stage-link strong {
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.76rem;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.stage-destination-note,
.record-destination-note {
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(217, 193, 143, 0.6);
  color: var(--ink-faint);
  font-size: 0.68rem;
  line-height: 1.55;
}

.record-destination-note {
  margin-top: -2px;
  border-top-color: var(--line);
}

.record-destination-note.is-stage {
  border-top-color: rgba(217, 193, 143, 0.65);
  color: var(--stage-gold-strong);
}

.card {
  min-width: 0;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.card-header h2,
.card-header p {
  margin-bottom: 0;
}

.card-meta {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.76rem;
}

.task-card-today {
  position: relative;
  overflow: hidden;
  padding: 27px;
  border-color: #d7dfd6;
}

.task-card-today::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--green);
}

.task-card-header .card-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.status-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 0.69rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-pending {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-done {
  background: var(--green-soft);
  color: var(--green-strong);
}

.status-incomplete {
  background: var(--amber-soft);
  color: var(--amber);
}

.task-content {
  min-height: 93px;
  padding: 10px 0 18px;
}

.task-text {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  font-weight: 560;
  line-height: 1.55;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.task-empty-hint {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.proof-summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #d6e2d7;
  border-radius: 11px;
  background: var(--green-pale);
}

.proof-summary.is-incomplete {
  border-color: #dfd1bb;
  background: #faf6ef;
}

.proof-summary.is-incomplete .proof-summary-icon {
  background: #eee4d4;
  color: var(--amber);
}

.proof-summary-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 800;
}

.proof-summary p,
.proof-summary strong {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof-summary strong {
  font-size: 0.8rem;
}

.proof-summary p {
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.tomorrow-card {
  padding-top: 20px;
  padding-bottom: 20px;
  background: rgba(249, 250, 247, 0.95);
}

.tomorrow-card .card-header {
  margin-bottom: 9px;
}

.tomorrow-task-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.history-card h2 {
  margin: 0;
}

.history-header {
  align-items: center;
}

.year-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.year-controls span {
  min-width: 52px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
  text-align: center;
}

.history-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 2px 0 23px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--line);
}

.history-summary p {
  margin: 0;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface-soft);
}

.history-summary strong {
  color: var(--ink);
  font-size: 1.03rem;
  font-variant-numeric: tabular-nums;
}

.history-summary span {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.heatmap-scroll {
  width: 100%;
  overflow-x: auto;
  padding: 3px 1px 8px;
  scrollbar-color: #c8cec5 transparent;
  scrollbar-width: thin;
}

.heatmap-grid {
  min-width: 704px;
  min-height: 106px;
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-auto-columns: 12px;
  grid-auto-flow: column;
  gap: 3px;
  align-content: start;
}

.heatmap-cell {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid #e1e5df;
  border-radius: 3px;
  background: #edf0eb;
}

.heatmap-cell.is-task {
  border-color: #d9ded6;
  background: #e2e6df;
}

.heatmap-cell.is-focus-record:not(.is-task):not(.is-stage-complete) {
  border-color: #bfc6bf;
  background: #d7dcd6;
}

.heatmap-cell.is-recorded.progress-0,
.heatmap-legend i.progress-0 {
  border-color: #d6c8b5;
  background: var(--progress-0);
}

.heatmap-cell.is-recorded.progress-1,
.heatmap-legend i.progress-1 {
  border-color: #cbd4cb;
  background: var(--progress-1);
}

.heatmap-cell.is-recorded.progress-2,
.heatmap-legend i.progress-2 {
  border-color: #b7c7ba;
  background: var(--progress-2);
}

.heatmap-cell.is-recorded.progress-3,
.heatmap-legend i.progress-3 {
  border-color: #93ac99;
  background: var(--progress-3);
}

.heatmap-cell.is-recorded.progress-4,
.heatmap-legend i.progress-4 {
  border-color: #6b8e76;
  background: var(--progress-4);
}

.heatmap-cell.is-recorded.progress-5,
.heatmap-legend i.progress-5,
.heatmap-cell.is-done {
  border-color: #557962;
  background: var(--progress-5);
}

.heatmap-cell.is-incomplete {
  border-color: #9e8056;
  box-shadow: inset 0 0 0 1px rgba(255, 251, 244, 0.5);
}

.heatmap-cell.is-zero-incomplete,
.heatmap-legend i.is-zero-incomplete {
  border-color: var(--danger);
  background:
    radial-gradient(circle at center, var(--danger) 0 2px, transparent 2.5px),
    var(--danger-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.heatmap-cell.has-private-record::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(73, 77, 72, 0.58);
}

.heatmap-cell.is-stage-complete,
.heatmap-cell.is-stage-complete.is-recorded {
  border-color: #9d7731;
  background: var(--stage-gold);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 232, 0.42);
}

.heatmap-cell.is-stage-complete.has-daily-result::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: var(--daily-result-color, var(--green-strong));
}

.heatmap-cell.is-selected {
  outline: 2px solid #5d625d;
  outline-offset: 1px;
}

.heatmap-cell.is-spacer {
  visibility: hidden;
}

.heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px 13px;
  margin-top: 7px;
  color: var(--ink-faint);
  font-size: 0.64rem;
}

.heatmap-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.heatmap-legend i {
  width: 11px;
  height: 11px;
  border: 1px solid #e1e5df;
  border-radius: 3px;
  background: #edf0eb;
}

.heatmap-legend i.is-done {
  border-color: #557962;
  background: var(--progress-5);
}

.heatmap-legend i.is-stage-complete {
  border-color: #9d7731;
  background: var(--stage-gold);
}

.heatmap-legend i.is-focus-record {
  border-color: #bfc6bf;
  background: #d7dcd6;
}

.heatmap-cell.is-supplemented,
.heatmap-legend i.is-supplemented {
  background-image: linear-gradient(135deg, transparent 42%, rgba(70, 78, 71, 0.68) 44%, rgba(70, 78, 71, 0.68) 62%, transparent 64%);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 6px 6px;
}

.heatmap-legend i.is-supplemented {
  border-color: #aeb6ac;
  background-color: #e2e6df;
}

.heatmap-scale-swatches {
  gap: 2px !important;
}

.heatmap-scale-swatches i {
  width: 8px;
  height: 11px;
}

.history-list-section {
  margin-top: 22px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
}

.history-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
}

.history-list-heading h3 {
  margin: 0;
}

.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.history-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 11px 3px;
  border-top: 1px solid var(--line);
}

.history-item:first-child {
  border-top: 0;
}

.history-item.is-zero-incomplete {
  border-radius: 9px;
  background: linear-gradient(90deg, var(--danger-soft), transparent 62%);
}

.history-item.is-zero-incomplete .history-item-date {
  color: var(--danger);
  font-weight: 650;
}

.history-item-date {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.history-item-task {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 0.79rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item.has-focus .history-item-task,
.history-item.is-supplemented .history-item-task {
  display: grid;
  gap: 2px;
  white-space: normal;
}

.history-item-poms,
.history-item-supplement {
  color: var(--ink-faint);
  font-size: 0.68rem;
  font-weight: 560;
  line-height: 1.35;
}

.history-item-poms {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.history-pom-backfill {
  min-width: 20px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface-muted);
  color: var(--ink-soft);
  font-size: 0.62rem;
  font-weight: 720;
  line-height: 1;
}

.history-item-supplement {
  color: #737b72;
}

.history-item-status {
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.history-item-status.has-completion-meter,
.record-result-progress.has-completion-meter {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.history-item-status.has-completion-meter::after,
.record-result-progress.has-completion-meter::after {
  width: 54px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    var(--completion-tone) 0 var(--completion-percent),
    var(--completion-track) var(--completion-percent) 100%
  );
  content: "";
}

.history-item-status.is-pending {
  color: var(--ink-faint);
}

.history-item-status.is-incomplete {
  color: var(--amber);
}

.history-item-status.is-focus {
  color: var(--ink-soft);
}

.history-item-status.is-private {
  color: #756c5c;
}

.history-item-status.is-stage {
  color: var(--stage-gold-strong);
}

.history-item-status.is-combined {
  color: var(--green-strong);
}

.history-item-status.is-combined.is-incomplete {
  color: var(--amber);
}

.history-item-status.is-zero-incomplete,
.history-item-status.is-combined.is-zero-incomplete {
  color: var(--danger);
}

.history-item-status.is-combined::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 2px;
  background: var(--stage-gold);
  vertical-align: 1px;
}

.history-item.has-stage {
  border-top-color: rgba(217, 193, 143, 0.72);
}

.history-item.has-stage .history-item-date::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 2px;
  background: var(--stage-gold);
  vertical-align: 1px;
}

.history-empty {
  padding: 19px 3px 4px;
  color: var(--ink-faint);
  font-size: 0.78rem;
  text-align: center;
}

.private-badge,
.visibility-badge.is-private {
  border-color: #ddd8cc;
  background: #f6f3ec;
  color: #756c5c;
}

.visibility-badge {
  min-height: 22px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.visibility-badge.is-public {
  border-color: #cbd9ce;
  background: var(--green-pale);
  color: var(--green-strong);
}

.focus-form {
  display: grid;
  gap: 11px;
}

.pom-backfill-trigger {
  min-height: 44px;
  flex: 0 0 auto;
}

.focus-section {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.focus-section-public {
  border-color: #d7e0d8;
  background: linear-gradient(145deg, var(--green-pale), var(--surface) 72%);
}

.focus-label-row,
.focus-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.focus-section-heading {
  align-items: flex-start;
  margin-bottom: 9px;
}

.focus-label-row {
  justify-content: flex-start;
}

.focus-section label {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 680;
}

.focus-section p {
  margin: 2px 0 0;
  color: var(--ink-faint);
  font-size: 0.67rem;
  line-height: 1.45;
}

.focus-section textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  font-size: 0.78rem;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.focus-section textarea:hover {
  border-color: #b9c0b7;
}

.focus-section textarea:focus {
  border-color: var(--green);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(65, 107, 85, 0.12);
}

.counter-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.counter-field p {
  margin: 2px 0 0;
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.stepper {
  display: grid;
  grid-template-columns: 34px 44px 34px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
}

.stepper button {
  height: 36px;
  padding: 0;
  border: 0;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 1rem;
}

.stepper button:hover {
  background: var(--surface-muted);
}

.stepper input {
  height: 36px;
  padding: 0 3px;
  border: 0;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0;
  font-weight: 650;
  text-align: center;
  -moz-appearance: textfield;
}

.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.pom-backfill-stepper {
  width: max-content;
  grid-template-columns: 44px 64px 44px;
}

.pom-backfill-stepper button,
.pom-backfill-stepper input {
  height: 44px;
}

.pom-backfill-current {
  min-height: 1.35em;
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.data-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -5px;
  padding: 5px;
  list-style: none;
}

.data-card-summary::-webkit-details-marker {
  display: none;
}

.data-card-summary h2,
.data-card-summary p {
  margin-bottom: 0;
}

.data-summary-action {
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 650;
}

.data-card[open] .data-summary-action {
  font-size: 0;
}

.data-card[open] .data-summary-action::after {
  content: "收起";
  font-size: 0.7rem;
}

.data-tools-body {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.data-tools-body > .muted {
  margin-bottom: 15px;
  font-size: 0.78rem;
}

.data-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.data-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-faint);
}

.data-status.has-data .data-status-dot {
  background: var(--green);
}

.data-actions {
  display: grid;
  gap: 8px;
}

.data-footnote {
  margin-top: 11px;
}

.access-card {
  border-color: #d8e2d9;
  background:
    linear-gradient(145deg, rgba(241, 246, 242, 0.68), rgba(255, 255, 255, 0.96) 58%),
    var(--surface);
}

.danger-zone-card {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.danger-zone-card[open] {
  border-color: #dfc4bf;
}

.danger-zone-card .data-tools-body {
  border-top-color: #eadbd8;
}

.viewer-code-box,
.invite-result {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.viewer-code-box > span,
.invite-result > span {
  color: var(--ink-faint);
  font-size: 0.68rem;
  font-weight: 650;
}

.viewer-code-box code,
.invite-result code,
.confirmation-phrase {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
}

.access-actions {
  grid-template-columns: 1fr 1fr;
  margin-top: 13px;
}

.confirmation-phrase {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid #e3cfab;
  border-radius: 8px;
  background: #fbf6ec;
  color: #684b24;
  font-size: 0.76rem;
  line-height: 1.55;
  user-select: all;
}

.invite-result {
  margin-bottom: 0;
  background: var(--green-pale);
}

/* Visitor */
.visitor-view {
  width: min(100%, 1040px);
  margin: 0 auto;
}

.visitor-layout {
  grid-template-columns: minmax(0, 1.48fr) minmax(245px, 0.72fr);
  align-items: start;
}

#visitor-today-task {
  grid-column: 1;
  grid-row: 1;
}

#visitor-stage-card {
  grid-column: 2;
  grid-row: 1;
}

#visitor-history-section {
  grid-column: 1 / -1;
}

.visitor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  gap: clamp(24px, 6vw, 64px);
}

.visitor-heading-with-mascot {
  grid-template-columns: minmax(0, 1fr) 112px;
}

.visitor-heading:not(.visitor-heading-with-mascot) {
  grid-template-columns: minmax(0, 1fr);
}

.visitor-heading-copy {
  min-width: 0;
}

.visitor-readonly-label {
  margin-left: 0;
  color: var(--green-strong);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: none;
}

.product-tag {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  margin-right: 0;
  padding: 2px 7px;
  border: 1px solid #ced9cf;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-strong);
  font-size: 0.61rem;
  font-weight: 760;
  letter-spacing: 0.025em;
  line-height: 1;
  text-transform: none;
  vertical-align: middle;
}

#visitor-date-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
}

#visitor-record-kicker {
  color: var(--ink-faint);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

#visitor-record-kicker::before {
  content: "·";
  margin-right: 9px;
  color: var(--line-strong);
}

.visitor-mascot {
  width: 112px;
  margin: 0;
  opacity: 0.86;
  transform-origin: 50% 80%;
  animation: mascot-arrive 420ms ease-out both;
}

.visitor-mascot img {
  width: 100%;
  height: 82px;
  object-fit: contain;
}

.visitor-mascot.is-following {
  transform: rotate(-1.5deg);
}

.visitor-mascot.is-resting {
  opacity: 0.72;
  transform: translateY(2px);
}

@keyframes mascot-arrive {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 0.86; transform: translateY(0); }
}

.visitor-heading h1 {
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  overflow-wrap: anywhere;
}

.visitor-heading > div > p:last-child {
  max-width: 760px;
}

.readonly-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.readonly-pill span {
  color: var(--green);
  font-size: 1rem;
}

.visitor-task-card {
  padding: clamp(24px, 4vw, 36px);
  border-color: #d5dfd6;
  background:
    linear-gradient(140deg, rgba(235, 243, 236, 0.64), transparent 55%),
    var(--surface);
}

.visitor-task-card .task-text {
  min-height: 76px;
  padding: 15px 0 6px;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
}

.visitor-focus-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid #d8e0d8;
  border-radius: 10px;
  background: rgba(248, 250, 247, 0.84);
}

.visitor-focus-mark {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid #91a095;
  border-radius: 50%;
}

.visitor-focus-summary p,
.visitor-focus-summary strong,
.visitor-focus-summary span {
  margin: 0;
}

.visitor-focus-summary p {
  display: grid;
  gap: 1px;
}

.visitor-focus-summary strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.4;
}

.visitor-focus-summary p span {
  color: var(--ink-faint);
  font-size: 0.66rem;
}

.visitor-proof {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid #d8e2d9;
}

.visitor-proof > div:first-child {
  display: flex;
  align-items: center;
  gap: 11px;
}

.visitor-proof p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  white-space: pre-wrap;
}

.visitor-proof > p {
  margin: 13px 0;
}

.visitor-proof strong,
.visitor-proof span {
  display: block;
}

.visitor-proof span {
  color: var(--ink-faint);
  font-size: 0.7rem;
}

.proof-check {
  display: grid !important;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green) !important;
  font-size: 0.87rem !important;
  font-weight: 800;
}

.visitor-proof.is-incomplete {
  border-top-color: #dfd1bb;
}

.visitor-proof.is-incomplete .proof-check {
  background: #eee4d4;
  color: var(--amber) !important;
}

.visitor-history-list {
  margin-top: 21px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.site-footer {
  width: min(100% - 40px, var(--content));
  margin: 0 auto;
  padding: 22px 0 30px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.7rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

/* Platform and access states */
.platform-view {
  width: min(100%, 1040px);
  margin: 0 auto;
}

.platform-heading {
  align-items: center;
}

.platform-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 20px;
}

.platform-metric {
  min-width: 0;
  min-height: 94px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
}

.platform-metric span {
  color: var(--ink-faint);
  font-size: 0.73rem;
}

.platform-metric strong {
  font-size: 1.55rem;
  line-height: 1.15;
}

.platform-card {
  padding: 0;
  overflow: visible;
}

.platform-card-header {
  margin: 0;
  padding: 19px 21px 15px;
  border-bottom: 1px solid var(--line);
}

.platform-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: var(--surface-muted);
}

.platform-tab {
  min-height: 32px;
  padding: 5px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.73rem;
  font-weight: 680;
}

.platform-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.platform-panel {
  min-width: 0;
}

.platform-list {
  display: grid;
}

.platform-list-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) minmax(160px, 0.9fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 21px;
  border-bottom: 1px solid var(--line);
}

.platform-list-row:last-child {
  border-bottom: 0;
}

.platform-list-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.platform-list-identity p {
  min-width: 0;
  margin: 0;
  display: grid;
  line-height: 1.4;
}

.platform-list-identity strong,
.platform-list-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-list-identity strong {
  font-size: 0.84rem;
}

.platform-list-identity span,
.platform-list-meta span {
  color: var(--ink-faint);
  font-size: 0.7rem;
}

.platform-list-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.platform-list-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.platform-more-menu {
  position: relative;
}

.platform-more-menu > summary {
  list-style: none;
}

.platform-more-menu > summary::-webkit-details-marker {
  display: none;
}

.platform-more-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  width: 174px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(30, 36, 31, 0.14);
}

.platform-more-panel .menu-button {
  min-height: 36px;
}

.platform-access-panel {
  padding: 21px;
}

.platform-access-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.platform-access-heading h3,
.platform-access-heading p,
.platform-access-section-heading h4 {
  margin-bottom: 0;
}

.platform-access-heading > div > p:last-child {
  max-width: 600px;
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: 0.76rem;
}

.platform-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
}

.platform-access-grid > section {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 249, 246, 0.58);
}

.platform-access-section-heading {
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.platform-access-section-heading h4 {
  font-size: 0.82rem;
}

.platform-access-section-heading span {
  color: var(--ink-faint);
  font-size: 0.66rem;
}

.platform-security-list {
  display: grid;
}

.platform-security-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.platform-security-row:last-child {
  border-bottom: 0;
}

.platform-security-copy {
  min-width: 0;
}

.platform-security-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.platform-security-line code {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-security-copy p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-security-status {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--green-pale);
  color: var(--green-strong);
  font-size: 0.6rem;
  font-weight: 700;
}

.platform-security-status.is-blocked {
  background: var(--danger-soft);
  color: var(--danger);
}

.platform-security-status.is-revoked {
  background: var(--surface-muted);
  color: var(--ink-faint);
}

.platform-user-row {
  grid-template-columns: minmax(190px, 1.25fr) minmax(160px, 0.9fr);
}

.connection-lost-view {
  min-height: min(620px, calc(100vh - 220px));
  display: grid;
  place-items: center;
}

.connection-lost-card {
  width: min(100%, 590px);
  padding: 36px;
  text-align: center;
}

.connection-lost-mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 19px;
  display: grid;
  place-items: center;
  border: 1px solid #e4c9c5;
  border-radius: 14px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 1.15rem;
  font-weight: 760;
}

.connection-lost-mark.is-blocked {
  border-color: #dfcca8;
  background: var(--amber-soft);
  color: var(--amber);
}

.connection-lost-mark.is-deleted {
  border-color: var(--line-strong);
  background: var(--surface-muted);
  color: var(--ink-faint);
}

.connection-lost-card h1 {
  margin-bottom: 12px;
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.connection-lost-card > p:not(.eyebrow) {
  max-width: 470px;
  margin: 0 auto;
  color: var(--ink-soft);
}

.connection-lost-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}

/* Messages */
.message-widget {
  position: fixed;
  z-index: 90;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: end;
  gap: 10px;
}

.message-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid #cbd8cd;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--green-strong);
  box-shadow: 0 10px 30px rgba(30, 38, 32, 0.12);
  font-size: 0.79rem;
  font-weight: 700;
}

.message-toggle:hover,
.message-toggle[aria-expanded="true"] {
  border-color: #afc3b3;
  background: var(--green-pale);
}

.message-toggle-mark {
  width: 9px;
  height: 9px;
  border: 2px solid var(--green);
  border-radius: 50% 50% 50% 2px;
}

.message-unread-count {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--green-strong);
  color: #fff;
  font-size: 0.64rem;
}

.message-panel {
  width: min(370px, calc(100vw - 28px));
  height: min(540px, calc(100dvh - 100px));
  max-height: min(570px, calc(100dvh - 100px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 24px 70px rgba(25, 34, 27, 0.18);
}

.message-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 17px 12px;
}

.message-panel-header h2,
.message-panel-header p {
  margin-bottom: 0;
}

.message-window-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 17px 11px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--surface-muted);
}

.message-window-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-faint);
  box-shadow: 0 0 0 3px rgba(104, 110, 103, 0.12);
}

.message-window-status.is-open {
  background: var(--green-pale);
}

.message-window-status.is-open .message-window-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.message-window-status p {
  min-width: 0;
  margin: 0;
  display: grid;
  line-height: 1.35;
}

.message-window-status strong {
  font-size: 0.73rem;
}

.message-window-status small {
  color: var(--ink-faint);
  font-size: 0.64rem;
}

#message-panel-message {
  margin: 0 17px 11px;
}

.message-conversation-list {
  max-height: 116px;
  padding: 0 12px 9px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.message-conversation-option {
  width: 126px;
  min-width: 126px;
  min-height: 53px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  text-align: left;
}

.message-conversation-option.is-active {
  border-color: #b9cbbb;
  background: var(--green-pale);
  color: var(--ink);
}

.message-conversation-option strong,
.message-conversation-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-conversation-option strong {
  font-size: 0.72rem;
}

.message-conversation-option span {
  color: var(--ink-faint);
  font-size: 0.63rem;
}

.message-thread {
  flex: 1 1 auto;
  min-height: 110px;
  padding: 9px 17px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(248, 249, 246, 0), rgba(248, 249, 246, 0.72));
}

.message-empty {
  margin: auto;
  padding: 18px;
  color: var(--ink-faint);
  font-size: 0.73rem;
  text-align: center;
}

.message-bubble {
  width: fit-content;
  max-width: 86%;
  align-self: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px 11px 11px 3px;
  background: var(--surface);
}

.message-bubble.is-own {
  align-self: flex-end;
  border-color: #cedbd0;
  border-radius: 11px 11px 3px 11px;
  background: var(--green-pale);
}

.message-bubble p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-bubble small {
  display: block;
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 0.6rem;
}

.message-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.message-compose textarea {
  width: 100%;
  min-width: 0;
  max-height: 116px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  font-size: 0.78rem;
  line-height: 1.45;
}

.message-compose .button {
  min-height: 42px;
  padding-right: 12px;
  padding-left: 12px;
}

/* Dialogs */
.goal-route-drawer.dialog {
  width: min(430px, calc(100vw - 28px));
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  overflow: hidden;
  border-width: 0 0 0 1px;
  border-radius: 18px 0 0 18px;
}

.goal-route-shell {
  height: 100%;
  padding: 25px 23px calc(25px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.goal-route-header { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.goal-route-progress { margin-top: 18px; padding: 15px; border: 1px solid var(--goal-line); border-radius: 12px; background: var(--goal-soft); }
.goal-route-progress > p { margin: 8px 0 0; color: var(--ink-faint); font-size: 0.68rem; }
.goal-route-goal { margin-top: 17px; padding: 2px 2px 17px; border-bottom: 1px solid var(--line); }
.goal-route-goal h3 { margin: 6px 0 0; color: var(--ink); font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.goal-route-goal > p:last-child { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.75rem; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.goal-route-stages-section,
.goal-route-current { margin-top: 20px; }
.goal-route-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.goal-route-section-heading h3 { margin: 4px 0 0; color: var(--ink); font-size: 0.9rem; }
.goal-route-section-heading > strong { padding: 4px 8px; border-radius: 999px; background: var(--goal-soft); color: var(--goal-accent-strong); font-size: 0.72rem; }
.goal-route-stages,
.goal-route-subgoals { margin: 13px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.goal-route-stage { position: relative; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.goal-route-stage::before { content: ""; position: absolute; top: -9px; bottom: calc(100% - 1px); left: 27px; width: 1px; background: var(--goal-line); }
.goal-route-stage:first-child::before { display: none; }
.goal-route-stage-marker { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--goal-line); border-radius: 50%; background: var(--goal-soft); color: var(--goal-accent-strong); font-size: 0.64rem; font-weight: 750; }
.goal-route-stage.is-completed .goal-route-stage-marker { background: var(--goal-accent); color: #fff; }
.goal-route-stage > div { min-width: 0; display: grid; gap: 3px; }
.goal-route-stage strong { color: var(--ink); font-size: 0.76rem; line-height: 1.45; overflow-wrap: anywhere; }
.goal-route-stage span:last-child { color: var(--ink-faint); font-size: 0.64rem; line-height: 1.4; }
.goal-route-current { padding-top: 19px; border-top: 1px solid var(--line); }
.goal-route-current-actions { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.goal-route-subgoal { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.subgoal-toggle { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 1px solid var(--goal-line); border-radius: 8px; background: var(--surface); color: #fff; font-size: 0.75rem; }
button.subgoal-toggle:hover { border-color: var(--goal-accent); }
.goal-route-subgoal.is-completed .subgoal-toggle { border-color: var(--goal-accent); background: var(--goal-accent); }
.subgoal-title { min-width: 0; padding: 3px 0; border: 0; background: transparent; color: var(--ink); font-size: 0.72rem; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
button.subgoal-title:hover { color: var(--goal-accent-strong); }
.goal-route-subgoal.is-completed .subgoal-title { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.subgoal-actions { display: flex; gap: 2px; }
.subgoal-actions button { min-width: 34px; padding: 5px 4px; border: 0; background: transparent; color: var(--ink-faint); font-size: 0.6rem; }
.subgoal-actions button:hover:not(:disabled) { color: var(--goal-accent-strong); }
.subgoal-actions button:disabled { opacity: 0.28; }
.goal-route-empty { padding: 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-faint); font-size: 0.7rem; line-height: 1.5; text-align: center; }
.subgoal-form { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.subgoal-form input { min-width: 0; height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.72rem; }
.goal-route-owner-actions { position: sticky; bottom: -25px; z-index: 2; margin: 22px -23px -25px; padding: 14px 23px calc(14px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.96); box-shadow: 0 -10px 20px rgba(255, 255, 255, 0.86); }
.goal-color-field { margin: 0; padding: 0; border: 0; }
.goal-color-field legend { margin-bottom: 9px; color: var(--ink); font-size: 0.78rem; font-weight: 650; }
.goal-color-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.goal-color-options label { min-width: 0; }
.goal-color-options input { position: absolute; opacity: 0; pointer-events: none; }
.goal-color-options span { display: flex; min-height: 39px; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); font-size: 0.69rem; }
.goal-color-options span::before { content: ""; width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; background: var(--swatch, #718ca5); }
.goal-color-options [data-color="sage"] { --swatch: #78927b; }
.goal-color-options [data-color="gold"] { --swatch: #b58a3c; }
.goal-color-options [data-color="violet"] { --swatch: #8d82a8; }
.goal-color-options [data-color="clay"] { --swatch: #a97867; }
.goal-color-options [data-color="slate"] { --swatch: #7c878d; }
.goal-color-options input:checked + span { border-color: var(--ink-soft); background: var(--surface-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.percent-input { display: grid; grid-template-columns: minmax(0, 1fr) 42px; }
.percent-input input { border-radius: 9px 0 0 9px !important; }
.percent-input > span { display: grid; place-items: center; border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0; background: var(--surface-soft); color: var(--ink-faint); font-size: 0.76rem; }

.dialog {
  width: min(560px, calc(100% - 32px));
  max-height: min(820px, calc(100vh - 36px));
  max-height: min(820px, calc(100dvh - 36px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(22, 30, 24, 0.22);
}

.dialog::backdrop {
  background: rgba(28, 33, 29, 0.45);
  backdrop-filter: blur(3px);
}

.dialog-form {
  padding: 25px;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dialog-header h2,
.dialog-header p {
  margin-bottom: 0;
}

.dialog-description {
  margin-top: 5px !important;
  color: var(--ink-faint);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.mascot-dialog-note {
  margin: 18px 0 0;
  padding: 11px 12px;
  border-left: 2px solid var(--green);
  border-radius: 0 9px 9px 0;
  background: var(--green-pale);
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.6;
}

.mascot-options {
  min-width: 0;
  margin: 16px 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  border: 0;
}

.mascot-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.mascot-option-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.mascot-option-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mascot-option:hover .mascot-option-card {
  border-color: var(--line-strong);
}

.mascot-option-input:focus-visible + .mascot-option-card {
  outline: 3px solid rgba(65, 107, 85, 0.28);
  outline-offset: 2px;
}

.mascot-option-input:checked + .mascot-option-card {
  border-color: var(--green);
  background: var(--green-pale);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent);
}

.mascot-option-preview {
  width: 78px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface);
}

.mascot-option-preview img {
  display: block;
  width: 74px;
  height: 70px;
  object-fit: contain;
}

.mascot-option-copy { min-width: 0; display: grid; gap: 3px; }
.mascot-option-copy strong { color: var(--ink); font-size: 0.78rem; line-height: 1.4; }
.mascot-option-copy small { color: var(--ink-faint); font-size: 0.64rem; line-height: 1.45; }

.dialog-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.25rem;
  line-height: 1;
}

.dialog-close:hover {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

#proof-dialog .dialog-actions,
#progress-dialog .dialog-actions,
#proof-view-dialog .dialog-actions {
  position: sticky;
  z-index: 4;
  bottom: 0;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -10px 18px rgba(255, 255, 255, 0.9);
}

#proof-dialog .dialog-form,
#progress-dialog .dialog-form {
  gap: 14px;
}

#progress-dialog .upload-field {
  min-height: 96px;
  padding: 14px;
}

.dialog-danger-action {
  margin-right: auto;
}

.dialog-secondary-action {
  margin-right: auto;
}

.result-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.result-choice legend {
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 650;
}

.result-choice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.result-choice-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.result-choice-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.result-choice-options label > span {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.result-choice-options strong,
.result-choice-options small {
  display: block;
  min-width: 0;
}

.result-choice-options strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.result-choice-options small {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.result-choice-options input:checked + span {
  border-color: #98ad9c;
  background: var(--green-pale);
  box-shadow: inset 0 0 0 1px rgba(65, 107, 85, 0.08);
}

.result-choice-options input[value="incomplete"]:checked + span {
  border-color: #d1bb96;
  background: #faf6ef;
}

.result-choice-options input:focus-visible + span {
  outline: 3px solid rgba(65, 107, 85, 0.18);
  outline-offset: 2px;
}

.result-progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.result-progress-heading output {
  min-width: 48px;
  color: var(--green-strong);
  font-size: 0.82rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.result-progress-field input[type="range"] {
  width: 100%;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--green);
  box-shadow: none;
}

.result-progress-field input[type="range"]:focus {
  box-shadow: none;
}

.result-progress-field.is-locked input[type="range"] {
  opacity: 0.62;
}

.result-progress-scale {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  color: var(--ink-faint);
  font-size: 0.66rem;
}

.result-progress-scale span:nth-child(2) {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-field {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1px dashed #bcc7ba;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.upload-field:hover,
.upload-field.is-dragging {
  border-color: var(--green);
  background: var(--green-pale);
}

.upload-field:focus-within {
  border-color: var(--green);
  outline: 3px solid rgba(65, 107, 85, 0.18);
  outline-offset: 2px;
}

.upload-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.upload-field strong,
.upload-field small {
  display: block;
}

.upload-field strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.upload-field small {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 0.68rem;
  line-height: 1.45;
}

.upload-field .upload-formats {
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.upload-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--green);
  font-size: 1.1rem;
}

.attachment-preview {
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.attachment-thumbnail {
  width: 54px;
  height: 54px;
  border-radius: 7px;
  background: var(--surface-muted);
  object-fit: cover;
}

.attachment-type-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.attachment-copy {
  min-width: 0;
}

.attachment-type {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-faint);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.attachment-name,
.attachment-size {
  margin: 0;
}

.attachment-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 0.67rem;
}

.attachment-remove {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.74rem;
}

.attachment-remove:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.attachment-existing {
  padding-left: 2px;
  overflow-wrap: anywhere;
}

.attachment-queue {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.attachment-queue-item {
  width: 100%;
}

.progress-existing-summary {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.attachment-queue-more {
  order: 2;
}

.record-progress-section {
  min-width: 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.record-progress-heading,
.progress-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-progress-heading-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.record-progress-heading .record-progress-title,
.record-progress-heading .card-kicker {
  margin: 0;
}

.record-progress-heading {
  min-height: 44px;
  padding: 5px 0;
  border-radius: 8px;
  list-style: none;
}

.record-progress-heading::-webkit-details-marker {
  display: none;
}

.record-progress-heading:hover {
  color: var(--green-strong);
}

.record-progress-summary-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.record-progress-toggle {
  min-width: 42px;
  color: var(--green-strong);
  font-size: 0.7rem;
  font-weight: 680;
  text-align: right;
}

.record-progress-toggle::after {
  content: "展开";
}

.record-progress-section[open] .record-progress-toggle::after {
  content: "收起";
}

.record-progress-section[open] .record-progress-list {
  margin-top: 12px;
}

.record-progress-heading .record-progress-title {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.record-progress-list,
.progress-archive-body {
  display: grid;
  gap: 10px;
}

.progress-entry {
  min-width: 0;
  display: grid;
  gap: 11px;
  padding: 13px;
  border-left: 2px solid #c9d5ca;
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.75);
}

.progress-entry.is-latest {
  border-left-color: var(--green);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.progress-entry.is-legacy {
  border-left-color: #c8c6bd;
  background: #faf9f6;
}

.progress-entry.is-supplemental {
  border-left-color: #90998e;
  background: #f7f8f5;
}

.progress-entry.is-supplemental .progress-entry-header time {
  color: #667066;
  font-weight: 650;
}

.progress-entry-header time {
  color: var(--ink-faint);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.progress-entry-percent {
  color: var(--green-strong);
  font-size: 0.72rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.progress-entry-note,
.progress-entry-legacy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.progress-entry-legacy {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.progress-archive,
.progress-assets-more {
  min-width: 0;
}

.progress-archive > summary,
.progress-assets-more > summary {
  width: fit-content;
  color: var(--green-strong);
  font-size: 0.72rem;
  font-weight: 650;
  list-style-position: inside;
}

.progress-archive-body,
.progress-assets-more-body {
  margin-top: 10px;
}

.progress-assets-more {
  grid-column: 1 / -1;
}

.progress-assets-more-body {
  display: grid;
  gap: 8px;
}

.progress-link-list,
.progress-file-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.progress-file-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.progress-link-row,
.progress-file-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.progress-link {
  min-width: 0;
  min-height: 38px;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--green-strong);
  font-size: 0.72rem;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-link:hover {
  border-color: #bcc7ba;
  background: var(--green-pale);
}

.progress-link > span {
  flex: 0 0 auto;
}

.progress-file-row {
  align-items: stretch;
}

.progress-file-card,
.progress-image-link {
  min-width: 0;
  flex: 1 1 auto;
}

.progress-image-link {
  position: relative;
  min-height: 132px;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--ink);
  text-decoration: none;
}

.progress-image-link img {
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.progress-image-link span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 22px 8px 7px;
  overflow: hidden;
  background: linear-gradient(transparent, rgba(21, 25, 22, 0.7));
  color: #fff;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-asset-remove {
  min-width: 42px;
  min-height: 38px;
  flex: 0 0 auto;
  padding: 6px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.progress-asset-remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.proof-view-body {
  display: grid;
  gap: 14px;
}

.record-section {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}

.record-daily-section.is-completed {
  border-color: #cbd9ce;
  background: linear-gradient(145deg, var(--green-pale), var(--surface-soft) 72%);
}

.record-daily-section.is-incomplete {
  border-color: #dfc69d;
  background: linear-gradient(145deg, var(--amber-soft), var(--surface-soft) 72%);
}

.record-daily-section.is-zero-incomplete {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  background: linear-gradient(145deg, var(--danger-soft), var(--surface-soft) 72%);
}

.record-daily-section.is-incomplete .record-kind-daily {
  border-color: #dfc69d;
  background: var(--amber-soft);
  color: var(--amber);
}

.record-daily-section.is-zero-incomplete .record-kind-daily {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  background: var(--danger-soft);
  color: var(--danger);
}

.record-daily-section.is-zero-incomplete .record-result-status {
  color: var(--danger);
}

.record-stage-section {
  border-color: var(--stage-gold-line);
  background: linear-gradient(145deg, var(--stage-gold-soft), #fff 62%);
}

.record-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-kind {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 0.66rem;
  font-weight: 750;
}

.record-kind-stage {
  border: 1px solid var(--stage-gold-line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--stage-gold-strong);
}

.record-kind-daily {
  border: 1px solid #cbd9ce;
  background: var(--green-pale);
  color: var(--green-strong);
}

.record-kind-focus {
  border: 1px solid #d3d8d2;
  background: var(--surface);
  color: var(--ink-soft);
}

.record-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.record-result-status {
  font-size: 0.74rem;
  font-weight: 720;
}

.record-result-status.is-completed {
  color: var(--green-strong);
}

.record-result-status.is-incomplete {
  color: var(--amber);
}

.record-result-status.is-pending,
.record-result-progress {
  color: var(--ink-faint);
}

.record-result-progress {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.record-result-progress.has-completion-meter::after {
  width: 76px;
}

.record-feedback {
  display: grid;
  gap: 5px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.record-feedback > span {
  color: var(--ink-faint);
  font-size: 0.68rem;
  font-weight: 680;
}

.record-focus-section {
  border-color: #d9ddd8;
  background: linear-gradient(145deg, #f4f6f2, #fff 72%);
}

.record-focus-total {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.74rem;
}

.record-focus-total strong {
  color: var(--ink);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.record-focus-backfill {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.record-private-section {
  border-color: #dfddd6;
  background: #fbfaf7;
}

.record-kind-private {
  border: 1px solid #ddd8cc;
  background: #f6f3ec;
  color: #756c5c;
}

.record-private-visibility {
  color: #80786b;
  font-size: 0.67rem;
  font-weight: 650;
  white-space: nowrap;
}

.record-private-item {
  min-width: 0;
  padding-top: 11px;
  border-top: 1px solid #e5e1d8;
}

.record-private-section .record-private-item h3 {
  margin-bottom: 5px;
  color: #746d61;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.record-private-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.record-duration {
  color: var(--ink-faint);
  font-size: 0.69rem;
  text-align: right;
}

.record-section h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.record-description,
.record-proof-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.record-proof-text {
  padding-top: 11px;
  border-top: 1px solid rgba(217, 193, 143, 0.62);
}

.record-proof-link {
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--green-strong);
  font-size: 0.75rem;
  font-weight: 650;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.record-proof-link:hover {
  border-color: var(--green);
  background: var(--surface);
}

.proof-view-image {
  width: 100%;
  max-height: min(54vh, 520px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  object-fit: contain;
}

.record-file-card {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.record-file-card:hover {
  border-color: #bcc7ba;
  background: var(--green-pale);
}

.record-file-type {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.58rem;
  font-weight: 760;
  letter-spacing: 0.035em;
}

.record-file-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.record-file-copy strong {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-file-copy small {
  color: var(--ink-faint);
  font-size: 0.65rem;
}

.record-file-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 7px;
  color: var(--green-strong);
  font-size: 0.72rem;
  font-weight: 680;
  white-space: nowrap;
}

.proof-view-text {
  margin: 0;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dialog-compact {
  width: min(440px, calc(100% - 32px));
}

.confirm-description {
  margin: 0;
  color: var(--ink-soft);
}

.label-optional {
  color: var(--ink-faint);
  font-weight: 400;
}

.toast-region {
  position: fixed;
  z-index: 200;
  right: 22px;
  bottom: max(82px, calc(62px + env(safe-area-inset-bottom)));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  width: min(360px, calc(100vw - 28px));
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink-soft);
  box-shadow: 0 14px 38px rgba(28, 34, 29, 0.14);
  font-size: 0.8rem;
  pointer-events: auto;
}

.toast.is-success {
  border-color: #c9dccc;
}

.toast.is-error {
  border-color: #e6c8c3;
}

.noscript-message {
  position: fixed;
  z-index: 999;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 12px;
  border: 1px solid #ead7b5;
  border-radius: 10px;
  background: var(--amber-soft);
  color: #6d4d26;
  text-align: center;
}

/* Tablet */
@media (max-width: 960px) {
  .auth-card input,
  .dialog input,
  .dialog select,
  .dialog textarea,
  .focus-section textarea,
  .stepper input {
    font-size: 16px;
  }

  .auth-layout {
    max-width: 440px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .auth-intro {
    display: none;
  }

  .mobile-brand {
    display: flex;
    margin-bottom: 27px !important;
  }

  .owner-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .goal-banner {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
  }

  .goal-banner-mascot { display: none; }

  .owner-primary-column,
  .owner-side-column {
    display: contents;
  }

  .owner-layout .card {
    width: 100%;
    max-width: 100%;
  }

  #today-task { order: 1; }
  #owner-stage-card { order: 2; }
  #tomorrow-task { order: 3; }
  #history-section { order: 4; }
  #focus-card { order: 5; }
  #access-tools { order: 6; }
  #data-tools { order: 7; }
  #workspace-danger-zone { order: 8; }

  .owner-side-column {
    position: static;
  }

  .account-email-short {
    display: none;
  }

  .workspace-trigger {
    max-width: 160px;
  }

  .platform-list-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .platform-list-meta {
    grid-column: 1;
    padding-left: 40px;
  }

  .platform-list-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 720px) {
  .goal-banner,
  .goal-banner-readonly {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding: 19px;
  }

  .goal-banner-progress { padding: 12px; }

  .site-header-inner,
  .dashboard-main,
  .preview-banner-inner,
  .site-footer {
    width: min(100% - 28px, var(--content));
  }

  .role-badge {
    display: none;
  }

  #view-switcher {
    display: none;
  }

  .workspace-view-actions-mobile {
    display: grid;
  }

  .dashboard-main {
    padding-top: 30px;
  }

  .page-heading,
  .visitor-heading {
    align-items: flex-start;
  }

  .page-heading-copy {
    max-width: 460px;
  }

  .visitor-layout {
    grid-template-columns: 1fr;
  }

  .visitor-heading-with-mascot {
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 20px;
  }

  .visitor-mascot {
    width: 76px;
  }

  .visitor-mascot img {
    height: 58px;
  }


  #visitor-today-task,
  #visitor-stage-card,
  #visitor-history-section {
    grid-column: 1;
    grid-row: auto;
  }

  .preview-banner p span {
    display: none;
  }

  .platform-heading {
    align-items: flex-start;
  }

  .platform-list-row,
  .platform-user-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .platform-list-meta {
    grid-column: auto;
    padding-left: 40px;
  }

  .platform-list-actions {
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-start;
    padding-left: 40px;
  }

  .platform-access-heading {
    align-items: stretch;
  }

  .platform-access-grid {
    grid-template-columns: 1fr;
  }
}

/* Phones */
@media (max-width: 560px) {
  .mascot-options {
    grid-template-columns: minmax(0, 1fr);
  }

  body {
    font-size: 14px;
  }

  .site-header {
    background: rgba(250, 251, 248, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .auth-layout {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    align-items: start;
    padding: 0;
  }

  .auth-card {
    min-height: 100vh;
    min-height: 100svh;
    padding:
      max(28px, env(safe-area-inset-top))
      max(22px, env(safe-area-inset-right))
      calc(30px + env(safe-area-inset-bottom))
      max(22px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-card input,
  .dialog input,
  .dialog select,
  .dialog textarea,
  .focus-section textarea,
  .stepper input {
    min-height: 46px;
    font-size: 16px;
  }

  .auth-card input {
    -webkit-appearance: none;
    appearance: none;
  }

  .mobile-brand {
    margin-top: 4px;
    margin-bottom: 52px !important;
  }

  .site-header-inner {
    min-height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }

  .site-brand-copy strong {
    font-size: 0.87rem;
  }

  .workspace-trigger {
    max-width: none;
  }

  .workspace-trigger-copy {
    display: none;
  }

  .workspace-menu-panel {
    position: fixed;
    top: calc(67px + env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - 82px - env(safe-area-inset-top));
  }

  .preview-banner-inner {
    min-height: 47px;
  }

  .preview-banner .button {
    min-height: 32px;
  }

  .dashboard-main {
    width: 100%;
    padding:
      26px
      max(14px, env(safe-area-inset-right))
      calc(38px + env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  .page-heading,
  .visitor-heading {
    display: grid;
    gap: 14px;
    margin-bottom: 21px;
    padding: 0 5px;
  }

  .visitor-heading-with-mascot {
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 14px;
  }

  .visitor-mascot {
    width: 54px;
    align-self: start;
    margin-top: 20px;
  }

  .visitor-mascot img {
    height: 45px;
  }


  .page-heading h1,
  .visitor-heading h1 {
    font-size: 1.72rem;
  }

  .page-heading-copy,
  .visitor-heading > div > p:last-child {
    font-size: 0.86rem;
  }

  .streak-card,
  .readonly-pill {
    justify-self: start;
  }

  .owner-layout,
  .owner-primary-column,
  .owner-side-column,
  .visitor-layout {
    gap: 13px;
  }

  .card {
    padding: 19px;
    border-radius: 13px;
  }

  .platform-card {
    padding: 0;
  }

  .task-card-today,
  .visitor-task-card {
    padding: 21px 19px;
  }

  .task-content {
    min-height: 80px;
    padding-top: 6px;
  }

  .task-text {
    font-size: 1.12rem;
  }

  .card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .card-actions .button {
    width: 100%;
    padding-right: 9px;
    padding-left: 9px;
  }

  #today-task .card-actions .button-primary {
    grid-column: 1 / -1;
  }

  .proof-summary {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .proof-summary .text-button {
    grid-column: 2;
    justify-self: start;
    padding-left: 0;
  }

  .history-card {
    overflow: hidden;
  }

  .history-summary p {
    padding: 10px;
  }

  .heatmap-scroll {
    margin-right: -19px;
    margin-left: -19px;
    width: calc(100% + 38px);
    padding-right: 19px;
    padding-left: 19px;
  }

  .history-item {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 9px;
  }

  .history-item-status {
    grid-column: 2;
  }

  .counter-field {
    align-items: flex-start;
  }

  .focus-section-public .counter-field {
    display: grid;
    gap: 11px;
  }

  .focus-section-public .stepper {
    justify-self: start;
  }

  .platform-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .platform-metric {
    min-height: 82px;
    padding: 14px 16px;
  }

  .platform-metric:last-child {
    grid-column: 1 / -1;
  }

  .platform-heading .button {
    width: 100%;
  }

  .platform-card-header {
    align-items: flex-start;
    padding: 17px;
  }

  .platform-access-panel {
    padding: 16px;
  }

  .platform-access-heading {
    display: grid;
    gap: 12px;
  }

  .platform-access-heading .button {
    width: 100%;
  }

  .platform-security-row {
    align-items: start;
  }

  .platform-list-row {
    padding: 14px 17px;
  }

  .connection-lost-view {
    min-height: calc(100dvh - 190px);
  }

  .connection-lost-card {
    padding: 27px 20px;
  }

  .connection-lost-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .message-widget {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .message-panel {
    width: 100%;
    max-height: calc(100dvh - 82px - env(safe-area-inset-top));
    border-radius: 15px;
  }

  .message-compose textarea {
    min-height: 46px;
    font-size: 16px;
    resize: none;
  }

  .dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 18px);
    max-height: calc(100svh - 18px);
    max-height: calc(100dvh - 18px);
    margin: auto 0 0;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
  }

  .goal-route-drawer.dialog {
    width: min(100%, 430px);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 16px 0 0 16px;
  }

  .goal-route-shell {
    padding: 21px 18px calc(21px + env(safe-area-inset-bottom));
  }

  .goal-route-owner-actions {
    bottom: -21px;
    margin: 20px -18px -21px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .dialog-form {
    padding: 21px 18px calc(20px + env(safe-area-inset-bottom));
  }

  .dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .dialog-actions .button {
    width: 100%;
  }

  .dialog-actions .dialog-danger-action {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .progress-file-list {
    grid-template-columns: 1fr;
  }

  .progress-image-link,
  .progress-image-link img {
    min-height: 118px;
    height: 118px;
  }

  .progress-link-row,
  .progress-file-row {
    align-items: stretch;
  }

  .progress-asset-remove {
    min-width: 46px;
  }

  .toast-region {
    right: 14px;
    bottom: max(76px, calc(62px + env(safe-area-inset-bottom)));
    left: 14px;
  }

  .toast {
    width: 100%;
  }

  .site-footer {
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 350px) {
  .auth-card {
    padding-right: 17px;
    padding-left: 17px;
  }

  .site-header-inner,
  .preview-banner-inner {
    width: calc(100% - 20px);
  }

  .site-brand-copy {
    display: none;
  }

  .workspace-menu-panel {
    right: 10px;
    left: 10px;
  }

  .header-actions {
    gap: 5px;
  }

  .card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .platform-card {
    padding: 0;
  }

  .platform-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    justify-content: normal;
  }

  .platform-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-self: stretch;
  }

  .platform-tab {
    padding-right: 5px;
    padding-left: 5px;
    white-space: nowrap;
  }


  .card-actions {
    grid-template-columns: 1fr;
  }

  .history-summary span {
    font-size: 0.62rem;
  }

  .history-summary p {
    padding-right: 7px;
    padding-left: 7px;
  }

  .year-controls span {
    min-width: 42px;
  }

  .dialog-actions {
    grid-template-columns: 1fr;
  }

  .dialog-actions .dialog-danger-action {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 640px), (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px;
  }

  .button,
  .button-small,
  .text-button,
  .icon-text-button,
  .icon-button,
  .view-switch,
  .preview-banner .button,
  .stepper button,
  .input-action,
  .menu-button,
  .account-trigger,
  .auth-tab,
  .workspace-trigger,
  .workspace-option,
  .workspace-option-disconnect,
  .platform-tab,
  .message-toggle,
  .message-conversation-option {
    min-height: 44px;
  }

  .dialog-close {
    width: 44px;
    height: 44px;
  }

  .stepper {
    grid-template-columns: 44px 52px 44px;
  }

  .stage-expand-toggle {
    min-height: 44px;
  }

  .result-progress-field input[type="range"] {
    min-height: 44px;
  }

  .icon-button,
  .stepper button {
    width: 44px;
    height: 44px;
  }
}

@media (pointer: coarse) {
  .heatmap-grid {
    grid-template-rows: repeat(7, 18px);
    grid-auto-columns: 18px;
    gap: 6px;
  }

  .heatmap-cell {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }

  .heatmap-cell.has-private-record::before {
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
  }

  .heatmap-cell.is-stage-complete.has-daily-result::after {
    right: 2px;
    bottom: 2px;
    width: 6px;
    height: 6px;
  }
}

@media (forced-colors: active) {
  .brand-mark,
  .status-chip,
  .role-badge,
  .private-badge,
  .stage-status,
  .readonly-pill,
  .streak-card,
  .notice,
  .data-status,
  .heatmap-cell,
  .workspace-mark,
  .workspace-option-mark,
  .product-tag,
  .message-toggle,
  .message-window-status,
  .connection-lost-mark {
    forced-color-adjust: none;
  }
}

/* Time-aware night palette. Daytime declarations above remain unchanged. */
html[data-theme="dark"] :focus-visible,
html[data-theme="dark"] .registration-kind-option:has(input:focus-visible) {
  outline-color: rgba(168, 202, 176, 0.36);
}

html[data-theme="dark"] .skip-link {
  background: var(--ink);
  color: var(--bg);
}

html[data-theme="dark"] [data-goal-color="mist"] { --goal-accent: #83a4bd; --goal-accent-strong: #b6d2e5; --goal-soft: #27323a; --goal-soft-strong: #344551; --goal-line: #465d6d; }
html[data-theme="dark"] [data-goal-color="sage"] { --goal-accent: #91ad94; --goal-accent-strong: #bdd2bf; --goal-soft: #29332b; --goal-soft-strong: #39473b; --goal-line: #4c604f; }
html[data-theme="dark"] [data-goal-color="gold"] { --goal-accent: #c79c56; --goal-accent-strong: #e0bd79; --goal-soft: #373022; --goal-soft-strong: #493f2c; --goal-line: #62543a; }
html[data-theme="dark"] [data-goal-color="violet"] { --goal-accent: #a99ac5; --goal-accent-strong: #d0c3e5; --goal-soft: #302c38; --goal-soft-strong: #423b4d; --goal-line: #5c516c; }
html[data-theme="dark"] [data-goal-color="clay"] { --goal-accent: #bf8d7b; --goal-accent-strong: #dfb5a6; --goal-soft: #382b27; --goal-soft-strong: #4b3932; --goal-line: #644b42; }
html[data-theme="dark"] [data-goal-color="slate"] { --goal-accent: #9aa6ab; --goal-accent-strong: #c6cfd2; --goal-soft: #2d3133; --goal-soft-strong: #3d4346; --goal-line: #555e62; }

html[data-theme="dark"] .goal-banner {
  background: linear-gradient(135deg, var(--goal-soft), rgba(39, 40, 38, 0.96) 68%);
}

html[data-theme="dark"] .goal-banner-progress,
html[data-theme="dark"] .goal-route-stage,
html[data-theme="dark"] .subgoal-toggle,
html[data-theme="dark"] .subgoal-form input {
  background: rgba(35, 37, 34, 0.78);
}

html[data-theme="dark"] .goal-route-subgoal { background: rgba(255, 255, 255, 0.035); }
html[data-theme="dark"] .goal-route-owner-actions { background: rgba(39, 40, 38, 0.97); box-shadow: 0 -10px 20px rgba(39, 40, 38, 0.88); }
html[data-theme="dark"] .stage-subgoal-summary { background: rgba(199, 156, 86, 0.09); }

html[data-theme="dark"] .brand-mark {
  border-color: #53695a;
}

html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .account-menu-panel,
html[data-theme="dark"] .workspace-menu-panel,
html[data-theme="dark"] .platform-more-panel,
html[data-theme="dark"] .message-toggle,
html[data-theme="dark"] .message-panel,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .toast {
  box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .auth-tabs,
html[data-theme="dark"] .registration-kind {
  border-color: var(--line);
}

html[data-theme="dark"] .auth-tab:not([aria-selected="true"]):hover {
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .field input:hover,
html[data-theme="dark"] .field textarea:hover,
html[data-theme="dark"] .password-field input:hover,
html[data-theme="dark"] .stepper input:hover,
html[data-theme="dark"] .focus-section textarea:hover {
  border-color: var(--line-strong);
}

html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .password-field input:focus,
html[data-theme="dark"] .stepper input:focus,
html[data-theme="dark"] .focus-section textarea:focus {
  box-shadow: 0 0 0 3px rgba(168, 202, 176, 0.16);
}

html[data-theme="dark"] .form-message,
html[data-theme="dark"] .page-message {
  border-color: #68413e;
  color: #efaaa4;
}

html[data-theme="dark"] .form-message.is-success,
html[data-theme="dark"] .page-message.is-success,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .role-badge.is-owner,
html[data-theme="dark"] .preview-banner,
html[data-theme="dark"] .proof-summary,
html[data-theme="dark"] .visibility-badge.is-public,
html[data-theme="dark"] .focus-section-public,
html[data-theme="dark"] .access-card,
html[data-theme="dark"] .product-tag,
html[data-theme="dark"] .visitor-task-card,
html[data-theme="dark"] .visitor-focus-summary,
html[data-theme="dark"] .visitor-proof,
html[data-theme="dark"] .message-toggle,
html[data-theme="dark"] .message-bubble.is-own,
html[data-theme="dark"] .record-kind-daily,
html[data-theme="dark"] .toast.is-success {
  border-color: #46584a;
}

html[data-theme="dark"] .notice-warning,
html[data-theme="dark"] .workspace-option.is-blocked .workspace-option-mark,
html[data-theme="dark"] .proof-summary.is-incomplete,
html[data-theme="dark"] .visitor-proof.is-incomplete,
html[data-theme="dark"] .result-choice-options input[value="incomplete"]:checked + span,
html[data-theme="dark"] .noscript-message {
  border-color: #675638;
}

html[data-theme="dark"] .notice-warning .notice-icon,
html[data-theme="dark"] .proof-summary.is-incomplete .proof-summary-icon,
html[data-theme="dark"] .visitor-proof.is-incomplete .proof-check {
  background: #4b3d29;
  color: var(--amber);
}

html[data-theme="dark"] .notice-danger,
html[data-theme="dark"] .workspace-option.is-revoked .workspace-option-mark,
html[data-theme="dark"] .connection-lost-mark,
html[data-theme="dark"] .toast.is-error {
  border-color: #68413e;
}

html[data-theme="dark"] .notice-danger .notice-icon {
  background: #573633;
}

html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .button-stage,
html[data-theme="dark"] .button-danger,
html[data-theme="dark"] .button-danger-quiet:hover,
html[data-theme="dark"] .message-unread-count {
  color: #182019;
}

html[data-theme="dark"] .button-primary:hover:not(:disabled) {
  border-color: #b8d8bf;
  background: #b8d8bf;
}

html[data-theme="dark"] .button-secondary:hover:not(:disabled),
html[data-theme="dark"] .button-quiet:hover:not(:disabled) {
  border-color: #62665e;
}

html[data-theme="dark"] .button-stage:hover:not(:disabled) {
  border-color: #ebca8a;
  background: #ebca8a;
}

html[data-theme="dark"] .button-danger,
html[data-theme="dark"] .button-danger-quiet:hover {
  color: #2a1715;
}

html[data-theme="dark"] .site-header {
  border-bottom-color: rgba(80, 83, 76, 0.82);
  background: rgba(32, 33, 31, 0.9);
}

html[data-theme="dark"] .account-avatar {
  background: var(--green-soft);
}

html[data-theme="dark"] .workspace-mark,
html[data-theme="dark"] .workspace-option-mark {
  border-color: #506154;
}

html[data-theme="dark"] .workspace-option-platform .workspace-option-mark {
  border-color: var(--stage-gold-line);
}

html[data-theme="dark"] .streak-card,
html[data-theme="dark"] .stage-status,
html[data-theme="dark"] .stage-meta div,
html[data-theme="dark"] .record-dates div,
html[data-theme="dark"] .danger-zone-card,
html[data-theme="dark"] .viewer-code-box,
html[data-theme="dark"] .invite-result,
html[data-theme="dark"] .product-tag,
html[data-theme="dark"] .readonly-pill,
html[data-theme="dark"] .platform-metric,
html[data-theme="dark"] .progress-entry,
html[data-theme="dark"] .record-kind-stage,
html[data-theme="dark"] .record-proof-link {
  background: rgba(41, 42, 39, 0.82);
}

html[data-theme="dark"] .stage-card {
  background:
    linear-gradient(145deg, rgba(55, 48, 34, 0.82), rgba(41, 42, 39, 0.96) 54%),
    var(--surface);
}

html[data-theme="dark"] .stage-meta,
html[data-theme="dark"] .record-dates {
  border-color: rgba(98, 84, 58, 0.9);
  background: rgba(98, 84, 58, 0.74);
}

html[data-theme="dark"] .last-stage-link,
html[data-theme="dark"] .history-item.has-stage,
html[data-theme="dark"] .record-proof-text {
  border-color: rgba(98, 84, 58, 0.9);
}

html[data-theme="dark"] .stage-destination-note,
html[data-theme="dark"] .record-destination-note.is-stage {
  border-top-color: rgba(98, 84, 58, 0.78);
}

html[data-theme="dark"] .card {
  background: rgba(41, 42, 39, 0.96);
}

html[data-theme="dark"] .record-daily-section.is-completed {
  border-color: #46584a;
}

html[data-theme="dark"] .record-daily-section.is-incomplete,
html[data-theme="dark"] .record-daily-section.is-incomplete .record-kind-daily {
  border-color: #675638;
}

html[data-theme="dark"] .record-daily-section.is-zero-incomplete,
html[data-theme="dark"] .record-daily-section.is-zero-incomplete .record-kind-daily {
  border-color: #68413e;
}

html[data-theme="dark"] .task-card-today {
  border-color: #454943;
}

html[data-theme="dark"] .proof-summary.is-incomplete,
html[data-theme="dark"] .result-choice-options input[value="incomplete"]:checked + span {
  background: var(--amber-soft);
}

html[data-theme="dark"] .tomorrow-card,
html[data-theme="dark"] .platform-access-grid > section,
html[data-theme="dark"] .progress-entry.is-legacy {
  background: rgba(37, 38, 35, 0.92);
}

html[data-theme="dark"] .heatmap-scroll {
  scrollbar-color: #555950 transparent;
}

html[data-theme="dark"] .heatmap-cell,
html[data-theme="dark"] .heatmap-legend i {
  border-color: #3e413c;
  background: #2e302d;
}

html[data-theme="dark"] .heatmap-cell.is-task {
  border-color: #4b5049;
  background: #393c37;
}

html[data-theme="dark"] .heatmap-cell.is-focus-record:not(.is-task):not(.is-stage-complete),
html[data-theme="dark"] .heatmap-legend i.is-focus-record {
  border-color: #59625a;
  background: #414841;
}

html[data-theme="dark"] .heatmap-cell.is-recorded.progress-0,
html[data-theme="dark"] .heatmap-legend i.progress-0 {
  border-color: #625a4b;
}

html[data-theme="dark"] .heatmap-cell.is-recorded.progress-1,
html[data-theme="dark"] .heatmap-legend i.progress-1 {
  border-color: #465249;
}

html[data-theme="dark"] .heatmap-cell.is-recorded.progress-2,
html[data-theme="dark"] .heatmap-legend i.progress-2 {
  border-color: #526356;
}

html[data-theme="dark"] .heatmap-cell.is-recorded.progress-3,
html[data-theme="dark"] .heatmap-legend i.progress-3 {
  border-color: #627565;
}

html[data-theme="dark"] .heatmap-cell.is-recorded.progress-4,
html[data-theme="dark"] .heatmap-legend i.progress-4 {
  border-color: #78917c;
}

html[data-theme="dark"] .heatmap-cell.is-recorded.progress-5,
html[data-theme="dark"] .heatmap-legend i.progress-5,
html[data-theme="dark"] .heatmap-cell.is-done,
html[data-theme="dark"] .heatmap-legend i.is-done {
  border-color: #90ae96;
}

html[data-theme="dark"] .heatmap-cell.is-incomplete {
  border-color: #b28d52;
  box-shadow: inset 0 0 0 1px rgba(255, 237, 207, 0.14);
}

html[data-theme="dark"] .heatmap-cell.is-zero-incomplete,
html[data-theme="dark"] .heatmap-legend i.is-zero-incomplete {
  border-color: var(--danger);
  background:
    radial-gradient(circle at center, var(--danger) 0 2px, transparent 2.5px),
    var(--danger-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 216, 0.12);
}

html[data-theme="dark"] .heatmap-cell.is-supplemented,
html[data-theme="dark"] .heatmap-legend i.is-supplemented {
  background-image: linear-gradient(135deg, transparent 42%, rgba(224, 229, 220, 0.72) 44%, rgba(224, 229, 220, 0.72) 62%, transparent 64%);
}

html[data-theme="dark"] .heatmap-legend i.is-supplemented {
  border-color: #657064;
  background-color: #393c37;
}

html[data-theme="dark"] .progress-entry.is-supplemental {
  border-left-color: #737e72;
  background: rgba(42, 45, 40, 0.94);
}

html[data-theme="dark"] .progress-entry.is-supplemental .progress-entry-header time,
html[data-theme="dark"] .history-item-supplement {
  color: #b8c1b5;
}

html[data-theme="dark"] .heatmap-cell.is-stage-complete,
html[data-theme="dark"] .heatmap-cell.is-stage-complete.is-recorded,
html[data-theme="dark"] .heatmap-legend i.is-stage-complete {
  border-color: #c0954c;
  box-shadow: inset 0 0 0 1px rgba(255, 232, 189, 0.12);
}

html[data-theme="dark"] .heatmap-cell.is-stage-complete.has-daily-result::after {
  border-color: rgba(32, 33, 31, 0.9);
}

html[data-theme="dark"] .heatmap-cell.is-selected {
  outline-color: #d5d7d1;
}

html[data-theme="dark"] .history-item-status.is-private,
html[data-theme="dark"] .private-badge,
html[data-theme="dark"] .visibility-badge.is-private,
html[data-theme="dark"] .record-kind-private,
html[data-theme="dark"] .record-private-visibility,
html[data-theme="dark"] .record-private-section .record-private-item h3 {
  color: #b8b1a5;
}

html[data-theme="dark"] .private-badge,
html[data-theme="dark"] .visibility-badge.is-private,
html[data-theme="dark"] .record-kind-private {
  border-color: #565149;
  background: #332f29;
}

html[data-theme="dark"] .access-card {
  background:
    linear-gradient(145deg, rgba(39, 50, 41, 0.82), rgba(41, 42, 39, 0.96) 58%),
    var(--surface);
}

html[data-theme="dark"] .danger-zone-card[open] {
  border-color: #68413e;
}

html[data-theme="dark"] .danger-zone-card .data-tools-body {
  border-top-color: #563b38;
}

html[data-theme="dark"] .confirmation-phrase {
  border-color: #665538;
  background: #393023;
  color: #d9b476;
}

html[data-theme="dark"] .visitor-task-card {
  background:
    linear-gradient(140deg, rgba(46, 60, 50, 0.66), transparent 55%),
    var(--surface);
}

html[data-theme="dark"] .visitor-focus-summary {
  background: rgba(37, 38, 35, 0.84);
}

html[data-theme="dark"] .visitor-focus-mark {
  border-color: #758379;
}

html[data-theme="dark"] .message-toggle {
  background: rgba(41, 42, 39, 0.97);
}

html[data-theme="dark"] .message-toggle:hover,
html[data-theme="dark"] .message-toggle[aria-expanded="true"],
html[data-theme="dark"] .message-conversation-option.is-active,
html[data-theme="dark"] .result-choice-options input:checked + span,
html[data-theme="dark"] .upload-field,
html[data-theme="dark"] .progress-link:hover,
html[data-theme="dark"] .record-file-card:hover {
  border-color: #586b5c;
}

html[data-theme="dark"] .message-panel {
  background: rgba(41, 42, 39, 0.99);
}

html[data-theme="dark"] .message-thread {
  background: linear-gradient(180deg, rgba(37, 38, 35, 0), rgba(37, 38, 35, 0.72));
}

html[data-theme="dark"] .dialog::backdrop {
  background: rgba(12, 14, 12, 0.68);
}

html[data-theme="dark"] #proof-dialog .dialog-actions,
html[data-theme="dark"] #progress-dialog .dialog-actions,
html[data-theme="dark"] #proof-view-dialog .dialog-actions {
  background: rgba(41, 42, 39, 0.98);
  box-shadow: 0 -10px 18px rgba(17, 18, 16, 0.72);
}

html[data-theme="dark"] .result-choice-options input:checked + span {
  box-shadow: inset 0 0 0 1px rgba(168, 202, 176, 0.1);
}

html[data-theme="dark"] .result-choice-options input:focus-visible + span,
html[data-theme="dark"] .upload-field:focus-within {
  outline-color: rgba(168, 202, 176, 0.28);
}

html[data-theme="dark"] .progress-entry {
  border-left-color: #526555;
}

html[data-theme="dark"] .progress-entry.is-legacy {
  border-left-color: #55574f;
}

html[data-theme="dark"] .record-stage-section {
  background: linear-gradient(145deg, var(--stage-gold-soft), var(--surface) 62%);
}

html[data-theme="dark"] .record-kind-focus {
  border-color: var(--line-strong);
}

html[data-theme="dark"] .record-focus-section {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--surface-soft), var(--surface) 72%);
}

html[data-theme="dark"] .record-private-section {
  border-color: #4d4942;
  background: #2e2b27;
}

html[data-theme="dark"] .record-private-item {
  border-top-color: #49453f;
}

html[data-theme="dark"] .toast {
  background: rgba(41, 42, 39, 0.98);
}

html[data-theme="dark"] .visitor-mascot[data-mascot-key="blue"] img,
html[data-theme="dark"] .mascot-option-preview[data-mascot-key="blue"] img {
  filter: invert(83%) sepia(11%) saturate(574%) hue-rotate(82deg) brightness(91%) contrast(87%);
  opacity: 0.9;
}