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

    :root {
      --bg: #ffffff;
      --text: #000000;
      --text-secondary: #737373;
      /* #a3a3a3 was ~2.5:1 on white — fails WCAG AA; #6b6b6b ≈ 5.4:1 */
      --text-muted: #6b6b6b;
      --text-button: #404040;
      --line: #e5e5e5;
      --line-strong: #d4d4d4;
      --surface-soft: #f1f1f1;
      --surface-filled: #fafafa;
      --surface-pill: #e5e5e5;
      --ink-deep: #090909;
      --radius-control: 9999px;
      --radius-panel: 12px;
      --focus-ring: rgba(59, 130, 246, 0.5);

      /* UI controls — Plane talk-to-sales style (reusable) */
      --ui-radius: 8px;
      --ui-control-h: 38px;
      --ui-control-px: 12px;
      --ui-control-gap: 8px;
      --ui-border: #e5e5e5;
      --ui-border-hover: #d4d4d4;
      --ui-control-bg: #ffffff;
      --ui-control-bg-hover: #f5f5f5;
      --ui-label-size: 14px;
      --ui-control-text: 14px;
      --ui-inverse: #0d0d0d;
      --ui-inverse-hover: #262626;
      --ui-inverse-active: #171717;
      --ui-inverse-text: #ffffff;
      --ui-disabled-bg: #f5f5f5;
      --ui-disabled-text: #a3a3a3;
      --holiday: #b91c1c;
      --holiday-bg: #fee2e2;
      --holiday-national: #b91c1c;
      --holiday-national-bg: #fee2e2;
      --holiday-federal: #b91c1c;
      --holiday-federal-bg: #fee2e2;
      --holiday-regional: #7c3aed;
      --holiday-regional-bg: #ede9fe;
      --holiday-state: #7c3aed;
      --holiday-state-bg: #ede9fe;
      --holiday-public: #b91c1c;
      --holiday-public-bg: #fee2e2;
      --holiday-government: #1d4ed8;
      --holiday-government-bg: #dbeafe;
      --holiday-bank: #0d9488;
      --holiday-bank-bg: #ccfbf1;
      --holiday-school: #d97706;
      --holiday-school-bg: #fef3c7;
      --holiday-catholic: #4338ca;
      --holiday-catholic-bg: #e0e7ff;
      --holiday-half_day: #64748b;
      --holiday-half_day-bg: #f1f5f9;
      --holiday-unofficial: #a16207;
      --holiday-unofficial-bg: #fef9c3;
      --holiday-custom: #0f766e;
      --holiday-custom-bg: #ccfbf1;
      --holiday-overlap: #991b1b;
      --holiday-overlap-bg: #fca5a5;
      --holiday-single: #b91c1c;
      --holiday-single-bg: #fee2e2;
      --today: #0071e3;
      --link: #0071e3;
      --nav-bg: rgba(255, 255, 255, 0.86);
      --font: "SF Pro Rounded", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    }

    html { font-size: 16px; }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── Sticky navigation (Ollama-style chrome) ── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--nav-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid transparent;
    }

    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 14px 24px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 16px;
    }

    .nav-left {
      justify-self: start;
    }

    .nav-center {
      justify-self: center;
      min-width: 0;
      max-width: 100%;
    }

    /* fixed width only when picker is present — chips must not resize the field */
    .nav-center:has(.region-picker) {
      width: 440px;
    }

    .nav-right {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-group {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    .nav a {
      text-decoration: none;
    }

    .nav-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      padding: 0 16px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      border-radius: var(--radius-control);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      text-decoration: none;
    }

    .nav-btn:hover { background: var(--surface-soft); }
    .nav-btn:disabled { opacity: 0.35; cursor: default; }
    .nav-btn:disabled:hover { background: transparent; }

    .nav-group .nav-btn {
      min-width: 32px;
      height: 32px;
      padding: 0;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text);
    }

    .nav-group .nav-btn:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    .nav-group .nav-btn[aria-disabled="true"] {
      opacity: 0.35;
      pointer-events: none;
    }

    .year-display {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      height: 32px;
      padding: 0 8px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      text-align: center;
      cursor: pointer;
      transition: background 0.15s;
    }

    .year-display:hover,
    .nav-group.is-open .year-display {
      background: rgba(0, 0, 0, 0.05);
    }

    .year-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      width: 112px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
      z-index: 200;
    }

    .year-dropdown[hidden] { display: none !important; }

    .year-dropdown-scroll {
      max-height: 200px;
      overflow: auto;
      margin-top: 2px;
      padding-top: 2px;
      border-top: 1px solid var(--line);
    }

    .year-option {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 8px 10px;
      border: none;
      border-radius: 7px;
      background: transparent;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      cursor: pointer;
      transition: background 0.12s;
      flex-shrink: 0;
    }

    .year-option:hover,
    .year-option.is-active {
      background: rgba(0, 0, 0, 0.05);
    }

    .year-option.is-selected {
      font-weight: 700;
      color: var(--text);
    }

    .year-option--current {
      font-weight: 700;
    }

    /* ── Location picker (country + region chips) ── */
    .region-picker {
      position: relative;
      width: 100%;
      min-width: 0;
      max-width: none;
      box-sizing: border-box;
    }

    .region-field {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      overflow: hidden;
      gap: 6px;
      width: 100%;
      box-sizing: border-box;
      min-height: 36px;
      padding: 4px 14px 4px 12px;
      border: none;
      border-radius: var(--radius-control);
      background: var(--surface-soft);
      cursor: text;
      transition: background 0.15s, box-shadow 0.15s;
    }

    .region-field:has(.region-chip:not([hidden])),
    .region-field:has(.region-input:not(:placeholder-shown)) {
      background: var(--surface-filled);
    }

    .region-picker.is-open .region-field,
    .region-field:focus-within {
      box-shadow: 0 0 0 3px var(--focus-ring);
    }

    .region-search-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: var(--text-muted);
      pointer-events: none;
    }

    .region-field:has(.region-chip:not([hidden])) .region-search-icon {
      display: none;
    }

    .region-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      min-width: 0;
      max-width: none;
      padding: 4px 6px 4px 10px;
      border-radius: var(--radius-control);
      background: var(--surface-pill);
      font-size: 13px;
      font-weight: 500;
      line-height: 1.3;
      white-space: nowrap;
    }

    .region-chip[hidden] { display: none; }

    .region-chip--region {
      background: #ececec;
    }

    .region-chip-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      white-space: nowrap;
    }

    .region-chip-code {
      flex-shrink: 0;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .region-chip-name {
      overflow: visible;
    }

    .region-clear {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border: none;
      border-radius: var(--radius-control);
      background: rgba(0, 0, 0, 0.12);
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s, color 0.15s;
    }

    .region-clear:hover {
      background: rgba(0, 0, 0, 0.2);
      color: var(--text);
    }

    .region-input {
      flex: 1 1 0;
      min-width: 32px;
      height: 28px;
      border: none;
      outline: none;
      background: transparent;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 400;
      color: var(--text);
    }

    .region-input::placeholder { color: var(--text-muted); }

    .region-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 280px;
      width: max(100%, 280px);
      max-height: 280px;
      overflow: auto;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: var(--radius-panel);
      background: #fff;
      box-shadow: none;
      z-index: 200;
    }

    .region-dropdown[hidden] { display: none !important; }

    .region-section-label {
      padding: 8px 10px 4px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .region-option {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 10px;
      border: none;
      border-radius: var(--radius-control);
      background: transparent;
      font-family: var(--font);
      font-size: 14px;
      color: var(--text);
      text-align: left;
      cursor: pointer;
      transition: background 0.12s;
    }

    .region-option:hover,
    .region-option.is-active {
      background: var(--surface-soft);
    }

    .region-option.is-selected {
      font-weight: 500;
      background: var(--surface-pill);
    }

    .region-option-code {
      margin-left: auto;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      font-variant-numeric: tabular-nums;
    }

    .region-option--with-country,
    .region-option--national {
      align-items: flex-start;
    }

    .region-option--national {
      border-bottom: 1px solid var(--line);
      border-radius: 7px 7px 0 0;
      margin-bottom: 4px;
      padding-bottom: 10px;
    }

    .region-option-main {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .region-option-name {
      line-height: 1.3;
    }

    .region-option-meta {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      line-height: 1.2;
    }

    .region-match {
      background: rgba(255, 214, 10, 0.45);
      color: inherit;
      border-radius: 2px;
      padding: 0 1px;
    }

    .region-empty {
      padding: 12px 10px;
      font-size: 13px;
      color: var(--text-muted);
    }

    /* ── Floating language switcher ── */
    .lang-switch {
      position: fixed;
      z-index: 200;
      bottom: max(20px, env(safe-area-inset-bottom));
      inset-inline-end: max(20px, env(safe-area-inset-right));
      pointer-events: auto;
    }

    .lang-switch-btn {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border: none;
      border-radius: var(--radius-control);
      background: #000;
      color: #fff;
      box-shadow: none;
      outline: 1px solid rgba(255, 255, 255, 0.08);
      cursor: pointer;
      transition: background 0.15s;
    }

    .lang-switch-btn:hover {
      background: var(--ink-deep);
    }

    .lang-switch-btn:focus {
      outline: none;
    }

    .lang-switch-btn:focus-visible {
      outline: 2px solid #66b3ff;
      outline-offset: 2px;
    }

    .lang-switch-icon {
      width: 22px;
      height: 22px;
      display: block;
    }

    body.lang-menu-open {
      overflow: hidden;
    }

    .lang-menu {
      position: fixed;
      inset: 0;
      z-index: 1000;
      flex-direction: column;
      background: var(--bg);
      padding:
        env(safe-area-inset-top, 0)
        env(safe-area-inset-right, 0)
        env(safe-area-inset-bottom, 0)
        env(safe-area-inset-left, 0);
    }

    /* Never paint fullscreen flex without .open — empty inset:0 kills all clicks */
    .lang-menu[hidden],
    .lang-menu:not(.open) { display: none !important; }

    .lang-menu.open { display: flex; }

    .lang-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-shrink: 0;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      background: var(--nav-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .lang-menu-title {
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
    }

    .lang-menu-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text-secondary);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .lang-menu-close:hover {
      background: rgba(0, 0, 0, 0.04);
      color: var(--text);
      border-color: #c7c7cc;
    }

    .lang-menu-close svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .lang-menu-list {
      flex: 1;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 8px 16px 24px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
      gap: 2px 8px;
      align-content: start;
    }

    .lang-menu-list button {
      display: flex;
      align-items: center;
      width: 100%;
      min-width: 0;
      padding: 14px 16px;
      border: none;
      border-radius: 12px;
      background: transparent;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
      text-align: left;
    }

    .lang-menu-list button:hover { background: var(--surface-soft); }

    .lang-menu-list button.active {
      background: var(--surface-pill);
      color: var(--text);
    }

    html[dir="rtl"] .lang-menu-header {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .lang-menu-list button {
      text-align: right;
    }

    html[dir="rtl"] .nav-inner {
      direction: rtl;
    }

    html[dir="rtl"] .nav-left { justify-self: end; }
    html[dir="rtl"] .nav-right { justify-self: start; }

    /* ── PDF buttons (shared shell) ── */
    .pdf-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: auto;
      height: 36px;
      padding: 0 20px;
      border-radius: var(--radius-control);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
      background: #000;
      border: 1px solid #000;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .pdf-btn-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .nav-btn.pdf-btn:not(.custom-pdf-btn):hover {
      background: var(--ink-deep);
      border-color: var(--ink-deep);
      color: #fff;
    }

    .pdf-btn-text--short { display: none; }

    /* ── Custom PDF — lava lamp hover ── */
    .custom-pdf-btn,
    .pdf-download-btn {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      z-index: 0;
    }

    .custom-pdf-btn {
      transition: color 0.08s, border-color 0.08s, transform 0.08s, box-shadow 0.08s, background 0.08s;
    }

    .custom-pdf-btn .lava,
    .pdf-download-btn .lava {
      position: absolute;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.08s ease;
      background: #0a0312;
      filter: contrast(1.15) saturate(1.25);
    }

    .custom-pdf-btn .lava-blobs,
    .pdf-download-btn .lava-blobs {
      position: absolute;
      inset: 0;
      filter: contrast(28) brightness(1.1);
      background: #0a0312;
    }

    .custom-pdf-btn .lava-inner,
    .pdf-download-btn .lava-inner {
      position: absolute;
      inset: -50%;
      filter: blur(10px);
    }

    .custom-pdf-btn .blob,
    .pdf-download-btn .blob {
      position: absolute;
      display: block;
      border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
      will-change: transform;
    }

    .custom-pdf-btn .blob-1,
    .pdf-download-btn .blob-1 {
      width: 58%;
      height: 120%;
      left: -8%;
      top: 35%;
      background: #c44dff;
      animation: lava-rise-1 3.4s ease-in-out infinite;
    }

    .custom-pdf-btn .blob-2,
    .pdf-download-btn .blob-2 {
      width: 48%;
      height: 100%;
      right: -6%;
      top: -10%;
      background: #ff4db8;
      animation: lava-rise-2 4.2s ease-in-out infinite;
    }

    .custom-pdf-btn .blob-3,
    .pdf-download-btn .blob-3 {
      width: 40%;
      height: 90%;
      left: 28%;
      bottom: -30%;
      background: #7a3cff;
      animation: lava-rise-3 2.9s ease-in-out infinite;
    }

    .custom-pdf-btn .blob-4,
    .pdf-download-btn .blob-4 {
      width: 36%;
      height: 70%;
      left: 48%;
      top: -25%;
      background: #ff7ad9;
      animation: lava-rise-4 3.7s ease-in-out infinite;
    }

    .custom-pdf-btn .lava-label,
    .pdf-download-btn .lava-label {
      position: relative;
      z-index: 1;
    }

    @media (hover: hover) and (pointer: fine) {
      .nav-btn.custom-pdf-btn:hover {
        color: #fff;
        border-color: rgba(200, 120, 255, 0.75);
        transform: translateY(-1px);
        background: #0c0414;
        box-shadow: 0 0 18px rgba(180, 60, 255, 0.35), inset 0 0 12px rgba(255, 80, 180, 0.15);
      }

      .custom-pdf-btn:hover .lava {
        opacity: 1;
      }
    }

    @keyframes lava-rise-1 {
      0%, 100% { transform: translate(0, 20%) scale(1) rotate(0deg); border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; }
      50%      { transform: translate(14%, -40%) scale(1.12) rotate(25deg); border-radius: 55% 45% 42% 58% / 40% 55% 45% 60%; }
    }

    @keyframes lava-rise-2 {
      0%, 100% { transform: translate(0, -25%) scale(1.05) rotate(10deg); border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%; }
      50%      { transform: translate(-20%, 45%) scale(0.88) rotate(-20deg); border-radius: 40% 60% 55% 45% / 48% 52% 48% 52%; }
    }

    @keyframes lava-rise-3 {
      0%, 100% { transform: translate(-8%, 5%) scale(0.95) rotate(-8deg); }
      50%      { transform: translate(18%, -50%) scale(1.18) rotate(30deg); }
    }

    @keyframes lava-rise-4 {
      0%, 100% { transform: translate(8%, 35%) scale(1) rotate(5deg); }
      50%      { transform: translate(-22%, -30%) scale(1.08) rotate(-15deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .custom-pdf-btn .blob,
      .pdf-download-btn .blob { animation: none; }
    }

    /* ── Layout ── */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 64px;
    }

    /* ── Hero ── */
    .hero {
      padding: 48px 0 40px;
      text-align: left;
    }

    .hero-year {
      display: flex;
      align-items: flex-start;
      font-size: clamp(64px, 12vw, 148px);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .hero-year-prefix {
      flex-shrink: 0;
    }

    .hero-year-slot {
      display: block;
      height: 1em;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      /* tabular width for digit 0–9 */
      min-width: 0.62em;
    }

    .hero-year-slot::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) 90%, transparent) 0%,
        transparent 18%,
        transparent 82%,
        color-mix(in srgb, var(--bg) 90%, transparent) 100%
      );
      z-index: 1;
      opacity: 0;
      transition: opacity 0.15s;
    }

    .hero-year.is-spinning .hero-year-slot::after {
      opacity: 1;
    }

    .hero-year-reel {
      display: flex;
      flex-direction: column;
      will-change: transform;
    }

    .hero-year-digit {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1em;
      line-height: 1;
      flex-shrink: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-year-slot::after { display: none; }
    }

    .hero-subtitle {
      margin-top: 12px;
      font-size: 21px;
      color: var(--text-secondary);
      font-weight: 400;
    }

    .legend {
      display: flex;
      justify-content: flex-start;
      gap: 24px;
      margin-top: 28px;
      flex-wrap: wrap;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .legend-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 0;
      box-shadow: none;
    }

    .legend-dot--holiday,
    .legend-dot--national,
    .legend-dot--federal,
    .legend-dot--public {
      background-color: var(--holiday-national-bg);
      box-shadow: none;
    }

    .legend-dot--regional,
    .legend-dot--state {
      background-color: var(--holiday-regional-bg);
      box-shadow: none;
    }

    .legend-dot--government {
      background-color: var(--holiday-government-bg);
      box-shadow: none;
    }

    .legend-dot--bank {
      background-color: var(--holiday-bank-bg);
      box-shadow: none;
    }

    .legend-dot--school {
      background-color: var(--holiday-school-bg);
      box-shadow: none;
    }

    .legend-dot--catholic {
      background-color: var(--holiday-catholic-bg);
      box-shadow: none;
    }

    .legend-dot--half_day {
      background-color: var(--holiday-half_day-bg);
      box-shadow: none;
    }

    .legend-dot--unofficial {
      background-color: var(--holiday-unofficial-bg);
      box-shadow: none;
    }

    .legend-dot--custom {
      background-color: var(--holiday-custom-bg);
      box-shadow: none;
    }

    .legend-dot--tint-rose { background-color: #fce4ec; box-shadow: none; }
    .legend-dot--tint-peach { background-color: #ffe8d6; box-shadow: none; }
    .legend-dot--tint-lemon { background-color: #fef6d8; box-shadow: none; }
    .legend-dot--tint-mint { background-color: #d8f3e8; box-shadow: none; }
    .legend-dot--tint-sky { background-color: #ddeef8; box-shadow: none; }
    .legend-dot--tint-lilac { background-color: #ebe4f5; box-shadow: none; }
    .legend-dot--tint-sand { background-color: #f3ebe0; box-shadow: none; }
    .legend-dot--tint-mist { background-color: #e8eef2; box-shadow: none; }

    .legend-dot--overlap {
      background-color: var(--holiday-overlap-bg);
      box-shadow: none;
    }

    .legend-dot--single {
      background-color: var(--holiday-single-bg);
      box-shadow: none;
    }

    .legend-dot--today { background-color: var(--today); box-shadow: none; }
    .legend-dot--weekend { background-color: var(--text-muted); box-shadow: none; }

    /* ── Month grid ── */
    .months-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px 32px;
    }

    .month-card {
      opacity: 0;
      transform: translateY(12px);
      animation: fadeIn 0.5s ease forwards;
    }

    @keyframes fadeIn {
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .month-card {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }

    .month-name {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      margin-bottom: 4px;
    }

    .weekday {
      text-align: center;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 4px 0;
    }

    .days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px 0;
    }

    .day {
      position: relative;
      z-index: 0;
      text-align: center;
      padding: 6px 0;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }

    .day--empty { visibility: hidden; }
    .day--weekend { color: var(--text-muted); }

    /* как на calendra.work: цветной текст + круглый фон */
    .day--holiday {
      color: var(--day-holiday-color, var(--holiday));
      font-weight: 600;
    }

    .day--holiday::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(2.12em, 70%);
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: var(--day-holiday-bg, var(--holiday-bg));
      z-index: -1;
    }

    .day--holiday-national,
    .day--holiday-federal,
    .day--holiday-public {
      --day-holiday-color: var(--holiday-national);
      --day-holiday-bg: var(--holiday-national-bg);
    }

    .day--holiday-regional,
    .day--holiday-state {
      --day-holiday-color: var(--holiday-regional);
      --day-holiday-bg: var(--holiday-regional-bg);
    }

    .day--holiday-government {
      --day-holiday-color: var(--holiday-government);
      --day-holiday-bg: var(--holiday-government-bg);
    }

    .day--holiday-bank {
      --day-holiday-color: var(--holiday-bank);
      --day-holiday-bg: var(--holiday-bank-bg);
    }

    .day--holiday-school {
      --day-holiday-color: var(--holiday-school);
      --day-holiday-bg: var(--holiday-school-bg);
    }

    .day--holiday-catholic {
      --day-holiday-color: var(--holiday-catholic);
      --day-holiday-bg: var(--holiday-catholic-bg);
    }

    .day--holiday-half_day {
      --day-holiday-color: var(--holiday-half_day);
      --day-holiday-bg: var(--holiday-half_day-bg);
    }

    .day--holiday-unofficial {
      --day-holiday-color: var(--holiday-unofficial);
      --day-holiday-bg: var(--holiday-unofficial-bg);
    }

    .day--holiday-custom {
      --day-holiday-color: var(--holiday-custom);
      --day-holiday-bg: var(--holiday-custom-bg);
    }

    .day--holiday-overlap {
      --day-holiday-color: var(--holiday-overlap);
      --day-holiday-bg: var(--holiday-overlap-bg);
    }

    .day--holiday-single {
      --day-holiday-color: var(--holiday-single);
      --day-holiday-bg: var(--holiday-single-bg);
    }

    .day--tint-rose {
      --day-holiday-color: #9f3d5a;
      --day-holiday-bg: #fce4ec;
    }

    .day--tint-peach {
      --day-holiday-color: #a85a3a;
      --day-holiday-bg: #ffe8d6;
    }

    .day--tint-lemon {
      --day-holiday-color: #8a7340;
      --day-holiday-bg: #fef6d8;
    }

    .day--tint-mint {
      --day-holiday-color: #3d7a65;
      --day-holiday-bg: #d8f3e8;
    }

    .day--tint-sky {
      --day-holiday-color: #3d6f8f;
      --day-holiday-bg: #ddeef8;
    }

    .day--tint-lilac {
      --day-holiday-color: #6b5a8a;
      --day-holiday-bg: #ebe4f5;
    }

    .day--tint-sand {
      --day-holiday-color: #7a6a55;
      --day-holiday-bg: #f3ebe0;
    }

    .day--tint-mist {
      --day-holiday-color: #5a6a75;
      --day-holiday-bg: #e8eef2;
    }

    .day-color-select {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .day-color-select--compact {
      flex: 0 0 auto;
    }

    .day-color-select__trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg, #fff);
      cursor: pointer;
    }

    .day-color-select__trigger:hover {
      border-color: var(--text-muted);
    }

    .day-color-select__chip {
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--color-swatch, var(--swatch-bg, #d8f3e8));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swatch-fg, #3d7a65) 22%, transparent);
    }

    .day-color-select__trigger .day-color-select__chip {
      background: var(--color-swatch, #d8f3e8);
    }

    .day-color-select__menu {
      position: fixed;
      z-index: 80;
      display: grid;
      grid-template-columns: repeat(4, 28px);
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bg, #fff);
      box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent);
    }

    .day-color-select__menu[hidden] {
      display: none;
    }

    .day-color-select__option {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
    }

    .day-color-select__option:hover,
    .day-color-select__option.is-selected {
      background: color-mix(in srgb, var(--line) 70%, transparent);
    }

    .day-color-select__option.is-selected .day-color-select__chip {
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--swatch-fg) 28%, transparent),
        0 0 0 2px var(--bg, #fff),
        0 0 0 3px var(--swatch-fg);
    }

    .custom-share-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .custom-share-form {
      display: grid;
      gap: 10px;
    }

    .custom-share-pin-field {
      max-width: 280px;
      margin: 0;
    }

    .custom-share-pin-input,
    .share-pin-input {
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.35em;
      text-align: center;
      font-size: 18px;
    }

    .custom-share-pin-input::placeholder {
      letter-spacing: normal;
      text-align: left;
      font-size: 13px;
    }

    .share-pin-form .share-pin-input {
      max-width: 160px;
    }

    .custom-share-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--text);
      cursor: pointer;
      user-select: none;
    }

    .custom-share-toggle input {
      width: 16px;
      height: 16px;
      margin: 0;
    }

    .custom-share-clear-pin {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted, var(--text-muted, #667));
      cursor: pointer;
      user-select: none;
    }

    .custom-share-clear-pin input {
      width: 16px;
      height: 16px;
      margin: 0;
    }

    .day--today .day-num {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--today);
      color: #fff;
      font-weight: 600;
    }

    .day--today.day--holiday .day-num {
      background: var(--today);
      color: #fff;
    }

    .day--today.day--holiday::before { display: none; }

    /* ── Holiday list ── */
    .holidays-section {
      margin-top: 64px;
      padding-top: 40px;
      border-top: 1px solid var(--line);
    }

    .holidays-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 24px;
    }

    .holidays-list {
      column-count: 2;
      column-gap: 48px;
    }

    .holiday-row {
      display: flex;
      align-items: flex-start;
      gap: 28px;
      padding: 12px 0;
      break-inside: avoid;
    }

    .holiday-date {
      flex-shrink: 0;
      width: 88px;
      font-size: 14px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      color: var(--holiday);
      padding-top: 1px;
    }

    .holiday-date--national,
    .holiday-date--federal,
    .holiday-date--public { color: var(--holiday-national); }

    .holiday-date--regional,
    .holiday-date--state { color: var(--holiday-regional); }

    .holiday-date--government { color: var(--holiday-government); }
    .holiday-date--bank { color: var(--holiday-bank); }
    .holiday-date--school { color: var(--holiday-school); }
    .holiday-date--catholic { color: var(--holiday-catholic); }
    .holiday-date--half_day { color: var(--holiday-half_day); }
    .holiday-date--unofficial { color: var(--holiday-unofficial); }
    .holiday-date--custom { color: var(--holiday-custom); }
    .holiday-date--overlap { color: var(--holiday-overlap); }
    .holiday-date--single { color: var(--holiday-single); }

    .holiday-date.holiday-date--tint-rose { color: #9f3d5a; }
    .holiday-date.holiday-date--tint-peach { color: #a85a3a; }
    .holiday-date.holiday-date--tint-lemon { color: #8a7340; }
    .holiday-date.holiday-date--tint-mint { color: #3d7a65; }
    .holiday-date.holiday-date--tint-sky { color: #3d6f8f; }
    .holiday-date.holiday-date--tint-lilac { color: #6b5a8a; }
    .holiday-date.holiday-date--tint-sand { color: #7a6a55; }
    .holiday-date.holiday-date--tint-mist { color: #5a6a75; }

    .holiday-type--tint-rose { color: #9f3d5a; }
    .holiday-type--tint-peach { color: #a85a3a; }
    .holiday-type--tint-lemon { color: #8a7340; }
    .holiday-type--tint-mint { color: #3d7a65; }
    .holiday-type--tint-sky { color: #3d6f8f; }
    .holiday-type--tint-lilac { color: #6b5a8a; }
    .holiday-type--tint-sand { color: #7a6a55; }
    .holiday-type--tint-mist { color: #5a6a75; }

    .holiday-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .holiday-name {
      font-size: 15px;
      color: var(--text);
      line-height: 1.35;
    }

    .holiday-local {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.3;
    }

    .holiday-type {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.3;
    }

    .calendar-page {
      display: flex;
      flex-direction: column;
      gap: clamp(3.5rem, 6vw, 5.5rem);
    }

    .calendar-page .hero {
      padding: clamp(2.75rem, 5vw, 3.75rem) 0 0;
    }

    .calendar-page .legend {
      margin-top: clamp(1.75rem, 3vw, 2.25rem);
    }

    .calendar-page .months-grid {
      gap: clamp(2.75rem, 4vw, 3.25rem) clamp(2rem, 3vw, 2.75rem);
    }

    .calendar-page .holidays-section {
      margin-top: 0;
      padding-top: clamp(2.5rem, 4vw, 3.5rem);
    }

    .calendar-custom-promo {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: clamp(1.75rem, 4vw, 3rem);
      align-items: start;
      margin-top: 0;
      padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.75rem, 4vw, 3rem);
      border: 1px solid var(--line);
      border-radius: 16px;
      background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--holiday-national-bg) 55%, transparent), transparent 55%),
        linear-gradient(165deg, color-mix(in srgb, var(--today) 5%, transparent), transparent 60%);
    }

    /* Copy-side outer inset — mirrors overlap text sitting in the right half */
    .calendar-custom-promo:not(.calendar-custom-promo--overlap) {
      padding-left: clamp(4rem, 10vw, 7rem);
    }

    .calendar-custom-promo--overlap {
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--holiday-overlap-bg) 75%, transparent), transparent 55%),
        linear-gradient(195deg, color-mix(in srgb, var(--holiday-overlap) 7%, transparent), transparent 60%);
    }

    .calendar-custom-promo--overlap .calendar-custom-promo__preview {
      order: -1;
    }

    .calendar-custom-promo__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 2px;
    }

    .calendar-custom-promo__chips .overlap-chip {
      pointer-events: none;
      cursor: default;
      padding-right: 10px;
    }

    .calendar-custom-promo__chips .overlap-chip-remove {
      display: none;
    }

    .calendar-custom-promo__eyebrow {
      margin: 0 0 10px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .calendar-custom-promo__title {
      margin: 0 0 12px;
      font-size: clamp(1.5rem, 2.4vw, 1.85rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      color: var(--text);
      text-wrap: balance;
    }

    .calendar-custom-promo__lead {
      margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
      max-width: 40ch;
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.55;
    }

    .calendar-custom-promo__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 18px;
    }

    .calendar-custom-promo__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.55em;
      max-width: 100%;
      padding: 10px 24px;
      min-height: 40px;
      border: 1px solid #000;
      border-radius: var(--radius-control);
      background: #000;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.2;
      text-decoration: none;
      box-shadow: none;
      transition: background 0.15s, border-color 0.15s;
    }

    .calendar-custom-promo__cta::after {
      content: "";
      width: 0.55em;
      height: 0.55em;
      margin-top: 0.05em;
      border-right: 1.5px solid currentColor;
      border-top: 1.5px solid currentColor;
      transform: rotate(45deg);
      transition: transform 0.18s ease;
      flex-shrink: 0;
    }

    .calendar-custom-promo__cta:hover {
      background: var(--ink-deep);
      border-color: var(--ink-deep);
      transform: none;
      box-shadow: none;
    }

    .calendar-custom-promo__cta:hover::after {
      transform: translateX(2px) rotate(45deg);
    }

    .calendar-custom-promo__cta:active {
      transform: none;
      box-shadow: none;
    }

    .calendar-custom-promo__note,
    .calendar-custom-promo__login {
      flex-basis: 100%;
      font-size: 13px;
      color: var(--text-muted);
    }

    .calendar-custom-promo__login a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
      border-bottom: none;
    }

    .calendar-custom-promo__login a:hover {
      color: var(--link);
      text-decoration-color: var(--link);
    }

    .calendar-custom-promo__preview {
      display: grid;
      gap: 12px;
      width: 100%;
      max-width: 320px;
      min-width: 0;
      justify-self: end;
      padding: 14px 14px 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: color-mix(in srgb, var(--bg) 88%, #fff);
      box-shadow: 0 18px 40px -28px rgba(29, 29, 31, 0.45);
    }

    .calendar-custom-promo__mini-name {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 24px;
      color: var(--text);
      text-transform: uppercase;
    }

    .calendar-custom-promo__mini-weekdays,
    .calendar-custom-promo__mini-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 1px 0;
    }

    .calendar-custom-promo__mini-weekdays span {
      text-align: center;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 0 0 4px;
    }

    .calendar-custom-promo__mini .day {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30px;
      min-height: 0;
      padding: 0;
      font-size: 12px;
    }

    .calendar-custom-promo__mini .day--holiday::before {
      width: 1.65em;
    }

    .calendar-custom-promo__legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
    }

    .calendar-custom-promo__legend .legend-item {
      font-size: 12px;
      gap: 6px;
    }

    .calendar-custom-promo__list {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .calendar-custom-promo__list .holiday-row {
      gap: 16px;
      padding: 10px 0;
    }

    .calendar-custom-promo__list .holiday-row + .holiday-row {
      border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    }

    .calendar-custom-promo__list .holiday-date {
      width: 64px;
      font-size: 13px;
    }

    .calendar-custom-promo__list .holiday-name {
      font-size: 13px;
    }

    .calendar-custom-promo__list .holiday-type {
      font-size: 11px;
    }

    @media (max-width: 860px) {
      .calendar-custom-promo {
        grid-template-columns: 1fr;
      }

      .calendar-custom-promo__preview {
        order: -1;
        justify-self: center;
        max-width: 320px;
      }
    }

    .calendar-page .holidays-title {
      margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
    }

    .calendar-page .holiday-row {
      padding: 14px 0;
    }

    .calendar-page .internal-links {
      margin-top: 0;
      padding-top: clamp(2rem, 3vw, 2.75rem);
    }

    .calendar-page .related-calendars-buttons {
      margin-top: 20px;
    }

    .calendar-page .internal-links-list {
      margin-top: 20px;
    }

    .container:has(.calendar-page) {
      padding-bottom: clamp(4.5rem, 7vw, 6rem);
    }

    /* ── Footer ── */
    .footer {
      margin-top: 64px;
      padding: 40px 0 28px;
      border-top: 1px solid var(--line);
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 32px 40px;
      text-align: left;
    }

    .footer-heading {
      margin: 0 0 12px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .footer-links a {
      color: var(--text-secondary);
      text-decoration: none;
      border-bottom: none;
      transition: color 0.15s;
    }

    .footer-links a:hover {
      color: var(--text);
    }

    .footer-logout-form {
      display: inline;
      margin: 0;
      padding: 0;
    }

    .footer-logout-btn {
      background: none;
      border: 0;
      padding: 0;
      margin: 0;
      font: inherit;
      color: var(--text-secondary);
      cursor: pointer;
      text-align: left;
    }

    .footer-logout-btn:hover {
      color: var(--text);
    }

    .footer-meta {
      margin: 36px 0 0;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
    }

    .footer-meta-sep {
      margin: 0 0.35em;
    }

    /* News page */
    .news-page {
      max-width: 640px;
      margin: 0 auto;
      padding: 24px 0 48px;
    }

    .news-header {
      margin-bottom: 32px;
    }

    .news-title {
      font-size: clamp(1.75rem, 3vw, 2.25rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text);
      margin: 0 0 10px;
    }

    .news-lead {
      margin: 0;
      color: var(--text-secondary);
      font-size: 1.05rem;
      line-height: 1.55;
    }

    .news-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .news-item {
      padding-bottom: 28px;
      border-bottom: 1px solid var(--line);
      scroll-margin-top: 88px;
    }

    .news-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .news-date {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .news-item-title {
      margin: 0 0 8px;
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
    }

    .news-item-body {
      margin: 0;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .news-empty {
      color: var(--text-muted);
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .months-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
      .holidays-list { column-count: 1; }
      .nav-center:has(.region-picker) { width: 340px; }
    }

    @media (max-width: 720px) {
      .nav-inner {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        min-width: 0;
      }

      .nav-left {
        flex-shrink: 0;
      }

      .nav-center {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        justify-self: stretch;
      }

      .region-picker {
        min-width: 0;
        max-width: none;
        width: 100%;
      }

      .nav-right {
        flex-shrink: 0;
        display: flex;
        align-items: center;
      }

      .nav-actions {
        display: flex;
        gap: 6px;
        width: auto;
        min-width: 0;
      }

      .nav-actions .pdf-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 12px;
      }

      .nav-group {
        gap: 4px;
      }

      .region-dropdown {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-height: min(280px, 50vh);
      }

      .hero { padding: 36px 0 28px; }
      .hero-subtitle { font-size: 18px; }
      .container { padding: 0 16px 56px; }

      .calendar-page { gap: 3rem; }
      .calendar-page .hero { padding: 2.25rem 0 0; }
      .calendar-page .holidays-section { padding-top: 2.25rem; }
      .calendar-page .internal-links { padding-top: 1.75rem; }
    }

    @media (max-width: 540px) {
      .nav-inner {
        gap: 6px;
        padding: 8px 12px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
      }

      .nav-group .nav-btn {
        min-width: 32px;
        width: 32px;
        height: 36px;
        padding: 0;
        font-size: 16px;
      }

      .year-display {
        font-size: 15px;
        min-width: 40px;
        height: 36px;
        padding: 0 4px;
      }

      .pdf-btn-text--long { display: none; }
      .pdf-btn-text--short { display: inline; }

      .nav-actions .pdf-btn {
        padding: 0 8px;
        font-size: 12px;
        letter-spacing: 0;
      }

      .year-dropdown {
        left: 0;
        right: auto;
        transform: none;
      }

      .year-dropdown-scroll {
        max-height: min(200px, 40vh);
      }

      .region-field {
        min-height: 36px;
        padding: 3px 4px 3px 6px;
      }

      .region-chip {
        max-width: none;
        font-size: 12px;
        padding: 3px 4px 3px 6px;
      }

      .region-input {
        min-width: 20px;
        height: 28px;
        font-size: 16px; /* iOS: no zoom on focus */
      }

      .feedback-form input:not(.feedback-honeypot):not(.ui-input),
      .feedback-form textarea:not(.ui-input) {
        font-size: 16px; /* iOS: no zoom on focus */
      }

      .feedback-form input:not(.feedback-honeypot):not(.ui-input) {
        height: 40px;
        padding: 4px 10px;
      }

      .region-dropdown {
        max-height: min(320px, 55vh);
      }

      .region-option {
        padding: 12px 12px;
        font-size: 15px;
        min-height: 44px;
      }

      .lang-menu-header {
        padding: 12px 12px 12px 16px;
      }

      .lang-menu-list {
        max-width: none;
        padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0));
        grid-template-columns: 1fr;
        gap: 2px;
      }

      .lang-menu-list button {
        padding: 16px;
        font-size: 17px;
        min-height: 52px;
      }

      .container {
        padding: 0 14px 48px;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(48px, env(safe-area-inset-bottom));
      }

      .hero { padding: 28px 0 24px; }

      .hero-year {
        font-size: clamp(56px, 18vw, 96px);
      }

      .hero-subtitle {
        font-size: 16px;
        margin-top: 8px;
      }

      .legend {
        gap: 12px 16px;
        margin-top: 20px;
      }

      .legend-item { font-size: 12px; }

      .months-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .month-name {
        font-size: 12px;
        margin-bottom: 10px;
      }

      .weekday {
        font-size: 12px;
        padding: 6px 0;
      }

      .day {
        padding: 8px 0;
        font-size: 15px;
        min-height: 40px;
      }

      .day--today .day-num {
        width: 32px;
        height: 32px;
      }

      .day--holiday::before {
        width: min(2.12em, 68%);
      }

      .holidays-section {
        margin-top: 48px;
        padding-top: 28px;
      }

      .calendar-page { gap: 2.75rem; }
      .calendar-page .hero { padding: 1.75rem 0 0; }
      .calendar-page .legend { margin-top: 1.25rem; }
      .calendar-page .months-grid { gap: 2.25rem; }
      .calendar-page .holidays-section { padding-top: 2rem; }
      .calendar-page .internal-links { padding-top: 1.5rem; }

      .holiday-row {
        gap: 20px;
        padding: 14px 0;
      }

      .holiday-date {
        width: 76px;
        font-size: 13px;
      }

      .holiday-name { font-size: 14px; }

      .holiday-local { font-size: 12px; }

      .footer {
        margin-top: 48px;
        padding-top: 32px;
        padding-left: 0;
        padding-right: 0;
      }

      .footer-inner {
        padding: 0 16px;
      }

      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 24px;
      }

      .footer-meta {
        margin-top: 28px;
        font-size: 11px;
      }
    }

    @media (max-width: 480px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    @media (max-width: 380px) {
      .nav-actions .pdf-btn {
        font-size: 11px;
        padding: 0 7px;
      }

      .year-display {
        min-width: 36px;
        font-size: 14px;
      }

      .nav-group .nav-btn {
        min-width: 28px;
        width: 28px;
      }

      .hero-subtitle { font-size: 15px; }
      .day { font-size: 14px; padding: 6px 0 10px; }
    }

    /* ── Print / PDF (A4) ── */
    @page {
      size: A4;
      margin: 12mm;
    }

    @media print {
      .nav,
      .legend,
      .footer {
        display: none !important;
      }

      body {
        background: #fff;
        font-size: 9px;
      }

      .container {
        max-width: none;
        padding: 0;
        margin: 0;
      }

      .hero {
        padding: 0 0 6mm;
        text-align: left;
      }

      .hero-year {
        font-size: 36pt;
        letter-spacing: -0.03em;
      }

      .hero-year-slot::after { display: none !important; }
      .hero-year-reel {
        transform: none !important;
        transition: none !important;
      }

      .hero-subtitle {
        font-size: 10pt;
        margin-top: 2mm;
      }

      .months-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4mm 3mm;
        page-break-inside: avoid;
      }

      .month-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        page-break-inside: avoid;
      }

      .month-name {
        font-size: 7pt;
        margin-bottom: 1.5mm;
      }

      .weekday {
        font-size: 6.5pt;
        padding: 1px 0;
      }

      .day {
        font-size: 7.5pt;
        padding: 1px 0;
      }

      .day--today .day-num {
        width: 14px;
        height: 14px;
        font-size: 7pt;
      }

      .day--holiday::before {
        width: min(1.6em, 70%);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .calendar-page {
        gap: 0;
      }

      .holidays-section {
        break-before: page;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }

      .holidays-title {
        font-size: 8pt;
        margin-bottom: 4mm;
      }

      .holidays-list {
        column-count: 2;
        column-gap: 6mm;
      }

      .holiday-row {
        padding: 2mm 0;
      }

      .holiday-date {
        font-size: 8pt;
        width: 18mm;
      }

      .holiday-name {
        font-size: 8.5pt;
      }

      .holiday-local {
        font-size: 7.5pt;
      }
    }

    /* Breadcrumbs + internal links */
    .page-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px 16px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 12px 24px 0;
    }

    .breadcrumbs {
      min-width: 0;
      flex: 1;
    }

    .breadcrumbs-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .breadcrumbs-list li:not(:last-child)::after {
      content: "›";
      margin-left: 8px;
      color: var(--text-muted);
    }

    .breadcrumbs-list a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
    }

    .breadcrumbs-list a:hover {
      text-decoration-color: var(--link);
    }

    .page-meta-actions {
      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      gap: 8px;
    }

    .page-meta-fav-form {
      display: inline-flex;
      flex-shrink: 0;
      margin: 0;
    }

    .page-meta-fav {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 4px 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.2;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
    }

    .page-meta-fav:hover {
      color: var(--text);
      border-color: var(--text-muted);
    }

    .page-meta-fav--active {
      color: #c77d00;
      border-color: #e0b35a;
    }

    .page-meta-fav--active:hover {
      color: #a86800;
    }

    .page-meta-export {
      position: relative;
      flex-shrink: 0;
    }

    .page-meta-export-btn {
      list-style: none;
    }

    .page-meta-export-btn::-webkit-details-marker {
      display: none;
    }

    .page-meta-export-btn::after {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid currentColor;
      opacity: 0.7;
    }

    .page-meta-export[open] .page-meta-export-btn {
      color: var(--text);
      border-color: var(--text-muted);
    }

    .page-meta-export-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 200;
      min-width: 160px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    }

    .page-meta-export-item {
      display: block;
      width: 100%;
      padding: 8px 10px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.2;
      text-align: left;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }

    .page-meta-export-item:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    .page-meta-export-item:disabled {
      opacity: 0.6;
      cursor: wait;
    }

    @media (max-width: 640px) {
      .page-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px 0;
      }

      .page-meta-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
      }
    }

    .internal-links {
      margin-top: 48px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .related-calendars-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }

    .related-cal-btn {
      display: inline-flex;
      align-items: center;
      padding: 8px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      text-decoration: none;
      white-space: nowrap;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }

    .related-cal-btn:hover {
      border-color: var(--text-muted);
      background: rgba(0, 0, 0, 0.03);
    }

    .related-cal-btn.is-current {
      border-color: var(--today);
      background: rgba(0, 113, 227, 0.08);
      color: var(--today);
      pointer-events: none;
    }

    .related-cal-more {
      display: contents;
    }

    .related-cal-more[hidden] {
      display: none;
    }

    .related-calendars-buttons.is-expanded .related-cal-more {
      display: contents;
    }

    .related-special-calendars {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px dashed var(--line);
    }

    .related-special-title {
      margin: 0 0 10px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .related-special-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .related-cal-btn--special {
      border-style: solid;
      border-color: rgba(180, 130, 40, 0.45);
      background: rgba(180, 130, 40, 0.08);
    }

    .related-cal-btn--special:hover {
      border-color: rgba(180, 130, 40, 0.75);
      background: rgba(180, 130, 40, 0.14);
    }

    .related-cal-btn--special.is-current {
      border-color: rgba(180, 130, 40, 0.9);
      background: rgba(180, 130, 40, 0.18);
      color: #8a5a10;
    }

    .related-cal-toggle {
      display: inline-flex;
      align-items: center;
      padding: 8px 14px;
      border: 1px dashed var(--line);
      border-radius: 999px;
      background: transparent;
      color: var(--today);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }

    .related-cal-toggle:hover {
      border-color: var(--today);
      background: rgba(0, 113, 227, 0.06);
    }

    .internal-links-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 16px 24px;
      margin-top: 16px;
    }

    .internal-links-list a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
      font-size: 14px;
    }

    .internal-links-list a:hover {
      text-decoration-color: var(--link);
    }

    .home-links {
      list-style: none;
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .home-links a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
      font-size: 16px;
    }

    .home-links a:hover {
      text-decoration-color: var(--link);
    }

    /* ── Home landing ── */
    .page-home .container {
      max-width: 1200px;
      padding-bottom: 80px;
    }

    .home-hero {
      padding: 64px 0 56px;
      text-align: center;
    }

    .home-hero-showcase {
      display: grid;
      grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
      gap: 40px 56px;
      align-items: center;
      margin-top: 48px;
      text-align: left;
    }

    .home-hero-copy {
      min-width: 0;
    }

    .home-pdf-pitch {
      font-size: clamp(17px, 2.4vw, 20px);
      line-height: 1.55;
      color: var(--text);
      font-weight: 400;
      margin-top: 24px;
      margin-bottom: 28px;
    }

    .home-calendar-stack {
      position: relative;
      width: 100%;
      max-width: 300px;
      height: 340px;
      margin: 0 auto;
      justify-self: center;
    }

    .home-calendar-photo {
      position: absolute;
      left: 50%;
      top: 50%;
      display: block;
      width: min(220px, 72vw);
      aspect-ratio: 210 / 297;
      margin: -148px 0 0 -110px;
      background: #fff;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 12px 32px rgba(0, 0, 0, 0.12);
      text-decoration: none;
      overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .home-calendar-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      pointer-events: none;
    }

    .home-calendar-photo--1 {
      transform: rotate(-10deg) translate(-34px, 18px);
      z-index: 1;
    }

    .home-calendar-photo--2 {
      transform: rotate(5deg) translate(8px, -6px);
      z-index: 2;
    }

    .home-calendar-photo--3 {
      transform: rotate(-3deg) translate(36px, 24px);
      z-index: 3;
    }

    .home-calendar-stack:hover .home-calendar-photo--1 {
      transform: rotate(-12deg) translate(-40px, 12px);
    }

    .home-calendar-stack:hover .home-calendar-photo--2 {
      transform: rotate(7deg) translate(0, -14px);
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 18px 40px rgba(0, 0, 0, 0.16);
    }

    .home-calendar-stack:hover .home-calendar-photo--3 {
      transform: rotate(-5deg) translate(44px, 18px);
    }

    .home-title {
      font-size: clamp(36px, 8vw, 48px);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }

    .home-tagline {
      margin-top: 16px;
      font-size: clamp(16px, 2.5vw, 18px);
      color: var(--text-secondary);
      font-weight: 400;
      line-height: 1.5;
    }

    .home-search {
      margin: 0;
      max-width: none;
      width: 100%;
    }

    .home-search .region-picker {
      max-width: none;
      width: 100%;
    }

    .home-search .region-field {
      min-height: 52px;
      padding: 8px 18px 8px 16px;
      border: none;
      border-radius: var(--radius-control);
      background: var(--surface-soft);
    }

    .home-search .region-search-icon {
      width: 18px;
      height: 18px;
    }

    .home-search .region-input {
      font-size: 16px;
      padding: 4px 2px;
      height: 36px;
    }

    .home-search-hint {
      margin-top: 12px;
      font-size: 14px;
      color: var(--text-muted);
    }

    .home-about,
    .home-custom,
    .home-overlap,
    .home-account {
      padding: 40px 0;
      /* border-top: 1px solid var(--line); */
    }

    .home-popular {
      padding: 40px 0 0;
      border-top: none;
    }

    .home-section-title {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }

    .home-about p {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.6;
    }

    .home-about p + p {
      margin-top: 12px;
    }

    .home-custom .calendar-custom-promo,
    .home-overlap .calendar-custom-promo {
      margin: 0;
      gap: clamp(2.75rem, 7vw, 5rem);
    }

    /* Mirror overlap: preview hugs the gap, not the far card edge */
    .home-custom .calendar-custom-promo__preview {
      justify-self: start;
    }

    .home-account-promo {
      max-width: 40rem;
      padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
      border: 1px solid var(--line);
      border-radius: 16px;
      background:
        radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--today) 10%, transparent), transparent 55%),
        linear-gradient(165deg, var(--surface-filled), transparent 70%);
    }

    .home-account-promo__eyebrow {
      margin: 0 0 10px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .home-account-promo__title {
      margin: 0 0 12px;
      font-size: clamp(1.5rem, 2.4vw, 1.85rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      color: var(--text);
      text-wrap: balance;
    }

    .home-account-promo__lead {
      margin: 0;
      max-width: 48ch;
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.55;
    }

    .home-account-promo__plans {
      margin: 14px 0 0;
    }

    .home-account-promo__plans a {
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
      text-decoration: none;
      border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
      transition: color 0.15s, border-color 0.15s;
    }

    .home-account-promo__plans a:hover {
      color: var(--text);
      border-bottom-color: var(--text);
      opacity: 1;
    }

    .home-account-promo__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 16px;
      margin-top: clamp(1.25rem, 2vw, 1.75rem);
    }

    .home-account-login {
      font-size: 14px;
      color: var(--text-secondary);
    }

    .home-account-login a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 500;
    }

    .home-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 24px;
      min-height: 40px;
      border-radius: var(--radius-control);
      background: #000;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      border: 1px solid #000;
      transition: background 0.15s, border-color 0.15s;
    }

    .home-cta:hover {
      background: var(--ink-deep);
      border-color: var(--ink-deep);
      opacity: 1;
    }

    .home-cta--secondary {
      background: #fff;
      color: var(--text-button);
      border: 1px solid var(--line-strong);
    }

    .home-cta--secondary:hover {
      opacity: 1;
      background: var(--surface-soft);
    }

    .home-popular .home-links {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      margin-top: 0;
    }

    @media (max-width: 640px) {
      .home-hero {
        padding: 40px 0 36px;
      }

      .home-hero-showcase {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 32px;
        text-align: center;
      }

      .home-pdf-pitch {
        margin-bottom: 24px;
      }

      .home-calendar-stack {
        height: 300px;
      }

      .home-calendar-photo {
        width: min(190px, 58vw);
        margin-left: calc(min(190px, 58vw) / -2);
        margin-top: -128px;
      }

      .home-about,
      .home-custom,
      .home-overlap,
      .home-account,
      .home-popular {
        padding: 32px 0;
      }

      .home-popular {
        padding-bottom: 0;
      }
    }

    /* ── Auth (login / register) ── */
    .auth-body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100dvh;
    }

    .nav-auth {
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 24px;
      background: var(--nav-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--line);
    }

    .nav-auth-brand {
      color: var(--text);
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.02em;
      transition: opacity 0.15s;
    }

    .nav-auth-brand:hover {
      opacity: 0.65;
    }

    .auth-main {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      padding: 48px 24px 64px;
    }

    /* ── UI controls (Plane-style inputs / inverse CTA) ── */
    .ui-field {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--ui-control-gap);
      width: 100%;
      text-align: left;
    }

    .ui-label {
      font-family: var(--font);
      font-size: var(--ui-label-size);
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0;
      text-transform: none;
      color: var(--text);
    }

    .ui-label .req,
    .ui-label sup {
      color: var(--text);
    }

    .ui-input-shell {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 0 var(--ui-control-px);
      border: 1px solid var(--ui-border);
      border-radius: var(--ui-radius);
      background: var(--ui-control-bg);
      cursor: text;
      transition: border-color 0.2s, background-color 0.2s;
    }

    .ui-input-shell:hover {
      border-color: var(--ui-border-hover);
      background: var(--ui-control-bg-hover);
    }

    .ui-input-shell:focus-within {
      border-color: var(--ui-border-hover);
      background: var(--ui-control-bg);
    }

    .ui-input {
      width: 100%;
      height: var(--ui-control-h);
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      font-family: var(--font);
      font-size: var(--ui-control-text);
      font-weight: 400;
      letter-spacing: 0;
      color: var(--text);
      text-align: left;
      outline: none;
      box-shadow: none;
      transition: color 0.2s;
    }

    .ui-input::placeholder {
      color: var(--text-muted);
      font-weight: 400;
    }

    .ui-input:focus {
      outline: none;
      border: 0;
      box-shadow: none;
    }

    .ui-input-shell--textarea {
      align-items: flex-start;
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .ui-textarea {
      height: auto;
      min-height: 140px;
      padding: 0;
      line-height: 1.5;
      resize: vertical;
    }

    .ui-select {
      width: 100%;
      height: var(--ui-control-h);
      padding: 0 22px 0 0;
      border: 0;
      border-radius: 0;
      background-color: transparent;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0 center;
      background-size: 14px 14px;
      appearance: none;
      -webkit-appearance: none;
      font-family: var(--font);
      font-size: var(--ui-control-text);
      font-weight: 400;
      line-height: 1.3;
      color: var(--text);
      cursor: pointer;
      outline: none;
      box-shadow: none;
    }

    .ui-select:focus {
      outline: none;
      box-shadow: none;
    }

    /* Native fallback: chevron lives on the shell */
    .ui-input-shell:has(> .ui-select):not(.is-enhanced) {
      padding-right: 32px;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 14px 14px;
    }

    .ui-input-shell:has(> .ui-select):not(.is-enhanced) .ui-select {
      background-image: none;
      padding-right: 0;
    }

    .ui-select-shell.is-open {
      border-color: var(--ui-border-hover);
      background: var(--ui-control-bg);
    }

    .ui-select-shell.is-open:hover {
      background: var(--ui-control-bg);
    }

    .ui-select-shell.is-enhanced > select.ui-select {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      opacity: 0;
      pointer-events: none;
    }

    .ui-select-trigger {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-height: calc(var(--ui-control-h) - 2px);
      padding: 0;
      border: 0;
      background: transparent;
      font-family: var(--font);
      font-size: var(--ui-control-text);
      font-weight: 400;
      line-height: 1.3;
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }

    .ui-select-trigger:focus {
      outline: none;
    }

    .ui-select-trigger:disabled {
      cursor: default;
      color: var(--ui-disabled-text);
    }

    .ui-select-value {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ui-select-value.is-placeholder {
      color: var(--text-muted);
    }

    .ui-select-chevron {
      flex: 0 0 auto;
      color: var(--text-muted);
      transition: transform 0.15s ease, color 0.15s ease;
    }

    .ui-select-shell.is-open .ui-select-chevron {
      transform: rotate(180deg);
      color: var(--text);
    }

    .ui-select-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 6px);
      z-index: 60;
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-height: min(280px, 50vh);
      overflow: auto;
      padding: 6px;
      border: 1px solid var(--ui-border);
      border-radius: var(--ui-radius);
      background: var(--ui-control-bg);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    }

    .ui-select-menu[hidden] {
      display: none !important;
    }

    .ui-select-option {
      display: block;
      width: 100%;
      padding: 8px 10px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.35;
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }

    .ui-select-option:hover,
    .ui-select-option:focus {
      outline: none;
      background: var(--ui-control-bg-hover);
    }

    .ui-select-option.is-selected {
      background: color-mix(in srgb, var(--text) 6%, transparent);
      font-weight: 500;
    }

    .ui-select-option.is-selected:hover,
    .ui-select-option.is-selected:focus {
      background: color-mix(in srgb, var(--text) 9%, transparent);
    }

    .ui-select-option.is-disabled,
    .ui-select-option:disabled {
      color: var(--text-muted);
      cursor: default;
      opacity: 0.55;
    }

    .ui-select-option.is-disabled:hover,
    .ui-select-option:disabled:hover {
      background: transparent;
    }

    .ui-input-shell--compact.ui-select-shell .ui-select-trigger {
      min-width: 3.25rem;
    }

    .ui-input-shell--compact.ui-select-shell .ui-select-menu {
      min-width: 4.5rem;
      right: auto;
    }

    .ui-input-shell--compact {
      flex: 0 0 auto;
      width: auto;
      padding-left: 8px;
      padding-right: 8px;
    }

    .ui-input-shell--compact .ui-select,
    .ui-input-shell--compact .ui-input {
      width: auto;
      min-width: 3.25rem;
    }

    .ui-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 8px 16px;
      min-height: 40px;
      border: 0;
      border-radius: var(--ui-radius);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0;
      text-align: center;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 0.15s, color 0.15s;
    }

    .ui-btn:focus {
      outline: none;
    }

    .ui-btn:disabled,
    .ui-btn[aria-disabled="true"] {
      background: var(--ui-disabled-bg);
      color: var(--ui-disabled-text);
      cursor: default;
    }

    .ui-btn--inverse {
      background: var(--ui-inverse);
      color: var(--ui-inverse-text);
    }

    .ui-btn--inverse:hover:not(:disabled):not([aria-disabled="true"]) {
      background: var(--ui-inverse-hover);
    }

    .ui-btn--inverse:active:not(:disabled):not([aria-disabled="true"]) {
      background: var(--ui-inverse-active);
    }

    .auth-page {
      width: 100%;
      max-width: 360px;
      margin: 0 auto;
      text-align: center;
    }

    .auth-form--ui {
      gap: 16px;
    }

    .auth-form--ui .auth-forgot {
      margin: 0;
    }

    .auth-form--ui .ui-btn {
      margin-top: 4px;
    }

    .auth-card {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .auth-title {
      font-size: clamp(36px, 8vw, 52px);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.05;
      margin-bottom: 40px;
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 28px;
      width: 100%;
      max-width: none;
      margin-top: 0;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      width: 100%;
    }

    .auth-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      text-align: left;
    }

    .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ui-input) {
      width: 100%;
      height: 44px;
      padding: 2px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-control);
      background: var(--surface-soft);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--text);
      text-align: left;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ui-input):not(:placeholder-shown) {
      background: var(--surface-filled);
    }

    .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ui-input)::placeholder {
      color: var(--text-muted);
      font-weight: 400;
    }

    .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ui-input):focus {
      outline: none;
      border-color: var(--line-strong);
      box-shadow: 0 0 0 3px var(--focus-ring);
    }

    .auth-input {
      width: 100%;
      height: 44px;
      padding: 2px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-control);
      background: var(--surface-soft);
      font-family: var(--font);
      font-size: 14px;
      color: var(--text);
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .auth-input:not(:placeholder-shown) {
      background: var(--surface-filled);
    }

    .auth-input:focus {
      outline: none;
      border-color: var(--line-strong);
      box-shadow: 0 0 0 3px var(--focus-ring);
    }

    .auth-submit {
      width: 100%;
      margin-top: 8px;
      padding: 12px 24px;
      border: 1px solid #000;
      border-radius: var(--radius-control);
      background: #000;
      color: #fff;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .auth-submit:hover {
      opacity: 1;
      background: var(--ink-deep);
      border-color: var(--ink-deep);
    }

    .auth-error {
      width: 100%;
      margin: -24px 0 8px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--holiday);
    }

    .auth-success {
      width: 100%;
      margin: 0 0 16px;
      padding: 12px 14px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
      background: color-mix(in srgb, var(--text) 6%, transparent);
      border-radius: 8px;
    }

    .auth-lead {
      margin: -12px 0 24px;
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .auth-forgot {
      margin: -8px 0 4px;
      text-align: right;
      font-size: 13px;
    }

    .auth-forgot a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
      border-bottom: none;
    }

    .auth-forgot a:hover {
      color: var(--link);
      text-decoration-color: var(--link);
    }

    .auth-oauth {
      display: grid;
      gap: 10px;
      margin-bottom: 8px;
    }

    .auth-oauth-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 44px;
      padding: 10px 18px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-control);
      color: var(--text);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      background: var(--bg);
      transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    }

    .auth-oauth-btn:hover {
      background: var(--surface-soft);
      border-color: var(--line-strong);
    }

    .auth-oauth-icon {
      display: block;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .auth-oauth-google {
      border-color: color-mix(in srgb, var(--text) 18%, var(--line));
    }

    .auth-oauth-facebook {
      background: #1877f2;
      border-color: #1877f2;
      color: #fff;
    }

    .auth-oauth-facebook:hover {
      background: #166fe5;
      border-color: #166fe5;
      color: #fff;
    }

    .auth-oauth-facebook .auth-oauth-icon {
      fill: #fff;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .auth-divider::before,
    .auth-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    .account-verify-banner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 28px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: color-mix(in srgb, var(--text) 3%, transparent);
    }

    .account-verify-banner p {
      margin: 0;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .account-verify-btn {
      appearance: none;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
    }

    .account-verify-btn:hover {
      background: color-mix(in srgb, var(--text) 5%, transparent);
    }

    .auth-footer {
      margin-top: 32px;
      font-size: 14px;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
    }

    .auth-footer a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 500;
      border-bottom: none;
      transition: opacity 0.15s;
    }

    .auth-footer a:hover {
      border-color: transparent;
      opacity: 0.8;
    }

    @media (max-width: 540px) {
      .nav-auth {
        padding: 12px 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
      }

      .auth-main {
        padding: 36px 20px 48px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(48px, env(safe-area-inset-bottom));
      }

      .auth-title {
        margin-bottom: 32px;
      }

      .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ui-input) {
        height: 48px;
        font-size: 16px; /* iOS: no zoom on focus */
      }

      .ui-input {
        font-size: 16px; /* iOS: no zoom on focus */
      }

      .ui-input-shell:not(.overlap-chip-field):not(.ui-input-shell--textarea):not(.ui-input-shell--compact) {
        min-height: 48px;
      }

      .ui-input-shell:not(.overlap-chip-field):not(.ui-input-shell--compact) .ui-input:not(.ui-textarea),
      .ui-input-shell:not(.overlap-chip-field):not(.ui-input-shell--compact) .ui-select {
        height: 46px;
      }

      .ui-select {
        font-size: 16px; /* iOS: no zoom on focus */
      }
    }

    /* ── Feedback ── */
    .feedback-page {
      max-width: 520px;
      margin: 0 auto;
      padding: 24px 0 48px;
    }

    .feedback-header {
      text-align: center;
      margin-bottom: 36px;
    }

    .feedback-title {
      font-size: clamp(32px, 7vw, 48px);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.05;
      margin-bottom: 12px;
    }

    .feedback-subtitle {
      font-size: 15px;
      line-height: 1.5;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
    }

    .feedback-form {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .feedback-form--ui {
      gap: 16px;
    }

    .feedback-form--ui .ui-btn {
      margin-top: 4px;
    }

    .feedback-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .feedback-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .feedback-form input:not(.feedback-honeypot):not(.ui-input),
    .feedback-form textarea:not(.ui-input) {
      width: 100%;
      height: 32px;
      padding: 2px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-soft);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--text);
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
      resize: vertical;
    }

    .feedback-form input:not(.feedback-honeypot):not(.ui-input):not(:placeholder-shown),
    .feedback-form textarea:not(.ui-input):not(:placeholder-shown) {
      background: var(--surface-filled);
    }

    .feedback-form textarea:not(.ui-input) {
      height: auto;
      min-height: 140px;
      padding: 8px 10px;
      line-height: 1.5;
    }

    .feedback-form input:not(.feedback-honeypot):not(.ui-input)::placeholder,
    .feedback-form textarea:not(.ui-input)::placeholder {
      color: var(--text-muted);
    }

    .feedback-form input:not(.feedback-honeypot):not(.ui-input):focus,
    .feedback-form textarea:not(.ui-input):focus {
      outline: none;
      border-color: var(--today);
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
    }

    .feedback-submit {
      width: 100%;
      margin-top: 8px;
      padding: 14px 24px;
      border: none;
      border-radius: 999px;
      background: var(--text);
      color: var(--bg);
      font-family: var(--font);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .feedback-submit:hover {
      opacity: 0.82;
    }

    .feedback-error {
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 500;
      color: var(--holiday);
      text-align: center;
    }

    .feedback-success {
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      text-align: center;
    }

    .feedback-honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    /* ── Legal notice ── */
    .legal-page {
      padding: 24px 0 0;
    }

    .legal-header {
      margin-bottom: 40px;
    }

    .legal-title {
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .legal-subtitle {
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }

    .legal-updated {
      font-size: 12px;
      letter-spacing: 0.02em;
      color: var(--text-muted);
    }

    .legal-body {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .legal-section-title {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.3;
      margin-bottom: 10px;
    }

    .legal-section p {
      font-size: 14px;
      line-height: 1.65;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }

    .legal-section p:last-child {
      margin-bottom: 0;
    }

    .legal-section a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .donate-page,
    .sponsor-page {
      max-width: 640px;
      margin: 0 auto;
      padding: 24px 0 64px;
    }

    .donate-header,
    .sponsor-header {
      margin-bottom: 36px;
    }

    .donate-title,
    .sponsor-title {
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .donate-subtitle,
    .sponsor-subtitle {
      margin: 0;
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
    }

    .donate-body,
    .sponsor-body {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .donate-section-title,
    .sponsor-section-title {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.3;
      margin-bottom: 10px;
    }

    .donate-section p,
    .sponsor-section p {
      margin: 0 0 10px;
      font-size: 14px;
      line-height: 1.65;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
    }

    .donate-section p:last-child,
    .sponsor-section p:last-child {
      margin-bottom: 0;
    }

    .donate-amounts,
    .sponsor-steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 10px;
    }

    .donate-amounts li,
    .sponsor-steps li {
      font-size: 13px;
      line-height: 1.4;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: color-mix(in srgb, var(--line) 22%, var(--bg));
    }

    .donate-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 4px;
    }

    .donate-cta,
    .sponsor-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px 18px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      color: var(--text);
      background: var(--bg);
      transition: opacity 0.15s, background 0.15s, color 0.15s;
    }

    .donate-cta:hover,
    .sponsor-cta:hover {
      opacity: 0.88;
    }

    .donate-cta--primary,
    .sponsor-cta--primary {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
    }

    .donate-thanks,
    .sponsor-note {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: var(--text);
      letter-spacing: -0.01em;
    }

    .sponsor-note {
      color: var(--text-muted);
      font-size: 13px;
    }

    .donate-pricing-note {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-muted);
    }

    .donate-pricing-note a {
      color: var(--today);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .auth-consents {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: -4px;
    }

    .auth-consent {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      column-gap: 10px;
      align-items: start;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-secondary);
      cursor: pointer;
    }

    .auth-consent input[type="checkbox"] {
      box-sizing: border-box;
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
      padding: 0;
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: var(--bg);
      accent-color: var(--today);
      cursor: pointer;
      appearance: auto;
      -webkit-appearance: checkbox;
    }

    .auth-consent input[type="checkbox"]:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
    }

    .auth-consent-text {
      min-width: 0;
      text-align: left;
    }

    .auth-consent a {
      color: var(--today);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ── PDF custom page ── */
    .hero--compact {
      margin-bottom: 28px;
    }

    .hero--compact h1 {
      font-size: clamp(24px, 4vw, 36px);
    }

    .pdf-custom {
      display: grid;
      grid-template-columns: minmax(240px, 280px) 1fr;
      gap: 32px;
      align-items: start;
    }

    .pdf-settings-wrap {
      position: sticky;
      top: 72px;
      align-self: start;
    }

    .pdf-settings {
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
    }

    .pdf-settings-title,
    .pdf-layouts-title {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    .pdf-settings-wrap .pdf-settings-title {
      margin-bottom: 12px;
    }

    .pdf-setting + .pdf-setting {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .pdf-setting-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .pdf-setting-hint {
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .pdf-location {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 500;
    }

    .pdf-location-flag {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 0.05em;
    }

    .pdf-loc-picker {
      position: relative;
      width: 100%;
      min-width: 0;
      max-width: none;
    }

    .pdf-loc-picker .region-chip {
      max-width: none;
    }

    .pdf-loc-picker .region-dropdown {
      left: 0;
      right: 0;
      width: auto;
      min-width: 0;
    }

    .pdf-select {
      width: 100%;
      height: 40px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      font-family: var(--font);
      font-size: 14px;
      background: #fff;
      color: var(--text);
    }

    .pdf-input {
      width: 100%;
      height: 40px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      font-family: var(--font);
      font-size: 14px;
      background: #fff;
      color: var(--text);
      box-sizing: border-box;
    }

    .pdf-input:focus {
      outline: none;
      border-color: var(--link);
    }

    .pdf-size-group {
      display: flex;
      gap: 8px;
    }

    .pdf-size-btn {
      flex: 1;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }

    .pdf-size-btn.is-active {
      border-color: var(--today);
      background: rgba(0, 113, 227, 0.08);
      color: var(--today);
    }

    .pdf-download-btn {
      width: 100%;
      height: 44px;
      margin-top: 24px;
      border: 1px solid rgba(200, 120, 255, 0.45);
      border-radius: 12px;
      background: #0c0414;
      color: #fff;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 0 18px rgba(180, 60, 255, 0.25), inset 0 0 12px rgba(255, 80, 180, 0.1);
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
    }

    .pdf-download-btn .lava {
      opacity: 1;
    }

    .pdf-download-btn:not(:disabled):hover {
      transform: translateY(-1px);
      border-color: rgba(200, 120, 255, 0.75);
      box-shadow: 0 0 24px rgba(180, 60, 255, 0.45), inset 0 0 16px rgba(255, 80, 180, 0.18);
    }

    .pdf-download-btn:disabled {
      opacity: 0.55;
      cursor: wait;
    }

    .pdf-download-btn:disabled .blob {
      animation-play-state: paused;
    }

    .layouts {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }

    .layout-card {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      text-align: left;
      cursor: pointer;
      font-family: var(--font);
      color: inherit;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    }

    .layout-card:hover {
      border-color: #d2d2d7;
      transform: translateY(-1px);
    }

    .layout-card.is-selected {
      border-color: var(--today);
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
    }

    .layout-card__preview {
      aspect-ratio: 210 / 297;
      background: #f5f5f7;
      border-bottom: 1px solid var(--line);
    }

    .layout-card__preview img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }

    .layout-card__body {
      padding: 14px 16px 16px;
    }

    .layout-card h3 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .layout-card p {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .pdf-back-bar {
      max-width: 1200px;
      margin: 0 auto;
      padding: 10px 24px 0;
    }

    .pdf-back-bar-inner {
      display: flex;
      align-items: center;
    }

    .pdf-back-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--today);
      text-decoration: none;
      transition: background 0.15s;
    }

    .pdf-back-link:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    @media (max-width: 768px) {
      .pdf-custom {
        grid-template-columns: 1fr;
      }

      .pdf-settings-wrap {
        position: static;
      }
    }

    /* ── Account / nav auth ── */
    .nav-btn--account,
    .nav-btn--login,
    .nav-btn--register {
      gap: 6px;
      padding: 0 16px;
      height: 36px;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      border-radius: var(--radius-control);
    }

    .nav-btn--login {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text);
    }

    .nav-btn--login:hover {
      background: var(--surface-soft);
    }

    .nav-btn--register {
      background: #000;
      border: 1px solid #000;
      color: #fff;
    }

    .nav-btn--register:hover {
      background: var(--ink-deep);
      border-color: var(--ink-deep);
      opacity: 1;
      color: #fff;
    }

    .account-page {
      max-width: none;
      margin: 0 auto;
      padding: 24px 0 64px;
    }

    /* On calendar pages keep copy/forms readable; year grid uses full container */
    .account-page--calendar .account-header,
    .account-page--calendar .auth-success,
    .account-page--calendar .auth-error {
      max-width: 640px;
    }

    .custom-cal-layout {
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 32px 40px;
      align-items: start;
    }

    .custom-cal-sidebar {
      position: sticky;
      top: 88px;
      overflow: visible;
    }

    .custom-cal-location .region-picker,
    .account-setting-field .region-picker {
      width: 100%;
    }

    .custom-cal-location .region-field,
    .account-setting-field .region-field {
      min-height: var(--ui-control-h);
      padding: 0 var(--ui-control-px);
      border: 1px solid var(--ui-border);
      border-radius: var(--ui-radius);
      background: var(--ui-control-bg);
      box-shadow: none;
      transition: border-color 0.2s, background-color 0.2s;
    }

    .custom-cal-location .region-field:has(.region-chip:not([hidden])),
    .custom-cal-location .region-field:has(.region-input:not(:placeholder-shown)),
    .account-setting-field .region-field:has(.region-chip:not([hidden])),
    .account-setting-field .region-field:has(.region-input:not(:placeholder-shown)) {
      background: var(--ui-control-bg);
    }

    .custom-cal-location .region-field:hover,
    .account-setting-field .region-field:hover {
      border-color: var(--ui-border-hover);
      background: var(--ui-control-bg-hover);
    }

    .custom-cal-location .region-picker.is-open .region-field,
    .custom-cal-location .region-field:focus-within,
    .account-setting-field .region-picker.is-open .region-field,
    .account-setting-field .region-field:focus-within {
      border-color: var(--ui-border-hover);
      background: var(--ui-control-bg);
      box-shadow: none;
    }

    .custom-cal-location .region-chip,
    .account-setting-field .region-chip {
      border-radius: var(--ui-radius);
      background: var(--ui-control-bg-hover);
    }

    .custom-cal-location .region-dropdown,
    .account-setting-field .region-dropdown {
      z-index: 50;
      border-color: var(--ui-border);
      border-radius: var(--ui-radius);
    }

    .custom-cal-sidebar-section {
      margin: 0 0 20px;
      padding: 0 0 16px;
      border-bottom: 1px solid var(--line);
      max-width: none;
    }

    .custom-cal-sidebar-section:last-of-type {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .custom-cal-settings .auth-field {
      margin-bottom: 10px;
    }

    form[data-autosave].is-autosaved {
      outline: 1px solid color-mix(in srgb, var(--accent, #2a7a4b) 45%, transparent);
      outline-offset: 4px;
      border-radius: 6px;
      transition: outline-color 0.2s ease;
    }

    form[data-autosave].is-autosave-error {
      outline: 1px solid color-mix(in srgb, #b42318 55%, transparent);
      outline-offset: 4px;
      border-radius: 6px;
    }

    .custom-cal-main {
      min-width: 0;
    }

    .custom-cal-main .custom-cal-grid {
      margin-bottom: 0;
    }

    .custom-cal-main .months-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 28px 20px;
    }

    .custom-cal-main .hero {
      margin-bottom: 24px;
      padding-top: 0;
    }

    .custom-cal-main .hero-year {
      font-size: clamp(64px, 10vw, 120px);
    }

    .custom-cal-top {
      margin-bottom: 20px;
    }

    .custom-cal-top .account-lead {
      margin: 6px 0 0;
    }

    .custom-add-date-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: end;
    }

    .custom-add-date-row .auth-field {
      margin: 0;
    }

    .custom-add-name-row {
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }

    .custom-add-name-field {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
    }

    .custom-add-name-row .day-color-select {
      flex: 0 0 auto;
      padding-bottom: 1px;
    }

    .color-legend-edit {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 8px 0 0;
      padding: 0;
    }

    .color-legend-edit__row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .color-legend-edit__swatch {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--swatch-bg);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swatch-fg) 22%, transparent);
    }

    .color-legend-edit__input.ui-input {
      flex: 1 1 auto;
      min-width: 0;
      height: var(--ui-control-h);
      font-size: var(--ui-control-text);
    }

    .color-legend-edit__row .ui-input-shell {
      flex: 1 1 auto;
      min-width: 0;
    }

    .color-legend-edit__text {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 14px;
      color: var(--text);
      line-height: 1.3;
    }

    .color-legend-edit--readonly .color-legend-edit__swatch.legend-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
    }

    .custom-day-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .custom-day-name-row .custom-day-name {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
    }

    .custom-cal-sidebar .custom-add-form {
      max-width: none;
      grid-template-columns: 1fr;
    }

    .custom-cal-sidebar .custom-day-item {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 6px;
      padding: 8px 0;
    }

    .custom-cal-sidebar .custom-day-body,
    .custom-cal-sidebar .custom-day-edit {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
    }

    .custom-cal-sidebar .custom-day-edit {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .custom-cal-sidebar .custom-day-edit--custom {
      flex-wrap: nowrap;
    }

    .custom-cal-sidebar .custom-day-edit .ui-input-shell:has(.custom-day-name) {
      flex: 1 1 120px;
      width: auto;
      min-width: 0;
    }

    .custom-cal-sidebar .custom-day-edit .custom-day-name {
      flex: 1 1 120px;
      width: auto;
      min-width: 0;
    }

    .custom-cal-sidebar .custom-day-edit .custom-day-type {
      flex: 1 1 100%;
    }

    .custom-cal-sidebar .custom-day-edit .day-color-select {
      flex: 0 0 auto;
    }

    .custom-cal-sidebar .custom-day-body {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      align-items: center;
    }

    .custom-cal-sidebar .ical-feed-row {
      flex-wrap: wrap;
    }

    .custom-cal-sidebar .ical-feed-field {
      max-width: none;
    }

    .custom-cal-sidebar .account-actions {
      margin-top: 8px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    @media (max-width: 1100px) {
      .custom-cal-main .months-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 900px) {
      .custom-cal-layout {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .custom-cal-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        order: 2;
      }

      .custom-cal-main {
        order: 1;
      }

      .custom-cal-main .months-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 640px) {
      .custom-cal-main .months-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
      }
    }

    .account-header {
      margin-bottom: 40px;
    }

    .account-header--hub {
      text-align: left;
      margin-bottom: 28px;
    }

    .account-header__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .account-header--hub .account-title {
      font-size: clamp(32px, 6vw, 48px);
      letter-spacing: -0.04em;
      margin: 0;
    }

    .account-breadcrumbs {
      margin: 8px 0 0;
    }

    .account-plan-chip {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin: 0;
      flex-shrink: 0;
    }

    .account-hub-sections {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-width: none;
      width: 100%;
    }

    .account-hub-block {
      margin: 0;
      padding: 0;
      border-top: 0;
      scroll-margin-top: 88px;
    }

    .account-hub-block.account-section {
      margin-bottom: 0;
    }

    .account-hub-block--form {
      max-width: none;
      width: 100%;
    }

    .account-hub-block--form .account-settings-form,
    .account-hub-block--form .account-password-form,
    .account-hub-block--form .account-section,
    .account-hub-block--form .auth-field,
    .account-hub-block--form .auth-input,
    .account-hub-block--form .account-select,
    .account-hub-block--form .ui-input-shell,
    .account-hub-block--form .ui-input,
    .account-hub-block--form .ui-select,
    .account-hub-block--form .ui-btn,
    .account-hub-block--form .account-setting-field,
    .account-hub-block--form .region-picker {
      width: 100%;
      max-width: none;
    }

    .account-hub-block--form .ui-btn {
      width: auto;
      align-self: flex-start;
    }

    .account-hub-block--form .nav-btn.pdf-btn {
      align-self: flex-start;
      cursor: pointer;
      font-family: var(--font);
      text-decoration: none;
    }

    .account-hub-block--form .account-password-form {
      margin-bottom: 28px;
      padding-top: 0;
      border-top: 0;
    }

    .account-quota--hub {
      max-width: none;
      margin: 0;
    }

    .account-plan-chip-link {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }

    .account-plan-chip-link:hover {
      color: var(--text);
      border-bottom-color: var(--text);
    }

    .account-flash {
      max-width: none;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      text-align: left;
    }

    .account-quota {
      margin: 0 0 28px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .account-quota--plan {
      margin: 48px 0 0;
      padding-top: 32px;
      border-top: 1px solid var(--line);
    }

    .account-quota--tab,
    .account-quota--hub {
      max-width: none;
      margin: 0;
    }

    .account-quota--tab .account-quota-head,
    .account-quota--hub .account-quota-head {
      margin-bottom: 18px;
    }

    .account-quota-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px 16px;
      margin-bottom: 14px;
    }

    .account-quota-head .account-section-title {
      margin-bottom: 0;
    }

    .account-quota-head .account-plan-row {
      margin-bottom: 0;
    }

    .account-quota-meters {
      margin: 0;
    }

    .account-quota-meters .billing-meter {
      border: 1px solid var(--line);
      background: transparent;
    }

    .account-quota-meters .billing-meter--full {
      background: rgba(220, 38, 38, 0.08);
      border-color: rgba(220, 38, 38, 0.28);
    }

    .account-quota-meters .billing-meter--full .billing-meter-label,
    .account-quota-meters .billing-meter--full .billing-meter-value,
    .account-quota-meters .billing-meter--full .billing-meter-value strong {
      color: rgba(185, 28, 28, 0.9);
    }

    .account-quota-meters .billing-meter--full .billing-meter-fill {
      background: rgba(220, 38, 38, 0.55);
    }

    .account-quota-meters .billing-meter--full .billing-meter-track {
      background: rgba(220, 38, 38, 0.12);
    }

    .account-page--hub-home .account-section-nav,
    .api-docs--hub-home .account-section-nav {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 20px 0 0;
      min-height: 0;
      align-content: start;
    }

    .account-page--hub-home .account-section-nav__btn--card,
    .api-docs--hub-home .account-section-nav__btn--card {
      height: auto;
      min-height: 0;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 4px;
      padding: 14px 16px;
      font-weight: 500;
      letter-spacing: -0.01em;
      white-space: normal;
      line-height: 1.25;
      border-radius: 10px;
      overflow: visible;
      text-overflow: unset;
      text-align: left;
    }

    .account-section-nav__title {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.2;
    }

    .account-section-nav__desc {
      display: block;
      font-size: 12px;
      font-weight: 400;
      color: var(--text-secondary);
      line-height: 1.35;
    }

    .account-page--hub-home .account-section-nav__btn--card:hover .account-section-nav__desc,
    .api-docs--hub-home .account-section-nav__btn--card:hover .account-section-nav__desc {
      color: var(--text-muted, var(--text-secondary));
    }

    @media (max-width: 720px) {
      .account-page--hub-home .account-section-nav,
      .api-docs--hub-home .account-section-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .account-page--hub-home .account-section-nav__btn--card,
      .api-docs--hub-home .account-section-nav__btn--card {
        padding: 12px 12px;
      }

      .account-section-nav__title {
        font-size: 13px;
      }

      .account-section-nav__desc {
        font-size: 11px;
      }
    }

    .account-section-nav {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 6px;
      width: 100%;
      margin: 0 0 28px;
      padding: 0;
    }

    .account-section-nav__btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      height: 38px;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.15;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .account-section-nav__btn:hover {
      color: var(--text);
      border-color: color-mix(in srgb, var(--text) 22%, var(--line));
      background: rgba(0, 0, 0, 0.03);
    }

    .account-section-nav__btn.is-active {
      color: var(--text);
      border-color: var(--text);
      background: transparent;
      font-weight: 600;
    }

    .account-section-nav__btn:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }

    @media (max-width: 960px) {
      .account-section-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .account-section-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .account-section-nav__btn {
        height: 40px;
        font-size: 12px;
        white-space: normal;
      }
    }

    .account-hub-block:first-child {
      padding-top: 0;
      border-top: 0;
    }

    /* Segmented tabs — kept for API docs & legacy */
    .account-tabs-wrap {
      display: flex;
      justify-content: center;
      margin: 0 0 36px;
    }

    .account-tabs {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2px;
      margin: 0;
      padding: 4px;
      border: 0;
      border-radius: 999px;
      background: var(--surface-soft);
      max-width: 100%;
    }

    .account-tab {
      appearance: none;
      display: inline-flex;
      align-items: center;
      height: 36px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

    @media (max-width: 720px) {
      .account-tabs {
        border-radius: 16px;
        justify-content: flex-start;
      }

      .account-tab {
        padding: 0 12px;
        font-size: 13px;
      }
    }

    .account-tab:hover {
      color: var(--text);
    }

    .account-tab.is-active {
      background: var(--bg);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
      font-weight: 600;
    }

    .account-tab:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }

    .account-tab-panel {
      display: none;
    }

    .account-tab-panel.is-active {
      display: block;
    }

    .account-tab-panel[hidden] {
      display: none !important;
    }

    .account-panel-box {
      width: 100%;
      max-width: none;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .account-panel-box--wide {
      max-width: none;
    }

    .account-panel-box .account-settings-form,
    .account-panel-box .account-password-form,
    .account-panel-box .account-section,
    .account-panel-box .account-api-create,
    .account-panel-box .account-api-newkey,
    .account-panel-box .account-list,
    .account-panel-box .account-table-wrap,
    .account-panel-box .auth-field,
    .account-panel-box .auth-input,
    .account-panel-box .account-select,
    .account-panel-box .auth-submit,
    .account-panel-box .ui-input-shell,
    .account-panel-box .ui-input,
    .account-panel-box .ui-select,
    .account-panel-box .account-setting-field,
    .account-panel-box .region-picker {
      width: 100%;
      max-width: none;
    }

    .account-panel-box .account-settings-form {
      margin-bottom: 0;
    }

    .account-panel-box .account-settings-form .auth-submit,
    .account-panel-box .account-password-form .auth-submit,
    .account-panel-box .account-settings-form .ui-btn,
    .account-panel-box .account-password-form .ui-btn {
      align-self: flex-start;
      width: auto;
    }

    .account-panel-box .nav-btn.pdf-btn,
    .account-panel-box .ui-btn {
      align-self: flex-start;
      width: auto;
      max-width: none;
      cursor: pointer;
      font-family: var(--font);
      text-decoration: none;
    }

    .account-panel-box .nav-btn.pdf-btn:hover {
      background: rgba(0, 0, 0, 0.04);
      border-color: #d2d2d7;
    }

    .account-panel-box .account-setting-field .region-picker {
      max-width: none;
    }

    .account-panel-box .region-field {
      min-height: 44px;
      padding: 4px 8px;
    }

    .account-password-form {
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

    .account-columns--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-hub-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px 40px;
      margin-bottom: 8px;
      align-items: start;
    }

    .account-hub-grid .account-section {
      margin-bottom: 0;
      min-width: 0;
    }

    .account-list--wide {
      max-width: none;
    }

    .account-section--recent {
      margin-top: 8px;
    }

    @media (max-width: 960px) {
      .account-columns--two,
      .account-hub-grid {
        grid-template-columns: 1fr;
      }
    }

    .account-list--compact {
      max-width: none;
      width: 100%;
    }

    .account-list--compact.account-list--wide {
      max-width: none;
    }

    .account-title {
      font-size: clamp(32px, 7vw, 48px);
      font-weight: 600;
      letter-spacing: -0.04em;
      margin-bottom: 8px;
    }

    .account-greeting {
      font-size: 16px;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .account-lead {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .account-section {
      margin-bottom: 36px;
    }

    .account-columns {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px 28px;
      margin-bottom: 36px;
      align-items: start;
    }

    .account-columns .account-section {
      margin-bottom: 0;
      min-width: 0;
    }

    .account-columns .account-list-link {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .account-columns .account-list-label {
      word-break: break-word;
    }

    @media (max-width: 960px) {
      .account-columns {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .account-columns .account-list-link {
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }
    }

    .account-section-title {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    .account-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px 12px;
      margin-bottom: 16px;
      min-width: 0;
    }

    .account-section-head .account-section-title {
      margin-bottom: 0;
      min-width: 0;
    }

    .account-section-head .account-overlap-link {
      flex-shrink: 0;
      max-width: 100%;
      white-space: normal;
      text-align: center;
      line-height: 1.25;
    }

    .account-empty,
    .account-hint {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .account-hint {
      margin-top: 8px;
      font-size: 14px;
    }

    .account-list {
      list-style: none;
      margin: 0;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
    }

    .account-list-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--line);
    }

    .account-list-item:last-child {
      border-bottom: none;
    }

    .account-list-link {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      text-decoration: none;
      color: var(--text);
      transition: background 0.15s;
    }

    .account-list-link:hover {
      background: rgba(0, 0, 0, 0.03);
    }

    .account-list-label {
      font-size: 15px;
      font-weight: 500;
    }

    .account-list-meta {
      font-size: 13px;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }

    .account-inline-form {
      margin: 0;
      padding-right: 8px;
    }

    .account-remove-btn {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text-muted);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, opacity 0.15s;
    }

    .account-remove-btn:hover {
      background: rgba(255, 59, 48, 0.1);
      color: #ff3b30;
    }

    /* Account data tables — same language as admin tables */
    .account-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    .account-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      margin: 0;
    }

    .account-table thead th {
      background: #fff;
      padding: 10px 16px;
      border-bottom: 1px solid var(--line);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      text-align: left;
      vertical-align: middle;
      white-space: nowrap;
    }

    .account-table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }

    .account-table tbody tr:hover td {
      background: var(--surface-soft);
    }

    .account-table tbody tr:last-child td {
      border-bottom: none;
    }

    .account-table__link {
      color: var(--today);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    .account-table__link:hover {
      text-decoration: underline;
    }

    .account-table__strong {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
    }

    .account-table__meta {
      color: var(--text-secondary);
      font-size: 13px;
    }

    .account-table__meta--num {
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .account-table__actions {
      width: 1%;
      white-space: nowrap;
      text-align: right;
      padding-left: 8px;
      padding-right: 12px;
    }

    .account-table .account-inline-form {
      display: inline-flex;
      margin: 0;
      padding: 0;
    }

    .account-table__danger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--text-muted);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      opacity: 0.45;
      transition: background 0.15s, color 0.15s, opacity 0.15s;
    }

    .account-table tbody tr:hover .account-table__danger,
    .account-table__danger:focus-visible {
      opacity: 1;
    }

    .account-table__danger:hover {
      background: rgba(255, 59, 48, 0.1);
      color: #ff3b30;
    }

    .account-row-dissolve {
      position: fixed;
      pointer-events: none;
      z-index: 10000;
      overflow: visible;
    }

    .account-row-dissolve__dot {
      position: absolute;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation-name: account-row-dissolve-fly;
      animation-timing-function: cubic-bezier(0.12, 0.72, 0.18, 1);
      animation-fill-mode: forwards;
      will-change: transform, opacity;
      box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35);
    }

    .account-row-dissolve__dot--molecule {
      box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.4),
        0 0 6px rgba(61, 125, 214, 0.25);
    }

    .account-row-dissolve__sat {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 45%;
      height: 45%;
      border-radius: 50%;
      transform: translate(85%, -120%);
      opacity: 0.9;
      pointer-events: none;
    }

    .account-row-dissolve__sat::after {
      content: "";
      position: absolute;
      left: -90%;
      top: 55%;
      width: 110%;
      height: 1px;
      background: currentColor;
      opacity: 0.35;
      transform: rotate(28deg);
      transform-origin: right center;
    }

    @keyframes account-row-dissolve-fly {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
      }
      70% {
        opacity: 0.85;
      }
      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--scale, 0.15)) rotate(var(--rot));
      }
    }

    .account-table code {
      font-size: 13px;
      color: var(--text-secondary);
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    }

    .account-table--api {
      min-width: 560px;
    }

    @media (max-width: 640px) {
      .account-table thead th,
      .account-table td {
        padding: 10px 12px;
      }

      .account-table__danger {
        opacity: 0.7;
      }
    }

    .account-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin-top: 32px;
    }

    .account-actions--top {
      margin-top: 0;
      margin-bottom: 28px;
    }

    .account-settings-link {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      text-decoration: none;
      border-bottom: 1px solid var(--line);
      padding-bottom: 1px;
    }

    .account-settings-link:hover {
      border-bottom-color: var(--text);
    }

    .account-back {
      margin: 0 0 12px;
      font-size: 14px;
    }

    .account-back a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .account-back a:hover {
      color: var(--link);
      opacity: 0.8;
    }

    .account-settings-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 40px;
    }

    .account-setting-field {
      margin-top: 12px;
      position: relative;
      z-index: 5;
    }

    .account-setting-field .region-picker {
      width: 100%;
      max-width: none;
    }

    .account-select {
      width: 100%;
      height: 44px;
      padding: 2px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      font-family: var(--font);
      font-size: 15px;
      color: var(--text);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      cursor: pointer;
    }

    .account-select:focus {
      outline: none;
      border-color: var(--text);
    }

    .account-default-open {
      margin-top: 12px;
      font-size: 14px;
    }

    .account-default-open a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .account-default-open a:hover {
      color: var(--link);
      opacity: 0.8;
    }

    .account-section--favorites {
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

    .account-section--api {
      margin-top: 28px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

    .account-api-usage {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 8px;
    }

    .account-api-endpoint {
      font-size: 12px;
      word-break: break-all;
    }

    .account-api-newkey {
      margin: 12px 0 16px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: color-mix(in srgb, var(--text) 4%, transparent);
    }

    .account-api-create {
      margin-top: 16px;
      display: grid;
      gap: 12px;
    }

    .account-dialog {
      position: fixed;
      inset: 0;
      width: min(calc(100% - 32px), 360px);
      height: fit-content;
      margin: auto;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--bg);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
      color: var(--text);
    }

    .account-dialog::backdrop {
      background: rgba(29, 29, 31, 0.42);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .account-api-create--dialog {
      margin: 0;
      padding: 20px;
    }

    .account-dialog-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .account-dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
    }

    .account-list-item--api .account-list-link {
      cursor: default;
    }

    .account-mini-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
    }

    .account-mini-btn:hover {
      border-color: var(--text-muted);
    }

    .account-mini-btn--link {
      height: auto;
      padding: 6px 12px;
    }

    .account-mini-btn--primary {
      background: var(--text);
      border-color: var(--text);
      color: var(--bg);
    }

    .account-mini-btn--primary:hover {
      opacity: 0.9;
    }

    .account-mini-btn--ghost {
      background: transparent;
    }

    .overlap-save-form {
      display: inline-flex;
      margin: 0;
    }

    .account-section--saved-overlaps {
      margin-top: 28px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }

    .account-section--table {
      max-width: none;
      width: 100%;
      margin: 0;
    }

    .account-section--table .account-section-head {
      margin-bottom: 14px;
    }

    .account-section--table .account-section-title {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.02em;
      text-transform: none;
      color: var(--text);
    }

    .account-panel-box--wide .account-section--table {
      max-width: none;
    }

    /* Account content: stretch to .container */
    .account-page .account-hub-sections,
    .account-page .account-hub-block,
    .account-page .account-section,
    .account-page .account-section--table,
    .account-page .account-list,
    .account-page .account-table-wrap,
    .account-page .account-quota,
    .account-page .account-settings-form,
    .account-page .account-password-form,
    .account-page .account-panel-box {
      width: 100%;
      max-width: none;
    }

    .account-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 12px 0 16px;
      font-size: 14px;
      color: var(--text);
      cursor: pointer;
    }

    .account-check input {
      margin-top: 3px;
    }

    .custom-cal-rename {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 10px;
      margin-bottom: 28px;
    }

    .custom-cal-rename-field {
      flex: 1 1 220px;
      margin: 0;
    }

    .custom-cal-grid {
      margin-bottom: 40px;
    }

    .overlap-controls {
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--line);
    }

    .overlap-fieldset {
      border: 0;
      margin: 0 0 16px;
      padding: 0;
    }

    .overlap-fieldset.ui-field {
      align-items: stretch;
    }

    .overlap-fieldset > .account-hint {
      margin: 0;
    }

    .overlap-chip-field.ui-input-shell {
      position: relative;
      margin-top: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-height: var(--ui-control-h);
      height: auto;
      padding: 8px var(--ui-control-px);
      cursor: text;
    }

    .overlap-chip-field.ui-input-shell.is-open,
    .overlap-chip-field.ui-input-shell:focus-within {
      border-color: var(--ui-border-hover);
      background: var(--ui-control-bg);
    }

    .overlap-chips {
      display: contents;
    }

    .overlap-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      padding: 5px 8px 5px 10px;
      border-radius: var(--ui-radius);
      background: var(--ui-control-bg-hover);
      font-size: 13px;
      line-height: 1.2;
      color: var(--text);
    }

    .overlap-chip-code {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .overlap-chip-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .overlap-chip-remove {
      border: 0;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      padding: 0 2px;
    }

    .overlap-chip-remove:hover {
      color: var(--text);
    }

    .overlap-search-wrap {
      flex: 1 1 160px;
      min-width: 140px;
    }

    .overlap-search.ui-input {
      width: 100%;
      height: auto;
      min-height: 22px;
      padding: 4px 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      font-size: var(--ui-control-text);
      box-shadow: none;
    }

    .overlap-dropdown {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 6px);
      z-index: 40;
      max-height: 280px;
      overflow: auto;
      border: 1px solid var(--ui-border);
      border-radius: var(--ui-radius);
      background: var(--ui-control-bg);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    }

    .overlap-list {
      display: flex;
      flex-direction: column;
      padding: 6px;
    }

    .overlap-opt {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 10px;
      width: 100%;
      text-align: left;
      border: 0;
      background: transparent;
      border-radius: var(--ui-radius);
      padding: 8px 10px;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      color: var(--text);
    }

    .overlap-opt:hover,
    .overlap-opt.is-active {
      background: var(--ui-control-bg-hover);
    }

    .overlap-opt.is-taken {
      opacity: 0.45;
      cursor: default;
    }

    .overlap-opt-code {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      min-width: 2.2rem;
    }

    .overlap-opt-name {
      font-weight: 500;
    }

    .overlap-opt-meta {
      color: var(--text-muted);
      font-size: 12px;
    }

    .overlap-empty {
      padding: 12px;
      color: var(--text-muted);
      font-size: 13px;
    }

    .overlap-quick {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
    }

    .overlap-quick-label {
      font-size: 12px;
      color: var(--text-muted);
      margin-right: 4px;
    }

    .overlap-quick-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .overlap-quick-btn {
      border: 1px dashed var(--line);
      background: transparent;
      border-radius: 999px;
      padding: 4px 10px;
      font: inherit;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
    }

    .overlap-quick-btn:hover {
      border-style: solid;
      color: var(--text);
    }

    .overlap-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 12px;
    }

    .overlap-toolbar .account-mini-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .overlap-mode-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .overlap-mode-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      text-decoration: none;
      color: var(--text-secondary);
      font-size: 14px;
    }

    .overlap-mode-tab.is-active {
      color: var(--text);
      border-color: var(--text);
      background: #f5f5f7;
    }

    .overlap-mode-count {
      font-variant-numeric: tabular-nums;
      color: var(--text-muted);
      font-size: 13px;
    }

    .overlap-year-nav {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .overlap-year-link {
      font-size: 14px;
      color: var(--text-secondary);
      text-decoration: none;
    }

    .overlap-year-link:first-child { justify-self: start; }
    .overlap-year-link:last-child { justify-self: end; text-align: right; }
    .overlap-year-link--disabled { visibility: hidden; }

    .overlap-year-nav .hero-year {
      margin: 0;
      text-align: center;
    }

    .overlap-table-wrap {
      margin-top: 4px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--bg);
    }

    .overlap-table {
      width: max(100%, 640px);
      border-collapse: separate;
      border-spacing: 0;
      font-size: 13px;
      line-height: 1.35;
    }

    .overlap-table thead th {
      position: sticky;
      top: 0;
      z-index: 3;
      background: #fafafa;
      border-bottom: 1px solid var(--line);
      text-align: left;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      padding: 12px 14px;
      vertical-align: bottom;
      white-space: nowrap;
    }

    .overlap-th-date,
    .overlap-td-date {
      position: sticky;
      left: 0;
      z-index: 2;
      background: var(--bg);
      min-width: 118px;
      width: 118px;
    }

    .overlap-table thead .overlap-th-date {
      z-index: 4;
      background: #fafafa;
    }

    .overlap-th-label {
      display: block;
      max-width: 9.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
    }

    .overlap-th-code {
      display: block;
      margin-top: 2px;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }

    .overlap-tr td,
    .overlap-tr th {
      border-bottom: 1px solid var(--line);
      padding: 10px 14px;
      vertical-align: top;
    }

    .overlap-tr:last-child td,
    .overlap-tr:last-child th {
      border-bottom: none;
    }

    .overlap-td-date {
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      white-space: nowrap;
    }

    .overlap-td-date time {
      display: block;
    }

    .overlap-hit {
      display: inline-block;
      margin-top: 4px;
      padding: 1px 6px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      color: var(--text-muted);
      background: #f3f4f6;
    }

    .overlap-tr:hover td,
    .overlap-tr:hover th {
      background: #f8fafc;
    }

    .overlap-tr:hover .overlap-td-date {
      background: inherit;
    }

    .overlap-td {
      min-width: 140px;
      max-width: 220px;
    }

    .overlap-td--empty {
      color: var(--text-muted);
    }

    .overlap-empty {
      display: block;
      text-align: center;
      opacity: 0.35;
      font-size: 16px;
      line-height: 1;
      user-select: none;
    }

    .overlap-cell + .overlap-cell {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px dashed var(--line);
    }

    .overlap-cell-name {
      display: block;
      font-weight: 500;
      color: var(--text);
      overflow-wrap: anywhere;
    }

    .overlap-cell-local {
      display: block;
      margin-top: 2px;
      font-size: 11.5px;
      color: var(--text-muted);
      overflow-wrap: anywhere;
    }

    @media (max-width: 640px) {
      .overlap-table {
        font-size: 12.5px;
      }

      .overlap-table thead th,
      .overlap-tr td,
      .overlap-tr th {
        padding: 9px 10px;
      }

      .overlap-th-date,
      .overlap-td-date {
        min-width: 96px;
        width: 96px;
      }

      .overlap-td {
        min-width: 120px;
      }

      .overlap-th-label {
        max-width: 7.5rem;
      }
    }

    .account-overlap-link {
      font-weight: 500;
    }

    .hero--compact {
      margin-bottom: 24px;
    }

    .hero--compact .hero-year {
      font-size: clamp(40px, 8vw, 64px);
    }

    .custom-day-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .custom-day-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }

    .custom-day-item--hidden {
      opacity: 0.75;
    }

    .custom-day-body {
      display: flex;
      flex: 1 1 240px;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .custom-day-edit {
      display: flex;
      flex: 1 1 200px;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .custom-day-name.ui-input {
      flex: 1 1 160px;
      min-width: 0;
      height: var(--ui-control-h);
      font-size: var(--ui-control-text);
    }

    .custom-day-edit .ui-input-shell {
      flex: 1 1 160px;
      min-width: 0;
    }

    .custom-day-edit .ui-input-shell--compact {
      flex: 0 0 auto;
    }

    .custom-day-md.ui-select {
      width: auto;
      min-width: 3.25rem;
      height: var(--ui-control-h);
      font-size: var(--ui-control-text);
    }

    .custom-day-type {
      font-size: 12px;
      color: var(--text-muted);
    }

    .custom-day-name-static {
      flex: 1 1 160px;
      font-size: 14px;
    }

    .custom-add-form {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      max-width: 420px;
    }

    .account-section--ical {
      margin-top: 8px;
      padding: 16px 0 8px;
      border-top: 1px solid var(--line);
    }

    .ical-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .ical-feed-field {
      max-width: 640px;
    }

    .ical-feed-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .ical-feed-row .ui-input-shell {
      flex: 1 1 auto;
      min-width: 0;
    }

    .ical-feed-row .ui-btn {
      width: auto;
      flex: 0 0 auto;
    }

    .ical-feed-row .auth-input {
      flex: 1 1 auto;
      min-width: 0;
    }

    .ical-rotate-form {
      margin-top: 12px;
    }

    .account-ical-link {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      text-decoration: none;
      padding: 4px 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
    }

    .account-ical-link:hover {
      color: var(--text);
      border-color: var(--text-muted);
    }

    @media (min-width: 640px) {
      .custom-add-form {
        grid-template-columns: 1fr 90px 90px;
        align-items: end;
      }

      .custom-add-form .auth-submit,
      .custom-add-form .ui-btn {
        grid-column: 1 / -1;
        justify-self: start;
      }
    }

    .account-logout {
      appearance: none;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      color: #a35d5d;
      text-decoration: none;
      border-bottom: 1px solid rgba(163, 93, 93, 0.35);
      padding-bottom: 1px;
      cursor: pointer;
    }

    .account-logout:hover {
      color: #8a4545;
      border-bottom-color: #8a4545;
    }

    @media (max-width: 900px) {
      .page-meta-fav-text,
      .nav-btn--login {
        display: none;
      }

      .page-meta-fav {
        padding: 4px 8px;
      }

      .page-meta-account {
        font-size: 12px;
        padding: 4px 8px;
      }

      .nav-btn--register {
        padding: 0 8px;
        font-size: 12px;
      }
    }


    .account-plan-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .account-plan-badge {
      display: inline-flex;
      align-items: center;
      padding: 5px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1;
      color: var(--text-secondary);
      background: color-mix(in srgb, var(--line) 45%, var(--bg));
      text-decoration: none;
    }

    a.account-plan-badge:hover {
      color: var(--text);
      border-color: color-mix(in srgb, var(--text) 35%, var(--line));
    }

    .account-plan-badge--pro {
      color: var(--bg);
      background: var(--text);
      border-color: var(--text);
    }

    a.account-plan-badge--pro:hover {
      color: var(--bg);
      opacity: 0.88;
    }

    .account-upgrade-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 12px;
      border: 1px solid var(--text);
      border-radius: 999px;
      background: var(--text);
      color: var(--bg);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1;
      text-decoration: none;
      transition: opacity 0.15s;
    }

    .account-upgrade-btn:hover {
      opacity: 0.85;
    }

    .account-quota-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: -8px 0 28px;
    }

    .account-quota-badge {
      display: inline-flex;
      align-items: center;
      padding: 6px 11px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      background: var(--bg);
    }

    .account-quota-badge--empty {
      color: var(--text-muted);
      background: color-mix(in srgb, var(--line) 35%, var(--bg));
    }

    .account-quota-badge-meta {
      margin-left: 4px;
      color: var(--text-muted);
      font-weight: 400;
    }

    .account-hint--quota {
      margin: -12px 0 20px;
    }

    .account-plan-hint {
      margin-left: 10px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .ical-share-form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 12px 0;
    }

    /* ── Billing / subscription ── */
    .billing-page {
      max-width: 720px;
    }

    .account-page--hub .billing-plans--tiers {
      max-width: none;
    }

    .account-page--hub .billing-status {
      max-width: none;
    }

    .billing-page > .auth-error,
    .billing-page > .auth-success {
      margin: 0 0 20px;
    }

    .billing-header .account-lead {
      max-width: 36em;
    }

    .billing-pricing {
      max-width: 1080px;
      margin: 0 auto;
    }

    .billing-pricing-header {
      text-align: center;
      margin-bottom: 36px;
    }

    .billing-pricing-title {
      margin: 0 0 10px;
      font-size: clamp(32px, 6vw, 48px);
      font-weight: 600;
      letter-spacing: -0.045em;
      line-height: 1.05;
    }

    .billing-pricing-lead {
      max-width: 420px;
      margin: 0 auto;
      font-size: 17px;
      line-height: 1.5;
      color: var(--text-secondary);
    }

    .billing-pricing-current {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px 14px;
      margin: 18px 0 0;
    }

    .billing-status {
      margin-bottom: 36px;
      padding: 20px 20px 18px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--bg);
    }

    .billing-status--pro {
      border-color: var(--text);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    }

    .billing-status-top {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px 16px;
      margin-bottom: 14px;
    }

    .billing-status-top .account-section-title {
      margin-bottom: 0;
    }

    .billing-compare-link {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }

    .billing-compare-link:hover {
      color: var(--text);
      border-bottom-color: var(--text);
    }

    .billing-status-body {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
    }

    .billing-status-meta {
      font-size: 14px;
      color: var(--text-secondary);
    }

    .billing-status-note {
      margin: 14px 0 0;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text-secondary);
    }

    .billing-upgrade-lead {
      margin: -4px 0 0;
    }

    .billing-meters {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .billing-meters.account-quota-meters {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    @media (max-width: 1100px) {
      .billing-meters.account-quota-meters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .billing-meters.account-quota-meters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .billing-meters.account-quota-meters {
        grid-template-columns: 1fr;
      }
    }

    .billing-meter {
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--bg);
    }

    .billing-meter--full {
      background: color-mix(in srgb, var(--line) 28%, var(--bg));
    }

    .billing-meter-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .billing-meter-label {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .billing-meter-value {
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .billing-meter-value strong {
      font-size: 15px;
      font-weight: 650;
      color: var(--text);
    }

    .billing-meter-sep {
      margin: 0 1px;
    }

    .billing-meter-track {
      height: 6px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line) 70%, var(--bg));
      overflow: hidden;
    }

    .billing-meter-fill {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--text);
      transition: width 0.25s ease;
    }

    .billing-meter--full .billing-meter-fill {
      background: var(--text-muted);
    }

    .billing-meter-track--unlimited .billing-meter-fill {
      opacity: 0.22;
    }

    .billing-plans {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 20px;
      align-items: stretch;
    }

    .billing-plans--tiers {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .billing-plan-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0;
      padding: 28px 24px 24px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--bg);
    }

    .billing-plan-card--featured {
      border-color: var(--text);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
    }

    .billing-plan-card--current {
      background: color-mix(in srgb, var(--surface-soft) 80%, var(--bg));
    }

    .billing-plan-badge {
      position: absolute;
      top: -11px;
      left: 24px;
      margin: 0;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--text);
      color: var(--bg);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .billing-plan-name {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.025em;
    }

    .billing-plan-prices {
      display: grid;
      gap: 4px;
      margin: 4px 0 2px;
    }

    .billing-plan-price {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 4px 6px;
      margin: 0;
      color: var(--text);
    }

    .billing-plan-price--secondary {
      color: var(--text-secondary);
    }

    .billing-plan-amount {
      font-size: 40px;
      font-weight: 700;
      letter-spacing: -0.045em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .billing-plan-amount--sm {
      font-size: 22px;
      letter-spacing: -0.03em;
    }

    .billing-plan-period {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .billing-plan-save {
      margin-left: 4px;
      padding: 1px 7px;
      border-radius: 999px;
      background: var(--text);
      color: var(--bg);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .billing-plan-was {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px;
      margin: 0;
      font-size: 13px;
      color: var(--text-muted);
    }

    .billing-plan-was-amount {
      font-variant-numeric: tabular-nums;
      text-decoration: line-through;
      opacity: 0.75;
    }

    .billing-plan-blurb {
      margin: 0;
      min-height: 0;
      font-size: 15px;
      line-height: 1.4;
      color: var(--text-secondary);
    }

    .billing-plan-includes {
      margin: 4px 0 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }

    .billing-plan-features {
      list-style: none;
      display: grid;
      gap: 10px;
      margin: 4px 0 8px;
      padding: 16px 0 0;
      border-top: 1px solid var(--line);
    }

    .billing-plan-features li {
      position: relative;
      padding-left: 22px;
      font-size: 14px;
      line-height: 1.4;
      color: var(--text-secondary);
    }

    .billing-plan-features li::before {
      content: "";
      position: absolute;
      top: 0.45em;
      left: 0;
      width: 12px;
      height: 6px;
      border-left: 2px solid var(--text);
      border-bottom: 2px solid var(--text);
      transform: rotate(-45deg);
      opacity: 0.7;
    }

    .billing-plan-limits {
      list-style: none;
      display: grid;
      gap: 10px;
      margin: 4px 0 8px;
      padding: 14px 0 0;
      border-top: 1px solid var(--line);
    }

    .billing-plan-limits li {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .billing-plan-limit-value {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }

    .billing-plan-limit-value--muted {
      font-weight: 600;
      color: var(--text-muted);
    }

    .billing-plan-limit-label {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .billing-plan-limit--off .billing-plan-limit-label {
      color: var(--text-muted);
    }

    .billing-plan-actions {
      display: grid;
      gap: 8px;
      margin-top: auto;
      padding-top: 8px;
    }

    .billing-plan-checkout {
      margin: 0;
    }

    .billing-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 0;
      padding: 11px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      color: var(--text);
      background: var(--bg);
      cursor: pointer;
      transition: opacity 0.15s, background 0.15s, color 0.15s;
    }

    .billing-cta:hover {
      opacity: 0.88;
    }

    .billing-cta--primary {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
    }

    .billing-cta--disabled {
      color: var(--text-muted);
      background: color-mix(in srgb, var(--line) 40%, var(--bg));
      cursor: default;
      pointer-events: none;
    }

    .billing-stripe-hint {
      margin-top: 16px;
    }

    .billing-dev-form {
      margin-top: 12px;
    }

    @media (max-width: 820px) {
      .billing-plans--tiers {
        grid-template-columns: 1fr;
        max-width: 420px;
      }
    }

    @media (max-width: 640px) {
      .billing-meters:not(.account-quota-meters),
      .billing-plans {
        grid-template-columns: 1fr;
      }

      .billing-plan-blurb {
        min-height: 0;
      }

      .billing-status-top {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    /* ── Plan tiers (Ollama-style) ── */
    .plan-tiers {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      align-items: stretch;
    }

    .plan-tier {
      position: relative;
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 28px 24px 26px;
      border: 1px solid transparent;
      border-radius: 18px;
      background: var(--surface-soft);
    }

    .plan-tier--featured {
      background: var(--bg);
      border-color: var(--line);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
    }

    .plan-tier--current {
      outline: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
    }

    .plan-tier-name {
      margin: 0;
      font-size: 22px;
      font-weight: 650;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .plan-tier-blurb {
      margin: 8px 0 0;
      min-height: 2.6em;
      font-size: 15px;
      line-height: 1.4;
      color: var(--text-secondary);
    }

    .plan-tier-price-block {
      margin-top: 22px;
    }

    .plan-tier-price {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px 8px;
      margin: 0;
    }

    .plan-tier-amount {
      font-size: clamp(36px, 4vw, 44px);
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .plan-tier-period {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .plan-tier-note {
      margin: 8px 0 0;
      font-size: 13px;
      line-height: 1.4;
      color: var(--text-muted);
    }

    .plan-tier-actions {
      margin-top: 20px;
    }

    .plan-tier-form {
      margin: 0;
    }

    .plan-tier-cta {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 42px;
      padding: 10px 16px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--bg);
      color: var(--text);
      font: inherit;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    }

    .plan-tier-cta:hover {
      opacity: 0.9;
    }

    .plan-tier-cta--primary {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
    }

    .plan-tier-cta--disabled {
      color: var(--text-muted);
      background: color-mix(in srgb, var(--line) 35%, var(--bg));
      border-color: transparent;
      cursor: default;
      pointer-events: none;
    }

    .plan-tier-includes {
      margin: 22px 0 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }

    .plan-tier-features {
      list-style: none;
      display: grid;
      gap: 11px;
      margin: 14px 0 0;
      padding: 0;
    }

    .plan-tier-features li {
      position: relative;
      padding-left: 22px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text-secondary);
    }

    .plan-tier-features li::before {
      content: "";
      position: absolute;
      top: 0.42em;
      left: 1px;
      width: 11px;
      height: 6px;
      border-left: 2px solid var(--text);
      border-bottom: 2px solid var(--text);
      transform: rotate(-45deg);
      opacity: 0.72;
    }

    @media (max-width: 900px) {
      .plan-tiers {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
      }

      .plan-tier-blurb {
        min-height: 0;
      }
    }

    /* ── Pricing comparison ── */
    .pricing-page {
      max-width: 1080px;
      margin: 0 auto;
      padding: 28px 0 64px;
    }

    .pricing-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .pricing-title {
      font-size: clamp(36px, 7vw, 52px);
      font-weight: 600;
      letter-spacing: -0.045em;
      line-height: 1.05;
      margin-bottom: 12px;
    }

    .pricing-lead {
      max-width: 480px;
      margin: 0 auto;
      font-size: 17px;
      line-height: 1.5;
      color: var(--text-secondary);
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      align-items: stretch;
    }

    .pricing-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 24px 20px 20px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--bg);
    }

    .pricing-card--featured {
      border-color: var(--text);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    }

    .pricing-badge {
      position: absolute;
      top: -11px;
      left: 20px;
      margin: 0;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--text);
      color: var(--bg);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .pricing-plan-name {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .pricing-plan-prices {
      display: grid;
      gap: 4px;
    }

    .pricing-plan-price {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 4px 6px;
      margin: 0;
      color: var(--text);
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
    }

    .pricing-plan-price--year {
      color: var(--text-secondary);
    }

    .pricing-plan-amount {
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .pricing-plan-amount--sm {
      font-size: 22px;
      letter-spacing: -0.03em;
    }

    .pricing-plan-period {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .pricing-plan-blurb {
      margin: 0;
      min-height: 2.8em;
      font-size: 14px;
      line-height: 1.4;
      color: var(--text-secondary);
    }

    .pricing-features {
      list-style: none;
      display: grid;
      gap: 12px;
      margin: 4px 0 8px;
      padding: 16px 0 0;
      border-top: 1px solid var(--line);
    }

    .pricing-features li {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .pricing-feature-value {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.15;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }

    .pricing-feature-value--text {
      font-size: 22px;
      letter-spacing: -0.02em;
    }

    .pricing-feature-value--muted {
      font-size: 22px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .pricing-feature--off .pricing-feature-label {
      color: var(--text-muted);
    }

    .pricing-feature-label {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .pricing-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      padding: 11px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      color: var(--text);
      background: var(--bg);
      transition: opacity 0.15s, background 0.15s, color 0.15s;
    }

    .pricing-cta:hover {
      opacity: 0.88;
    }

    .pricing-cta--primary {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
    }

    .pricing-cta--disabled {
      color: var(--text-muted);
      background: color-mix(in srgb, var(--line) 40%, var(--bg));
      cursor: default;
      pointer-events: none;
    }

    .pricing-footnote {
      max-width: 640px;
      margin: 36px auto 0;
      font-size: 13px;
      line-height: 1.45;
      text-align: center;
      color: var(--text-muted);
    }

    .pricing-switch {
      margin: 18px 0 0;
      text-align: center;
      font-size: 14px;
    }

    .pricing-switch a {
      color: var(--text-secondary);
      text-decoration: none;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    }

    .pricing-switch a:hover {
      color: var(--text);
      border-bottom-color: var(--text);
    }

    .pricing-page--api {
      max-width: 1180px;
    }

    .pricing-grid--api {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }

    .pricing-grid--api .pricing-plan-blurb {
      min-height: 3.9em;
      font-size: 13px;
    }

    .pricing-grid--api .pricing-feature-value {
      font-size: 24px;
    }

    .billing-pricing .plan-tiers {
      margin-top: 8px;
    }

    .pricing-grid--api .pricing-card {
      padding: 22px 16px 18px;
    }

    @media (max-width: 1100px) {
      .pricing-grid--api {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 820px) {
      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
      }

      .pricing-grid--api {
        grid-template-columns: 1fr;
        max-width: 420px;
      }

      .pricing-plan-blurb,
      .pricing-grid--api .pricing-plan-blurb {
        min-height: 0;
      }
    }

    /* ── Cookie consent (centered) ── */
    .cookie-consent {
      position: fixed;
      inset: 0;
      z-index: 10000;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .cookie-consent[hidden] {
      display: none !important;
    }

    .cookie-consent:not([hidden]) {
      display: flex;
    }

    .cookie-consent-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(29, 29, 31, 0.42);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .cookie-consent-dialog {
      position: relative;
      z-index: 1;
      width: min(100%, 420px);
      padding: 28px 28px 24px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
      text-align: center;
    }

    .cookie-consent-title {
      margin: 0 0 10px;
      font-size: 22px;
      font-weight: 650;
      letter-spacing: -0.03em;
      line-height: 1.2;
      color: var(--text);
    }

    .cookie-consent-text {
      margin: 0 0 22px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
    }

    .cookie-consent-text a {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .cookie-consent-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .cookie-consent-reject {
      appearance: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      min-width: 160px;
      padding: 12px 28px;
      background: transparent;
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .cookie-consent-reject:hover {
      opacity: 0.82;
    }

    .cookie-consent-accept {
      appearance: none;
      border: none;
      border-radius: 999px;
      min-width: 160px;
      padding: 12px 28px;
      background: var(--text);
      color: var(--bg);
      font-family: var(--font);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .cookie-consent-accept:hover {
      opacity: 0.82;
    }

    body.cookie-consent-open {
      overflow: hidden;
    }

    @media (max-width: 480px) {
      .cookie-consent {
        padding: 16px;
      }

      .cookie-consent-dialog {
        padding: 24px 20px 20px;
        border-radius: 14px;
      }
    }

    /* ── Countries directory ── */
    .countries-page {
      padding: 8px 0 48px;
    }

    .countries-header {
      margin-bottom: 28px;
      max-width: 640px;
    }

    .countries-title {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.15;
      margin-bottom: 8px;
    }

    .countries-lead {
      color: var(--text-secondary);
      font-size: 16px;
      margin-bottom: 20px;
    }

    .countries-filter-wrap {
      display: block;
    }

    .countries-filter {
      width: 100%;
      max-width: 420px;
      appearance: none;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 11px 14px;
      font: inherit;
      font-size: 15px;
      color: var(--text);
      background: var(--bg);
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .countries-filter:focus {
      border-color: var(--today);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--today) 22%, transparent);
    }

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

    .countries-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 14px;
    }

    .countries-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 15px;
    }

    .countries-table thead th {
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--line) 28%, var(--bg));
      white-space: nowrap;
    }

    .countries-row td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }

    .countries-row:last-of-type td,
    .countries-regions-row:last-child td {
      border-bottom: none;
    }

    .countries-row:hover td {
      background: color-mix(in srgb, var(--line) 18%, var(--bg));
    }

    .countries-col-expand {
      width: 44px;
    }

    .countries-col-count {
      width: 96px;
      text-align: right;
    }

    .countries-table thead .countries-col-count {
      text-align: right;
    }

    .countries-col-actions {
      width: 1%;
      white-space: nowrap;
    }

    .countries-expand-btn {
      appearance: none;
      width: 28px;
      height: 28px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      font: inherit;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }

    .countries-expand-btn:hover {
      background: color-mix(in srgb, var(--line) 35%, var(--bg));
      border-color: color-mix(in srgb, var(--text-muted) 35%, var(--line));
    }

    .countries-expand-empty {
      display: inline-block;
      width: 28px;
    }

    .countries-name {
      color: var(--text);
      font-weight: 600;
      text-decoration: none;
      letter-spacing: -0.01em;
    }

    .countries-name:hover {
      color: var(--today);
    }

    .countries-count {
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
    }

    .countries-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .countries-fav-form {
      display: inline;
      margin: 0;
    }

    .countries-action-btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text-secondary);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      padding: 7px 10px;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .countries-action-btn:hover {
      color: var(--text);
      background: color-mix(in srgb, var(--line) 30%, var(--bg));
    }

    .countries-action-btn.is-active {
      color: #b45309;
      border-color: color-mix(in srgb, #b45309 30%, var(--line));
      background: color-mix(in srgb, #f59e0b 12%, var(--bg));
    }

    .countries-regions-row td {
      padding: 0 16px 14px 60px;
      background: color-mix(in srgb, var(--line) 16%, var(--bg));
      border-bottom: 1px solid var(--line);
    }

    .countries-regions {
      list-style: none;
      display: grid;
      gap: 2px;
      padding: 8px 0 4px;
    }

    .countries-region {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 7px 10px;
      border-radius: 8px;
    }

    .countries-region:hover {
      background: color-mix(in srgb, var(--line) 35%, var(--bg));
    }

    .countries-region-name {
      color: var(--text);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
    }

    .countries-region-name:hover {
      color: var(--today);
    }

    .countries-actions--region .countries-action-btn {
      padding: 5px 8px;
    }

    @media (max-width: 720px) {
      .countries-action-text {
        display: none;
      }

      .countries-col-count {
        width: 56px;
      }

      .countries-regions-row td {
        padding-left: 16px;
      }

      .countries-table thead th,
      .countries-row td {
        padding-left: 12px;
        padding-right: 12px;
      }
    }

    /* ── API docs ── */
    .api-docs {
      max-width: none;
      margin: 0 auto;
      padding: 24px 0 72px;
      width: 100%;
    }

    .api-docs-header {
      margin-bottom: 36px;
    }

    .api-docs-title {
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .api-docs-lead {
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
      margin-bottom: 16px;
      max-width: 640px;
    }

    .api-docs-links {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .api-docs-links--footer {
      margin: 36px 0 0;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .api-docs-links a {
      color: var(--today);
      text-decoration: none;
      border-bottom: 1px solid transparent;
    }

    .api-docs-links a:hover {
      border-bottom-color: var(--today);
    }

    .api-docs-links-sep {
      margin: 0 6px;
      color: var(--text-muted);
    }

    .api-docs--hub-home .account-section-nav {
      margin: 28px 0 0;
    }

    .api-docs--hub-home .account-section-nav__btn--card.is-active {
      color: var(--text);
      border-color: var(--text);
      background: transparent;
      font-weight: 500;
    }

    .api-docs--hub-home .account-section-nav__btn--card.is-active .account-section-nav__title {
      font-weight: 700;
    }

    .api-docs-section {
      margin-top: 28px;
    }

    .api-docs-block {
      margin-bottom: 0;
    }

    .api-docs-h2 {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }

    .api-docs-h4 {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin: 28px 0 12px;
      color: var(--text-secondary);
    }

    .api-docs-p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin-bottom: 12px;
    }

    .api-docs-pair {
      display: flex;
      flex-direction: column;
      gap: 28px;
      margin: 28px 0 16px;
    }

    .api-docs-sample {
      min-width: 0;
      width: 100%;
      margin-bottom: 20px;
    }

    .api-docs-pair .api-docs-sample {
      margin-bottom: 0;
    }

    .api-docs-sample-label {
      margin: 0 0 10px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .api-docs-pre {
      margin: 0;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #1d1d1f;
      color: #d4d4d8;
      overflow-x: auto;
      font-size: 12.5px;
      line-height: 1.55;
    }

    .api-docs-pre code {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      white-space: pre;
    }

    .api-docs-pre .tok-key {
      color: #7dd3fc;
    }

    .api-docs-pre .tok-str {
      color: #86efac;
    }

    .api-docs-pre .tok-num {
      color: #fbbf24;
    }

    .api-docs-pre .tok-bool {
      color: #f0abfc;
    }

    .api-docs-pre .tok-punc {
      color: #a1a1aa;
    }

    .api-docs-pre .tok-method {
      color: #38bdf8;
      font-weight: 700;
    }

    .api-docs-pre .tok-url {
      color: #e4e4e7;
    }

    .api-docs-pre .tok-header {
      color: #7dd3fc;
    }

    .api-docs-endpoint {
      margin-bottom: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--line);
      scroll-margin-top: 80px;
    }

    .api-docs-endpoint:last-child,
    .api-docs-endpoint--panel {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .api-docs-endpoint-title {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .api-docs-endpoint-path {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0 0 10px;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 13px;
    }

    .api-docs-endpoint-path code {
      font-family: inherit;
      color: var(--text);
    }

    .api-docs-method {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      background: #0071e3;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      line-height: 1.4;
    }

    .api-docs-method--sm {
      font-size: 10px;
      padding: 1px 5px;
    }

    .api-docs-params-wrap {
      margin: 0 0 8px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    .api-docs-params {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      line-height: 1.55;
    }

    .api-docs-params th,
    .api-docs-params td {
      padding: 14px 18px;
      text-align: left;
      vertical-align: middle;
      border-bottom: 1px solid var(--line);
    }

    .api-docs-params th {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
      white-space: nowrap;
      padding: 12px 18px;
    }

    .api-docs-params tbody tr:last-child td {
      border-bottom: 0;
    }

    .api-docs-params th:first-child,
    .api-docs-params td:first-child {
      width: 1%;
      white-space: nowrap;
      padding-left: 20px;
    }

    .api-docs-params th:nth-child(2),
    .api-docs-params td:nth-child(2) {
      width: 1%;
      white-space: nowrap;
    }

    .api-docs-params th:last-child,
    .api-docs-params td:last-child {
      padding-right: 20px;
    }

    .api-docs-params code {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 12.5px;
      color: var(--text);
    }

    .api-docs-param-flag {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .api-docs-param-flag--req {
      color: #b91c1c;
      font-weight: 600;
    }

    .api-docs-param-desc {
      color: var(--text-secondary);
    }

    /* ── API hub (promo) ── */
    .api-hub {
      max-width: 720px;
      margin: 0 auto;
      padding: 24px 0 72px;
    }

    .api-hub-header {
      margin-bottom: 40px;
    }

    .api-hub-title {
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .api-hub-lead {
      margin: 0 0 22px;
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
      max-width: 560px;
    }

    .api-hub-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0;
    }

    .api-hub-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 16px;
      font-size: 13px;
      font-weight: 560;
      letter-spacing: -0.01em;
      line-height: 1.2;
      text-decoration: none;
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 10px;
      background: transparent;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }

    .api-hub-cta:hover {
      border-color: color-mix(in srgb, var(--today) 45%, var(--line));
      color: var(--today);
    }

    .api-hub-cta--primary {
      color: #fff;
      background: var(--today);
      border-color: var(--today);
    }

    .api-hub-cta--primary:hover {
      color: #fff;
      filter: brightness(1.06);
    }

    .api-hub-body {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .api-hub-h2 {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.3;
      margin: 0 0 12px;
    }

    .api-hub-p {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-secondary);
    }

    .api-hub-covers {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--line);
    }

    .api-hub-covers li {
      border-bottom: 1px solid var(--line);
    }

    .api-hub-covers a {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 2px;
      text-decoration: none;
      color: var(--text);
      transition: color 0.15s ease;
    }

    .api-hub-covers a:hover {
      color: var(--today);
    }

    .api-hub-cover-label {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    .api-hub-cover-path {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 12.5px;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .api-hub-covers a:hover .api-hub-cover-path {
      color: var(--today);
    }

    .api-hub-base {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 12px;
      margin: 14px 0 0;
      font-size: 13px;
    }

    .api-hub-base-label {
      color: var(--text-muted);
    }

    .api-hub-base code {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 13px;
      color: var(--text);
    }

    .pricing-switch-sep {
      margin: 0 8px;
      color: var(--text-muted);
    }

    @media (max-width: 820px) {
      .api-docs-params th,
      .api-docs-params td {
        padding: 12px 14px;
      }

      .api-docs-params th:first-child,
      .api-docs-params td:first-child {
        padding-left: 14px;
      }

      .api-docs-params th:last-child,
      .api-docs-params td:last-child {
        padding-right: 14px;
      }
    }