.dashboard-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  gap: 4px;
}

.dashboard-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 2px 4px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background var(--transition-base, 0.18s ease), color var(--transition-base, 0.18s ease);
}

.dashboard-nav__item--active,
.dashboard-nav__item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.dashboard-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dashboard-nav__icon svg {
  width: 20px;
  height: 20px;
}

.dashboard-nav__label {
  white-space: nowrap;
}

/* Margin only between visible sections */
.dashboard-section:not([hidden]) + .dashboard-section:not([hidden]) {
  margin-top: 24px;
}

/* Ensure [hidden] attribute works correctly for sections with display: flex/grid */
.dashboard-section[hidden],
[data-section][hidden] {
  display: none !important;
}

/* Section titles - white text on dark background */
.dashboard-section__title {
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.dashboard-section__subtitle {
  margin: 0 0 24px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

/* Section header with title and controls (tabs, buttons) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.section-header__text {
  flex: 1;
  min-width: 0;
}

.section-header .dashboard-section__title {
  margin: 0 0 8px;
}

.section-header .dashboard-section__subtitle {
  margin: 0;
}

/* Cards Panel - white background for grids */
.cards-panel {
  background: var(--dashboard-surface, #ffffff);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Pill Tabs - Toggle Switcher (on dark background) */
.pill-tabs {
  position: relative;
  display: flex;
  padding: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

/* Sliding indicator */
.pill-tabs__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--dashboard-surface);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(31, 33, 60, 0.12);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.pill-tabs__tab {
  position: relative;
  z-index: 1;
  padding: 8px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.2s ease;
}

.pill-tabs__tab:hover:not(.pill-tabs__tab--active) {
  color: #fff;
}

.pill-tabs__tab--active,
.pill-tabs__tab--active:hover {
  color: var(--dashboard-text, #1f2238);
}

/* Tab content */
.tab-content {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========== Greetings Controls ========== */

.greetings-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Greetings Tabs - separate pill buttons */
.greetings-tabs {
  display: flex;
  gap: 8px;
}

.greetings-tab {
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.greetings-tab:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.greetings-tab--active {
  background: var(--dashboard-surface, #fff);
  border-color: var(--dashboard-surface, #fff);
  color: var(--dashboard-text, #1f2238);
}

.greetings-tab--active:hover {
  background: var(--dashboard-surface, #fff);
  border-color: var(--dashboard-surface, #fff);
  color: var(--dashboard-text, #1f2238);
}

/* Sort Button */
.greetings-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.greetings-sort:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.greetings-sort svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.greetings-sort[data-order="asc"] svg {
  transform: scaleY(-1);
}

/* Greetings Pager */
.greetings-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--dashboard-border, rgba(31, 33, 60, 0.1));
}

.greetings-pager[hidden] {
  display: none;
}

.greetings-pager__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--dashboard-border-strong, rgba(31, 33, 60, 0.15));
  background: var(--dashboard-surface, #fff);
  color: var(--dashboard-text, #1f2238);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.greetings-pager__btn:hover:not(:disabled) {
  background: var(--dashboard-surface-hover, #f5f5f7);
  border-color: var(--dashboard-border-strong, rgba(31, 33, 60, 0.25));
}

.greetings-pager__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Arrow icons */
.greetings-pager__btn--prev::before,
.greetings-pager__btn--next::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.greetings-pager__btn--prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.greetings-pager__btn--next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

.greetings-pager__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 60px;
  justify-content: center;
}

.greetings-pager__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dashboard-border-strong, rgba(31, 33, 60, 0.2));
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.greetings-pager__dot:hover {
  background: var(--dashboard-text-muted, rgba(31, 33, 60, 0.4));
}

.greetings-pager__dot--active {
  background: var(--dashboard-accent, #a855f7);
  transform: scale(1.25);
}

/* ========== Gifts Controls ========== */

.gifts-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Gifts Sort Button */
.gifts-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.gifts-sort:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.gifts-sort svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.gifts-sort[data-order="asc"] svg {
  transform: scaleY(-1);
}

/* Gifts Loader */
.gifts-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.gifts-loader[hidden] {
  display: none;
}

/* Gifts Pager */
.gifts-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--dashboard-border, rgba(31, 33, 60, 0.1));
}

.gifts-pager[hidden] {
  display: none;
}

.gifts-pager__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--dashboard-border-strong, rgba(31, 33, 60, 0.15));
  background: var(--dashboard-surface, #fff);
  color: var(--dashboard-text, #1f2238);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gifts-pager__btn:hover:not(:disabled) {
  background: var(--dashboard-surface-hover, #f5f5f7);
  border-color: var(--dashboard-border-strong, rgba(31, 33, 60, 0.25));
}

.gifts-pager__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Arrow icons */
.gifts-pager__btn--prev::before,
.gifts-pager__btn--next::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.gifts-pager__btn--prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.gifts-pager__btn--next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

.gifts-pager__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 60px;
  justify-content: center;
}

.gifts-pager__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dashboard-border-strong, rgba(31, 33, 60, 0.2));
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.gifts-pager__dot:hover {
  background: var(--dashboard-text-muted, rgba(31, 33, 60, 0.4));
}

.gifts-pager__dot--active {
  background: var(--dashboard-accent, #a855f7);
  transform: scale(1.25);
}

/* Mobile: section adjustments */
@media (max-width: 767px) {
  .dashboard-section__title {
    font-size: 28px;
  }

  .cards-panel {
    padding: 16px;
    border-radius: 20px;
  }

  /* Greetings Tabs - dark text on light background */
  .greetings-tab {
    border-color: rgba(31, 33, 60, 0.2);
    color: rgba(31, 33, 60, 0.6);
  }

  .greetings-tab:hover {
    color: var(--dashboard-text, #1f2238);
    border-color: rgba(31, 33, 60, 0.35);
  }

  .greetings-tab--active {
    background: var(--dashboard-text, #1f2238);
    border-color: var(--dashboard-text, #1f2238);
    color: #fff;
  }

  .greetings-tab--active:hover {
    background: var(--dashboard-text, #1f2238);
    border-color: var(--dashboard-text, #1f2238);
    color: #fff;
  }

  /* Greetings Sort Button - dark text on light background */
  .greetings-sort {
    border-color: rgba(31, 33, 60, 0.2);
    color: rgba(31, 33, 60, 0.6);
  }

  .greetings-sort:hover {
    color: var(--dashboard-text, #1f2238);
    border-color: rgba(31, 33, 60, 0.35);
  }

  /* Gifts Sort Button - dark text on light background */
  .gifts-sort {
    border-color: rgba(31, 33, 60, 0.2);
    color: rgba(31, 33, 60, 0.6);
  }

  .gifts-sort:hover {
    color: var(--dashboard-text, #1f2238);
    border-color: rgba(31, 33, 60, 0.35);
  }
}

@media (max-width: 480px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Mobile bottom tabs - positioning handled by mobile.css */
.dashboard-mobile-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: inherit;
}

.dashboard-mobile-tabs__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  font-size: 11px;
  color: var(--dashboard-text-muted);
}

.dashboard-mobile-tabs__item--active {
  color: var(--dashboard-primary-dark);
}

.dashboard-mobile-tabs__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.dashboard-mobile-tabs__icon svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 768px) {
  .dashboard-mobile-tabs {
    display: none;
  }
}

/* Greetings grid */
.greetings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.greeting-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-border-strong, rgba(31,33,60,0.18));
  border-radius: 16px;
  overflow: hidden;
}

.greeting-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  background: #f3f3f8;
}

.greeting-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.greeting-status {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  color: #fff;
}

.greeting-info {
  padding: 8px 12px 0;
}

.greeting-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--dashboard-text);
}

.greeting-meta {
  margin: 0 0 6px;
  color: var(--dashboard-text-muted);
  font-size: 12px;
  display: flex;
  gap: 8px;
}

.greeting-stats {
  font-size: 12px;
  color: var(--dashboard-text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat-item--opened {
  color: #10b981;
  font-weight: 500;
}

/* Gift opened badge on thumbnail */
.greeting-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.greeting-badge--opened {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 2px 16px rgba(16, 185, 129, 0.5);
  }
}

/* Subtle highlight for cards with opened gifts */
.greeting-card--opened {
  border-color: rgba(16, 185, 129, 0.3);
}

.greeting-card--opened .greeting-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  border-bottom: 3px solid #10b981;
  pointer-events: none;
}

.greeting-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 12px;
}

.btn-icon {
  padding: 6px 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}

.btn-icon:hover {
  background: rgba(0,0,0,0.06);
}

.btn-icon.btn-danger:hover {
  background: rgba(255, 91, 91, 0.12);
}

/* ============================================
   GREETINGS SECTION - Visual Cards
   ============================================ */

/* Empty States - inside cards-panel (no own background) */
.greetings-empty,
.drafts-empty,
.gifts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  border: 2px dashed var(--dashboard-border-strong, rgba(31, 33, 60, 0.15));
  border-radius: 16px;
}

/* Calendar empty - standalone with own background */
.calendar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  background: var(--dashboard-surface, #ffffff);
  border: 2px dashed var(--dashboard-border-strong, rgba(31, 33, 60, 0.15));
  border-radius: 24px;
}

.greetings-empty[hidden],
.drafts-empty[hidden],
.gifts-empty[hidden],
.calendar-empty[hidden] {
  display: none;
}

.greetings-empty__icon,
.drafts-empty__icon,
.gifts-empty__icon,
.calendar-empty__icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.greetings-empty h3,
.drafts-empty h3,
.gifts-empty h3,
.calendar-empty h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
}

.greetings-empty p,
.drafts-empty p,
.gifts-empty p,
.calendar-empty p {
  margin: 0;
  font-size: 15px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.6));
  max-width: 320px;
  line-height: 1.5;
}

.greetings-empty .btn-create,
.drafts-empty .btn-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.greetings-empty .btn-create:hover,
.drafts-empty .btn-create:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35);
}

/* Empty States Responsive */
@media (max-width: 767px) {
  .greetings-empty,
  .drafts-empty,
  .gifts-empty,
  .calendar-empty {
    padding: 48px 20px;
  }

  .greetings-empty__icon,
  .drafts-empty__icon,
  .gifts-empty__icon,
  .calendar-empty__icon {
    font-size: 48px;
  }

  .greetings-empty h3,
  .drafts-empty h3,
  .gifts-empty h3,
  .calendar-empty h3 {
    font-size: 18px;
  }

  .greetings-empty p,
  .drafts-empty p,
  .gifts-empty p,
  .calendar-empty p {
    font-size: 14px;
  }
}

/* Visual Greeting Card */
.greeting-card--visual {
  display: flex;
  flex-direction: column;
  background: var(--dashboard-surface, #ffffff);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  gap: 0;
  border: none;
}

.greeting-card--visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

/* Greeting Hero (gradient background + title) */
.greeting-hero {
  position: relative;
  min-height: 140px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.greeting-hero__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
  max-width: 100%;
}

/* Status Badge (Published/Archived) */
.greeting-card--visual .greeting-status {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
}

.greeting-status--published {
  background: rgba(16, 185, 129, 0.8);
}

.greeting-status--archived {
  background: rgba(107, 114, 128, 0.8);
}

/* Greeting Footer */
.greeting-footer {
  padding: 16px 20px 20px;
  background: var(--dashboard-surface, #ffffff);
}

.greeting-card--visual .greeting-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.greeting-card--visual .greeting-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.7));
}

.greeting-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.greeting-stat .stat-icon {
  flex-shrink: 0;
}

.greeting-stat--opened {
  color: #10b981;
  font-weight: 500;
}

.greeting-card--visual .greeting-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.5));
}

/* Gift opened badge - positioned in hero top-right */
.greeting-badge--gift {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  animation: badge-pulse 2s ease-in-out infinite;
}

/* Checkmark indicator - bottom right corner of gift badge */
.greeting-badge__check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.5);
}

/* Greeting Actions */
.greeting-card--visual .greeting-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.btn-greeting-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 33, 60, 0.2);
  color: rgba(31, 34, 56, 0.85);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.btn-greeting-view:hover {
  background: #ffffff;
  border-color: rgba(31, 33, 60, 0.8);
}

.btn-greeting-view svg {
  flex-shrink: 0;
}

.btn-greeting-action {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.7));
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.btn-greeting-action:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--dashboard-text, #1f2238);
  transform: scale(1.05);
}

.btn-greeting-action--danger {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.btn-greeting-action--danger:hover {
  background: rgba(239, 68, 68, 0.15);
  transform: scale(1.05);
}

.btn-greeting-action.is-copied {
  position: relative;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.copy-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #10b981;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
  animation: bubbleFadeIn 0.2s ease;
}

.copy-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #10b981;
}

@keyframes bubbleFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Visual card opened state */
.greeting-card--visual.greeting-card--opened {
  border: 2px solid rgba(16, 185, 129, 0.3);
}

.greeting-card--visual.greeting-card--opened .greeting-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #10b981;
}

/* Greetings Responsive */
@media (max-width: 767px) {
  .greetings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .greeting-card--visual {
    border-radius: 16px;
  }

  .greeting-hero {
    min-height: 120px;
    padding: 16px;
  }

  .greeting-hero__title {
    font-size: 18px;
  }

  .greeting-footer {
    padding: 14px 16px 16px;
  }

  .greeting-card--visual .greeting-actions {
    gap: 8px;
  }

  .btn-greeting-view {
    padding: 11px 16px;
    font-size: 14px;
  }

  .btn-greeting-action {
    width: 40px;
    height: 40px;
  }

  .greetings-empty {
    padding: 48px 20px;
  }

  .greetings-empty__icon {
    font-size: 48px;
  }

  .greetings-empty h3 {
    font-size: 18px;
  }

  .greetings-empty p {
    font-size: 14px;
  }
}

/* ========================================
   OVERVIEW SECTION
   ======================================== */

.overview__greeting {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 24px;
}

/* Bento grid: stats + CTA */
.overview__bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--dashboard-gap);
  margin-bottom: var(--dashboard-section-gap);
}

/* Tall stat cards - for Total Greetings and Credits */
.stat-card--tall {
  min-height: 160px;
  justify-content: flex-start;
  padding-top: 24px;
  padding-bottom: 24px;
}

.stat-card--tall .stat-card__value {
  margin-top: auto;
}

/* Activity card - spans 2 rows */
.stat-card--activity {
  grid-row: 1 / 3;
  grid-column: 3;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.activity-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--dashboard-text);
  margin: 0 0 16px 0;
}

.activity-card__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hidden attribute must override display */
.activity-card__list[hidden] {
  display: none !important;
}

.activity-card__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.activity-card__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(168, 85, 247, 0.2);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}

/* Activity item */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 0;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  transition: background 0.15s ease;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.activity-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-item__icon svg {
  width: 16px;
  height: 16px;
}

/* Activity icon colors */
.activity-item__icon--opened {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.activity-item__icon--reply {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.activity-item__icon--created {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.activity-item__icon--gift_revealed {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.activity-item__icon--expiring {
  background: rgba(250, 204, 21, 0.2);
  color: #facc15;
}

.activity-item__icon--expired {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.activity-item__content {
  flex: 1;
  min-width: 0;
}

.activity-item__text {
  font-size: 14px;
  color: var(--dashboard-text);
  line-height: 1.4;
  margin: 0;
}

.activity-item__text strong {
  font-weight: 600;
}

.activity-item__time {
  font-size: 12px;
  color: var(--dashboard-text-muted);
  margin-top: 2px;
}

/* Empty state - positioned over the list area */
.activity-card__empty {
  position: absolute;
  top: 60px; /* Below title */
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 12px;
}

/* Hidden attribute must override display */
.activity-card__empty[hidden] {
  display: none !important;
}

.activity-card__empty-icon {
  color: var(--dashboard-text-muted);
  opacity: 0.5;
}

.activity-card__empty-text {
  font-size: 14px;
  color: var(--dashboard-text-muted);
  margin: 0;
}

.stat-card {
  position: relative;
  background: var(--dashboard-surface);
  border-radius: var(--dashboard-card-radius);
  padding: var(--dashboard-card-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--dashboard-border-strong);
  box-shadow: var(--dashboard-card-shadow);
  gap: 4px;
}

/* Icon circle - absolute top-right */
.stat-card__icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card__icon svg {
  width: 24px;
  height: 24px;
}

.stat-card__icon--purple {
  background: rgba(192, 132, 252, 0.25);
  color: #a855f7;
}

.stat-card__icon--purple svg {
  transform: translate(-1px, 1px);
}

.stat-card__icon--blue {
  background: rgba(147, 197, 253, 0.35);
  color: #3b82f6;
}

.stat-card__icon--green {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.stat-card__icon--gradient {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  color: #a855f7;
}

.stat-card__icon--orange {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.stat-card__icon--yellow {
  background: rgba(250, 204, 21, 0.2);
  color: #eab308;
}

.stat-card__icon--green {
  background: rgba(34, 197, 94, 0.2);
  color: #16a34a;
}

/* Credits card variant */
.stat-card--credits {
  position: relative;
}

.stat-card__buy-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 33, 60, 0.2);
  color: rgba(31, 34, 56, 0.85);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.stat-card__buy-btn:hover {
  background: #ffffff;
  border-color: rgba(31, 33, 60, 0.8);
}

/* Progress bar */
.stat-card__progress {
  width: 100%;
  height: 4px;
  background: rgba(168, 85, 247, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}

.stat-card__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #c084fc);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Page loader overlay */
.dashboard-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--dashboard-bg-gradient-start) 0%, var(--dashboard-bg-gradient-end) 100%);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dashboard-loader[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dashboard-loader__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* Greetings/Drafts section loader */
.greetings-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.greetings-loader[hidden] {
  display: none;
}

.greetings-loader__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(168, 85, 247, 0.2);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}

/* ========== Skeleton Loading States ========== */
/* Used for progressive loading - shows animated placeholder while data loads */

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

.skeleton-loading .stat-card__value {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  color: transparent;
  border-radius: 8px;
  min-width: 60px;
  min-height: 1.2em;
}

.skeleton-loading .stat-card__label {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  color: transparent;
  border-radius: 4px;
}

/* Activity card skeleton */
.skeleton-loading .activity-card__list {
  min-height: 120px;
}

/* Username skeleton */
.skeleton-loading .overview__greeting span {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  color: transparent;
  border-radius: 6px;
  display: inline-block;
  min-width: 80px;
}

.stat-card__label {
  font-size: 16px;
  font-weight: 400;
  color: var(--dashboard-text);
  opacity: 0.7;
}

.stat-card__value {
  font-size: 56px;
  font-weight: 700;
  color: var(--dashboard-text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

/* Stats card variant - uses default stat-card styles */

.stat-card__plan-info {
  font-size: 13px;
  color: var(--dashboard-text-muted);
  line-height: 1.4;
  margin-bottom: 8px;
  order: 3;
}

.btn-upgrade {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  order: 4;
}

.btn-upgrade:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

.stat-card__premium-info {
  font-size: 12px;
  color: #a855f7;
  line-height: 1.4;
  margin-top: 8px;
}

/* CTA button - spans 2 columns in bento grid */
.btn-create-greeting {
  grid-column: 1 / 3;
  grid-row: 2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f472b6, #a855f7, #7c3aed);
  color: #fff;
  border-radius: 20px;
  padding: 40px 32px;
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.3);
  overflow: hidden;
}

.btn-create-greeting:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.4);
}


/* Events section */
.overview__events {
  margin-top: 32px;
}

.overview__events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.overview__events-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.overview__events-link {
  font-size: 14px;
  font-weight: 500;
  color: #a855f7;
  text-decoration: none;
  transition: color 0.15s ease;
}

.overview__events-link:hover {
  color: #c084fc;
  text-decoration: underline;
}

.overview__events-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Events list - dark theme */
.events-list {
  /* Override tokens for dark background */
  --dashboard-text-primary: #ffffff;
  --dashboard-text-secondary: rgba(255, 255, 255, 0.7);
  --dashboard-hover: rgba(255, 255, 255, 0.08);

  display: flex;
  flex-direction: column;
  background: #26223b;
  border-radius: 20px;
  overflow: hidden;
}

/* Fixed height for 3 event rows on desktop (89px per row × 3 - 1px last border) */
@media (min-width: 1024px) {
  .events-list,
  .events-add-card {
    height: 266px;
  }

  .events-add-card {
    justify-content: center;
  }
}

/* Events loading state */
.events-list__loading {
  display: flex;
  justify-content: center;
  padding: 48px;
}

.events-list__loading[hidden] {
  display: none;
}

.events-list__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Events empty state */
.events-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
}

.events-list__empty[hidden] {
  display: none;
}

.events-list__empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.events-list__empty-text {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}

.events-list__empty-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  max-width: 320px;
}

/* Event row */
.event-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease;
}

.event-row:last-child {
  border-bottom: none;
}

.event-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Event icon in colored circle */
.event-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  flex-shrink: 0;
  background: var(--event-icon-bg, rgba(168, 85, 247, 0.2));
}

/* Icon color variants - vibrant for dark background */
.event-row__icon--birthday {
  background: #c026d3;
}

.event-row__icon--anniversary {
  background: #38bdf8;
}

.event-row__icon--wedding {
  background: #a855f7;
}

.event-row__icon--holiday {
  background: #f43f5e;
}

.event-row__icon--custom {
  background: rgba(107, 114, 128, 0.4);
}

.event-row__info {
  flex: 1;
  min-width: 0;
}

.event-row__name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-row__date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Countdown badge */
.event-row__countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 90px;
  flex-shrink: 0;
  margin-right: 24px;
}

.event-row__countdown-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.event-row__countdown-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Countdown variants */
.event-row__countdown--today .event-row__countdown-label {
  color: #ef4444;
}

.event-row__countdown--soon .event-row__countdown-label {
  color: #22c55e;
}

.event-row__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Start Greeting button in event row */
.event-row__actions .btn-outline {
  padding: 10px 20px;
  background: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1e1b2e;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.event-row__actions .btn-outline:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}

/* Add Event Card */
.events-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: #f8f9fb;
  border-radius: 20px;
  position: relative;
}

.events-add-card__icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 85, 247, 0.1);
  border-radius: 10px;
  color: #a855f7;
}

.events-add-card__text {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  line-height: 1.4;
  margin: 24px 0 24px;
}

.events-add-card__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: #22c55e;
  border: none;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.events-add-card__btn:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

.events-add-card__btn span {
  font-size: 18px;
  font-weight: 400;
}

/* Events responsive */
@media (max-width: 900px) {
  .overview__events-content {
    grid-template-columns: 1fr;
  }

  .events-add-card {
    flex-direction: row;
    padding: 20px 24px;
    gap: 16px;
    text-align: left;
  }

  .events-add-card__icon {
    position: static;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .events-add-card__text {
    flex: 1;
    margin: 0;
  }

  .events-add-card__text br {
    display: none;
  }
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--dashboard-border-strong);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dashboard-text);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.btn-outline:hover {
  background: rgba(0, 0, 0, 0.04);
}

.btn-outline--primary {
  background: var(--dashboard-text);
  color: #fff;
  border-color: var(--dashboard-text);
}

.btn-outline--primary:hover {
  background: #2d3048;
}

/* Reactions section */
.overview__reactions {
  margin-top: 32px;
}

.overview__reactions-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.overview__reactions-title::before {
  content: "🤩";
  font-size: 28px;
}

.reactions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Reactions Pagination */
.reactions-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.reactions-pager[hidden] {
  display: none;
}

.reactions-pager__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Arrow icons using CSS */
.reactions-pager__btn--prev::before,
.reactions-pager__btn--next::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transition: transform 0.2s;
}

.reactions-pager__btn--prev::before {
  transform: rotate(-135deg);
  margin-left: 2px;
}

.reactions-pager__btn--next::before {
  transform: rotate(45deg);
  margin-right: 2px;
}

.reactions-pager__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.reactions-pager__btn:hover:not(:disabled).reactions-pager__btn--prev::before {
  transform: rotate(-135deg) translateX(-1px);
}

.reactions-pager__btn:hover:not(:disabled).reactions-pager__btn--next::before {
  transform: rotate(45deg) translateX(1px);
}

.reactions-pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.reactions-pager__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  justify-content: center;
}

.reactions-pager__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.reactions-pager__dot--active {
  background: #fff;
  transform: scale(1.35);
}

.reactions-pager__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.reaction-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-height: 180px;
}

.reaction-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.reaction-card--pink {
  background: linear-gradient(160deg, #fce7f3, #f5d0fe, #ede9fe);
}

.reaction-card--blue {
  background: linear-gradient(160deg, #ede9fe, #e0e7ff, #dbeafe);
}

.reaction-card--gold {
  background: linear-gradient(160deg, #fef3c7, #fde68a, #fef08a);
}

.reaction-card__author {
  font-size: 22px;
  font-weight: 700;
  color: #1f2238;
  margin-bottom: 12px;
}

.reaction-card__text {
  font-size: 15px;
  font-weight: 500;
  color: #1f2238;
  line-height: 1.4;
  margin: 0;
}

/* Delete button on reaction card */
.reaction-card__delete {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: #1f2238;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
  z-index: 5;
}

.reaction-card:hover .reaction-card__delete {
  opacity: 1;
}

.reaction-card__delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #dc2626;
  transform: scale(1.1);
}

.reaction-card__delete:active {
  transform: scale(0.95);
}

/* Trash icon via SVG */
.reaction-card__delete::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0' /%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ========================================
   REACTION MODAL
   ======================================== */

@keyframes gradientShift-pink {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientShift-blue {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientShift-gold {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.reaction-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.reaction-modal[open] {
  opacity: 1;
  visibility: visible;
}

.reaction-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.reaction-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.reaction-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 56px;
  border-radius: 40px;
  min-width: 520px;
  max-width: 640px;
  min-height: 400px;
  background-size: 200% 200%;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.reaction-modal[open] .reaction-modal__content {
  transform: scale(1);
}

/* Color variants for modal */
.reaction-modal__content[data-color="pink"] {
  background: linear-gradient(135deg, #f9a8d4, #e879f9, #d8b4fe, #f9a8d4);
  background-size: 300% 300%;
  animation-name: gradientShift-pink;
}

.reaction-modal__content[data-color="blue"] {
  background: linear-gradient(135deg, #c4b5fd, #a5b4fc, #93c5fd, #c4b5fd);
  background-size: 300% 300%;
  animation-name: gradientShift-blue;
}

.reaction-modal__content[data-color="gold"] {
  background: linear-gradient(135deg, #fcd34d, #fbbf24, #f59e0b, #fcd34d);
  background-size: 300% 300%;
  animation-name: gradientShift-gold;
}

.reaction-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 300;
  color: #1f2238;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.reaction-modal__close:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.reaction-modal__author {
  font-size: 36px;
  font-weight: 700;
  color: #1f2238;
  margin-bottom: 20px;
}

.reaction-modal__text {
  font-size: 22px;
  font-weight: 500;
  color: #1f2238;
  line-height: 1.5;
  margin: 0 0 32px;
}

.reaction-modal__meta {
  font-size: 16px;
  font-weight: 500;
  color: rgba(31, 34, 56, 0.6);
}

@media (max-width: 767px) {
  .reaction-modal__content {
    min-width: auto;
    width: calc(100% - 32px);
    min-height: 320px;
    padding: 48px 32px;
  }

  .reaction-modal__author {
    font-size: 28px;
  }

  .reaction-modal__text {
    font-size: 18px;
  }

  .reaction-modal__meta {
    font-size: 14px;
  }
}

/* ============================================================
   Event Modal
   Light theme matching builder modals (modals.css)
   ============================================================ */

.event-modal {
  border: none;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(248, 247, 255, 0.98), rgba(233, 236, 252, 0.95));
  padding: 0;
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: 0 28px 56px rgba(12, 10, 35, 0.5);
}

.event-modal::backdrop {
  background: rgba(14, 11, 30, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.event-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.event-modal__content {
  overflow: hidden;
  border-radius: inherit;
}

.event-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(90, 74, 242, 0.12);
}

.event-modal__title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2238;
  margin: 0;
}

.event-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(31, 33, 60, 0.1);
  border-radius: 999px;
  cursor: pointer;
  color: #1f2238;
  transition: background 0.2s ease, transform 0.2s ease;
}

.event-modal__close:hover {
  background: rgba(31, 33, 60, 0.18);
  transform: scale(1.05);
}

.event-modal__close svg {
  width: 16px;
  height: 16px;
}

.event-modal__body {
  padding: 20px 24px;
}

.event-modal__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.event-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-modal__label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(31, 33, 60, 0.65);
}

.event-modal__label--required::after {
  content: ' *';
  color: #ef4444;
}

.event-modal__input,
.event-modal__select,
.event-modal__textarea {
  padding: 12px 16px;
  border: 1px solid rgba(31, 33, 60, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: #1f2238;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.event-modal__input:hover,
.event-modal__select:hover,
.event-modal__textarea:hover {
  border-color: rgba(31, 33, 60, 0.25);
  background-color: rgba(255, 255, 255, 0.95);
}

.event-modal__input:focus,
.event-modal__select:focus,
.event-modal__textarea:focus {
  outline: none;
  border-color: #5a4af2;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(90, 74, 242, 0.12);
}

.event-modal__input::placeholder,
.event-modal__textarea::placeholder {
  color: rgba(31, 33, 60, 0.4);
}

.event-modal__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f2238' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

.event-modal__textarea {
  resize: vertical;
  min-height: 72px;
}

.event-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.event-modal__row--align-end {
  align-items: end;
}

.event-modal__checkbox-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(31, 33, 60, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.event-modal__checkbox-field:hover {
  border-color: rgba(31, 33, 60, 0.25);
  background: rgba(255, 255, 255, 0.95);
}

.event-modal__checkbox-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  cursor: pointer;
}

.event-modal__checkbox {
  width: 18px;
  height: 18px;
  accent-color: #5a4af2;
  cursor: pointer;
}

.event-modal__checkbox-label {
  font-size: 14px;
  color: #1f2238;
  cursor: pointer;
}

.event-modal__error {
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  color: #dc2626;
  font-size: 14px;
  margin: 0;
}

.event-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(90, 74, 242, 0.12);
}

.event-modal__btn {
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-align: center;
}

.event-modal__btn--cancel {
  background: rgba(31, 33, 60, 0.08);
  border: 1px solid rgba(31, 33, 60, 0.12);
  color: #2f3060;
  order: 2;
}

.event-modal__btn--cancel:hover {
  background: rgba(31, 33, 60, 0.12);
  transform: translateY(-1px);
}

.event-modal__btn--save {
  background: linear-gradient(135deg, #5a4af2, #7c3aed);
  border: none;
  color: white;
  box-shadow: 0 4px 14px rgba(90, 74, 242, 0.35);
  order: 1;
}

.event-modal__btn--save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(90, 74, 242, 0.45);
}

.event-modal__btn--save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Event Modal Responsive */
@media (max-width: 480px) {
  .event-modal {
    width: calc(100% - 16px);
    max-width: none;
    margin: 8px;
    border-radius: 20px;
  }

  .event-modal__header,
  .event-modal__body {
    padding: 16px 20px;
  }

  .event-modal__footer {
    padding: 16px 20px 20px;
  }

  .event-modal__row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .event-modal__field--notes {
    display: none;
  }

  .event-modal__btn {
    padding: 16px 24px;
  }
}


/* ============================================================
   Calendar Section
   ============================================================ */

.calendar-section {
  display: flex;
  flex-direction: column;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.calendar-header .dashboard-section__title {
  margin: 0 0 8px;
}

.calendar-header .dashboard-section__subtitle {
  margin: 0;
}

/* Calendar Top Row - 3 cards: stats (auto), next event (1fr), holiday (1fr) */
.calendar-top-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: var(--dashboard-gap);
  margin-bottom: var(--dashboard-gap);
}

/* Calendar Bottom Row - 2 panels: calendar (1fr), events (1fr) */
.calendar-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dashboard-gap);
}

/* Quick Stats Card - follows stat-card--tall pattern */
.calendar-stats-card {
  background: var(--dashboard-surface);
  border-radius: var(--dashboard-card-radius);
  padding: var(--dashboard-card-padding);
  min-height: 160px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--dashboard-border-strong);
  box-shadow: var(--dashboard-card-shadow);
}

.calendar-stats-card__label {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--dashboard-text);
  opacity: 0.7;
}

.calendar-stats-card__value {
  margin: 0;
  margin-top: auto;
  font-size: 56px;
  font-weight: 700;
  color: var(--dashboard-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Next Event Card - follows stat-card pattern */
.calendar-next-card {
  position: relative;
  background: var(--dashboard-surface);
  border-radius: var(--dashboard-card-radius);
  padding: var(--dashboard-card-padding);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dashboard-border-strong);
  box-shadow: var(--dashboard-card-shadow);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calendar-next-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.calendar-next-card[hidden] {
  display: none !important;
}

.calendar-next-card__label {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--dashboard-text);
  opacity: 0.7;
}

.calendar-next-card__name {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--dashboard-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 49ch;
}

.calendar-next-card__date {
  margin: 0;
  margin-top: auto;
  font-size: 14px;
  color: var(--dashboard-text);
  opacity: 0.6;
}

.calendar-next-card__image {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 120px;
  height: 120px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

/* Next Event Card - Filled State */
.calendar-next-card__filled {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.calendar-next-card:hover .calendar-next-card__image {
  transform: scale(1.08);
}

.calendar-next-card__filled[hidden] {
  display: none;
}

/* Next Event Card - Empty State */
.calendar-next-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 120px;
  gap: 8px;
  padding: 16px;
}

.calendar-next-card__empty[hidden] {
  display: none;
}

.calendar-next-card__empty-icon {
  color: var(--dashboard-text-muted);
  opacity: 0.4;
  margin-bottom: 4px;
}

.calendar-next-card__empty-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--dashboard-text);
}

.calendar-next-card__empty-text {
  margin: 0;
  font-size: 13px;
  color: var(--dashboard-text-muted);
  max-width: 180px;
}

/* Holiday Banner Card - styles moved to /modules/dashboard/holidays/holiday-banner.css */

.calendar-header__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--dashboard-text-primary);
}

.calendar-header__actions {
  display: flex;
  gap: 12px;
}

/* Add Event Button - Purple Pill */
.btn-add-event-calendar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-add-event-calendar:hover {
  background: linear-gradient(135deg, #c084fc, #a855f7);
}

.btn-add-event-calendar svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* Calendar Widget */
.calendar-widget {
  background: var(--dashboard-surface);
  border-radius: var(--dashboard-card-radius);
  padding: var(--dashboard-card-padding);
  box-shadow: var(--dashboard-card-shadow);
  border: 1px solid var(--dashboard-border-strong);
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-nav__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--dashboard-text-primary);
}

.calendar-nav__buttons {
  display: flex;
  gap: 8px;
}

.calendar-nav__btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--dashboard-border);
  background: white;
  color: var(--dashboard-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.calendar-nav__btn:hover {
  background: var(--dashboard-hover);
  color: var(--dashboard-text-primary);
}

.calendar-nav__btn--today {
  width: auto;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
}

/* Today Button - minimal pill style */
.calendar-today-btn {
  padding: 8px 14px;
  border: 1px solid var(--dashboard-border);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--dashboard-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.calendar-today-btn:hover {
  color: var(--dashboard-text-primary);
  border-color: var(--dashboard-border-strong, rgba(0, 0, 0, 0.2));
}

/* Calendar Grid */
.calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.calendar-weekday {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--dashboard-text-muted);
  text-transform: uppercase;
  padding: 8px 0;
}

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

/* Calendar Day Cell */
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.calendar-day:hover:not(.calendar-day--empty):not(.calendar-day--today):not(.calendar-day--has-events) {
  background: var(--dashboard-hover);
}

.calendar-day--empty {
  cursor: default;
}

.calendar-day__number {
  font-size: 14px;
  font-weight: 500;
  color: var(--dashboard-text-primary);
}

.calendar-day--empty .calendar-day__number {
  visibility: hidden;
}

/* Has Events - purple fill, pink on hover */
.calendar-day--has-events {
  background: var(--dashboard-accent);
}

.calendar-day--has-events .calendar-day__number {
  color: white;
}

.calendar-day--has-events:hover {
  background: #ec4899;
  transform: scale(1.08);
}

/* Today - graphite fill */
.calendar-day--today {
  background: #374151;
}

.calendar-day--today .calendar-day__number {
  color: white;
}

.calendar-day--today:hover {
  background: #4b5563;
}

/* Today with events - graphite takes priority, pink on hover */
.calendar-day--today.calendar-day--has-events:hover {
  background: #6b7280;
}

/* Selected */
.calendar-day--selected {
  outline: 2px solid var(--dashboard-accent);
  outline-offset: -2px;
}

.calendar-day--selected .calendar-day__number {
  font-weight: 600;
}

/* Hide the dot - using fill instead */
.calendar-day__dot {
  display: none;
}

/* Events Panel */
.calendar-events {
  background: var(--dashboard-surface);
  border-radius: var(--dashboard-card-radius);
  padding: var(--dashboard-card-padding);
  box-shadow: var(--dashboard-card-shadow);
  border: 1px solid var(--dashboard-border-strong);
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.calendar-events__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-events__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dashboard-text-primary);
}

.calendar-events__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

/* Hidden attribute must override display: flex */
.calendar-events__list[hidden] {
  display: none !important;
}

/* Calendar Event Row */
.calendar-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--dashboard-hover);
  border-radius: 10px;
  transition: background 0.15s ease;
}

.calendar-event-row:hover {
  background: #f0f0f5;
}

.calendar-event-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #fce7f3;
  flex-shrink: 0;
}

.calendar-event-row__icon--birthday { background: #fce7f3; }
.calendar-event-row__icon--anniversary { background: #dbeafe; }
.calendar-event-row__icon--wedding { background: #fef3c7; }
.calendar-event-row__icon--holiday { background: #d1fae5; }
.calendar-event-row__icon--custom { background: #e0e7ff; }

.calendar-event-row__info {
  flex: 1;
  min-width: 0;
}

.calendar-event-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--dashboard-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-event-row__date {
  font-size: 12px;
  color: var(--dashboard-text-muted);
  margin-top: 2px;
}

.calendar-event-row__actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.calendar-event-row:hover .calendar-event-row__actions {
  opacity: 1;
}

.calendar-event-row__btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: white;
  color: var(--dashboard-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.calendar-event-row__btn:hover {
  color: var(--dashboard-text-primary);
}

.calendar-event-row__btn--delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Create Greeting Button - always visible */
.calendar-event-row__btn-create {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.calendar-event-row__btn-create:hover {
  background: linear-gradient(135deg, #c084fc, #a855f7);
  transform: translateY(-1px);
}

/* Calendar Empty & Loading States */
.calendar-events__loading,
.calendar-events__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--dashboard-text-muted);
  text-align: center;
  padding: 40px 20px;
}

.calendar-events__empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

.calendar-events__empty-text {
  font-size: 14px;
  margin: 0;
}

/* Hidden attribute must override display: flex */
.calendar-events__empty[hidden] {
  display: none !important;
}

.calendar-events__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--dashboard-border);
  border-top-color: var(--dashboard-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Calendar Responsive */
@media (max-width: 1023px) {
  .calendar-top-row {
    grid-template-columns: 1fr 1fr;
  }

  .holiday-banner {
    grid-column: 1 / 3;
  }
}

@media (max-width: 767px) {
  .calendar-top-row,
  .calendar-bottom-row {
    grid-template-columns: 1fr;
  }

  .holiday-banner {
    grid-column: auto;
  }

  .calendar-stats-card {
    min-height: 120px;
  }

  .calendar-stats-card__value {
    font-size: 40px;
  }

  .calendar-events {
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .calendar-widget,
  .calendar-events,
  .calendar-stats-card,
  .calendar-next-card,
  .holiday-banner {
    padding: 16px 20px;
  }

  .calendar-nav__title {
    font-size: 16px;
  }

  .calendar-day__number {
    font-size: 13px;
  }

  .calendar-header__title {
    font-size: 20px;
  }
}


/* Responsive */
@media (max-width: 1023px) {
  .overview__bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .stat-card--activity {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .btn-create-greeting {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .reactions-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .overview__greeting {
    font-size: 28px;
  }

  .overview__bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .stat-card--activity {
    grid-column: 1;
    grid-row: auto;
  }

  .stat-card--tall {
    min-height: 140px;
    padding-bottom: 60px; /* Space for absolute positioned button */
  }

  .btn-create-greeting {
    grid-column: 1;
    grid-row: auto;
  }

  .stat-card {
    padding: 16px 20px;
  }

  .stat-card__icon {
    width: 40px;
    height: 40px;
    top: 12px;
    right: 12px;
  }

  .stat-card__icon svg {
    width: 20px;
    height: 20px;
  }

  .stat-card__label {
    font-size: 14px;
  }

  .stat-card__value {
    font-size: 40px;
    margin-top: 4px;
  }

  .stat-card__plan-name {
    font-size: 32px;
  }

  .btn-create-greeting {
    padding: 32px 24px;
    font-size: 22px;
  }

  /* Activity card mobile adjustments */
  .activity-card__list {
    gap: 8px;
  }

  .activity-item {
    padding: 10px;
  }

  .activity-item__icon {
    width: 28px;
    height: 28px;
  }

  .activity-item__icon svg {
    width: 14px;
    height: 14px;
  }

  .activity-item__text {
    font-size: 13px;
  }

  .event-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .event-row__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .reactions-grid {
    grid-template-columns: 1fr;
  }

  .reaction-card {
    min-height: 140px;
    padding: 24px 20px;
  }
}

/* Additional reaction card colors */
.reaction-card--purple {
  background: linear-gradient(160deg, #e9d5ff, #d8b4fe, #c4b5fd);
}

.reaction-card--mint {
  background: linear-gradient(160deg, #ccfbf1, #a7f3d0, #d9f99d);
}

/* Modal color variants - purple and mint */
@keyframes gradientShift-purple {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientShift-mint {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.reaction-modal__content[data-color="purple"] {
  background: linear-gradient(135deg, #d8b4fe, #c084fc, #a855f7, #d8b4fe);
  background-size: 300% 300%;
  animation-name: gradientShift-purple;
}

.reaction-modal__content[data-color="mint"] {
  background: linear-gradient(135deg, #6ee7b7, #34d399, #10b981, #6ee7b7);
  background-size: 300% 300%;
  animation-name: gradientShift-mint;
}

/* Unread badge on reaction card */
.reaction-card {
  position: relative;
}

.reaction-card__unread-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Unread count badge in title */
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: #ef4444;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  margin-left: 8px;
}

/* Empty state for reactions */
.reactions-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--dashboard-surface);
  border-radius: 24px;
  border: 1px dashed var(--dashboard-border-strong);
  text-align: center;
}

.reactions-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.reactions-empty__text {
  font-size: 15px;
  color: var(--dashboard-text-muted);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* ============================================================
   Reaction Modal - Emoji Decorations
   ============================================================ */
.reaction-modal__emoji {
  position: absolute;
  font-size: 72px;
  line-height: 1;
  z-index: 1;
  opacity: 0.9;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
  pointer-events: none;
  transition: transform 0.3s ease;
}

/* Position: Top-Left */
.reaction-modal__emoji--tl {
  top: -24px;
  left: -20px;
  transform: rotate(-15deg);
}

/* Position: Middle-Left */
.reaction-modal__emoji--ml {
  top: 50%;
  left: -36px;
  transform: translateY(-50%) rotate(-10deg);
}

/* Position: Right */
.reaction-modal__emoji--r {
  top: 35%;
  right: -32px;
  transform: rotate(12deg);
}

/* Position: Bottom-Right */
.reaction-modal__emoji--br {
  bottom: -20px;
  right: -16px;
  transform: rotate(18deg);
}

/* Animation on modal open */
.reaction-modal[open] .reaction-modal__emoji--tl {
  animation: emojiPop 0.5s ease 0.1s both;
}
.reaction-modal[open] .reaction-modal__emoji--ml {
  animation: emojiPop 0.5s ease 0.2s both;
}
.reaction-modal[open] .reaction-modal__emoji--r {
  animation: emojiPop 0.5s ease 0.3s both;
}
.reaction-modal[open] .reaction-modal__emoji--br {
  animation: emojiPop 0.5s ease 0.4s both;
}

@keyframes emojiPop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.9;
  }
}

/* Restore individual rotations after animation */
.reaction-modal__emoji--tl { --emoji-rotation: -15deg; }
.reaction-modal__emoji--ml { --emoji-rotation: -10deg; }
.reaction-modal__emoji--r { --emoji-rotation: 12deg; }
.reaction-modal__emoji--br { --emoji-rotation: 18deg; }

/* Mobile adjustments for emoji decorations */
@media (max-width: 767px) {
  .reaction-modal__emoji {
    font-size: 48px;
  }

  .reaction-modal__emoji--tl {
    top: -16px;
    left: -12px;
  }

  .reaction-modal__emoji--ml {
    left: -24px;
  }

  .reaction-modal__emoji--r {
    right: -20px;
  }

  .reaction-modal__emoji--br {
    bottom: -12px;
    right: -8px;
  }
}

/* ========================================
   SUBSCRIPTION & PRICING SECTION
   ======================================== */

.subscription-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.subscription-header {
  text-align: center;
  margin-bottom: 24px;
}

.subscription-header .dashboard-section__title {
  font-size: 36px;
  margin-bottom: 8px;
}

.subscription-header .dashboard-section__subtitle {
  margin-bottom: 0;
}

/* Billing Toggle */
.billing-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.billing-toggle {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.billing-toggle::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border-radius: 8px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.billing-toggle[data-period="yearly"]::before {
  transform: translateX(100%);
}

.billing-toggle__tab {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.billing-toggle__tab:hover {
  color: rgba(255, 255, 255, 0.9);
}

.billing-toggle__tab.is-active {
  color: #ffffff;
}


/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* Pricing Card Base */
.pricing-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Pro Card */
.pricing-card--pro {
  border: 2px solid #a855f7;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.1);
}

.pricing-card--pro:hover {
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.35), 0 4px 20px rgba(168, 85, 247, 0.2);
}

/* Ultra Card */
.pricing-card--ultra {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #f59e0b, #ea580c) border-box;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
}

.pricing-card--ultra:hover {
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.35), 0 4px 20px rgba(245, 158, 11, 0.2);
}

/* Popular Badge - positioned top-right */
.pricing-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-card__badge--popular {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

/* Billing Note (for yearly pricing) */
.pricing-card__billing-note {
  font-size: 13px;
  color: var(--dashboard-text-muted);
  margin-top: 4px;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Savings Badge */
.pricing-card__savings {
  display: none;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.pricing-card__savings:not(:empty) {
  display: inline-block;
}

.pricing-card__savings--ultra {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
}

/* Header */
.pricing-card__header {
  text-align: left;
  margin-bottom: 16px;
}

.pricing-card__name {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--dashboard-text);
  margin-bottom: 12px;
}

.pricing-card--pro .pricing-card__name {
  color: #7c3aed;
  font-weight: 800;
}

.pricing-card--ultra .pricing-card__name {
  color: #ea580c;
  font-weight: 800;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-card__amount {
  font-size: 40px;
  font-weight: 500;
  color: var(--dashboard-text);
  line-height: 1;
}

.pricing-card__amount sup {
  font-size: 0.5em;
  font-weight: 600;
  vertical-align: super;
  position: relative;
  top: -0.1em;
}

.pricing-card__period {
  font-size: 15px;
  color: var(--dashboard-text-muted);
}

/* Tagline */
.pricing-card__tagline {
  font-size: 14px;
  color: var(--dashboard-text-muted);
  margin: 12px 0 0 0;
  line-height: 1.4;
}


/* CTA Section */
.pricing-card__cta {
  margin-bottom: 20px;
}

/* Body / Features */
.pricing-card__body {
  flex: 1;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--dashboard-text);
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-card__features li:last-child {
  border-bottom: none;
}

.feature-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
}

.feature-icon--pro {
  color: #a855f7;
}

.feature-icon--ultra {
  color: #f59e0b;
}

.feature-disabled {
  opacity: 0.5;
}

.feature-disabled .feature-icon {
  color: var(--dashboard-text-muted);
}

/* CTA Button Base */
.pricing-card__btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Current Plan Button - Black border with checkmark */
.pricing-card__btn--current {
  background: transparent;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  cursor: default;
  pointer-events: none;
  font-weight: 600;
}

/* Current Plan Button for Ultra - Orange style */
.pricing-card--ultra .pricing-card__btn--current {
  color: #ea580c;
  border-color: #ea580c;
}

/* Upgrade to Pro Button - Purple gradient */
.pricing-card__btn--upgrade-pro {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3);
}

.pricing-card__btn--upgrade-pro:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.4);
}

/* Upgrade to Ultra Button - Orange gradient */
.pricing-card__btn--upgrade-ultra {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #fff;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

.pricing-card__btn--upgrade-ultra:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.4);
}

/* Downgrade Button - Muted, less prominent */
.pricing-card__btn--downgrade {
  background: transparent;
  color: var(--dashboard-text-muted);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
  font-weight: 500;
}

.pricing-card__btn--downgrade:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--dashboard-text);
}

/* Promo Code Link */
.subscription-promo-link {
  text-align: center;
  margin-top: 8px;
}

.promo-link-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.2s ease;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo-link-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Promo Modal */
.promo-modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  max-width: 400px;
  width: calc(100% - 32px);
  margin: auto;
}

.promo-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.promo-modal__content {
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-border-strong);
  border-radius: 20px;
  padding: 32px;
  position: relative;
}

.promo-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--dashboard-text-muted);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.promo-modal__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--dashboard-text);
}

.promo-modal__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--dashboard-text);
  margin: 0 0 20px;
  text-align: center;
}

.promo-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.promo-modal__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--dashboard-border-strong);
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.05);
  color: var(--dashboard-text);
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.promo-modal__input:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.promo-modal__input::placeholder {
  letter-spacing: normal;
  text-transform: none;
}

.promo-modal__btn {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.promo-modal__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3);
}

.promo-modal__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Delete Confirmation Modal */
.delete-modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  max-width: 380px;
  width: calc(100% - 32px);
}

.delete-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.delete-modal__content {
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-border-strong);
  border-radius: 20px;
  padding: 32px 28px 28px;
  text-align: center;
}

.delete-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.delete-modal__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--dashboard-text);
  margin: 0 0 8px;
}

.delete-modal__text {
  font-size: 14px;
  color: var(--dashboard-text-secondary);
  margin: 0 0 24px;
  line-height: 1.5;
}

.delete-modal__actions {
  display: flex;
  gap: 12px;
}

.delete-modal__btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-modal__btn--cancel {
  background: transparent;
  border: 1px solid var(--dashboard-border-strong);
  color: var(--dashboard-text);
}

.delete-modal__btn--cancel:hover {
  background: var(--dashboard-hover);
  border-color: var(--dashboard-text-secondary);
}

.delete-modal__btn--confirm {
  background: #ef4444;
  border: none;
  color: #ffffff;
}

.delete-modal__btn--confirm:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.delete-modal__btn--confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Status Message */
.status-message {
  display: none;
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.status-message--success {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-message--error {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Responsive: Tablet */
@media (max-width: 1023px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-card--pro {
    order: -1;
  }

  .subscription-extras {
    grid-template-columns: 1fr;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .subscription-header .dashboard-section__title {
    font-size: 26px;
  }

  .pricing-grid {
    gap: 20px;
  }

  .pricing-card {
    padding: 24px 20px;
  }

  .pricing-card__amount {
    font-size: 36px;
  }

  .pricing-card__features li {
    font-size: 13px;
    padding: 6px 0;
  }

  .extras-card {
    flex-direction: column;
    text-align: center;
  }

  .extras-card__btn {
    width: 100%;
  }

  .promo-form {
    flex-direction: column;
  }

  .promo-form__btn {
    width: 100%;
  }
}

/* ============================================================
   My Gifts (Received Gifts) Section
   ============================================================ */

/* Loading State */
.gifts-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 0;
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.6));
}

.gifts-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--dashboard-border-strong, rgba(0, 0, 0, 0.1));
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: giftsSpinner 0.8s linear infinite;
}

@keyframes giftsSpinner {
  to { transform: rotate(360deg); }
}

/* Gifts Grid */
.gifts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Gift Card */
.gift-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--dashboard-surface-alt, #ffffff);
  border: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gift-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.gift-card--highlight {
  animation: giftHighlight 3s ease-out;
}

@keyframes giftHighlight {
  0% {
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.05);
  }
  100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background: var(--dashboard-surface-alt, #ffffff);
  }
}

.gift-card__icon {
  font-size: 36px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3e8ff 0%, #fce7f3 100%);
  border-radius: 12px;
  flex-shrink: 0;
}

.gift-card__content {
  flex: 1;
  min-width: 0;
}

.gift-card__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--dashboard-text, #1f1f1f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gift-card__from,
.gift-card__date {
  margin: 0;
  font-size: 13px;
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.5));
}

.gift-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.gift-card__btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.gift-card__btn--primary {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 33, 60, 0.2);
  color: rgba(31, 34, 56, 0.85);
}

.gift-card__btn--primary:hover {
  background: #ffffff;
  border-color: rgba(31, 33, 60, 0.8);
}

.gift-card__btn--disabled {
  background: var(--dashboard-border, rgba(0, 0, 0, 0.1));
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.4));
  cursor: not-allowed;
}

/* Expired Gift Card */
.gift-card--expired {
  opacity: 0.6;
}

.gift-card--expired:hover {
  transform: none;
  box-shadow: none;
}

.gift-card--expired .gift-card__icon {
  filter: grayscale(1);
}

.gift-card__badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  vertical-align: middle;
}

.gift-card__badge--expired {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Error State */
.gifts-error {
  text-align: center;
  padding: 48px 24px;
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.6));
}

.gifts-error .btn-retry {
  margin-top: 16px;
  padding: 8px 20px;
  background: var(--dashboard-surface-alt, #f5f5f5);
  border: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.gifts-error .btn-retry:hover {
  background: var(--dashboard-border, rgba(0, 0, 0, 0.08));
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .gifts-grid {
    grid-template-columns: 1fr;
  }

  .gift-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .gift-card__actions {
    width: 100%;
  }

  .gift-card__btn {
    flex: 1;
    text-align: center;
  }
}

/* ============================================
   VISUAL GIFT CARD (New Design)
   Large cards with hero section and footer
   ============================================ */

/* Grid for visual cards - 3 columns on desktop */
.gifts-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1200px) {
  .gifts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Visual Gift Card */
.gift-card--visual {
  flex-direction: column;
  align-items: stretch; /* Override base align-items: center */
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--dashboard-surface-alt, #ffffff);
}

.gift-card--visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Hero section with background, logo and title */
.gift-card__hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 28px;
  min-height: 180px;
  border-radius: 16px;
  margin: 8px;
}

.gift-card__logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

.gift-card--visual .gift-card__title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Footer section with metadata and button */
.gift-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 20px;
  gap: 12px;
}

.gift-card__meta {
  flex: 1;
  min-width: 0;
}

.gift-card--visual .gift-card__from {
  font-size: 15px;
  font-weight: 600;
  color: var(--dashboard-text, #1f1f1f);
  margin: 0 0 6px;
}

.gift-card--visual .gift-card__date {
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.5));
  margin: 0;
}

.gift-card--visual .gift-card__from,
.gift-card--visual .gift-card__date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gift-card--visual .gift-card__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
}

.gift-card--visual .gift-card__actions {
  flex-shrink: 0;
}

.gift-card--visual .gift-card__btn--primary {
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

/* Expired state for visual cards */
.gift-card--visual.gift-card--expired {
  opacity: 0.7;
}

.gift-card--visual.gift-card--expired .gift-card__hero {
  filter: grayscale(0.5);
}

.gift-card--visual.gift-card--expired:hover {
  transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Badge position in visual cards */
.gift-card--visual .gift-card__badge {
  margin-left: 0;
  margin-top: 4px;
  display: inline-block;
}

/* Highlight animation for visual cards */
.gift-card--visual.gift-card--highlight {
  animation: giftHighlightVisual 3s ease-out;
}

@keyframes giftHighlightVisual {
  0% {
    box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.6), 0 16px 40px rgba(168, 85, 247, 0.25);
  }
  100% {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  }
}

/* Mobile adjustments for visual cards */
@media (max-width: 640px) {
  .gift-card--visual {
    flex-direction: column;
    text-align: left;
  }

  .gift-card__hero {
    padding: 20px 16px;
    min-height: 120px;
    gap: 14px;
    margin: 6px;
  }

  .gift-card__logo {
    width: 80px;
    height: 80px;
  }

  .gift-card--visual .gift-card__title {
    font-size: 18px;
  }

  .gift-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px 16px;
  }

  .gift-card--visual .gift-card__actions {
    width: 100%;
  }

  .gift-card--visual .gift-card__btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   SETTINGS SECTION - Bento Layout
   ============================================ */

.settings-view {
  padding: 0;
}

.settings-view__title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 8px;
}

.settings-view__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px;
}

/* Bento Layout - Two Columns */
.settings-bento {
  display: flex;
  gap: var(--dashboard-gap);
  align-items: stretch;
}

.settings-bento__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--dashboard-gap);
}

.settings-bento__right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.settings-bento__right > .settings-card {
  flex: 1;
}

/* Card Base */
.settings-card {
  background: var(--dashboard-surface, #ffffff);
  border-radius: var(--dashboard-card-radius);
  padding: var(--dashboard-card-padding);
  box-shadow: var(--dashboard-card-shadow);
}

.settings-card__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--dashboard-text, #1f2238);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.08));
}

/* Profile Card */
.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-card__avatar img,
.profile-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-card__avatar-initials {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.profile-card__info {
  flex: 1;
  min-width: 0;
}

.profile-card__name {
  font-size: 24px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card__username {
  font-size: 15px;
  color: var(--dashboard-text-secondary, #64748b);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card__plan {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-badge {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: white;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
}

.plan-badge--pro,
.plan-badge[data-tier="pro"] {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.plan-badge--ultra,
.plan-badge[data-tier="ultra"] {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
}

.profile-card__upgrade {
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.6));
  text-decoration: none;
  transition: color 0.2s;
}

.profile-card__upgrade:hover {
  color: var(--dashboard-text, #1f2238);
}

/* Personal Information Card */

.settings-field {
  margin-bottom: 24px;
}

.settings-field:last-child {
  margin-bottom: 0;
}

.settings-field__label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--dashboard-text, #1f2238);
  margin-bottom: 4px;
}

.settings-field__hint {
  display: block;
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.5));
  margin-bottom: 12px;
}

.settings-field__row {
  display: flex;
  gap: 12px;
}

.settings-field__input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--dashboard-border, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  background: var(--dashboard-surface-alt, #f8f8f8);
  font-size: 15px;
  font-family: inherit;
  color: var(--dashboard-text, #1f2238);
  outline: none;
  min-width: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.settings-field__input:focus {
  border-color: var(--dashboard-accent, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.settings-field__input::placeholder {
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.35));
}

/* Read-only field value (e.g., email) */
.settings-field__value {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  color: var(--dashboard-text-secondary, #64748b);
}

.settings-field__btn {
  padding: 12px 24px;
  border: 1px solid var(--dashboard-border-strong, rgba(31, 33, 60, 0.2));
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--dashboard-text, #1f2238);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.settings-field__btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}

.settings-field__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-field__error {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #dc2626;
  line-height: 1.4;
}

.settings-field__success {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #16a34a;
  line-height: 1.4;
}

.settings-field__rules {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.45));
  line-height: 1.4;
}

/* ================================
   Personal Info Form (New Design)
   ================================ */
.personal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.personal-form__field {
  display: flex;
  flex-direction: column;
}

.personal-form__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dashboard-text, #1f2238);
  margin-bottom: 8px;
}

.personal-form__lock {
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.4));
}

.personal-form__input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--dashboard-border, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  background: var(--dashboard-surface, #fff);
  font-size: 15px;
  font-family: inherit;
  color: var(--dashboard-text, #1f2238);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.personal-form__input:focus {
  border-color: var(--dashboard-accent, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.personal-form__input::placeholder {
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.35));
}

/* Disabled email input */
.personal-form__field--readonly .personal-form__input {
  background: var(--dashboard-surface-alt, #f5f5f5);
  color: var(--dashboard-text-muted, rgba(0, 0, 0, 0.5));
  cursor: not-allowed;
  border-color: transparent;
}

/* Username field wrapper with check icon */
.personal-form__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.personal-form__input-wrap .personal-form__input {
  padding-right: 44px;
}

.personal-form__check {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Username input states */
.personal-form__input-wrap.is-valid .personal-form__input {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.personal-form__input-wrap.is-invalid .personal-form__input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Hint text below username */
.personal-form__hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.personal-form__hint--success {
  color: #22c55e;
}

.personal-form__hint--error {
  color: #ef4444;
}

/* Save Changes button */
.personal-form__submit {
  margin-top: 8px;
  width: 100%;
  height: 48px;
  border: 1px solid var(--dashboard-border-strong, rgba(0, 0, 0, 0.15));
  border-radius: 10px;
  background: transparent;
  color: var(--dashboard-text, #1f2238);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.personal-form__submit:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}

.personal-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.personal-form__submit .btn-text,
.personal-form__submit .btn-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.personal-form__submit .btn-text[hidden],
.personal-form__submit .btn-loader[hidden] {
  display: none;
}

.personal-form__submit .btn-spinner {
  animation: spin 1s linear infinite;
}

/* Delete Account Card */
.settings-card--delete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.settings-card--delete__text {
  font-size: 16px;
  color: var(--dashboard-text, #1f2238);
}

.btn-delete-account {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.5));
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s;
}

.btn-delete-account:hover {
  color: var(--dashboard-text-secondary, #64748b);
  text-decoration: underline;
}

/* ============================================
   SUBSCRIPTION CARD (in Settings)
   ============================================ */

/* Settings Credits Card */
.settings-card--credits {
  background: linear-gradient(135deg, #faf8ff 0%, #ffffff 100%);
  border: 1px solid #e9e3f5;
}

/* Credits Balance */
.credits-balance {
  margin-bottom: 8px;
}

.credits-balance__main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.credits-balance__value {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.credits-balance__label {
  font-size: 16px;
  color: #64748b;
}

.credits-balance__free {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-radius: 10px;
}

.credits-balance__free-badge {
  font-size: 14px;
  font-weight: 700;
  color: #059669;
}

.credits-balance__free-text {
  font-size: 13px;
  color: #047857;
}

/* Credits Stats */
.credits-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.credits-stats__item {
  padding: 14px;
  background: #f8fafc;
  border-radius: 12px;
  text-align: center;
}

.credits-stats__value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
  line-height: 1.2;
}

.credits-stats__label {
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Credits Pricing Info */
.credits-pricing {
  margin-bottom: 24px;
  padding: 16px;
  background: #faf8ff;
  border-radius: 12px;
  border: 1px dashed #e9e3f5;
}

.credits-pricing__tagline {
  font-size: 15px;
  font-weight: 600;
  color: var(--dashboard-text, #1f2238);
  margin: 0 0 10px 0;
}

.credits-pricing__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.credits-pricing__list li {
  font-size: 14px;
  color: #64748b;
  padding: 4px 0;
}

.credits-pricing__list strong {
  color: #a855f7;
}

/* Credits Actions */
.credits-actions {
  display: flex;
  gap: 12px;
}

.credits-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.credits-actions__btn--primary {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: white;
  flex: 1;
}

.credits-actions__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.35);
}

.credits-actions__btn--primary svg {
  width: 16px;
  height: 16px;
}

.credits-actions__btn--secondary {
  background: rgba(0, 0, 0, 0.04);
  color: var(--dashboard-text-secondary, #64748b);
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
  min-width: 185px;
}

.credits-actions__btn--secondary:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--dashboard-text, #1f2238);
  border-color: rgba(0, 0, 0, 0.15);
}

.credits-actions__btn--secondary svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* Credits Purchase History */
.credits-history {
  margin-top: 12px;
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.credits-history__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--dashboard-text-secondary, #64748b);
  margin: 0 0 12px 0;
}

.credits-history__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.credits-history__loading {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.credits-history__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Hide loading when hidden attribute is set */
.credits-history__loading[hidden] {
  display: none;
}

.credits-history__empty {
  text-align: center;
  padding: 16px;
  color: var(--dashboard-text-secondary, #64748b);
}

.credits-history__empty[hidden] {
  display: none;
}

.credits-history__empty-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
}

.credits-history__empty p {
  margin: 0;
  font-size: 13px;
}

.credits-history__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(168, 85, 247, 0.06);
  border-radius: 8px;
  font-size: 13px;
}

.credits-history__item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.credits-history__item-name {
  font-weight: 500;
  color: var(--dashboard-text, #1f2238);
}

.credits-history__item-date {
  font-size: 12px;
  color: var(--dashboard-text-secondary, #64748b);
}

.credits-history__item-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.credits-history__item-credits {
  font-weight: 600;
  color: #16a34a;
}

.credits-history__item-price {
  font-size: 12px;
  color: var(--dashboard-text-secondary, #64748b);
}


/* ============================================
   RETENTION MODAL (Cancel Subscription Flow)
   ============================================ */

.retention-modal {
  padding: 0;
  border: none;
  border-radius: 24px;
  background: white;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 440px;
  width: calc(100% - 32px);
}

.retention-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.retention-modal__content {
  position: relative;
  padding: 32px;
  text-align: center;
}

.retention-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.retention-modal__close:hover {
  background: #e2e8f0;
  color: #1f2937;
}

.retention-modal__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.retention-modal__title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
}

.retention-modal__losing {
  background: #fef2f2;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
}

.retention-modal__losing-label {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #991b1b;
}

.retention-modal__features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.retention-modal__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #7f1d1d;
}

.retention-modal__feature-x {
  color: #ef4444;
  font-weight: 600;
}

.retention-modal__usage {
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #475569;
}

.retention-modal__usage strong {
  color: var(--dashboard-text, #1f2238);
}

.retention-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.retention-modal__btn {
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.retention-modal__btn--keep {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: white;
}

.retention-modal__btn--keep:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

.retention-modal__btn--cancel {
  background: transparent;
  color: #64748b;
}

.retention-modal__btn--cancel:hover {
  background: #f1f5f9;
  color: #475569;
}

.retention-modal__btn--done {
  background: #22c55e;
  color: white;
}

.retention-modal__btn--done:hover {
  background: #16a34a;
}

.retention-modal__feedback {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.retention-modal__feedback p {
  margin: 0;
  font-size: 13px;
  color: #94a3b8;
}

.retention-modal__feedback-link {
  color: #7c3aed;
  text-decoration: none;
}

.retention-modal__feedback-link:hover {
  text-decoration: underline;
}

/* Processing State */
.retention-modal__processing {
  padding: 40px 20px;
}

.retention-modal__spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 3px solid #e2e8f0;
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.retention-modal__processing p {
  margin: 0;
  color: #64748b;
}

/* Success State */
.retention-modal__success {
  padding: 20px;
}

.retention-modal__success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  border-radius: 50%;
  font-size: 24px;
  color: #22c55e;
}

.retention-modal__success h4 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--dashboard-text, #1f2238);
}

.retention-modal__success p {
  margin: 0 0 20px;
  font-size: 14px;
  color: #64748b;
}

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

/* Settings Mobile */
@media (max-width: 900px) {
  .settings-bento {
    flex-direction: column;
  }

  .settings-bento__left,
  .settings-bento__right {
    flex: none;
    width: 100%;
  }

  .credits-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .settings-view__title {
    font-size: 28px;
  }

  .profile-card {
    flex-direction: column;
    text-align: center;
  }

  .settings-field__row {
    flex-direction: column;
  }

  .settings-card--delete {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .credits-balance__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .credits-actions {
    flex-direction: column;
  }

  .credits-actions__btn {
    width: 100%;
  }

  .retention-modal__content {
    padding: 24px 20px;
  }

  .retention-modal__title {
    font-size: 20px;
  }
}

/* ============================================
   DRAFTS SECTION
   ============================================ */

.drafts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Draft Card - Visual Style (like gift cards) */
.draft-card--visual {
  display: flex;
  flex-direction: column;
  background: var(--dashboard-surface, #ffffff);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draft-card--visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

/* Draft Hero (gradient background + title) */
.draft-hero {
  position: relative;
  min-height: 140px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.draft-hero__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  word-break: break-word;
  max-width: 100%;
}

/* Source Badge (Cloud/Local) */
.draft-source {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
}

.draft-source__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.draft-source__icon svg {
  width: 14px;
  height: 14px;
}

.draft-source__label {
  text-transform: capitalize;
}

/* Draft Footer */
.draft-footer {
  padding: 16px 20px 20px;
  background: var(--dashboard-surface, #ffffff);
}

.draft-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.draft-text {
  display: none;
}

.draft-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.draft-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.5));
}

.draft-date::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.75a7.25 7.25 0 1 0 0 14.5a7.25 7.25 0 0 0 0-14.5M3.25 12a8.75 8.75 0 1 1 17.5 0a8.75 8.75 0 0 1-17.5 0M12 7.25a.75.75 0 0 1 .75.75v3.69l1.78 1.78a.75.75 0 1 1-1.06 1.06l-2-2a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.75a7.25 7.25 0 1 0 0 14.5a7.25 7.25 0 0 0 0-14.5M3.25 12a8.75 8.75 0 1 1 17.5 0a8.75 8.75 0 0 1-17.5 0M12 7.25a.75.75 0 0 1 .75.75v3.69l1.78 1.78a.75.75 0 1 1-1.06 1.06l-2-2a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75'/%3E%3C/svg%3E") center / contain no-repeat;
}

.draft-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(168, 85, 247, 0.1);
  color: #7c3aed;
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
}

.draft-badge--gift {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
}

.draft-badge svg {
  flex-shrink: 0;
}

/* Draft Actions */
.draft-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-draft-continue {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 33, 60, 0.2);
  color: rgba(31, 34, 56, 0.85);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.btn-draft-continue:hover {
  background: #ffffff;
  border-color: rgba(31, 33, 60, 0.8);
}

.btn-draft-continue svg {
  flex-shrink: 0;
}

.btn-draft-delete {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 10px;
  color: #dc2626;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-draft-delete:hover {
  background: rgba(239, 68, 68, 0.15);
  transform: scale(1.05);
}

/* Drafts Responsive */
@media (max-width: 767px) {
  .drafts-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .draft-card--visual {
    border-radius: 16px;
  }

  .draft-hero {
    min-height: 120px;
    padding: 16px;
  }

  .draft-hero__title {
    font-size: 18px;
  }

  .draft-footer {
    padding: 14px 16px 16px;
  }

  .draft-actions {
    gap: 8px;
  }

  .btn-draft-continue {
    padding: 11px 16px;
    font-size: 14px;
  }

  .btn-draft-delete {
    width: 40px;
    height: 40px;
  }
}

/* ========================================
   Subscription Status (Settings Card)
   ======================================== */

/* Overview Plan Badge */
.stat-card__plan-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border-radius: 12px;
}

.stat-card__plan-badge[data-tier="free"] {
  background: linear-gradient(135deg, #64748b, #475569);
}

.stat-card__plan-badge[data-tier="pro"] {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.stat-card__plan-badge[data-tier="ultra"] {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
}

/* Settings Subscription Card */
.settings-card--subscription {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card--subscription .settings-card__title {
  margin-bottom: 0;
}

/* Subscription Status Section */
.subscription-status {
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 12px;
  padding: 20px;
}

.subscription-status__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.subscription-status__badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border-radius: 8px;
}

.subscription-status__badge[data-tier="pro"] {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.subscription-status__badge[data-tier="ultra"] {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
}

.subscription-status__period {
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.6));
}

.subscription-status__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.subscription-status__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subscription-status__label {
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.6));
}

.subscription-status__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--dashboard-text, #1f2238);
}

.subscription-status__value--active {
  color: #16a34a;
}

.subscription-status__value--warning {
  color: #ea580c;
}

.subscription-status__actions {
  display: flex;
  gap: 12px;
}

.subscription-status__btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.subscription-status__btn--manage {
  background: var(--dashboard-accent, #7c3aed);
  color: white;
  border: none;
}

.subscription-status__btn--manage:hover {
  background: var(--dashboard-accent-hover, #6d28d9);
}

.subscription-status__btn--cancel {
  background: transparent;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.6));
  border: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.1));
}

.subscription-status__btn--cancel:hover {
  color: #dc2626;
  border-color: #dc2626;
}

/* Credits Balance in Settings */
.credits-balance {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 12px;
}

.credits-balance__main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.credits-balance__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
}

.credits-balance__label {
  font-size: 14px;
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.6));
}

.credits-balance__note {
  font-size: 13px;
  color: var(--dashboard-accent, #7c3aed);
}

/* Credits Breakdown (monthly vs permanent) */
.credits-balance__breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.credits-balance__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.credits-balance__row-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.credits-balance__row-value {
  font-weight: 600;
  color: var(--dashboard-text, #1f2238);
  min-width: 24px;
}

.credits-balance__row-label {
  color: var(--dashboard-text, #1f2238);
}

.credits-balance__row-hint {
  color: var(--dashboard-text-muted, rgba(31, 34, 56, 0.5));
  font-size: 12px;
}

.credits-balance__row--monthly .credits-balance__row-value {
  color: #7c3aed;
}

.credits-balance__row--permanent .credits-balance__row-value {
  color: #059669;
}

/* Credits Actions */
.credits-actions {
  display: flex;
  gap: 12px;
}

.credits-actions__btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.credits-actions__btn--buy {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: white;
  border: none;
}

.credits-actions__btn--buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.credits-actions__btn--invoices {
  background: transparent;
  color: var(--dashboard-text, #1f2238);
  border: 1px solid var(--dashboard-border-strong, rgba(31, 33, 60, 0.2));
}

.credits-actions__btn--invoices:hover {
  background: rgba(0, 0, 0, 0.03);
}


/* ============================================
   SETTINGS PAGE - NEW BENTO GRID LAYOUT
   ============================================ */

/* Settings Header */
.settings-header {
  margin-bottom: 0;
}

.settings-header__title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 8px;
}

.settings-header__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px;
}

/* Settings Grid - 12 Column Layout */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--dashboard-gap);
  align-items: start;
}

.settings-grid__left {
  display: flex;
  flex-direction: column;
  gap: var(--dashboard-gap);
}

.settings-grid__right {
  display: flex;
  flex-direction: column;
  gap: var(--dashboard-gap);
}

.settings-grid__cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dashboard-gap);
}

/* Profile Card - Desktop: horizontal, Mobile: centered */
.settings-card--profile-centered {
  padding: 24px;
}

.profile-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.profile-centered__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-centered__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
  transition: transform 0.2s;
}

.profile-centered__avatar svg {
  width: 40px;
  height: 40px;
}

.profile-centered__avatar:hover {
  transform: scale(1.02);
}

.profile-centered__avatar img,
.profile-centered__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-centered__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-centered__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-centered__username {
  font-size: 14px;
  color: var(--dashboard-text-secondary);
  margin: 0;
}

/* Personal Info Card Header */
.settings-card__header {
  margin-bottom: 20px;
}

.settings-card--personal .settings-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
  margin: 0;
  padding: 0;
  border: none;
}

/* Lock icon for readonly fields */
.settings-field__lock {
  color: var(--dashboard-text-muted, #9ca3af);
  margin-left: 6px;
  vertical-align: middle;
}

/* Status icon in input row */
.settings-field__row--with-status {
  position: relative;
}

.settings-field__status {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  color: #22c55e;
  display: flex;
  align-items: center;
}

/* Danger Zone Card */
.settings-card--danger {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.15);
  padding: 24px;
}

.settings-card--danger__title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0 8px;
}

.settings-card--danger__text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0 16px;
  line-height: 1.5;
}

.settings-card--danger .btn-delete-account {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  color: #dc2626;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-card--danger .btn-delete-account:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Credits Balance Card */
.settings-card--credits-balance {
  position: relative;
  overflow: hidden;
}

/* Decorative coin image */
.credits-card__coin {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: auto;
  pointer-events: none;
  opacity: 0.9;
}

.credits-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.credits-card__header {
  margin-bottom: 20px;
}

.credits-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
  margin: 0 0 4px;
}

.credits-card__icon {
  color: var(--dashboard-accent, #7c3aed);
}

.credits-card__subtitle {
  font-size: 13px;
  color: var(--dashboard-text-secondary, #64748b);
}

.credits-card__value-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}

.credits-card__value {
  font-size: 44px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
  line-height: 1;
  letter-spacing: -0.02em;
}

.credits-card__unit {
  font-size: 14px;
  color: var(--dashboard-text-secondary, #64748b);
}

.credits-card__breakdown {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

/* Credit box (Monthly/Permanent) */
.credits-card__box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--dashboard-surface-alt, #f5f5f5);
  border-radius: 10px;
}

.credits-card__box--permanent {
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
}

.credits-card__box-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dashboard-text-secondary);
}

.credits-card__box-header svg {
  opacity: 0.7;
}

.credits-card__box--permanent .credits-card__box-header {
  color: var(--dashboard-accent, #7c3aed);
}

.credits-card__box--permanent .credits-card__box-header svg {
  opacity: 1;
}

.credits-card__box-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
}

.credits-card__box--permanent .credits-card__box-value {
  color: var(--dashboard-accent, #7c3aed);
}

.credits-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
  margin-top: auto;
}

.credits-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

/* Subscription Card */
.subscription-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.subscription-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.subscription-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
  margin: 0;
}

.subscription-card__badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
}

.subscription-card__badge[hidden] {
  display: none;
}

/* Active Subscription State */
.subscription-card__active {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.subscription-card__active[hidden] {
  display: none;
}

.subscription-card__status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.subscription-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.subscription-card__status-text {
  font-size: 14px;
  font-weight: 600;
  color: #22c55e;
}

.subscription-card__period {
  font-size: 13px;
  color: var(--dashboard-text-secondary);
  margin-left: auto;
}

.subscription-card__period::before {
  content: '|';
  margin-right: 8px;
  color: var(--dashboard-border, #e5e7eb);
}

.subscription-card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  flex: 1;
}

.subscription-card__info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.subscription-card__info-label {
  color: var(--dashboard-text-secondary);
}

.subscription-card__info-value {
  font-weight: 600;
  color: var(--dashboard-text, #1f2238);
}

.subscription-card__info-value--warning {
  color: #f59e0b;
}

.subscription-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.subscription-card__btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.subscription-card__btn--manage {
  background: transparent;
  border: 1px solid var(--dashboard-border-strong, rgba(0, 0, 0, 0.15));
  color: var(--dashboard-text, #1f2238);
}

.subscription-card__btn--manage:hover {
  background: rgba(0, 0, 0, 0.04);
}

.subscription-card__btn--cancel {
  background: transparent;
  border: none;
  color: #ef4444;
  font-size: 13px;
  padding: 8px;
}

.subscription-card__btn--cancel:hover {
  color: #dc2626;
  text-decoration: underline;
}

/* Empty Subscription State */
.subscription-card__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}

.subscription-card__empty[hidden] {
  display: none;
}

.subscription-card__empty-text {
  font-size: 14px;
  color: var(--dashboard-text-secondary, #64748b);
  margin: 0 0 8px;
}

.subscription-card__upgrade-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--dashboard-accent, #7c3aed);
  text-decoration: none;
  transition: color 0.2s;
}

.subscription-card__upgrade-link:hover {
  color: var(--dashboard-accent-dark, #6d28d9);
}

/* Purchase History Card */
.settings-card--history {
  padding: 0;
  overflow: hidden;
}

.history-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.08));
}

.history-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dashboard-text, #1f2238);
  margin: 0;
}

.history-card__invoices-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--dashboard-accent, #7c3aed);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.history-card__invoices-btn:hover {
  color: var(--dashboard-accent-dark, #6d28d9);
}

.history-card__table-wrap {
  position: relative;
  overflow-x: auto;
  /* Fixed height for 5 rows: header(47px) + 5 rows(53px each) = 312px */
  min-height: 312px;
}

/* History Table */
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.history-table__head {
  background: var(--dashboard-surface-alt, #f8f8f8);
  border-bottom: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.08));
}

.history-table__head th {
  padding: 14px 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dashboard-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.history-table__right {
  text-align: right !important;
}

.history-table__center {
  text-align: center !important;
}

.history-table__body tr {
  border-bottom: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.05));
  transition: background 0.15s;
}

.history-table__body tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

.history-table__body td {
  padding: 16px 24px;
  color: var(--dashboard-text, #1f2238);
}

.history-table__body .history-table__date {
  color: var(--dashboard-text-secondary);
  font-weight: 500;
}

.history-table__body .history-table__description {
  font-weight: 600;
}

.history-table__body .history-table__amount {
  text-align: right;
  color: var(--dashboard-text-secondary);
}

.history-table__body .history-table__credits {
  text-align: right;
  font-weight: 600;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  color: var(--dashboard-text, #1f2238);
}

.history-table__body .history-table__status {
  text-align: center;
}

.history-table__status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
}

/* Loading state in table */
.history-table__loading td {
  height: 265px; /* Height for 5 data rows */
  padding: 24px;
  text-align: center;
  vertical-align: middle;
}

.history-table__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(124, 58, 237, 0.2);
  border-top-color: var(--dashboard-accent, #7c3aed);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

/* Empty state */
.history-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 312px; /* Match table-wrap height */
  padding: 24px;
  color: var(--dashboard-text-secondary, #64748b);
}

.history-card__empty[hidden] {
  display: none;
}

.history-card__empty-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
}

.history-card__empty h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--dashboard-text, #1f2238);
  margin: 0 0 4px;
}

.history-card__empty p {
  font-size: 14px;
  margin: 0;
}

/* Hide table when empty */
.history-card__table-wrap:has(.history-card__empty:not([hidden])) .history-table {
  display: none;
}

/* Footer with View All link */
.history-card__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.06));
  background: var(--dashboard-card-muted, #f8fafc);
}

.history-card__view-all {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--dashboard-text-secondary, #64748b);
  cursor: pointer;
  transition: color 0.2s;
}

.history-card__view-all:hover {
  color: var(--dashboard-accent, #7c3aed);
}


/* ============================================
   SETTINGS PAGE - RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid__cards-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .settings-header__title {
    font-size: 28px;
  }

  .settings-header__subtitle {
    font-size: 14px;
  }

  .settings-card {
    padding: 20px;
    border-radius: 16px;
  }

  .profile-centered {
    flex-direction: column;
    text-align: center;
  }

  .profile-centered__info {
    align-items: center;
  }

  .profile-centered__avatar {
    width: 100px;
    height: 100px;
  }

  .profile-centered__avatar svg {
    width: 48px;
    height: 48px;
  }

  .credits-card__value {
    font-size: 36px;
  }

  .credits-card__breakdown {
    flex-direction: column;
  }

  .history-table__head th,
  .history-table__body td {
    padding: 12px 16px;
  }

  .history-card__header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}