:root {
  --page: #eff5f2;
  --paper: #fff;
  --ink: #203c34;
  --muted: #567065;
  --accent: #285b4b;
  --accent-hover: #1c4438;
  --line: #c9d9d0;
  --lilac: #ece9f4;
  --lilac-ink: #57516a;
  --error: #9b342a;
  --focus: #7653b3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.65;
  scrollbar-color: #98afa2 var(--page);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
::selection { background: #d8cdef; color: #2d1f49; }
input { caret-color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; min-height: 44px; border-radius: 8px; border: 0; padding: 10px 17px; font-weight: 600; line-height: 1.45; }
button { transition: background-color .18s ease, color .18s ease; }
button:disabled { opacity: .55; cursor: not-allowed; }
a { color: var(--accent); text-underline-offset: 4px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 650; line-height: 1.35; letter-spacing: -.025em; }
h2 { font-size: 1.125rem; font-weight: 650; line-height: 1.5; }
.muted, .help { color: var(--muted); }
.help { font-size: .8125rem; line-height: 1.7; margin-top: 8px; }
.masthead { background: #234e45; color: #f3f9f6; }
.header-inner { max-width: 1136px; padding: 12px 32px; margin: auto; display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; gap: 11px; align-items: center; color: inherit; text-decoration: none; font-size: 1.25rem; font-weight: 650; white-space: nowrap; }
.brand svg { width: 31px; height: 31px; fill: none; stroke: #ddede3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-note { color: #d2e5dc; font-size: .875rem; }
.on-dark { color: #f3f9f6; background: transparent; margin-left: auto; padding-right: 0; }
.on-dark:hover { color: #d4c6ed; }
main { max-width: 1136px; margin: auto; padding: 28px 32px 0; }
.login-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 90px; align-items: center; padding: 72px 36px; }
.login-intro h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.45; margin-bottom: 24px; }
.login-intro p { margin-top: 18px; }
.login-form { padding: 32px; background: var(--paper); border-radius: 16px; }
.login-form h2 { margin-bottom: 24px; }
.primary { background: var(--accent); color: #fff; }
.primary:hover:not(:disabled) { background: var(--accent-hover); }
.secondary { background: #e3ede6; color: #244c3d; }
.secondary:hover:not(:disabled) { background: #d5e5db; }
.text-button { background: transparent; color: var(--accent); padding: 8px 4px; }
.text-button:hover:not(:disabled) { color: #46306b; text-decoration: underline; text-underline-offset: 4px; }
.full { width: 100%; }
.login-form .primary { margin-top: 22px; }
label, legend { display: block; font-size: .875rem; font-weight: 600; }
input:not([type="checkbox"]) { display: block; width: 100%; min-width: 0; min-height: 46px; background: #fff; color: var(--ink); border: 1px solid #98afa2; border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-variant-numeric: tabular-nums; }
input::placeholder { color: #65776c; font-size: .875rem; }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; text-align: left; }
input::-webkit-date-and-time-value { text-align: left; }
.page-heading { min-width: 0; }
.page-heading h1 { font-size: clamp(1.375rem, 2.5vw, 1.75rem); overflow-wrap: anywhere; }
.page-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); margin-top: 6px; }
.timezone { font-size: .75rem; white-space: nowrap; }
.tabs { display: flex; gap: 28px; margin-top: 20px; border-bottom: 1px solid var(--line); }
.tab { position: relative; background: transparent; color: var(--muted); padding: 12px 0 16px; border-radius: 0; font-size: .9375rem; }
.tab.active { color: var(--ink); box-shadow: inset 0 -3px var(--accent); }
.binding-dot { display: inline-block; width: 7px; height: 7px; background: #8b5a22; border-radius: 50%; margin: 0 0 2px 7px; }
.binding-warning { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #e3ede6; padding: 12px 18px; margin-top: 20px; border-radius: 12px; }
.binding-warning strong { font-size: .875rem; }
.binding-warning span { display: block; color: #496658; font-size: .8125rem; margin-top: 2px; }
.binding-warning button { background: #fff; white-space: nowrap; }
.work-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); align-items: start; gap: 48px; margin-top: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section-heading .muted { font-size: .75rem; }
.section-heading > div { min-width: 0; }
#refresh-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; font-size: .8125rem; }
#refresh-status svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.small-label { color: var(--lilac-ink); background: var(--lilac); font-size: .6875rem; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.empty-state { padding: 20px 0; color: var(--muted); font-size: .875rem; border-bottom: 1px solid var(--line); }
.empty-state strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.schedule-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.schedule-list { min-width: 0; }
.schedule-item.is-finished .schedule-time { color: var(--muted); }
.schedule-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.person-name { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.state-tag { color: #3f5c4c; background: #dfebe3; font-size: .75rem; font-weight: 600; border-radius: 4px; padding: 4px 9px; white-space: nowrap; flex-shrink: 0; }
.state-tag.ready { background: #e3ede6; color: var(--accent); }
.state-tag.finished { color: #fff; background: var(--accent); }
.state-tag.expired { color: #605b68; background: #e9e6ec; }
.schedule-time { font-size: 1.625rem; font-weight: 550; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.4; margin: 10px 0 4px; }
.schedule-time small { font-size: .75rem; font-weight: 400; letter-spacing: 0; padding-left: 5px; }
.schedule-item .help { margin-top: 3px; }
.schedule-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.schedule-actions button { font-size: .8125rem; }
.schedule-actions .danger { margin-left: auto; }
.schedule-actions .primary { min-width: 120px; }
.reminder-log { margin-top: 6px; font-size: .75rem; }
.reminder-log summary, .form-help summary { display: flex; gap: 8px; align-items: center; padding: 8px 0; }
.reminder-log summary::before, .form-help summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: 2px; }
.reminder-log[open] summary::before, .form-help[open] summary::before { transform: rotate(45deg); }
.reminder-log summary::marker, .form-help summary::marker { content: ''; }
.reminder-log summary::-webkit-details-marker, .form-help summary::-webkit-details-marker { display: none; }
.form-help { font-size: .8125rem; margin-top: 8px; }
.form-help .help { margin-top: 0; }
.danger { color: var(--error); }
.together { margin-top: 36px; }
.together > .help { margin-top: 4px; }
.history { margin-top: 30px; font-size: .875rem; }
summary { cursor: pointer; min-height: 44px; color: var(--muted); padding-top: 10px; }
.history .schedule-time { font-size: 1.25rem; }
.editor { background: var(--paper); padding: 26px; border-radius: 16px; }
.editor .section-heading { margin-bottom: 24px; }
.date-row { display: flex; align-items: center; gap: 12px; }
.date-row input { flex: 1; }
.date-row button { white-space: nowrap; margin-top: 8px; font-size: .8125rem; }
.time-window { min-width: 0; border: 0; margin: 24px 0; padding: 0; }
legend { padding: 0; margin-bottom: 8px; }
.time-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
.time-row label { color: var(--muted); font-size: .75rem; font-weight: 400; }
.time-row > span { margin-bottom: 11px; color: var(--muted); font-size: .875rem; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: .8125rem; font-weight: 400; min-height: 44px; padding-top: 13px; }
.check input { appearance: auto; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0; }
.closing-check { margin-top: 10px; }
.editor .primary { margin-top: 20px; }
.form-message { font-size: .8125rem; color: var(--error); margin-top: 12px; overflow-wrap: anywhere; }
.form-message.success { color: var(--accent); }
.form-message:empty { margin: 0; }
.notice { border-radius: 8px; padding: 12px 18px; background: #fae9e4; color: #85362d; margin-bottom: 24px; font-size: .875rem; }
.settings-panel { display: grid; grid-template-columns: 1fr .88fr; gap: 56px; margin-top: 32px; }
.settings-intro > p { margin-top: 10px; font-size: .875rem; }
.steps { padding-left: 22px; font-size: .875rem; margin: 28px 0; }
.steps li { padding: 0 0 20px 6px; }
.settings-editor { background: #fff; padding: 26px; border-radius: 16px; }
.settings-editor label:not(:first-child) { margin-top: 24px; }
.settings-editor .primary { margin-top: 22px; }
.test-area { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
.settings-editor > .danger { margin-top: 20px; }
footer { margin-top: 48px; padding: 20px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; line-height: 1.9; }
@media (max-width: 760px) {
  .header-inner { padding: 8px 20px; gap: 12px; min-height: 60px; }
  .header-note { font-size: .6875rem; margin-left: auto; }
  .brand { font-size: 1.0625rem; gap: 8px; }
  .brand svg { width: 26px; height: 26px; }
  .on-dark { font-size: .8125rem; margin-left: 0; }
  main { padding: 22px 20px 0; }
  .login-panel { grid-template-columns: 1fr; gap: 30px; padding: 24px 0 40px; }
  .login-intro h1 { font-size: 2rem; margin-bottom: 18px; }
  .login-intro p { font-size: .875rem; }
  .login-form { padding: 24px; }
  .page-meta { gap: 12px; }
  .timezone { font-size: .6875rem; }
  .tabs { margin-top: 14px; }
  .binding-warning { padding: 10px 14px; gap: 12px; margin-top: 16px; }
  .binding-warning button { font-size: .8125rem; padding: 9px 12px; }
  .binding-warning span { font-size: .75rem; }
  .work-grid { display: flex; flex-direction: column; gap: 28px; margin-top: 24px; }
  .agenda { display: contents; }
  .agenda > section:first-child { order: 0; width: 100%; }
  .editor { order: 1; width: 100%; padding: 22px; }
  .together { order: 2; width: 100%; margin-top: 4px; }
  .history { order: 3; width: 100%; margin-top: 0; }
  .settings-panel { grid-template-columns: 1fr; gap: 24px; }
  .settings-editor { padding: 22px; }
  .steps { margin-bottom: 12px; }
  footer { margin-top: 32px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width: 350px) {
  .header-note { display: none; }
  .on-dark { margin-left: auto; }
  main { padding-left: 14px; padding-right: 14px; }
  .editor, .settings-editor { padding: 18px; }
  .time-row { gap: 8px; }
  #today-title { font-size: 1rem; }
  .schedule-actions { gap: 4px; }
  .schedule-actions .primary { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}