:root {
      --mother-color:  #f9a8c0;
      --mother-light:  #fce7f3;
      --father-color:  #7eb6e6;
      --father-light:  #eff6ff;
      --neutral:       #e5e7eb;
      --bg:            #f7f8fa;
      --surface:       #ffffff;
      --border:        #e5e7eb;
      --text:          #111827;
      --text-sub:      #4b5563;
      --text-muted:    #9ca3af;
      --accent:        #2563eb;
      --radius-card:   12px;
      --radius-input:  8px;
      --shadow-card:   0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    button, select, input { touch-action: manipulation; }

    #site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      height: 52px;
      display: flex;
      align-items: center;
      margin: -32px -24px 28px;
    }

    .site-logo {
      font-size: 1rem;
      font-weight: 700;
      color: #1a1a2e;
      text-decoration: none;
      letter-spacing: -0.02em;
    }

    .site-logo span { color: #6366f1; }

    body {
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      max-width: 920px;
      margin: 0 auto;
      padding: 32px 24px;
      background: var(--bg);
      color: var(--text);
    }

    h1 {
      text-align: center;
      margin-bottom: 32px;
      font-size: 1.65rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.025em;
    }

    /* Config Panel */
    #config-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 24px;
      background: var(--surface);
      padding: 24px;
      border-radius: var(--radius-card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-card);
      margin-bottom: 20px;
    }

    #config-panel label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-sub);
      text-transform: uppercase;
      letter-spacing: 0.055em;
    }

    .name-fields-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 24px;
    }

    #config-panel select,
    #config-panel input {
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      font-size: 0.9rem;
      font-family: inherit;
      background: var(--surface);
      color: var(--text);
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    #config-panel input:disabled {
      background: #f3f4f6;
      color: var(--text-muted);
      cursor: not-allowed;
    }

    #config-panel select:focus,
    #config-panel input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    #generate-btn, #apply-btn {
      grid-column: 1 / -1;
      padding: 11px 20px;
      background: var(--text);
      color: #fff;
      border: none;
      border-radius: var(--radius-input);
      font-size: 0.95rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      letter-spacing: 0.01em;
      transition: background 0.15s, transform 0.1s;
    }

    #generate-btn:hover,
    #apply-btn:hover:not(:disabled)  { background: #1f2937; }
    #generate-btn:active,
    #apply-btn:active:not(:disabled) { transform: scale(0.99); }

    #apply-btn:disabled {
      background: #d1d5db;
      color: #9ca3af;
      cursor: not-allowed;
    }

    #reset-btn {
      grid-column: 1 / -1;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 0.78rem;
      font-family: inherit;
      cursor: pointer;
      padding: 2px 0;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    #reset-btn:hover:not(:disabled) { color: #dc2626; }
    #reset-btn:disabled { opacity: 0.35; cursor: default; text-decoration: none; }

    #viewer-banner {
      grid-column: 1 / -1;
      background: #fef9c3;
      border: 1px solid #fde047;
      border-radius: var(--radius-input);
      color: #854d0e;
      font-size: 0.8rem;
      padding: 8px 12px;
      text-align: center;
    }

    #viewer-generate-btn {
      grid-column: 1 / -1;
      background: var(--text);
      color: #fff;
      border: none;
      border-radius: var(--radius-input);
      padding: 11px 20px;
      font-size: 0.95rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      letter-spacing: 0.01em;
      transition: background 0.15s;
    }
    #viewer-generate-btn:hover { background: #1f2937; }

    #config-panel.viewer-mode > *:not(#viewer-banner) {
      display: none !important;
    }

    /* Calendar */
    #calendar-container {
      background: var(--surface);
      border-radius: var(--radius-card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-card);
      padding: 24px;
      display: none;
    }

    #cal-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    #cal-nav button {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      padding: 8px 16px;
      cursor: pointer;
      color: var(--text-sub);
      font-family: inherit;
      font-size: 0.88rem;
      transition: background 0.12s, border-color 0.12s;
    }

    #cal-nav button:hover { background: #f9fafb; border-color: #d1d5db; }

    #prev-btn, #next-btn { font-size: 1.1rem; padding: 8px 14px; }

    #cal-nav-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    #cal-nav-actions button { font-size: 0.82rem; }

    /* Save-as-image dropdown */
    #save-img-wrap { position: relative; }

    #save-img-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      display: none;
      flex-direction: column;
      min-width: 130px;
      z-index: 50;
      overflow: hidden;
    }

    #save-img-menu.open { display: flex; }

    #save-img-menu button {
      border: none !important;
      border-radius: 0 !important;
      width: 100%;
      text-align: left;
      padding: 9px 14px !important;
    }

    #save-img-menu button + button { border-top: 1px solid #eee !important; }

    #ical-wrap { position: relative; }

    #ical-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      display: none;
      flex-direction: column;
      min-width: 155px;
      z-index: 50;
      overflow: hidden;
    }

    #ical-menu.open { display: flex; }

    #ical-menu button {
      border: none !important;
      border-radius: 0 !important;
      width: 100%;
      text-align: left;
      padding: 9px 14px !important;
    }

    #ical-menu button + button { border-top: 1px solid #eee !important; }

    #cal-month-label {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.015em;
    }

    #cal-header {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      margin-bottom: 6px;
    }

    #cal-header div {
      text-align: center;
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--text-muted);
      padding: 6px 0;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    #cal-scroll-body {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      padding: 4px;
    }

    #cal-grid-clip { position: relative; }
    #cal-grid-clip.is-animating { overflow: hidden; }

    @keyframes month-enter-next {
      from { opacity: 0; transform: translateY(36px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes month-enter-prev {
      from { opacity: 0; transform: translateY(-36px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes month-exit-up {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(-36px); }
    }
    @keyframes month-exit-down {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(36px); }
    }
    #cal-scroll-body.anim-next { animation: month-enter-next 0.28s ease; }
    #cal-scroll-body.anim-prev { animation: month-enter-prev 0.28s ease; }
    .cal-exit-up   { animation: month-exit-up   0.28s ease forwards; }
    .cal-exit-down { animation: month-exit-down 0.28s ease forwards; }

    .cal-day.other-month {
      opacity: 0.38;
      cursor: default !important;
    }

    .cal-day.other-month:hover { filter: none; }

    .cal-day {
      aspect-ratio: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 6px 8px;
      border-radius: 6px;
      font-weight: 600;
      font-size: 0.9rem;
      color: #374151;
      position: relative;
      cursor: default;
      touch-action: manipulation;
      transition: filter 0.1s;
    }


    .cal-day:not(.empty):not(.before-start) { cursor: cell; }
    .cal-day:not(.empty):not(.before-start):hover { filter: brightness(0.95); z-index: 2; }

    .cal-day.empty {
      background: transparent;
      cursor: default;
      pointer-events: none;
    }


    .cal-day.before-start {
      background: var(--neutral);
      color: #aaa;
      cursor: default;
    }

    .cal-day.mother-full {
      background: var(--mother-color);
    }

    .cal-day.father-full {
      background: var(--father-color);
    }

    .cal-day.today {
      box-shadow: inset 0 0 0 2.5px #111827;
      z-index: 1;
    }

    /* Swap-time divider line — only visible on hover */
    @keyframes swap-pulse {
      0%, 100% {
        box-shadow: 0 0 4px 1px rgba(240,255,120,0.55),
                    0 0 9px 2px rgba(235,255,100,0.25);
      }
      50% {
        box-shadow: 0 0 6px 2px rgba(245,255,140,0.75),
                    0 0 14px 3px rgba(240,255,120,0.38);
      }
    }

    .swap-line {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 0;
      transform: translateX(-50%);
      background: transparent;
      pointer-events: none;
      z-index: 2;
      border-radius: 1px;
      transition: width 0.15s ease;
    }

    .cal-day:hover .swap-line {
      width: 3px;
      background: #eeff88;
      animation: swap-pulse 1.8s ease-in-out infinite;
    }

    /* Override badge — top-left of overridden day cells */
    .cal-day.overridden::after {
      content: '✱ override';
      position: absolute;
      top: 3px;
      left: 4px;
      font-size: 0.68rem;
      color: rgba(0,0,0,0.65);
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
      z-index: 3;
    }

    /* Note badge — top-left of note-only day cells */
    .cal-day.has-note::after {
      content: '♦ note';
      position: absolute;
      top: 3px;
      left: 4px;
      font-size: 0.68rem;
      color: rgba(0,0,0,0.55);
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
      z-index: 3;
    }

    .cal-day .tooltip {
      display: none;
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.85);
      color: #fff;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 0.72rem;
      font-weight: 400;
      white-space: nowrap;
      text-align: left;
      z-index: 10;
      pointer-events: none;
      line-height: 1.4;
    }

    .cal-day .tooltip .tooltip-main { font-weight: 600; }
    .cal-day .tooltip .tooltip-sub  { opacity: 0.82; margin-top: 2px; }

    .cal-day:hover .tooltip { display: block; }

    /* Legend */
    #legend {
      display: flex;
      gap: 24px;
      justify-content: center;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-sub);
      letter-spacing: 0.01em;
    }

    .legend-swatch {
      width: 18px;
      height: 18px;
      border-radius: 5px;
    }

    .legend-swatch.mother { background: var(--mother-color); }
    .legend-swatch.father { background: var(--father-color); }

    /* Schedule description */
    #schedule-desc {
      grid-column: 1 / -1;
      font-size: 0.8rem;
      color: var(--text-muted);
      font-style: italic;
      min-height: 1.2em;
    }

    /* Load-user panel */
    #load-panel {
      background: var(--surface);
      padding: 16px 24px;
      border-radius: var(--radius-card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-card);
      margin-bottom: 20px;
    }

    #load-form > label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-sub);
      text-transform: uppercase;
      letter-spacing: 0.055em;
      margin-bottom: 8px;
    }

    #live-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }

    #live-status-label {
      font-size: 0.82rem;
      color: var(--text-sub);
      font-family: monospace;
    }

    #logout-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      color: var(--text-muted);
      font-size: 0.78rem;
      font-family: inherit;
      padding: 4px 10px;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.15s, color 0.15s;
    }
    #logout-btn:hover { border-color: #dc2626; color: #dc2626; }

    #revoked-notice {
      font-size: 0.82rem;
      color: #7f1d1d;
      background: #fee2e2;
      border: 1px solid #fca5a5;
      border-radius: var(--radius-input);
      padding: 10px 12px;
      margin-bottom: 10px;
      line-height: 1.5;
    }

    #load-row { display: flex; gap: 8px; }

    #load-user-input {
      flex: 1;
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      font-size: 0.85rem;
      font-family: monospace;
      background: var(--surface);
      color: var(--text);
      min-width: 0;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    #load-user-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    #load-user-input.error {
      border-color: #dc2626;
      box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
    }

    #load-user-btn {
      padding: 9px 18px;
      background: var(--text);
      color: #fff;
      border: none;
      border-radius: var(--radius-input);
      font-size: 0.88rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }

    #load-user-btn:hover { background: #1f2937; }

    #load-token-input {
      width: 100%;
      box-sizing: border-box;
      margin-top: 6px;
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      font-size: 0.82rem;
      font-family: monospace;
      background: var(--surface);
      color: var(--text);
      transition: border-color 0.15s;
    }

    #load-token-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    #load-user-error {
      font-size: 0.78rem;
      color: #dc2626;
      margin-top: 6px;
      display: none;
    }

    /* Version history in share modal */
    #history-divider {
      border-top: 1px solid var(--border);
      margin: 4px 0 18px;
    }

    #history-section { margin-bottom: 4px; }

    #history-list {
      list-style: none;
      margin: 0;
      padding: 0;
      max-height: 200px;
      overflow-y: auto;
    }

    .history-entry {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.82rem;
      color: var(--text-sub);
    }

    .history-entry:last-child { border-bottom: none; }

    .history-entry-time { flex: 1; }

    .history-entry-btn {
      padding: 4px 10px;
      font-size: 0.78rem;
      font-family: inherit;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface);
      cursor: pointer;
      color: var(--text-sub);
      white-space: nowrap;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }

    .history-entry-btn:hover { background: #f3f4f6; border-color: #d1d5db; color: var(--text); }

    #history-empty {
      font-size: 0.82rem;
      color: var(--text-muted);
      padding: 8px 0 4px;
    }

    /* Override Modal */
    #override-modal {
      position: fixed;
      background: var(--surface);
      border-radius: var(--radius-card);
      border: 1px solid var(--border);
      box-shadow: 0 4px 24px rgba(0,0,0,0.13);
      padding: 16px 18px;
      z-index: 200;
      display: none;
      min-width: 240px;
    }

    #override-modal-title {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text-sub);
      text-transform: uppercase;
      letter-spacing: 0.055em;
      margin-bottom: 12px;
      padding-right: 22px;
    }

    #override-options {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    #override-options button {
      padding: 9px 13px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      background: #f9fafb;
      cursor: pointer;
      font-size: 0.84rem;
      font-family: inherit;
      text-align: left;
      transition: background 0.12s, border-color 0.12s;
    }

    #override-options button:hover { background: #f3f4f6; border-color: #d1d5db; }

    #override-options .clear-btn {
      color: #dc2626;
      border-color: #fca5a5;
      background: #fff;
    }

    #override-options .clear-btn:hover { background: #fef2f2; border-color: #f87171; }

    #override-modal-close {
      position: absolute;
      top: 10px;
      right: 12px;
      background: none;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      color: var(--text-muted);
      line-height: 1;
      padding: 2px 4px;
    }

    #override-modal-close:hover { color: var(--text); }

    #override-note-row {
      margin-bottom: 10px;
    }

    .override-note-label {
      display: block;
      font-size: 0.76rem;
      font-weight: 600;
      color: #666;
      margin-bottom: 4px;
    }

    .override-note-label .optional-hint {
      font-weight: 400;
      color: #aaa;
    }

    #override-note-input-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    #override-note-input {
      flex: 1;
      min-width: 0;
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      font-size: 0.82rem;
      font-family: inherit;
      color: var(--text);
      background: var(--surface);
    }

    #override-note-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    }

    #override-note-save-btn {
      display: none;
      padding: 6px 10px;
      background: var(--text);
      color: #fff;
      border: none;
      border-radius: var(--radius-input);
      font-size: 0.76rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }

    #override-note-save-btn:hover { background: #1f2937; }

    #override-note-private-label {
      display: none; /* shown by JS when note field has text */
      align-items: center;
      gap: 7px;
      margin-top: 6px;
      cursor: pointer;
      user-select: none;
    }

    .note-private-toggle {
      position: relative;
      flex-shrink: 0;
      width: 28px;
      height: 16px;
    }

    .note-private-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .note-private-track {
      display: block;
      width: 28px;
      height: 16px;
      background: var(--border);
      border-radius: 8px;
      transition: background 0.18s;
      position: relative;
    }

    .note-private-thumb {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,.25);
      transition: transform 0.18s;
    }

    .note-private-toggle input:checked ~ .note-private-track { background: var(--accent); }
    .note-private-toggle input:checked ~ .note-private-track .note-private-thumb { transform: translateX(12px); }

    .note-private-text {
      font-size: 0.72rem;
      color: var(--text-muted);
      transition: color 0.18s;
    }

    #override-note-private-label:has(input:checked) .note-private-text { color: var(--accent); font-weight: 600; }

    /* Share modal */
    /* Disclaimer Modal */
    #disclaimer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 500;
      display: none;
    }

    #disclaimer-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--surface);
      border-radius: var(--radius-card);
      border: 1px solid var(--border);
      box-shadow: 0 8px 40px rgba(0,0,0,0.18);
      padding: 32px 28px 24px;
      z-index: 510;
      display: none;
      width: min(500px, calc(100vw - 32px));
    }

    #disclaimer-modal h2 {
      margin: 0 0 16px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    #disclaimer-modal p {
      margin: 0 0 12px;
      font-size: 0.875rem;
      color: var(--text-sub);
      line-height: 1.6;
    }

    #disclaimer-modal ul {
      margin: 0 0 14px;
      padding-left: 20px;
    }

    #disclaimer-modal ul li {
      font-size: 0.875rem;
      color: var(--text-sub);
      line-height: 1.6;
      margin-bottom: 5px;
    }

    #disclaimer-modal .disclaimer-note {
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: var(--radius-input);
      padding: 12px 16px;
      margin-bottom: 20px;
      font-size: 0.845rem;
      color: #92400e;
      line-height: 1.55;
    }

    #disclaimer-ack-btn {
      display: block;
      width: 100%;
      padding: 12px;
      background: var(--text);
      color: #fff;
      border: none;
      border-radius: var(--radius-input);
      font-size: 0.95rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s;
    }

    #disclaimer-ack-btn:hover { background: #1f2937; }

    #share-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: 150;
      display: none;
    }

    #share-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--surface);
      border-radius: var(--radius-card);
      border: 1px solid var(--border);
      box-shadow: 0 8px 32px rgba(0,0,0,0.14);
      padding: 24px 24px 24px;
      z-index: 160;
      display: none;
      width: min(480px, calc(100vw - 32px));
    }

    #share-modal-heading {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.015em;
      margin-bottom: 20px;
      padding-right: 24px;
    }

    #share-modal-close {
      position: absolute;
      top: 14px;
      right: 16px;
      background: none;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      color: var(--text-muted);
      padding: 2px 4px;
    }

    #share-modal-close:hover { color: var(--text); }

    .share-field { margin-bottom: 18px; }

    .share-field-label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-sub);
      text-transform: uppercase;
      letter-spacing: 0.055em;
      margin-bottom: 6px;
    }

    .share-field-row {
      display: flex;
      gap: 8px;
    }

    .share-field-row input[type="text"],
    .share-field-row input[type="password"] {
      flex: 1;
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      font-size: 0.8rem;
      background: #f9fafb;
      color: var(--text-sub);
      font-family: monospace;
      min-width: 0;
    }

    .share-copy-btn {
      padding: 9px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      background: var(--surface);
      cursor: pointer;
      font-size: 0.82rem;
      font-family: inherit;
      color: var(--text-sub);
      white-space: nowrap;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }

    .share-copy-btn:hover { background: #f3f4f6; border-color: #d1d5db; }

    .share-copy-btn.copied {
      background: #f0fdf4;
      border-color: #86efac;
      color: #15803d;
    }

    #live-link-divider,
    .share-divider {
      border-top: 1px solid var(--border);
      margin: 4px 0 18px;
    }

    .share-hint {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin: 0 0 10px;
    }

    #create-live-btn {
      padding: 9px 18px;
      background: var(--text);
      color: #fff;
      border: none;
      border-radius: var(--radius-input);
      cursor: pointer;
      font-size: 0.85rem;
      font-family: inherit;
      font-weight: 600;
      transition: background 0.15s;
    }
    #create-live-btn:hover { background: #1f2937; }
    #create-live-btn:disabled { background: var(--text-muted); cursor: default; }

    #live-sync-status { font-weight: 400; }
    #live-sync-status.syncing { color: #f59e0b; }
    #live-sync-status.error   { color: #e53e3e; }

    /* Time picker sub-view (shown after selecting a split option) */
    #override-time-picker {
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    #override-split-label {
      font-size: 0.88rem;
      font-weight: 600;
      color: #444;
    }

    .override-time-label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.82rem;
      font-weight: 600;
      color: #555;
    }

    .override-time-label input[type="time"] {
      padding: 7px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 0.95rem;
      background: #fff;
    }

    .override-picker-actions {
      display: flex;
      gap: 8px;
    }

    .override-picker-actions button {
      flex: 1;
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      cursor: pointer;
      font-size: 0.84rem;
      font-family: inherit;
      background: #f9fafb;
      transition: background 0.12s, border-color 0.12s;
    }

    .override-picker-actions button:hover { background: #f3f4f6; border-color: #d1d5db; }

    #override-apply-btn {
      background: var(--text) !important;
      color: #fff;
      border-color: var(--text) !important;
    }

    #override-apply-btn:hover { background: #1f2937 !important; }

    /* Caretaker name label inside a cell */
    .caretaker-label {
      position: absolute;
      bottom: 3px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 0.58rem;
      font-weight: 700;
      color: rgba(0,0,0,0.6);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 3px;
      pointer-events: none;
      line-height: 1;
    }

    /* Caretaker picker sub-view */
    #override-caretaker-picker {
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    #caretaker-name-section, #caretaker-action-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    #caretaker-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .caretaker-suggestion-item {
      display: flex;
      align-items: stretch;
    }

    .caretaker-suggestion-name {
      padding: 5px 12px;
      border: 1px solid var(--border);
      border-left-width: 4px;
      border-right: none;
      border-radius: var(--radius-input) 0 0 var(--radius-input);
      background: var(--surface);
      cursor: pointer;
      font-size: 0.84rem;
      font-family: inherit;
      font-weight: 500;
      transition: background 0.12s;
    }

    .caretaker-suggestion-name:hover { background: #f3f4f6; }

    .caretaker-remove-btn {
      padding: 5px 8px;
      border: 1px solid #fca5a5;
      border-left: none;
      border-radius: 0 var(--radius-input) var(--radius-input) 0;
      background: #fee2e2;
      color: #b91c1c;
      cursor: pointer;
      font-size: 0.75rem;
      line-height: 1;
      transition: background 0.12s;
    }

    .caretaker-remove-btn:hover { background: #fecaca; }

    #caretaker-new-row { display: flex; gap: 8px; }

    #caretaker-name-input {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      font-size: 0.88rem;
      font-family: inherit;
      min-width: 0;
      touch-action: manipulation;
    }

    #caretaker-continue-btn {
      padding: 8px 14px;
      background: var(--text);
      color: #fff;
      border: none;
      border-radius: var(--radius-input);
      font-size: 0.84rem;
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }

    #caretaker-continue-btn:hover { background: #1f2937; }

    #caretaker-back-btn, #caretaker-action-back-btn {
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      background: #f9fafb;
      font-size: 0.82rem;
      font-family: inherit;
      cursor: pointer;
      align-self: flex-start;
      transition: background 0.12s;
    }

    #caretaker-back-btn:hover, #caretaker-action-back-btn:hover { background: #f3f4f6; }

    #caretaker-action-label {
      font-size: 0.84rem;
      color: var(--muted);
      font-style: italic;
    }

    #caretaker-action-btns {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    #caretaker-action-btns button {
      padding: 9px 13px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      background: #f9fafb;
      cursor: pointer;
      font-size: 0.84rem;
      font-family: inherit;
      font-weight: 500;
      text-align: left;
      transition: background 0.12s, border-color 0.12s;
    }

    #caretaker-action-btns button:hover { background: #f3f4f6; border-color: #d1d5db; }

    /* ── Schedule info button & modal ── */
    .sched-field-wrapper {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .sched-field-wrapper label { margin-bottom: 0; }
    .sched-label-row {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    #schedule-info-btn {
      background: none;
      border: none;
      color: var(--accent);
      cursor: pointer;
      font-size: 0.75rem;
      font-style: italic;
      font-weight: 700;
      font-family: serif;
      padding: 0;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid var(--accent);
      line-height: 1;
      flex-shrink: 0;
      transition: background 0.12s, color 0.12s;
    }
    #schedule-info-btn:hover {
      background: var(--accent);
      color: #fff;
    }

    #schedule-info-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: 150;
      display: none;
    }

    #schedule-info-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--surface);
      border-radius: var(--radius-card);
      border: 1px solid var(--border);
      box-shadow: 0 8px 32px rgba(0,0,0,0.14);
      padding: 24px;
      z-index: 160;
      width: min(540px, calc(100vw - 32px));
      max-height: min(80vh, 640px);
      overflow-y: auto;
    }

    .schedule-info-heading {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.015em;
      margin-bottom: 18px;
      padding-right: 24px;
    }

    #schedule-info-modal-close {
      position: absolute;
      top: 14px;
      right: 16px;
      background: none;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      color: var(--text-muted);
      padding: 2px 4px;
    }
    #schedule-info-modal-close:hover { color: var(--text); }

    .sched-info-entry {
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }
    .sched-info-entry:last-of-type { border-bottom: none; }

    .sched-info-name {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 5px;
    }

    .sched-info-desc {
      font-size: 0.83rem;
      color: var(--text-sub);
      line-height: 1.55;
      margin-bottom: 8px;
    }

    .sched-info-variants {
      font-size: 0.82rem;
      color: var(--text-sub);
      line-height: 1.55;
      margin: 6px 0 8px 16px;
    }
    .sched-info-variants li { margin-bottom: 4px; }

    .sched-info-links {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .sched-info-links a {
      font-size: 0.75rem;
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
    }
    .sched-info-links a:hover { text-decoration: underline; }

    .sched-info-note {
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.5;
      padding-top: 4px;
    }

    /* ── Event button on day cells ── */
    .event-btn {
      position: absolute;
      bottom: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.2);
      background: rgba(255,255,255,0.75);
      color: rgba(0,0,0,0.55);
      font-size: 0.62rem;
      font-weight: 700;
      font-family: inherit;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.12s, background 0.12s;
      z-index: 4;
      padding: 0;
    }

    .event-btn span { font-size: 0.6rem; }

    .cal-day:hover .event-btn { opacity: 1; }
    .event-btn:hover { background: rgba(255,255,255,0.95) !important; border-color: rgba(0,0,0,0.4); }

    /* Show event button faintly when events exist, even without hover */
    .cal-day.has-events .event-btn { opacity: 0.65; }

    /* ── Event dots ── */
    .event-dots-row {
      position: absolute;
      bottom: 5px;
      left: 26px;
      right: 4px;
      display: flex;
      gap: 2px;
      align-items: center;
      flex-wrap: wrap;
      pointer-events: none;
      z-index: 3;
    }

    .event-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    }

    /* ── Tooltip event rows ── */
    .tooltip-event {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 3px;
      font-size: 0.68rem;
      opacity: 0.9;
    }

    .tooltip-event-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-block;
    }

    /* ── Event modal ── */
    #event-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: 200;
      display: none;
    }

    #event-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--surface);
      border-radius: var(--radius-card);
      border: 1px solid var(--border);
      box-shadow: 0 8px 32px rgba(0,0,0,0.16);
      padding: 24px 24px 20px;
      z-index: 210;
      display: none;
      width: min(440px, calc(100vw - 32px));
      max-height: calc(100vh - 40px);
      overflow-y: auto;
    }

    #event-modal-heading {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.015em;
      margin-bottom: 16px;
      padding-right: 24px;
    }

    #event-modal-close {
      position: absolute;
      top: 14px;
      right: 16px;
      background: none;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      color: var(--text-muted);
      padding: 2px 4px;
    }

    #event-modal-close:hover { color: var(--text); }

    /* Existing events list */
    #event-list-section {
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    #event-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .event-list-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--text-sub);
    }

    .event-list-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .event-list-info { flex: 1; font-size: 0.82rem; }

    .event-list-edit-btn {
      padding: 3px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      background: var(--surface);
      cursor: pointer;
      font-size: 0.75rem;
      font-family: inherit;
      color: var(--text-sub);
      white-space: nowrap;
      transition: background 0.12s, border-color 0.12s;
    }

    .event-list-edit-btn:hover { background: #f3f4f6; border-color: #d1d5db; }

    /* Event form */
    #event-form-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .event-label {
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-sub);
      text-transform: uppercase;
      letter-spacing: 0.055em;
    }

    .event-label select,
    .event-label input[type="text"],
    .event-label input[type="date"] {
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      font-size: 0.88rem;
      font-family: inherit;
      background: var(--surface);
      color: var(--text);
      width: 100%;
    }

    .event-label input[type="color"] {
      padding: 3px 4px;
      width: 48px;
      height: 34px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      cursor: pointer;
      background: var(--surface);
    }

    #event-date-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    #event-meta-row {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: end;
    }

    #event-color-label { width: fit-content; }

    .event-private-row {
      flex-direction: row;
      align-items: center;
      gap: 10px;
      text-transform: none;
      letter-spacing: 0;
      font-size: 0.82rem;
    }

    #event-vacation-hint {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: var(--radius-input);
      padding: 8px 12px;
    }

    .event-vacation-note {
      font-size: 0.78rem;
      color: #1e40af;
      line-height: 1.45;
    }

    #event-form-actions {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }

    .event-save-btn {
      flex: 1;
      padding: 10px 14px;
      background: var(--text);
      color: #fff;
      border: none;
      border-radius: var(--radius-input);
      font-size: 0.88rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s;
    }

    .event-save-btn:hover { background: #1f2937; }

    #event-cancel-form-btn {
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-input);
      background: var(--surface);
      font-size: 0.88rem;
      font-family: inherit;
      color: var(--text-sub);
      cursor: pointer;
      transition: background 0.12s;
    }

    #event-cancel-form-btn:hover { background: #f3f4f6; }

    .event-delete-btn {
      padding: 10px 14px;
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
      border-radius: var(--radius-input);
      font-size: 0.88rem;
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s;
    }

    .event-delete-btn:hover { background: #fecaca; }

    @media (max-width: 640px) {

      /* ── Layout ── */
      body { padding: 12px 10px; }
      h1   { font-size: 1.2rem; margin-bottom: 18px; }

      /* ── Config panel ── */
      #config-panel {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 12px;
        margin-bottom: 12px;
      }
      .name-fields-row { grid-template-columns: 1fr; }

      /* Hide "(optional)" hints — placeholders already convey this on small screens */
      #config-panel .optional-hint { display: none; }

      /* Prevent iOS auto-zoom (triggered when font-size < 16px on focused inputs) */
      #config-panel select,
      #config-panel input[type="text"],
      #config-panel input[type="date"],
      #config-panel input[type="time"] {
        font-size: 1rem;
        min-height: 44px;
      }

      #generate-btn {
        padding: 13px;
        font-size: 1rem;
        min-height: 48px;
      }

      /* ── Load panel ── */
      #load-panel { padding: 14px 16px; margin-bottom: 12px; }
      #load-user-input {
        font-size: 1rem;
        min-height: 44px;
      }
      #load-user-btn { min-height: 44px; }

      /* ── Calendar container ── */
      #calendar-container { padding: 12px 10px; }

      /* Calendar nav — Row 1: ← | Month | →   Row 2: action buttons */
      #cal-nav {
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 0;
        margin-bottom: 12px;
      }
      #prev-btn       { order: 1; padding: 8px 14px; }
      #cal-month-label { order: 2; flex: 1; text-align: center; font-size: 1rem; }
      #next-btn       { order: 3; padding: 8px 14px; }
      #cal-nav-actions {
        order: 4;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 2px;
      }
      #print-btn { display: none; }
      #cal-nav-actions button {
        font-size: 0.75rem;
        padding: 7px 10px;
        min-height: 36px;
      }

      /* Calendar grid */
      #cal-header { gap: 4px; margin-bottom: 4px; }
      #cal-scroll-body { gap: 4px; }
      #cal-header div { font-size: 0.6rem; padding: 4px 0; }

      .cal-day {
        font-size: 0.78rem;
        padding: 3px 4px;
        border-radius: 4px;
      }

      /* Shorten override/note badges on small screens */
      .cal-day.overridden::after {
        content: '✱';
        font-size: 0.65rem;
        top: 2px;
        left: 3px;
      }
      .cal-day.has-note::after {
        content: '♦';
        font-size: 0.65rem;
        top: 2px;
        left: 3px;
      }

      /* Legend */
      #legend { gap: 14px; margin-top: 14px; padding-top: 12px; }
      .legend-item { font-size: 0.78rem; }

      /* ── Override modal: center on screen instead of anchored to cell ── */
      #override-modal {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 340px;
      }

      /* Larger tap targets inside override modal */
      #override-options button, #caretaker-action-btns button { min-height: 46px; font-size: 0.9rem; }
      #override-note-input      { font-size: 1rem;  min-height: 44px; }
      #override-note-save-btn   { min-height: 44px; padding: 0 12px; }
      .override-picker-actions button { min-height: 44px; }
      #caretaker-continue-btn, #caretaker-back-btn, #caretaker-action-back-btn { min-height: 44px; }
      .override-time-label input[type="time"] {
        font-size: 1rem;
        min-height: 44px;
      }

      /* ── Event modal ── */
      #event-modal { padding: 20px 16px 16px; }
      #event-date-row { grid-template-columns: 1fr; }
      #event-meta-row { grid-template-columns: auto 1fr; }
      .event-label select,
      .event-label input[type="text"],
      .event-label input[type="date"] { font-size: 1rem; min-height: 44px; }
      .event-save-btn, #event-cancel-form-btn, .event-delete-btn { min-height: 44px; font-size: 0.9rem; }
      /* Always show event buttons on touch devices */
      .event-btn { opacity: 0.7; }

      /* ── Share / Disclaimer modals ── */
      #share-modal     { padding: 20px 16px; }
      #disclaimer-modal { padding: 24px 16px 20px; }
      .share-field-row input[type="text"],
      .share-field-row input[type="password"] { font-size: 0.78rem; }
    }

    @media print {
      #config-panel, #load-panel, #prev-btn, #next-btn, #cal-nav-actions,
      #override-modal, #share-modal, #share-backdrop {
        display: none !important;
      }
      body { background: white; padding: 0; max-width: 100%; }
      h1 { margin-bottom: 12px; }
      #calendar-container { box-shadow: none; display: block !important; }
      .cal-day {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .tooltip { display: none !important; }
    }