*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface2: #f0f0f0;
    --surface3: #e4e4e4;
    --text: #111111;
    --text2: #555555;
    --text3: #999999;
    --accent: #fde500;
    --accent-dark: #e6cf00;
    --drawer-width: 380px;
    --radius: 12px;
  }
  [data-theme="dark"] {
    --bg: #181818;
    --surface: #222222;
    --surface2: #2a2a2a;
    --surface3: #333333;
    --text: #f0f0f0;
    --text2: #aaaaaa;
    --text3: #666666;
    --accent: #fde500;
    --accent-dark: #e6cf00;
  }
  html, body { height: 100%; }
  body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; min-height: 100vh; overflow-x: hidden; }
  .app { display: flex; flex-direction: column; height: 100vh; }
  .topbar { background: var(--bg); padding: 0 20px; height: 56px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; z-index: 100; position: sticky; top: 0; }
  .logo-area { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; user-select: none; }
  .logo-icon { width: 24px; height: 24px; stroke: var(--text); transition: stroke 0.3s ease; }
  .logo-fill-bg { fill: var(--accent); stroke: none !important; transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .logo-area:hover .logo-fill-bg { transform: scaleY(1); }

  .logo-text { display: flex; flex-direction: column; }
  .logo-text h1 { font-size: 1rem; font-weight: 800; letter-spacing: 3px; color: var(--text); line-height: 1.1; font-family: 'Inter', sans-serif; text-transform: uppercase; }
  .logo-text .subtitle { font-size: 8px; color: var(--text3); letter-spacing: 0.5px; text-transform: uppercase; line-height: 1; margin-top: 1px; font-family: 'Inter', sans-serif; }
  .topbar-spacer { flex: 1; }
  .nav-btn { background: var(--surface); border: none; border-radius: 999px; color: var(--text2); font-family: 'Inter', sans-serif; font-size: 12px; padding: 0 16px; height: 32px; cursor: pointer; transition: all 0.15s; white-space: nowrap; font-weight: 500; }
  .nav-btn:hover { background: var(--surface2); color: var(--text); }
  .icon-btn { background: var(--surface); border: none; border-radius: 999px; color: var(--text2); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all 0.15s; flex-shrink: 0; }
  .icon-btn:hover { background: var(--surface2); color: var(--text); }
  .select-wrapper { position: relative; display: flex; align-items: center; flex-shrink: 0; }
  .select-wrapper select { background: var(--surface); border: none; border-radius: 999px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 12px; padding: 0 32px 0 14px; cursor: pointer; outline: none; height: 32px; appearance: none; -webkit-appearance: none; }
  .select-wrapper::after { content: 'expand_more'; font-family: 'Material Icons'; position: absolute; right: 8px; font-size: 18px; color: var(--text3); pointer-events: none; line-height: 1; }
  .main-content { display: flex; flex: 1; overflow: hidden; }
  .sidebar { width: 240px; flex-shrink: 0; background: var(--surface); overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; }
  .sidebar-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); padding: 0 4px; }
  .search-input { width: 100%; background: var(--surface2); border: none; border-radius: 999px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 12px; padding: 0 32px 0 14px; height: 32px; outline: none; }
  .search-input::placeholder { color: var(--text3); }
  .region-group { margin-bottom: 6px; }
  .region-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); padding: 4px 4px 2px; }
  .country-list { display: flex; flex-direction: column; gap: 1px; }
  .country-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 8px 5px 6px; border-radius: 6px; cursor: pointer; transition: background 0.12s; font-size: 12.5px; color: var(--text); }
  .country-item:hover { background: var(--surface2); }
  .country-item.selected { background: var(--surface); }
  .country-check { width: 18px; height: 18px; background: var(--surface3); border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.12s; color: transparent; margin-top: 1px; }
  .country-item.selected .country-check { background: var(--accent); color: #111111; }
  .country-name { flex: 1; }
  .country-flag { font-size: 11px; font-weight: 500; color: var(--text3); width: 24px; height: 18px; display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; margin-top: 1px; }
  .material-icons { font-family: 'Material Icons'; font-weight: 400; font-style: normal; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; }
  .calendar-area { flex: 1; overflow-y: auto; padding: 20px; container-type: inline-size; }
  .calendar-header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; position: sticky; top: -20px; background: var(--bg); z-index: 200; margin-top: -20px; margin-left: -20px; margin-right: -20px; padding-top: 20px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; isolation: isolate; transition: background 0.5s ease; }
  .calendar-header-top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 10px; }
  .calendar-header-bottom { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; }
  .year-selector-wrapper { position: relative; display: flex; align-items: center; flex-shrink: 0; }
  .year-selector-wrapper select { background: var(--surface); border: none; border-radius: 999px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 12px; padding: 0 32px 0 14px; cursor: pointer; outline: none; height: 32px; appearance: none; -webkit-appearance: none; }
  .year-selector-wrapper::after { content: 'expand_more'; font-family: 'Material Icons'; position: absolute; right: 8px; font-size: 18px; color: var(--text3); pointer-events: none; line-height: 1; }
  .calendar-header-controls { display: flex; align-items: center; gap: 12px; }
  .calendar-header-legend { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
  .months-row { display: grid; gap: 20px; grid-template-columns: 1fr; }
  @container (min-width: 500px) {
    .months-row, .months-row[class*="cols-"] { grid-template-columns: repeat(2, 1fr); }
  }
  @container (min-width: 750px) {
    .months-row, .months-row[class*="cols-"] { grid-template-columns: repeat(3, 1fr); }
  }
  @container (min-width: 1000px) {
    .months-row, .months-row[class*="cols-"] { grid-template-columns: repeat(4, 1fr); }
  }
  @container (min-width: 1500px) {
    .months-row, .months-row[class*="cols-"] { grid-template-columns: repeat(6, 1fr); }
  }
  .month-card { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.08); }
  .month-header { padding: 12px 16px 6px; display: flex; justify-content: space-between; align-items: center; }
  .month-number { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--text3); font-size: 16px; opacity: 0.55; }
  .month-name { font-family: 'Inter', sans-serif; font-weight: 400; color: var(--text); text-transform: uppercase; letter-spacing: 0.07em; }
  .day-names { display: grid; grid-template-columns: repeat(7, 1fr); padding: 12px 8px 8px; text-align: center; }
  .day-name { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text3); }
  .days-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px; gap: 8px; }
  .day-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; transition: background 0.12s, box-shadow 0.12s; font-weight: 400; color: var(--text); }
  .day-cell:hover { background: var(--surface2); }
  .day-cell.empty { cursor: default; pointer-events: none; }
  .day-cell.other-month { opacity: 0.25; }
  .day-cell.weekend { color: var(--text3); }
  .day-cell.today { background: transparent; color: var(--text) !important; font-weight: 700; box-shadow: inset 0 0 0 2px var(--text); border-radius: 6px; }
  .day-cell.today:hover { background: var(--surface2); }
  .day-cell.has-holiday { font-weight: 600; background: var(--accent); color: #111111; }
  .day-cell.has-holiday:hover { background: var(--accent-dark); }
  .day-cell.today.has-holiday { background: var(--accent); color: #111111 !important; box-shadow: inset 0 0 0 2px var(--text); }
  .day-cell.today.has-holiday:hover { background: var(--accent-dark); }
  .day-cell.selected-day { background: var(--surface3); }
  .day-cell.today.selected-day { background: transparent; box-shadow: inset 0 0 0 2px var(--text); }
  .day-cell.today.has-holiday.selected-day { background: var(--accent); box-shadow: inset 0 0 0 2px var(--text); }
  .legend { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }
  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); }
  .legend-swatch { width: 14px; height: 14px; border-radius: 50%; }
  .year-nav { display: flex; align-items: center; gap: 8px; }
  .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 200; opacity: 0; animation: fadeIn 0.2s forwards; }
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; opacity: 0; animation: fadeIn 0.2s forwards; display: flex; align-items: center; justify-content: center; padding: 20px; }
  @keyframes fadeIn { to { opacity: 1; } }
  .modal { background: var(--surface); border-radius: 20px; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15); transform: scale(0.92); opacity: 0; animation: modalIn 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) forwards; }
  @keyframes modalIn { to { transform: scale(1); opacity: 1; } }
  .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-width); background: var(--surface); z-index: 201; box-shadow: -12px 0 48px rgba(0,0,0,0.12); transform: translateX(100%); animation: slideIn 0.25s cubic-bezier(0.22,1,0.36,1) forwards; overflow-y: auto; display: flex; flex-direction: column; }
  @keyframes slideIn { to { transform: translateX(0); } }
  .drawer-top { padding: 20px 20px 16px; flex-shrink: 0; position: relative; background: transparent; display: flex; align-items: center; gap: 14px; }
  .modal-day-badge { border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex-shrink: 0; aspect-ratio: 1; height: 56px; letter-spacing: -0.5px; }
  .modal-date-text { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
  .drawer-date { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
  .drawer-weekday { font-size: 10px; color: var(--text2); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
  .drawer-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; border-radius: 6px; color: var(--text2); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: background 0.12s; }
  .drawer-close:hover { background: var(--surface2); color: var(--text); }
  .drawer-section { padding: 14px 20px; }
  .section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; }
  .holiday-entry { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; background: var(--surface2); margin-bottom: 5px; flex-direction: column; }
  .holiday-entry:last-child { margin-bottom: 0; }
  .holiday-entry-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
  .holiday-flag { width: 18px; height: auto; aspect-ratio: 4 / 3; background-size: cover; background-position: center; border-radius: 2px; flex-shrink: 0; margin-top: 2px; display: inline-block; }
  .holiday-info { flex: 1; }
  .holiday-name { font-size: 13px; font-weight: 500; color: var(--text); }
  .holiday-country { font-size: 11px; color: var(--text2); font-weight: 500; margin-top: 4px; }
  .holiday-dot { color: var(--text3); margin: 0 5px; }
  .holiday-translation { font-size: 11px; color: var(--text3); font-style: normal; }
  .no-holidays { font-size: 13px; color: var(--text3); font-style: italic; }
  .fun-fact-box { background: var(--surface2); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--text); }
  .fun-fact-loading { color: var(--text3); font-style: italic; font-size: 13px; }
  .otd-event { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 6px; background: var(--surface2); margin-bottom: 5px; }
  .otd-event:last-child { margin-bottom: 0; }
  .otd-year { font-size: 11px; font-weight: 700; color: var(--text3); flex-shrink: 0; margin-top: 2px; min-width: 32px; letter-spacing: 0.02em; }
  .otd-text { font-size: 13px; line-height: 1.55; color: var(--text); flex: 1; }
  .otd-link { font-size: 11px; color: var(--text3); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; opacity: 0.8; }
  .otd-link:hover { opacity: 1; text-decoration: underline; color: var(--text2); }
  .otd-loading { color: var(--text3); font-style: italic; font-size: 13px; }
  .other-entry { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 6px; margin-bottom: 4px; background: var(--surface2); flex-direction: column; }
  .other-entry:last-child { margin-bottom: 0; }
  .other-entry-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
  .app-footer { margin-top: 40px; padding: 24px 0 10px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text3); letter-spacing: 0.03em; }
  @media (max-width: 600px) {
    .app-footer { justify-content: center; text-align: center; }
  }
  .search-wrapper { position: relative; width: 100%; }
  .search-clear-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text3); display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 50%; transition: background 0.15s, color 0.15s; }
  .search-clear-btn:hover { background: var(--surface3); color: var(--text); }
  
  /* Bottom Info Sections */
  .info-section { display: flex; gap: 40px; margin-top: 50px; margin-bottom: 20px; flex-wrap: wrap; text-align: left; }
  .info-card { flex: 1; min-width: 300px; background: transparent; border-radius: 0; padding: 0; border: none; box-shadow: none; }
  .info-card h2 { font-size: 16px; font-weight: 600; color: var(--text2); margin-bottom: 16px; letter-spacing: -0.2px; }
  .info-card p { font-size: 13px; color: var(--text3); line-height: 1.65; margin-bottom: 12px; }
  .info-card p:last-child { margin-bottom: 0; }
  .info-card ol { list-style: none; padding: 0; margin: 0; counter-reset: info-counter; display: flex; flex-direction: column; gap: 16px; }
  .info-card ol li { position: relative; padding-left: 36px; font-size: 13px; color: var(--text3); line-height: 1.55; }
  .info-card ol li::before { content: counter(info-counter); counter-increment: info-counter; position: absolute; left: 0; top: 0px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text2); border-radius: 6px; background-color: transparent; background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--surface3) 3px, var(--surface3) 4px); }
  .info-card p strong, .info-card ol li strong { color: var(--text2); font-weight: 600; }

  /* Today Cell Pulse Effect */
  @keyframes today-pulse {
    0% {
      transform: scale(1);
      box-shadow: inset 0 0 0 2px var(--text);
    }
    30% {
      transform: scale(1.25);
      box-shadow: inset 0 0 0 2px var(--text), 0 0 0 10px rgba(253, 229, 0, 0.45);
      background-color: var(--accent);
      color: #111111;
    }
    65% {
      transform: scale(0.92);
      box-shadow: inset 0 0 0 2px var(--text), 0 0 0 4px rgba(253, 229, 0, 0.2);
    }
    100% {
      transform: scale(1);
      box-shadow: inset 0 0 0 2px var(--text);
    }
  }

  .today-pulse-active {
    animation: today-pulse 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1;
    z-index: 10;
    position: relative;
  }

  /* Sequenced Build-in Animations */
  @keyframes buildIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes buildInBounce {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    60% {
      opacity: 0.9;
      transform: translateY(4px);
    }
    80% {
      transform: translateY(-1px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .calendar-header {
    animation: buildIn 0.5s ease-in backwards;
  }

  .month-card {
    animation: buildInBounce 0.6s ease-in backwards;
  }
  .month-card:nth-child(1) { animation-delay: 0.1s; }
  .month-card:nth-child(2) { animation-delay: 0.15s; }
  .month-card:nth-child(3) { animation-delay: 0.2s; }
  .month-card:nth-child(4) { animation-delay: 0.25s; }
  .month-card:nth-child(5) { animation-delay: 0.3s; }
  .month-card:nth-child(6) { animation-delay: 0.35s; }
  .month-card:nth-child(7) { animation-delay: 0.4s; }
  .month-card:nth-child(8) { animation-delay: 0.45s; }
  .month-card:nth-child(9) { animation-delay: 0.5s; }
  .month-card:nth-child(10) { animation-delay: 0.55s; }
  .month-card:nth-child(11) { animation-delay: 0.6s; }
  .month-card:nth-child(12) { animation-delay: 0.65s; }
  .month-card:nth-child(n+13) { animation-delay: 0.7s; }

  .info-section {
    animation: buildIn 0.5s ease-in backwards;
    animation-delay: 0.75s;
  }

  .app-footer {
    animation: buildIn 0.5s ease-in backwards;
    animation-delay: 0.85s;
  }