/* ── CSS Variables ── */
    :root {
      --forest: #0D2B1A; --green: #1B4332; --green-mid: #2D6A4F;
      --green-light: #D8EFE3; --green-pale: #F2F8F5;
      --gold: #D4AF37; --white: #ffffff; --off-white: #F8F5F0;
      --gray-500: #7a7a7a; --text: #1a1a1a; --line-green: #06C755;
      --navy: #1B4332; --navy-dark: #0D2B1A;
      --navy-mid: #2D6A4F;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Noto Sans TC', sans-serif; color: var(--text); background: var(--white); line-height: 1.6; }

    a { color: var(--gold); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .section { padding: 72px 0; }
    .section-light { background: var(--off-white); }
    .section-dark { background: var(--navy-dark); }

    .display { font-family: 'Noto Sans TC', sans-serif; }

    .section-label {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
    }
    .section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(212,175,55,0.3);
      max-width: 60px;
    }

    .gold-divider {
      width: 48px;
      height: 2px;
      background: var(--gold);
      margin: 16px 0;
    }
    .gold-divider.center { margin: 16px auto; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 28px;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.08em;
      cursor: pointer;
      border: none;
      text-decoration: none;
      transition: all 0.2s;
    }
    .btn-gold { background: var(--gold); color: #1a1a1a; }
    .btn-gold:hover { background: #c4a030; text-decoration: none; }
    .btn-navy { background: var(--navy); color: var(--white); }
    .btn-navy:hover { background: var(--navy-mid); text-decoration: none; }
    .btn-outline-navy { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
    .btn-outline-navy:hover { background: var(--navy); color: var(--white); text-decoration: none; }

    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    @media (max-width: 768px) { .grid-3 { grid-template-columns: 1fr; } }

    /* ── Nav ── */
    .nav { position: sticky; top: 0; z-index: 100; background: rgba(13,43,26,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(212,175,55,0.25); }
    .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; }
    .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .nav-logo-img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: screen; flex-shrink: 0; }
    .nav-logo-text { line-height: 1.15; }
    .nav-logo-en { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 300; color: #fff; letter-spacing: 0.12em; display: block; }
    .nav-logo-zh { font-size: 13px; color: rgba(255,255,255,0.5); letter-spacing: 0.22em; display: block; margin-top: 2px; }
    .nav-links { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
    .nav-links > li > a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 16px; white-space: nowrap; transition: color 0.2s; }
    .nav-links > li > a:hover, .nav-links > li > a.active { color: #D4AF37; }
    .has-dropdown { position: relative; }
    .has-dropdown > a::after { content: ' ▾'; font-size: 9px; opacity: 0.55; }
    .has-dropdown::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 8px; }
    .nav-sub { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; background: rgba(13,43,26,0.97); backdrop-filter: blur(12px); border: 1px solid rgba(212,175,55,0.25); min-width: 180px; list-style: none; padding: 6px 0; box-shadow: 0 8px 32px rgba(0,0,0,0.35); z-index: 200; }
    .has-dropdown:hover .nav-sub { display: block; }
    .nav-sub li a { display: block; padding: 9px 18px; font-size: 16px; color: rgba(255,255,255,0.75); transition: all 0.2s; white-space: nowrap; text-decoration: none; }
    .nav-sub li a:hover { color: #D4AF37; }
    .nav-actions { display: flex; align-items: center; gap: 10px; }
    #nav-login-btn { padding: 7px 16px; font-size: 16px; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); cursor: pointer; letter-spacing: 0.03em; text-decoration: none; transition: all 0.2s; }
    #nav-login-btn:hover { border-color: #D4AF37; color: #D4AF37; }
    #nav-user-info { display: none; font-size: 12px; color: rgba(255,255,255,0.9); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-weight: 600; }
    #nav-logout-btn { display: none; padding: 6px 4px; font-size: 12px; background: transparent; border: none; color: rgba(255,255,255,0.5); cursor: pointer; text-decoration: underline; font-family: inherit; }
    .btn-line-nav { background: #06C755; color: #fff; font-size: 16px; font-weight: 700; padding: 8px 16px; text-decoration: none; letter-spacing: 0.04em; transition: background 0.2s; white-space: nowrap; }
    .btn-line-nav:hover { background: #05a847; }
    .nav-hamburger { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }
    .nav-mobile { display: none; background: #0D2B1A; padding: 20px 24px; border-top: 1px solid rgba(212,175,55,0.15); }
    .nav-mobile.open { display: block; max-height: calc(100vh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .nav-mobile a { display: block; color: rgba(255,255,255,0.8); text-decoration: none; padding: 12px 0; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .nav-mobile a:hover { color: #D4AF37; }
    @media (max-width: 1100px) { .nav-links, .nav-actions { display: none; } .nav-hamburger { display: block; } }

    /* ── Page hero ── */
    .page-hero {
      background: linear-gradient(135deg, #0D2B1A 0%, #1B4332 50%, #2D6A4F 100%);
      padding: 64px 0 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&w=1800&q=60') center/cover no-repeat;
      opacity: 0.1;
    }
    .page-hero-inner { position: relative; z-index: 1; }

    /* ── Calendar layout ── */
    .cal-wrap {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 24px;
      align-items: start;
    }
    @media (max-width: 900px) {
      .cal-wrap { grid-template-columns: 1fr; }
    }

    /* ── Calendar main panel ── */
    .cal-panel {
      background: var(--white);
      border: 1px solid #e8e8e8;
      border-radius: 2px;
      overflow: hidden;
    }
    .cal-header {
      background: var(--navy-dark);
      padding: 18px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .cal-month-title {
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 22px;
      font-weight: 600;
      color: var(--white);
      letter-spacing: 0.04em;
    }
    .cal-nav-btn {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(212,175,55,0.3);
      color: var(--gold);
      width: 32px;
      height: 32px;
      border-radius: 2px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .cal-nav-btn:hover { background: rgba(212,175,55,0.15); }
    .cal-nav-group { display: flex; gap: 8px; align-items: center; }
    .cal-today-btn {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.25);
      color: rgba(255,255,255,0.7);
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 2px;
      cursor: pointer;
      letter-spacing: 0.06em;
      transition: all 0.2s;
    }
    .cal-today-btn:hover { border-color: var(--gold); color: var(--gold); }

    /* Weekday row */
    .cal-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      background: var(--off-white);
      border-bottom: 1px solid #e8e8e8;
    }
    .cal-weekday {
      text-align: center;
      padding: 10px 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gray-500);
    }
    .cal-weekday.sun { color: #c0392b; }
    .cal-weekday.sat { color: var(--navy); }

    /* Grid cells */
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
    }
    .cal-cell {
      min-height: 100px;
      border-right: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
      padding: 6px 8px;
      cursor: pointer;
      transition: background 0.15s;
      position: relative;
    }
    .cal-cell:nth-child(7n) { border-right: none; }
    .cal-cell:hover { background: #f2f8f5; }
    .cal-cell.other-month { background: #fafafa; }
    .cal-cell.other-month .cal-date { color: #ccc; }
    .cal-cell.today { background: #f0faf4; }
    .cal-date {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-bottom: 4px;
    }
    .cal-cell.today .cal-date {
      background: var(--navy);
      color: var(--white);
      font-weight: 700;
    }
    .cal-cell.sun .cal-date { color: #c0392b; }
    .cal-cell.sat .cal-date { color: var(--navy); }
    .cal-cell.today.sun .cal-date,
    .cal-cell.today.sat .cal-date { color: var(--white); }

    /* Event chips */
    .cal-event {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 2px;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .cal-event.medical    { background: #fef2f2; color: #b91c1c; border-left: 2px solid #ef4444; }
    .cal-event.health     { background: #fff7ed; color: #c2410c; border-left: 2px solid #f97316; }
    .cal-event.contract   { background: #eff6ff; color: #1d4ed8; border-left: 2px solid #3b82f6; }
    .cal-event.arrival    { background: #f5f3ff; color: #6d28d9; border-left: 2px solid #8b5cf6; }
    .cal-event.general    { background: #f9fafb; color: #374151; border-left: 2px solid #9ca3af; }
    .cal-event .evt-emoji { font-size: 10px; }

    /* More indicator */
    .cal-more {
      font-size: 10px;
      color: var(--gray-500);
      padding: 1px 4px;
      cursor: pointer;
    }
    .cal-more:hover { color: var(--navy); }

    /* ── Sidebar ── */
    .cal-sidebar { display: flex; flex-direction: column; gap: 16px; }

    /* Add event button */
    .add-event-btn {
      width: 100%;
      background: var(--navy);
      color: var(--white);
      border: none;
      padding: 14px 20px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.06em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.2s;
      text-decoration: none;
    }
    .add-event-btn:hover { background: var(--navy-mid); text-decoration: none; }

    /* Category legend */
    .cal-legend {
      background: var(--white);
      border: 1px solid #e8e8e8;
      padding: 20px;
    }
    .legend-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 0;
      font-size: 13px;
      color: var(--text);
      border-bottom: 1px solid #f5f5f5;
    }
    .legend-item:last-child { border-bottom: none; }
    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    /* Upcoming events */
    .upcoming-panel {
      background: var(--white);
      border: 1px solid #e8e8e8;
      overflow: hidden;
    }
    .upcoming-header {
      background: var(--off-white);
      border-bottom: 1px solid #e8e8e8;
      padding: 14px 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .upcoming-list { padding: 8px 0; max-height: 380px; overflow-y: auto; }
    .upcoming-item {
      padding: 10px 20px;
      border-bottom: 1px solid #f5f5f5;
      cursor: pointer;
      transition: background 0.15s;
    }
    .upcoming-item:last-child { border-bottom: none; }
    .upcoming-item:hover { background: #f2f8f5; }
    .upcoming-date {
      font-size: 10px;
      color: var(--gray-500);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 3px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .upcoming-date-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .upcoming-title { font-size: 18px; color: var(--text); font-weight: 500; }
    .upcoming-meta { font-size: 15px; color: var(--gray-500); margin-top: 2px; }
    .upcoming-empty { padding: 24px 20px; text-align: center; color: var(--gray-500); font-size: 18px; }

    /* ── Feature strip ── */
    .feature-strip {
      background: var(--navy-dark);
      padding: 48px 0;
    }
    .feature-strip-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 24px;
    }
    @media (max-width: 900px) {
      .feature-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 500px) {
      .feature-strip-grid { grid-template-columns: 1fr; }
    }
    .feature-item { text-align: center; padding: 28px 24px; min-width: 0; }
    .feature-icon { font-size: 32px; margin-bottom: 12px; color: rgba(212,175,55,0.85); }
    .feature-label { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 6px; letter-spacing: 0.04em; }
    .feature-desc { font-size: 18px; color: rgba(255,255,255,0.7); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }

    .overview-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    @media (max-width: 768px) {
      .feature-strip {
        padding: 28px 0;
      }
      .feature-strip-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
      }
      .feature-item {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 4px;
        align-items: start;
        text-align: left;
        padding: 18px 16px;
        border: 1px solid rgba(212,175,55,0.18);
        background: rgba(255,255,255,0.03);
      }
      .feature-icon {
        grid-row: 1 / span 2;
        margin-bottom: 0;
        font-size: 28px;
        line-height: 1.1;
        text-align: center;
      }
      .feature-label {
        margin-bottom: 0;
        font-size: 18px;
        line-height: 1.35;
        letter-spacing: 0.02em;
      }
      .feature-desc {
        font-size: 16px;
        line-height: 1.7;
      }
      .overview-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
      }
      .overview-grid > a {
        text-align: left !important;
        padding: 20px 18px !important;
        min-height: 0;
      }
      .overview-grid > a > div {
        word-break: keep-all;
        overflow-wrap: break-word;
      }
    }
    @media (max-width: 420px) {
      .overview-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 900px) {
      #cms-section .container > div {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
      }
      #cms-section .container > div > div:first-child {
        order: 2;
      }
      #cms-section .container > div > div:last-child {
        order: 1;
      }
      .service-record-row {
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 8px 10px !important;
        align-items: start !important;
      }
      .service-record-name {
        min-width: 0;
        word-break: keep-all;
        overflow-wrap: break-word;
      }
      .service-record-time {
        grid-column: 2;
        justify-self: start;
      }
    }

    /* ── CTA section ── */
    .cal-cta {
      background: var(--off-white);
      border: 1px solid #e0d9c8;
      padding: 32px;
      text-align: center;
    }

    /* ── Modal (demo) ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: var(--white);
      width: 100%;
      max-width: 440px;
      padding: 32px;
      position: relative;
    }
    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 18px;
      color: var(--gray-500);
      cursor: pointer;
    }
    .modal-title { font-family: 'Noto Sans TC', sans-serif; font-size: 24px; color: var(--navy); font-weight: 600; margin-bottom: 8px; }
    .modal-sub { font-size: 18px; color: var(--gray-500); margin-bottom: 24px; }
    .modal-body { font-size: 18px; color: var(--text); line-height: 1.7; }
    .modal-body p { margin-bottom: 12px; }
    .modal-footer { margin-top: 24px; display: flex; gap: 12px; }

    /* ── Footer ── */
    .footer {
      background: var(--navy-dark);
      color: rgba(255,255,255,0.55);
      padding: 56px 0 0;
    }
    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 48px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 48px;
    }
    @media (max-width: 768px) {
      .footer-inner { grid-template-columns: 1fr; gap: 32px; }
    }
    .footer-logo-en {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 22px;
      font-weight: 600;
      color: var(--white);
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }
    .footer-logo-zh {
      font-size: 18px;
      color: rgba(255,255,255,0.8);
      letter-spacing: 0.1em;
      margin-bottom: 16px;
    }
    .footer-divider {
      width: 36px;
      height: 1px;
      background: rgba(212,175,55,0.4);
      margin-bottom: 16px;
    }
    .footer-tagline {
      font-size: 18px;
      color: rgba(255,255,255,0.85);
      line-height: 1.9;
    }
    .footer-links-title {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 16px;
    }
    .footer-links a {
      display: block;
      font-size: 18px;
      color: rgba(255,255,255,0.85);
      padding: 5px 0;
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--gold); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .footer-copy { font-size: 18px; color: rgba(255,255,255,0.8); }
    .footer-legal { font-size: 18px; color: rgba(255,255,255,0.75); }

    /* ── Floating LINE button ── */
    .floating-back-top {
      position: fixed;
      bottom: 80px;
      right: 24px;
      background: rgba(13,43,26,0.82);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
      text-decoration: none;
      letter-spacing: 0.04em;
      z-index: 200;
      transition: opacity 0.3s;
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
    }
    .floating-back-top.visible { opacity: 1; pointer-events: auto; }
    .floating-back-top:hover { opacity: 0.85; text-decoration: none; color: #fff; }
    .floating-line {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--line-green);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      padding: 12px 20px;
      border-radius: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(6,199,85,0.35);
      z-index: 200;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .floating-line:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(6,199,85,0.45); text-decoration: none; }