/* ===== Design Tokens ===== */
:root {
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  --md-sys-color-surface: #FFFBFE;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;

  --md-sys-typescale-display-large: 57px;
  --md-sys-typescale-display-medium: 45px;
  --md-sys-typescale-display-small: 36px;
  --md-sys-typescale-headline-large: 32px;
  --md-sys-typescale-headline-medium: 28px;
  --md-sys-typescale-headline-small: 24px;
  --md-sys-typescale-title-large: 22px;
  --md-sys-typescale-title-medium: 16px;
  --md-sys-typescale-title-small: 14px;
  --md-sys-typescale-body-large: 16px;
  --md-sys-typescale-body-medium: 14px;
  --md-sys-typescale-body-small: 12px;
  --md-sys-typescale-label-large: 14px;
  --md-sys-typescale-label-medium: 12px;
  --md-sys-typescale-label-small: 11px;

  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-level3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);

  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Reset & Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  line-height: 1.5;
}

/* ===== Interactive Elements (Ripple + No Select) ===== */
.featured-card,
.restaurant-card,
.filter-chip,
.icon-button,
.bottom-nav__item-icon-wrapper {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.material-icons-round {
  color: var(--md-sys-color-on-surface-variant);
  user-select: none;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--md-sys-shape-corner-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-normal);
}

.icon-button:hover { background-color: rgba(0,0,0,0.08); }

/* ===== Ripple Effect ===== */
.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: var(--ripple-color, rgba(0, 0, 0, 0.12));
  transform: scale(0);
  animation: ripple-expand 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

.featured-card { --ripple-color: rgba(0, 0, 0, 0.08); }
.bottom-nav__item-icon-wrapper { --ripple-color: rgba(103, 80, 164, 0.12); }

/* ===== Top App Bar ===== */
.top-app-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--md-sys-color-surface);
  padding: 12px 16px;
  box-shadow: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
}

.top-app-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  height: 48px;
}

.top-app-bar__section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-app-bar__title {
  font-size: var(--md-sys-typescale-title-large);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

/* ===== Search Bar ===== */
.search-bar {
  display: none;
  position: sticky;
  top: 72px;
  z-index: 99;
  background-color: var(--md-sys-color-surface-container-high);
  padding: 12px 16px;
  align-items: center;
  gap: 12px;
}
.search-bar.active { display: flex; }
.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  outline: none;
}

/* ===== Main Content ===== */
.main-content { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.section-title {
  font-size: var(--md-sys-typescale-headline-small);
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--md-sys-color-on-surface);
}

/* ===== Filter Chips ===== */
.filters { margin-bottom: 24px; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.filter-chip.selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

/* ===== Featured Section ===== */
.featured-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.featured-card {
  background-color: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 24px;
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow: var(--md-sys-elevation-level1);
}
.featured-card:hover { box-shadow: var(--md-sys-elevation-level2); transform: translateY(-2px); }

.featured-card__icon { font-size: 48px; margin-bottom: 12px; color: var(--md-sys-color-on-primary-container); }
.featured-card__title { font-size: var(--md-sys-typescale-title-large); font-weight: 500; color: var(--md-sys-color-on-primary-container); margin-bottom: 8px; }
.featured-card__subtitle { font-size: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-primary-container); opacity: 0.8; }

/* ===== Restaurant Grid ===== */
.restaurants-section { margin-bottom: 32px; }
.restaurant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.restaurant-card {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow: var(--md-sys-elevation-level1);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.restaurant-card:hover { box-shadow: var(--md-sys-elevation-level2); transform: translateY(-2px); }

.restaurant-card__header { padding: 16px; background-color: var(--md-sys-color-surface-container); }
.restaurant-card__icon { font-size: 40px; margin-bottom: 12px; }
.restaurant-card__name { font-size: var(--md-sys-typescale-title-large); font-weight: 500; color: var(--md-sys-color-on-surface); margin-bottom: 4px; }
.restaurant-card__cuisine { font-size: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }

.restaurant-card__content { padding: 16px; }
.restaurant-card__info { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; font-size: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.restaurant-card__info-item { display: flex; align-items: center; gap: 4px; }
.restaurant-card__rating { display: flex; align-items: center; gap: 4px; }
.restaurant-card__rating .material-icons-round { color: #FFB400; font-size: 18px; }

.restaurant-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: var(--md-sys-typescale-label-small);
  padding: 4px 8px;
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* ===== Modal ===== */
.modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.32);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-smooth), visibility 0s var(--transition-smooth);
}
.modal-overlay.active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--transition-smooth), visibility 0s;
}

.modal {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--md-sys-elevation-level3);
  transform: scale(0.95);
  opacity: 0;
  transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}
.modal-overlay.active .modal {
  transform: scale(1);
  opacity: 1;
}

.modal__header {
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.modal__content { overflow-y: auto; flex: 1; padding: 24px; }

.menu-section {
  opacity: 0;
  transform: translateY(16px);
  animation: detail-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.menu-section:nth-child(2) { animation-delay: 0.15s; }
.menu-section:nth-child(3) { animation-delay: 0.25s; }
.menu-section:nth-child(4) { animation-delay: 0.35s; }
.menu-section:nth-child(5) { animation-delay: 0.45s; }
.menu-section:nth-child(6) { animation-delay: 0.55s; }
.menu-section:nth-child(7) { animation-delay: 0.65s; }
.menu-section:nth-child(8) { animation-delay: 0.75s; }
.menu-section:nth-child(9) { animation-delay: 0.85s; }
.menu-section:nth-child(10) { animation-delay: 0.95s; }

@keyframes detail-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Restaurant Detail ===== */
.restaurant-detail__header {
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(16px);
  animation: detail-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
.restaurant-detail__icon { font-size: 64px; margin-bottom: 16px; }
.restaurant-detail__name { font-size: var(--md-sys-typescale-headline-medium); font-weight: 500; margin-bottom: 8px; }
.restaurant-detail__info { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; color: var(--md-sys-color-on-surface-variant); }

.restaurant-detail__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 16px;
  background-color: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-primary-container);
}
.restaurant-detail__phone .material-icons-round { font-size: 20px; }
.restaurant-detail__phone-number {
  flex: 1;
  font-size: var(--md-sys-typescale-body-large);
  font-weight: 500;
  letter-spacing: 0.5px;
}
.restaurant-detail__phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.restaurant-detail__phone-btn:hover { opacity: 0.88; }
.restaurant-detail__phone-btn:active { opacity: 0.68; }
.restaurant-detail__phone-btn .material-icons-round { font-size: 18px; }

.restaurant-detail__phone-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background-color: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-small);
  font-size: var(--md-sys-typescale-body-medium);
  z-index: 9999;
  animation: phone-toast-fade 2s ease forwards;
}
@keyframes phone-toast-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Menu Items ===== */
.menu-section { margin-bottom: 32px; }
.menu-section__title {
  font-size: var(--md-sys-typescale-title-large);
  font-weight: 500;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.menu-items { display: flex; flex-direction: column; gap: 12px; }

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
}
.menu-item__info { flex: 1; }
.menu-item__name { font-size: var(--md-sys-typescale-body-large); font-weight: 500; margin-bottom: 4px; }
.menu-item__description { font-size: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.menu-item__price { font-size: var(--md-sys-typescale-title-large); font-weight: 500; color: var(--md-sys-color-primary); margin-left: 16px; }

/* ===== Predictive Back Gesture Indicator ===== */
.back-gesture-indicator {
  position: fixed;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.1) 50%,
    transparent 100%
  );
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 28px 28px 0;
}
.back-gesture-indicator.active { opacity: 1; }
.back-gesture-indicator .material-icons-round {
  color: rgba(255, 255, 255, 0.95);
  font-size: 36px;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.4),
    0 4px 16px rgba(0,0,0,0.3);
  transition: transform var(--transition-fast);
}

/* ===== Bottom Navigation Bar (MD3) ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 80px;
  background-color: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-level2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: color var(--transition-normal);
  padding: 12px 0 16px;
}

.bottom-nav__item-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color var(--transition-smooth);
}

.bottom-nav__item .material-icons-round {
  font-size: 24px;
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--transition-normal);
}

.bottom-nav__item-label {
  font-size: var(--md-sys-typescale-label-medium);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--transition-normal);
}

.bottom-nav__item:hover .bottom-nav__item-icon-wrapper {
  background-color: rgba(103, 80, 164, 0.08);
}

.bottom-nav__item--active .bottom-nav__item-icon-wrapper--active,
.bottom-nav__item--active .bottom-nav__item-icon-wrapper {
  background-color: var(--md-sys-color-secondary-container);
}

.bottom-nav__item--active .material-icons-round {
  color: var(--md-sys-color-on-secondary-container);
}

.bottom-nav__item--active .bottom-nav__item-label {
  color: var(--md-sys-color-on-surface);
  font-weight: 600;
}

.main-content--with-bottom-nav {
  padding-bottom: calc(80px + 16px + env(safe-area-inset-bottom, 0px));
}

/* ===== About Page ===== */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 24px;
  margin-bottom: 16px;
}

.about-hero__icon-wrapper {
  width: 96px;
  height: 96px;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background-color: var(--md-sys-color-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: var(--md-sys-elevation-level1);
}

.about-hero__icon {
  font-size: 48px;
  color: var(--md-sys-color-on-primary-container);
}

.about-hero__title {
  font-size: var(--md-sys-typescale-headline-medium);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
}

.about-hero__subtitle {
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 8px;
}

.about-hero__version {
  font-size: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-outline);
  padding: 4px 12px;
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-full);
}

.about-section {
  padding: 16px;
  margin-bottom: 8px;
}

.about-section__title {
  font-size: var(--md-sys-typescale-title-large);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 12px;
}

.about-section__body {
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.75;
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
  transition: background-color var(--transition-normal);
}

.about-feature-item:hover {
  background-color: var(--md-sys-color-surface-container);
}

.about-feature-item__icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-feature-item__icon-wrapper .material-icons-round {
  font-size: 24px;
  color: var(--md-sys-color-on-primary-container);
}

.about-feature-item__text {
  flex: 1;
}

.about-feature-item__title {
  font-size: var(--md-sys-typescale-body-large);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 4px;
}

.about-feature-item__desc {
  font-size: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
}

.about-developer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
}

.about-developer__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-tertiary-container, #FFD8E4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-developer__avatar .material-icons-round {
  font-size: 24px;
  color: var(--md-sys-color-on-tertiary-container, #31111D);
}

.about-developer__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--md-sys-shape-corner-full);
}

.about-developer__name {
  font-size: var(--md-sys-typescale-body-large);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 2px;
}

.about-developer__desc {
  font-size: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
}

.about-section--links {
  padding: 8px 16px;
}

.about-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: var(--md-sys-shape-corner-large);
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
  transition: background-color var(--transition-normal);
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.about-link-item:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.about-link-item__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-link-item__left .material-icons-round {
  font-size: 24px;
  color: var(--md-sys-color-on-surface-variant);
}

.about-link-item__label {
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
}

.about-link-item > .material-icons-round {
  font-size: 20px;
  color: var(--md-sys-color-on-surface-variant);
}

.about-footer {
  text-align: center;
  padding: 24px 16px 16px;
  margin-top: 16px;
}

.about-footer__text {
  font-size: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-outline);
  line-height: 1.75;
}

/* ===== Page Transitions ===== */
@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-enter {
  animation: page-fade-in var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1)) both;
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.page-exit {
  animation: page-fade-out var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1)) both;
}

/* ===== Content Transitions ===== */
.content-fade-out {
  opacity: 0;
  transition: opacity var(--transition-fast, 0.15s ease-out);
}

.content-fade-in {
  animation: content-appear var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1)) both;
}

@keyframes content-appear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.featured-section {
  margin-bottom: 32px;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.featured-section--hidden {
  display: none;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .featured-cards,
  .restaurant-grid { grid-template-columns: 1fr; }
  .modal {
    max-height: 92vh;
    border-radius: var(--md-sys-shape-corner-large);
  }
  .modal__content {
    padding: 16px;
  }

  .restaurant-detail__icon {
    font-size: 48px;
    margin-bottom: 12px;
  }

  .restaurant-detail__name {
    font-size: var(--md-sys-typescale-headline-small);
  }

  .restaurant-detail__phone {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .restaurant-detail__phone-number {
    font-size: var(--md-sys-typescale-body-medium);
  }

  .menu-item {
    padding: 12px;
  }

  .menu-item__price {
    margin-left: 8px;
    font-size: var(--md-sys-typescale-title-medium);
  }

  /* Rating Component Mobile */
  .rating-component {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  .rating-prompt {
    font-size: var(--md-sys-typescale-body-medium);
    width: 100%;
    margin-bottom: 4px;
  }

  .rating-star {
    font-size: 24px;
  }

  .rating-text {
    min-width: 50px;
    font-size: var(--md-sys-typescale-label-medium);
  }

  /* Comments Rating Summary Mobile */
  .comments-rating-summary {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .comments-rating-summary__number {
    font-size: 28px;
  }

  .comments-rating-summary__star {
    font-size: 16px;
  }

  /* Waline Header Inputs Mobile */
  #waline-container .wl-header {
    flex-direction: column;
    gap: 0;
  }

  #waline-container .wl-header-item {
    min-height: 52px;
    padding-top: 14px;
  }

  #waline-container .wl-header-item label {
    top: 17px;
    font-size: var(--md-sys-typescale-body-medium);
  }

  #waline-container .wl-header-item:focus-within label,
  #waline-container .wl-header-item.wl-input-occupied label {
    top: 0;
    font-size: var(--md-sys-typescale-label-small);
  }

  #waline-container .wl-header-item input {
    height: 22px;
    font-size: var(--md-sys-typescale-body-medium);
  }

  /* Waline Editor Mobile */
  #waline-container .wl-editor {
    padding: 17px 0 6px;
    min-height: 88px;
  }

  #waline-container .wl-editor .wl-editor-label {
    top: 17px;
    font-size: var(--md-sys-typescale-body-medium);
  }

  #waline-container .wl-editor:focus .wl-editor-label,
  #waline-container .wl-editor.wl-editor-occupied .wl-editor-label {
    top: 0;
    font-size: var(--md-sys-typescale-label-small);
  }

  #waline-container .wl-editor textarea {
    min-height: 64px;
    font-size: var(--md-sys-typescale-body-medium);
  }

  /* Comment Cards Mobile */
  #waline-container .wl-card {
    padding: 12px;
    margin-bottom: 6px;
    border-radius: var(--md-sys-shape-corner-medium);
  }

  #waline-container .wl-card .wl-meta {
    gap: 10px;
    margin-bottom: 10px;
  }

  #waline-container .wl-card .wl-avatar {
    width: 36px;
    height: 36px;
  }

  #waline-container .wl-card .wl-nick {
    font-size: var(--md-sys-typescale-title-small);
  }

  #waline-container .wl-card .wl-time {
    font-size: var(--md-sys-typescale-label-small);
  }

  #waline-container .wl-card .wl-content {
    font-size: var(--md-sys-typescale-body-medium);
    line-height: 1.65;
  }

  /* Comment Actions Mobile */
  #waline-container .wl-card .wl-footer {
    gap: 6px;
    margin-top: 10px;
  }

  #waline-container .wl-card .wl-footer .wl-reply,
  #waline-container .wl-card .wl-footer .wl-like {
    padding: 5px 10px;
    font-size: var(--md-sys-typescale-label-medium);
  }

  #waline-container .wl-card .wl-head-action {
    width: 28px;
    height: 28px;
  }

  /* Nested Comments Mobile */
  #waline-container .wl-children {
    margin-left: 12px;
    padding-left: 12px;
  }

  #waline-container .wl-children .wl-card {
    padding: 10px;
  }

  /* Comment Rating Display Mobile */
  .comment-rating {
    padding: 3px 6px;
    margin-bottom: 6px;
  }

  .comment-rating-star {
    font-size: 12px;
  }

  /* Footer Actions Mobile */
  #waline-container .wl-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  #waline-container .wl-action {
    width: 36px;
    height: 36px;
  }

  #waline-container .wl-btn {
    height: 36px;
    padding: 0 20px;
    font-size: var(--md-sys-typescale-label-medium);
  }

  /* Submit Button Full Width on Mobile */
  #waline-container .wl-btn-primary {
    width: 100%;
    order: 1;
  }

  #waline-container .wl-actions {
    order: 0;
    width: 100%;
    justify-content: flex-end;
  }

  /* Tabs Mobile */
  .restaurant-detail__tab {
    padding: 10px 14px;
    font-size: var(--md-sys-typescale-label-medium);
    gap: 6px;
  }

  .restaurant-detail__tab .material-icons-round {
    font-size: 18px;
  }

  /* Reactions Mobile */
  #waline-container .wl-reaction-img {
    width: 40px;
    height: 40px;
  }

  /* Load More Button Mobile */
  #waline-container .wl-page-button {
    width: 100%;
    padding: 12px 20px;
  }

  /* Quote Block Mobile */
  #waline-container .wl-quote {
    padding: 10px 12px;
    font-size: var(--md-sys-typescale-body-small);
  }

  /* Login Status Mobile */
  #waline-container .wl-login-nick {
    font-size: var(--md-sys-typescale-label-medium);
    padding: 6px 12px;
  }

  /* Captcha Mobile */
  #waline-container .wl-captcha {
    flex-direction: column;
    gap: 8px;
  }
}

/* Extra Small Screens (e.g., iPhone SE, small Android phones) */
@media (max-width: 380px) {
  .modal__content {
    padding: 12px;
  }

  .restaurant-detail__name {
    font-size: var(--md-sys-typescale-title-large);
  }

  .comments-rating-summary__number {
    font-size: 24px;
  }

  .rating-star {
    font-size: 20px;
  }

  #waline-container .wl-header-item {
    min-height: 48px;
    padding-top: 12px;
  }

  #waline-container .wl-editor {
    min-height: 80px;
  }

  #waline-container .wl-editor textarea {
    min-height: 56px;
  }
}

.restaurant-detail__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding: 4px;
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-full);
  opacity: 0;
  transform: translateY(-8px);
  animation: tabs-slide-in 0.3s ease forwards;
}

@keyframes tabs-slide-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.restaurant-detail__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: inherit;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.restaurant-detail__tab .material-icons-round {
  font-size: 20px;
}

.restaurant-detail__tab:hover {
  background-color: rgba(103, 80, 164, 0.08);
}

.restaurant-detail__tab--active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.restaurant-detail__content {
  animation: content-fade-in 0.3s ease;
}

@keyframes content-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.waline-loading,
.waline-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium);
}

.waline-loading .material-icons-round,
.waline-error .material-icons-round {
  font-size: 32px;
  animation: spin 1s linear infinite;
}

.waline-error .material-icons-round {
  animation: none;
  color: var(--md-sys-color-error);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Refresh Indicator ===== */
.refresh-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  margin: 16px 0;
  color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-body-medium);
  animation: fade-in-out 2s ease forwards;
}

.refresh-indicator .material-icons-round {
  font-size: 20px;
}

@keyframes fade-in-out {
  0% { opacity: 0; transform: translateY(-10px); }
  15% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Waline Comment System - Material Design 3 ===== */
#waline-container {
  --waline-theme-color: var(--md-sys-color-primary);
  --waline-active-color: var(--md-sys-color-primary);
  --waline-color: var(--md-sys-color-on-surface);
  --waline-bgcolor: var(--md-sys-color-surface);
  --waline-bgcolor-light: var(--md-sys-color-surface-container-low);
  --waline-border-color: transparent;
  --waline-disable-bgcolor: var(--md-sys-color-surface-container);
  --waline-disable-color: var(--md-sys-color-on-surface-variant);
  --waline-bq-color: var(--md-sys-color-outline);
  --waline-info-bgcolor: var(--md-sys-color-primary-container);
  --waline-info-color: var(--md-sys-color-on-primary-container);
  --waline-font-size: var(--md-sys-typescale-body-large);
}

#waline-container * {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

#waline-container .wl-header-item,
#waline-container .wl-editor {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#waline-container .wl-header-item input,
#waline-container .wl-editor textarea {
  border: none !important;
  outline: none !important;
}

#waline-container .wl-panel {
  border: none !important;
}

/* ===== Input Panel ===== */
#waline-container .wl-panel {
  background-color: transparent;
  border-radius: 0;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* ===== Rating Component ===== */
.rating-component {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
}

.rating-prompt {
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
}

.rating-stars {
  display: flex;
  gap: 4px;
}

.rating-star {
  font-size: 28px;
  color: var(--md-sys-color-outline);
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.rating-star:hover {
  transform: scale(1.2);
}

.rating-star.active {
  color: #000;
}

.rating-text {
  font-size: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-primary);
  font-weight: 500;
  min-width: 60px;
}

/* ===== Comments Rating Summary ===== */
.comments-rating-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
}

.comments-rating-summary__score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.comments-rating-summary__number {
  font-size: 36px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  line-height: 1;
}

.comments-rating-summary__total {
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface-variant);
}

.comments-rating-summary__stars {
  display: flex;
  gap: 2px;
}

.comments-rating-summary__star {
  font-size: 20px;
  color: var(--md-sys-color-outline);
  line-height: 1;
}

.comments-rating-summary__star.active {
  color: #000;
}

.comments-rating-summary__count {
  font-size: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
}

/* ===== Header Inputs (Nick, Email, Link) ===== */
#waline-container .wl-header {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

#waline-container .wl-header-item {
  flex: 1;
  position: relative;
  min-height: 56px;
  padding-top: 15px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#waline-container .wl-header-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--md-sys-color-outline);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#waline-container .wl-header-item:focus-within::after {
  height: 2px;
  background-color: var(--md-sys-color-primary);
}

#waline-container .wl-header-item label {
  position: absolute;
  top: 19px;
  left: -5px;
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left top;
  line-height: 1.5;
}

#waline-container .wl-header-item:focus-within label,
#waline-container .wl-header-item.wl-input-occupied label {
  top: 0;
  font-size: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-primary);
  font-weight: 500;
}

#waline-container .wl-header-item input {
  width: 100%;
  height: 24px;
  padding: 4px 0;
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: none;
  outline: none;
}

#waline-container .wl-header-item input::placeholder {
  color: transparent;
}

#waline-container .wl-header-item:focus-within input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

/* ===== Editor (Comment Textarea) ===== */
#waline-container .wl-editor {
  position: relative;
  border: none;
  background-color: transparent;
  padding: 19px 0 8px;
  margin-bottom: 4px;
  min-height: 100px;
}

#waline-container .wl-editor::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--md-sys-color-outline);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#waline-container .wl-editor:focus::after {
  height: 2px;
  background-color: var(--md-sys-color-primary);
}

#waline-container .wl-editor .wl-editor-label {
  position: absolute;
  top: 19px;
  left: 0;
  font-size: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left top;
  line-height: 1.5;
}

#waline-container .wl-editor:focus .wl-editor-label,
#waline-container .wl-editor.wl-editor-occupied .wl-editor-label {
  top: 0;
  font-size: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-primary);
  font-weight: 500;
}

#waline-container .wl-editor textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px 0;
  font-size: var(--md-sys-typescale-body-large);
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
}

#waline-container .wl-editor textarea::placeholder {
  color: transparent;
}

#waline-container .wl-editor:focus textarea::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

/* ===== Footer (Actions & Submit Button) ===== */
#waline-container .wl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 8px;
}

#waline-container .wl-rss {
  display: none !important;
}

#waline-container .wl-actions {
  display: flex;
  gap: 4px;
}

#waline-container .wl-action {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

#waline-container .wl-action:hover {
  background-color: rgba(103, 80, 164, 0.08);
}

#waline-container .wl-action svg {
  width: 20px;
  height: 20px;
  fill: var(--md-sys-color-on-surface-variant);
  transition: fill 0.2s ease;
}

#waline-container .wl-action:hover svg {
  fill: var(--md-sys-color-primary);
}

#waline-container .wl-btn {
  height: 40px;
  padding: 0 24px;
  font-size: var(--md-sys-typescale-label-large);
  font-weight: 500;
  letter-spacing: 0.1px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

#waline-container .wl-btn-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

#waline-container .wl-btn-primary:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
}

#waline-container .wl-btn-primary:active {
  transform: scale(0.98);
}

/* ===== Comment Count ===== */
#waline-container .wl-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 16px;
  font-size: var(--md-sys-typescale-title-medium);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

#waline-container .wl-count::before {
  content: '';
  width: 4px;
  height: 20px;
  background-color: var(--md-sys-color-primary);
  border-radius: 2px;
}

/* ===== Comment Cards ===== */
#waline-container .wl-cards {
  margin-top: 0;
}

#waline-container .wl-card {
  padding: 16px;
  margin-bottom: 8px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
  border: none;
  transition: background-color 0.2s ease;
}

#waline-container .wl-card:hover {
  background-color: var(--md-sys-color-surface-container);
}

/* ===== Comment Rating Display ===== */
.comment-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
  padding: 4px 8px;
  background-color: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-small);
}

.comment-rating-star {
  font-size: 14px;
  color: var(--md-sys-color-outline);
  line-height: 1;
}

.comment-rating-star.active {
  color: var(--md-sys-color-on-primary-container);
}

/* ===== Comment Meta (Avatar, Nick, Time) ===== */
#waline-container .wl-card .wl-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#waline-container .wl-card .wl-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-primary-container);
  overflow: hidden;
  flex-shrink: 0;
}

#waline-container .wl-card .wl-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#waline-container .wl-card .wl-nick {
  font-size: var(--md-sys-typescale-title-medium);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

#waline-container .wl-card .wl-time {
  font-size: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
}

#waline-container .wl-card .wl-head-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

#waline-container .wl-card .wl-head-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#waline-container .wl-card .wl-head-action:hover {
  background-color: rgba(103, 80, 164, 0.08);
}

/* ===== Comment Content ===== */
#waline-container .wl-card .wl-content {
  font-size: var(--md-sys-typescale-body-large);
  line-height: 1.75;
  color: var(--md-sys-color-on-surface);
}

#waline-container .wl-card .wl-content p {
  margin: 0 0 8px;
}

#waline-container .wl-card .wl-content p:last-child {
  margin-bottom: 0;
}

/* ===== Quote Block ===== */
#waline-container .wl-quote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary-container);
  border-radius: 0 var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0;
  font-size: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-primary-container);
}

#waline-container .wl-quote .wl-quote-author {
  font-weight: 500;
  margin-bottom: 4px;
}

/* ===== Comment Footer (Reply, Like) ===== */
#waline-container .wl-card .wl-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}

#waline-container .wl-card .wl-footer .wl-reply {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: var(--md-sys-typescale-label-large);
  font-weight: 500;
  color: var(--md-sys-color-primary);
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#waline-container .wl-card .wl-footer .wl-reply:hover {
  background-color: var(--md-sys-color-primary-container);
}

#waline-container .wl-card .wl-footer .wl-like {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

#waline-container .wl-card .wl-footer .wl-like:hover {
  background-color: rgba(103, 80, 164, 0.08);
}

#waline-container .wl-card .wl-footer .wl-like.liked {
  color: var(--md-sys-color-primary);
}

/* ===== Nested Comments ===== */
#waline-container .wl-children {
  margin-left: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--md-sys-color-outline-variant);
}

#waline-container .wl-children .wl-card {
  background-color: var(--md-sys-color-surface);
  padding: 12px;
}

/* ===== Reactions ===== */
#waline-container .wl-reaction {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

#waline-container .wl-reaction-img {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--md-sys-color-surface-container);
  border: 2px solid transparent;
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

#waline-container .wl-reaction-img:hover {
  border-color: var(--md-sys-color-outline);
  transform: scale(1.05);
}

#waline-container .wl-reaction-img.active {
  border-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary-container);
}

/* ===== Load More Button ===== */
#waline-container .wl-page-button {
  display: block;
  margin: 16px auto;
  padding: 10px 24px;
  font-size: var(--md-sys-typescale-label-large);
  font-weight: 500;
  color: var(--md-sys-color-primary);
  background-color: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

#waline-container .wl-page-button:hover {
  background-color: rgba(103, 80, 164, 0.08);
}

#waline-container .wl-page-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Empty State ===== */
#waline-container .wl-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium);
}

#waline-container .wl-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* ===== Tabs ===== */
#waline-container .wl-tab-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-full);
}

#waline-container .wl-tab {
  flex: 1;
  padding: 10px 16px;
  font-size: var(--md-sys-typescale-label-large);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

#waline-container .wl-tab:hover {
  background-color: rgba(103, 80, 164, 0.08);
}

#waline-container .wl-tab.active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* ===== Login Status ===== */
#waline-container .wl-header-editor {
  padding: 12px 16px;
  margin-bottom: 16px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
}

#waline-container .wl-login-nick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: var(--md-sys-typescale-label-large);
  font-weight: 500;
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-full);
}

#waline-container .wl-logout-btn {
  margin-left: auto;
  padding: 6px 12px;
  font-size: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-primary);
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#waline-container .wl-logout-btn:hover {
  background-color: var(--md-sys-color-primary-container);
}

/* ===== Captcha ===== */
#waline-container .wl-captcha {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

#waline-container .wl-captcha input {
  flex: 1;
}

#waline-container .wl-captcha img {
  border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer;
}

/* ===== Code Blocks ===== */
#waline-container pre {
  padding: 16px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: var(--md-sys-typescale-body-small);
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-medium);
}

#waline-container code {
  padding: 2px 6px;
  font-size: var(--md-sys-typescale-body-small);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

#waline-container pre code {
  padding: 0;
  background: transparent;
}

/* ===== Images ===== */
#waline-container img {
  border-radius: var(--md-sys-shape-corner-small);
  max-width: 100%;
}

/* ===== Skeleton Loading ===== */
#waline-container .wl-skeleton {
  border-radius: var(--md-sys-shape-corner-small);
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-container) 25%,
    var(--md-sys-color-surface-container-high) 50%,
    var(--md-sys-color-surface-container) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Recent Comments ===== */
#waline-container .wl-recent-item {
  padding: 12px 16px;
  margin-bottom: 8px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: background-color 0.2s ease;
}

#waline-container .wl-recent-item:hover {
  background-color: var(--md-sys-color-surface-container);
}

/* ===== Misc ===== */
#waline-container .wl-input-wrapper {
  position: relative;
}

#waline-container .wl-input-wrapper .wl-input-label {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
}

#waline-container .wl-giscus {
  margin-top: 16px;
}

#waline-container .wl-meta-head {
  border-radius: var(--md-sys-shape-corner-small);
}

#waline-container .wl-tex {
  padding: 8px 12px;
  margin-top: 8px;
  font-size: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-small);
}

#waline-container .wl-editor-content {
  outline: none;
  min-height: 60px;
}