/* ???????????????????????????????????????
   QuestNote v1.6 ? Design System
   ???????? ? ???? ? ?? RPG
   ??????????????????????????????????????? */

:root {
  /* background ? ????? */
  --color-bg-main: #080B16;
  --color-bg-surface: #0E1324;
  --color-bg-card: #141A2E;
  --color-bg-card-soft: #18203A;
  --color-bg-elevated: #1D2540;

  /* text */
  --color-text-main: #F4F7FF;
  --color-text-secondary: #C7D2EA;
  --color-text-muted: #9BA8C7;
  --color-text-soft: #7F8CAF;
  --color-text-disabled: #5F6B86;
  --color-text-inverse: #080B16;

  /* brand ? ??? ? ???? ? ?? */
  --color-primary: #8B5CF6;
  --color-primary-hover: #7C3AED;
  --color-primary-soft: rgba(139, 92, 246, 0.18);
  --color-primary-light: #C4B5FD;
  --color-primary-border: rgba(167, 139, 250, 0.42);
  --color-secondary: #22D3EE;
  --color-secondary-hover: #06B6D4;
  --color-secondary-soft: rgba(34, 211, 238, 0.14);
  --color-accent: #FBBF24;
  --color-accent-hover: #F59E0B;
  --color-accent-soft: rgba(251, 191, 36, 0.16);
  --color-success: #34D399;
  --color-success-hover: #10B981;
  --color-success-soft: rgba(52, 211, 153, 0.15);
  --color-danger: #FB7185;
  --color-danger-hover: #F43F5E;
  --color-danger-soft: rgba(251, 113, 133, 0.16);
  --color-warning: #F59E0B;
  --color-warning-soft: rgba(245, 158, 11, 0.16);

  /* border */
  --color-border: rgba(148, 163, 184, 0.22);
  --color-border-soft: rgba(148, 163, 184, 0.14);
  --color-divider: rgba(148, 163, 184, 0.16);

  /* rarity */
  --rarity-n: #94A3B8;
  --rarity-r: #38BDF8;
  --rarity-sr: #A78BFA;
  --rarity-ssr: #FBBF24;
  --rarity-ur: #F472B6;

  /* task priority */
  --priority-normal: #34D399;
  --priority-important: #FBBF24;
  --priority-urgent: #FB7185;

  /* expedition */
  --expedition-forest: #34d399;
  --expedition-lava: #f97316;
  --expedition-machine: #60a5fa;
  --expedition-astral: #e879f9;
  --expedition-polar: #67e8f9;
  --expedition-harvest: #fbbf24;

  /* radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* shadow */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.46);
  --shadow-glow: 0 0 28px rgba(139, 92, 246, 0.32);

  /* typography ? V2.7.3 ????????????? / ?? / ??? */
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.82rem;
  --font-size-md: 0.92rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.12rem;
  --font-size-xl: 1.28rem;
  --font-size-2xl: 1.48rem;
  --font-size-3xl: 1.72rem;

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;

  /* motion */
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* layout */
  --page-padding-x: var(--space-4);
  --page-padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--space-4));
  --nav-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --tap-min: 44px;

  /* ??????? */
  --bg-main: var(--color-bg-main);
  --bg-card: var(--color-bg-card);
  --bg-card-soft: var(--color-bg-card-soft);
  --bg-elevated: var(--color-bg-elevated);
  --text-main: var(--color-text-main);
  --text-muted: var(--color-text-muted);
  --accent-primary: var(--color-primary);
  --accent-secondary: var(--color-secondary);
  --accent-danger: var(--color-danger);
  --accent-warning: var(--color-warning);
  --accent-success: var(--color-success);
  --radius-card: var(--radius-lg);
  --shadow-card: var(--shadow-md);
  --bg: var(--color-bg-main);
  --bg-gradient: linear-gradient(165deg, #080B16 0%, #0E1324 42%, #141A2E 100%);
  --bg-card-hover: #1D2540;
  --text: var(--color-text-main);
  --border: var(--color-border);
  --border-glow: rgba(167, 139, 250, 0.28);
  --primary: var(--color-primary);
  --primary-light: var(--color-primary-soft);
  --primary-glow: rgba(139, 92, 246, 0.34);
  --accent: var(--color-accent);
  --danger: var(--color-danger);
  --success: var(--color-success);
  --radius: var(--radius-md);
  --shadow: var(--shadow-md);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

@media (pointer: coarse) {
  /* Allow both scroll axes without enabling pinch zoom; descendants intersect ancestor rules. */
  :where(html, body, body *) {
    touch-action: pan-x pan-y;
  }

  /* Prevent iPhone focus zoom on small form text, including modal fields. */
  input, textarea, select {
    font-size: max(16px, 1rem) !important;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', sans-serif;
  background: var(--bg-main);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-main);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 18% 28%, rgba(244, 247, 255, 0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 72%, rgba(139, 92, 246, 0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 18%, rgba(34, 211, 238, 0.08) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.05) 0%, transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  padding-top: var(--safe-top);
  padding-bottom: var(--page-padding-bottom);
}

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  background: var(--bg);
}

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.error-msg {
  color: var(--danger);
  padding: 16px;
  text-align: center;
}

/* ??? ?? ??? */

.view {
  display: none;
  padding: var(--page-padding-x);
  animation: fadeIn var(--duration-normal) ease;
}

.view.active {
  display: block;
}

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

.page-header {
  margin-bottom: var(--space-5);
}

.page-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.page-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--color-text-main), var(--color-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.section-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.section-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  line-height: 1.45;
}

.page-section {
  margin-bottom: var(--space-5);
}

.page-section__header {
  margin-bottom: var(--space-3);
}

/* ??? ?? ??? */

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-4);
}

/* ??? ??? ??? */

.stats-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.stats-bar::-webkit-scrollbar {
  display: none;
}

.stat-card {
  flex: 0 0 calc(33.333% - 6px);
  min-width: 96px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 6px;
  text-align: center;
  box-shadow: var(--shadow);
}

.stat-card--stardust {
  border-color: rgba(251, 191, 36, 0.25);
  background: linear-gradient(145deg, var(--bg-card), rgba(251, 191, 36, 0.06));
}

.stat-card--energy {
  border-color: rgba(52, 211, 153, 0.25);
  background: linear-gradient(145deg, var(--bg-card), rgba(52, 211, 153, 0.06));
}

.stat-icon {
  display: block;
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 1;
}

.stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.stat-value {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-card--stardust .stat-value {
  color: var(--accent);
}

/* ??? V2.7.1 ?????????????? / ???? / ??? ??? */
.home-hub {
  margin-bottom: 16px;
}
.home-hub__icons {
  display: flex;
  gap: 10px;
}
.home-hub__icon {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 74px;
  padding: 12px 8px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.home-hub__icon:active {
  transform: scale(0.97);
}
.home-hub__emoji {
  font-size: 1.7rem;
  line-height: 1;
}
.home-hub__name {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.home-hub__dot {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--bg-card);
}
.home-hub__dot[hidden] {
  display: none;
}
.home-hub__panel {
  margin-top: 12px;
}
.home-hub__panel > section {
  margin-top: 0;
}
.home-hub:not([data-active]) .home-hub__panel,
.home-hub[data-active=""] .home-hub__panel {
  margin-top: 0;
}

/* Default ???? */
body[data-theme="default"] .home-hub__icon {
  background: rgba(20, 26, 46, 0.72);
  border-color: rgba(167, 139, 250, 0.24);
}
body[data-theme="default"] .home-hub__name {
  color: #C7D2EA;
}
body[data-theme="default"] .home-hub__icon.is-active {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8B5CF6;
}
body[data-theme="default"] .home-hub__icon.is-active .home-hub__name {
  color: #DDD6FE;
}
body[data-theme="default"] .home-hub__dot {
  box-shadow: 0 0 0 2px #101628;
}

/* Sweet ???? */
body[data-theme="sweet"] .home-hub__icon {
  background: rgba(255, 255, 255, 0.9);
  border-color: #F0C9DA;
  box-shadow: 0 4px 14px rgba(199, 53, 120, 0.08);
}
body[data-theme="sweet"] .home-hub__name {
  color: #6F4C5E;
}
body[data-theme="sweet"] .home-hub__icon.is-active {
  background: #FFF0F7;
  border-color: #C73578;
}
body[data-theme="sweet"] .home-hub__icon.is-active .home-hub__name {
  color: #B83274;
}
body[data-theme="sweet"] .home-hub__dot {
  background: #C73578;
  box-shadow: 0 0 0 2px #FFFFFF;
}

/* ??? ???? ??? */

.companion-section {
  margin-bottom: 20px;
}

.companion-wrap {
  position: relative;
}

/* ??? ???? ??? */

.companion-bubble {
  position: relative;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(4px);
  animation: bubbleFadeIn 0.45s ease forwards;
}

.companion-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

.companion-bubble--visible {
  opacity: 1;
}

.companion-bubble__text {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  transition: opacity 0.2s ease;
}

.companion-bubble__text--changing {
  opacity: 0.35;
}

.companion-bubble__text--show {
  animation: bubbleTextIn 0.35s ease;
}

@keyframes bubbleFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bubbleTextIn {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.companion-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.companion-empty__icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
  opacity: 0.5;
}

.companion-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.companion-card--breathe {
  animation: companionBreathe 4s ease-in-out infinite;
}

@keyframes companionBreathe {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 14px rgba(124, 92, 255, 0.12); }
}

.companion-card--bounce {
  animation: companionInteractBounce 0.45s ease;
}

.companion-img--bounce img,
.companion-img--bounce .pet-img {
  animation: petInteractBounce 0.45s ease;
}

@keyframes companionInteractBounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(0.98); }
  70% { transform: scale(1.02); }
}

@keyframes petInteractBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.companion-card:active {
  transform: scale(0.98);
}

.companion-card--pulse {
  animation: companionPulse 0.6s ease;
}

@keyframes companionPulse {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 24px var(--primary-glow); transform: scale(1.01); }
}

.companion-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, var(--primary-light), transparent 70%);
  pointer-events: none;
}

.companion-card.rarity-UR { border-color: rgba(244, 114, 182, 0.4); }
.companion-card.rarity-SSR { border-color: rgba(251, 191, 36, 0.35); }
.companion-card.rarity-SR { border-color: rgba(167, 139, 250, 0.35); }

.companion-card__image {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

button.companion-card__image {
  display: block;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius);
}

button.companion-card__image:active {
  transform: scale(0.96);
}

.companion-card__body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}

button.companion-card__detail-button {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 2px 4px 4px;
  margin: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm, 12px);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

button.companion-card__detail-button:active {
  transform: scale(0.985);
  background: rgba(124, 92, 255, 0.08);
}

button.companion-card__detail-button:focus-visible {
  outline: 2px solid var(--color-primary, var(--primary));
  outline-offset: 2px;
}

.companion-card__detail-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

body.reduce-motion button.companion-card__detail-button {
  transition: none;
}

body.reduce-motion button.companion-card__detail-button:active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  button.companion-card__detail-button {
    transition: none;
  }

  button.companion-card__detail-button:active {
    transform: none;
  }
}

.companion-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.companion-card__name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
}

.companion-bond {
  margin: 10px 0;
}

.companion-bond__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.companion-card__line {
  font-size: 0.8125rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.5;
  margin-top: 8px;
  min-height: 2.5em;
}

.companion-card__hint {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.companion-card__pet-row {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.companion-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.companion-card__actions .btn {
  min-width: 88px;
  min-height: 44px;
}

.companion-card__cooldown {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.companion-card--pet-glow {
  animation: companionPetGlow 0.65s ease;
}

@keyframes companionPetGlow {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 22px var(--primary-glow); }
}

.completed-range-filter {
  margin: 12px 0 16px;
}

.completed-range-filter__control .segmented-control__btn {
  font-size: 0.75rem;
  padding: 8px 6px;
  line-height: 1.3;
}

.completed-range-filter__control .section-count {
  display: inline-block;
  margin-left: 2px;
  font-size: 0.6875rem;
  opacity: 0.85;
}

.companion-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  margin-top: 4px;
}

/* ??? ??? ??? */

.progress-bar {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar--bond .progress-bar__fill {
  background: linear-gradient(90deg, var(--primary), #a78bfa);
}

.progress-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.progress-bar__fill--ssr {
  background: linear-gradient(90deg, #a78bfa, var(--rarity-ssr));
}

.progress-bar__fill--ur {
  background: linear-gradient(90deg, var(--rarity-ssr), var(--rarity-ur));
}

/* ??? ???? ??? */

.task-section {
  margin-bottom: 24px;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-left: 3px solid var(--priority-normal);
  transition: transform 0.15s, opacity 0.3s;
}

.task-card.priority-normal { border-left-color: var(--priority-normal); }
.task-card.priority-important { border-left-color: var(--priority-important); }
.task-card.priority-urgent { border-left-color: var(--priority-urgent); }

.task-card--done {
  opacity: 0.45;
  border-left-color: var(--success) !important;
}

.task-card--just-done {
  animation: taskJustDone 1.2s ease;
}

@keyframes taskJustDone {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  40% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.task-card--completing {
  animation: taskComplete 0.5s ease forwards;
}

@keyframes taskComplete {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(52, 211, 153, 0.3); }
  100% { transform: scale(0.98); opacity: 0.6; }
}

.task-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.task-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: white;
  flex-shrink: 0;
  transition: all 0.15s;
}

.task-check.checked {
  background: var(--success);
  border-color: var(--success);
}

.task-card__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.task-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.task-card__preview {
  font-size: 0.8125rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}

.task-card__actions {
  display: flex;
  gap: 8px;
}

.completed-section.collapsed > .task-list {
  display: none;
}

.section-toggle {
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 8px;
  width: 100%;
  text-align: left;
}

.empty-hint {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 16px;
  font-size: 0.875rem;
}

/* ??? ?? ??? */

.badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.badge--type {
  background: var(--primary-light);
  color: var(--primary);
}

.priority-normal { background: rgba(107, 114, 128, 0.2); color: var(--priority-normal); }
.priority-important { background: rgba(245, 158, 11, 0.15); color: var(--priority-important); }
.priority-urgent { background: rgba(239, 68, 68, 0.15); color: var(--priority-urgent); }

.badge--rarity { font-weight: 700; }
.badge--element {
  background: rgba(124, 92, 255, 0.15);
  color: var(--primary);
}
.rarity-N { background: rgba(156, 163, 175, 0.15); color: var(--rarity-n); }
.rarity-R { background: rgba(96, 165, 250, 0.15); color: var(--rarity-r); }
.rarity-SR { background: rgba(167, 139, 250, 0.15); color: var(--rarity-sr); }
.rarity-SSR { background: rgba(251, 191, 36, 0.15); color: var(--rarity-ssr); }
.rarity-UR { background: rgba(244, 114, 182, 0.15); color: var(--rarity-ur); }

/* ??? ?? ??? */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform var(--duration-fast), opacity var(--duration-fast), box-shadow var(--duration-fast);
  min-height: var(--tap-min);
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn--primary {
  background: linear-gradient(135deg, var(--primary), #6344e0);
  color: white;
  box-shadow: 0 4px 14px var(--primary-glow);
}

.btn--primary:active:not(:disabled) { transform: scale(0.97); }

.btn:disabled,
.btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
}

.btn--icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-card-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.btn--secondary:active:not(:disabled) { transform: scale(0.97); }
.btn--danger:active:not(:disabled) { transform: scale(0.97); }

.btn--secondary {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--border-glow);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 8px 12px;
  min-height: 36px;
  font-size: 0.8125rem;
}

.btn--danger {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.btn--sm {
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  font-size: var(--font-size-sm);
}

.btn--block { width: 100%; }

.btn--gacha {
  background: linear-gradient(135deg, #7c5cff 0%, #ec4899 50%, #fbbf24 100%);
  background-size: 200% 200%;
  animation: gachaShimmer 4s ease infinite;
  color: white;
  font-size: 1.0625rem;
  padding: 16px;
  margin-top: 16px;
  box-shadow: 0 4px 24px rgba(124, 92, 255, 0.5);
  letter-spacing: 0.05em;
}

@keyframes gachaShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.btn--gacha:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
}

.btn--gacha-ten {
  margin-top: 10px;
  background: linear-gradient(135deg, #6344e0 0%, #7c5cff 50%, #ec4899 100%);
}

.btn--upgrade {
  background: var(--primary-light);
  color: var(--primary);
  margin-top: 6px;
  width: 100%;
}

.btn--companion {
  background: rgba(52, 211, 153, 0.12);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.25);
  margin-top: 6px;
  width: 100%;
}

/* ??? FAB ??? */

.fab {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  right: calc(50% - 215px + 16px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #6344e0);
  color: white;
  font-size: 1.75rem;
  border: none;
  box-shadow: 0 4px 20px var(--primary-glow);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}

.fab:active { transform: scale(0.92); }

@media (max-width: 430px) {
  .fab { right: 16px; }
}

/* ??? ???? ??? */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(28, 28, 46, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.65625rem;
  padding: 6px 2px;
  min-width: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}

.nav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
}

.nav-badge--alert {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.nav-badge--hint {
  background: rgba(167, 139, 250, 0.85);
  box-shadow: 0 0 5px rgba(167, 139, 250, 0.4);
}

.nav-badge[hidden] {
  display: none;
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active .nav-icon {
  transform: scale(1.1);
}

.nav-icon {
  font-size: 1.25rem;
  transition: transform 0.15s;
}

/* ??? ??? ??? */

.gacha-panel {
  text-align: center;
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(28, 28, 46, 0.8) 100%);
  border-color: var(--border-glow);
}

.gacha-pool {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.gacha-pool-switcher {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  text-align: left;
}

.gacha-pool-switcher__label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.gacha-pool-select {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--bg-card));
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.9375rem;
}

.gacha-stardust { margin-bottom: 12px; }

.gacha-stardust__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.gacha-stardust__value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.gacha-info {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.pity-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  text-align: left;
}

.pity-item__header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  margin-bottom: 6px;
}

.pity-label { color: var(--text-muted); }
.pity-value { font-weight: 600; color: var(--text); }

.gacha-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}

.rate-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

/* =========================
   Legacy Summon Result - Deprecated
   =========================
   Deprecated:
   ?????????
   ???????????
   ????? sweet-summon-result / default-summon-result ?? class?
   ========================= */

.pull-result {
  text-align: center;
  padding: 8px;
  position: relative;
  overflow: hidden;
}

.pull-result--animate {
  animation: pullZoomIn 0.4s ease;
}

@keyframes pullZoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.pull-result__flash {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  animation: flashPulse 1s ease-out;
  pointer-events: none;
}

.pull-result__glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  animation: glowPulse 2s ease infinite;
}

.pull-result__glow--SSR,
.pull-result__glow--UR {
  box-shadow: inset 0 0 60px rgba(251, 191, 36, 0.15);
}

.pull-result__glow--UR {
  box-shadow: inset 0 0 80px rgba(244, 114, 182, 0.2);
  animation: urGlow 1.5s ease infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes urGlow {
  0%, 100% { box-shadow: inset 0 0 60px rgba(244, 114, 182, 0.15); }
  50% { box-shadow: inset 0 0 100px rgba(251, 191, 36, 0.25); }
}

@keyframes flashPulse {
  0% { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.5); }
}

.pull-result.rarity-UR .pull-result__name { color: var(--rarity-ur); }
.pull-result.rarity-SSR .pull-result__name { color: var(--rarity-ssr); }
.pull-result.rarity-SR .pull-result__name { color: var(--rarity-sr); }

.pull-result__label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.pull-result__summon {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  line-height: 1.5;
}

.pull-result__image {
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}

.pull-result__name {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.pull-result__desc {
  color: var(--text-muted);
  margin: 8px 0;
  position: relative;
  z-index: 1;
}

.pull-result__detail {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 12px 0 20px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* ??? ?? ??? */

.filter-bar {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--color-bg-card);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--duration-fast);
  min-height: 40px;
}

.filter-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.collection-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: border-color 0.15s;
}

.collection-card.rarity-R { border-color: rgba(96, 165, 250, 0.3); }
.collection-card.rarity-SR { border-color: rgba(167, 139, 250, 0.35); }
.collection-card.rarity-SSR { border-color: rgba(251, 191, 36, 0.35); }
.collection-card.rarity-UR {
  border-color: rgba(244, 114, 182, 0.4);
  background: linear-gradient(145deg, var(--bg-card), rgba(244, 114, 182, 0.06));
}

.collection-card--locked {
  opacity: 0.5;
  background: #141420;
  border-color: var(--border);
}

.collection-card__image {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  position: relative;
}

.collection-card__image-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-sm);
}

.collection-card__image-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.collection-card__image-btn:active {
  opacity: 0.9;
}

.collection-card__image-hint {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin: -2px 0 6px;
}

.collection-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.collection-card__title {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.collection-card__tap {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.collection-card__tap:active {
  opacity: 0.85;
}

.fragments {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.locked-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ??? ???? ??? */

.pet-detail {
  text-align: center;
}

.pet-detail__hero {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.pet-detail__name {
  font-size: 1.375rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.pet-detail__title {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.pet-detail__badges {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pet-detail__tags {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.tag {
  font-size: 0.6875rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.pet-detail__bond-lv {
  font-size: 0.8125rem;
  color: var(--primary);
  margin: 8px 0;
}

.pet-detail__feed-button {
  min-height: 44px;
  margin: var(--space-3) 0;
}

.pet-detail__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.6;
  margin: 12px 0;
}

.pet-detail__lore {
  font-size: 0.8125rem;
  color: var(--text);
  text-align: left;
  line-height: 1.7;
  margin: 12px 0;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
}

.pet-detail__locked {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 12px 0;
}

.pet-detail__subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  margin-bottom: 8px;
}

.pet-detail__bond {
  margin: 16px 0;
  text-align: left;
}

.bond-unlock-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bond-unlock {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  opacity: 0.6;
}

.bond-unlock--open {
  opacity: 1;
  border-color: rgba(124, 92, 255, 0.3);
}

.bond-unlock__lv {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  min-width: 36px;
}

.bond-unlock__text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.bond-unlock--open .bond-unlock__text {
  color: var(--text);
}

.companion-badge--detail {
  display: block;
  margin-top: 12px;
  text-align: center;
}

.pet-detail.rarity-UR .pet-detail__name { color: var(--rarity-ur); }
.pet-detail.rarity-SSR .pet-detail__name { color: var(--rarity-ssr); }

/* ??? ?????????? ??? */

.companion-image-preview {
  text-align: center;
  padding: 4px 0 8px;
}

.companion-image-preview__stage {
  position: relative;
  margin-bottom: 16px;
}

.companion-image-preview--feed .companion-image-preview__stage {
  margin-bottom: var(--space-2);
}

.companion-preview-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.companion-heart-float {
  position: absolute;
  bottom: 55%;
  font-size: 1.35rem;
  line-height: 1;
  animation: companionHeartFloat 1.2s ease-out forwards;
  opacity: 0;
  transform: translateX(-50%);
}

@keyframes companionHeartFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -72px) scale(1.1);
  }
}

.companion-image-preview__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: transform 0.2s ease;
}

.companion-image-preview__frame--comfort {
  animation: companionComfortShake 0.55s ease;
}

@keyframes companionComfortShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-3px) rotate(-1deg); }
  40% { transform: translateX(3px) rotate(1deg); }
  60% { transform: translateX(-2px) rotate(-0.5deg); }
  80% { transform: translateX(2px) rotate(0.5deg); }
}

.companion-image-preview__img--interactive {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.companion-image-preview.rarity-UR .companion-image-preview__frame {
  border-color: rgba(244, 114, 182, 0.35);
  box-shadow: 0 0 28px rgba(244, 114, 182, 0.12);
}

.companion-image-preview.rarity-SSR .companion-image-preview__frame {
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow: 0 0 28px rgba(251, 191, 36, 0.1);
}

.companion-image-preview.rarity-SR .companion-image-preview__frame {
  border-color: rgba(167, 139, 250, 0.3);
}

.companion-image-preview__img {
  width: min(280px, 72vw);
  height: min(280px, 72vw);
  object-fit: contain;
  border-radius: var(--radius);
}

/* ???????????????????????????????? */
.companion-image-preview__frame.pet-image-frame--lg {
  width: min(300px, 80vw);
  height: min(300px, 80vw);
  padding: 8px;
}
.companion-image-preview--feed .companion-image-preview__frame.pet-image-frame--lg {
  width: min(164px, 48vw);
  height: min(164px, 48vw);
}
.companion-image-preview__frame .companion-image-preview__img {
  width: 100%;
  height: 100%;
}

.companion-image-preview__img--error {
  opacity: 0.35;
}

.companion-image-preview__name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.companion-image-preview.rarity-UR .companion-image-preview__name { color: var(--rarity-ur); }
.companion-image-preview.rarity-SSR .companion-image-preview__name { color: var(--rarity-ssr); }

.companion-image-preview__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.companion-image-preview__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 14px 0 0;
}

.companion-preview-actions {
  margin: var(--space-3) 0;
}

.companion-preview-feed {
  text-align: left;
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.companion-preview-feed__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
}

.companion-preview-feed__daily {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.companion-preview-feed__empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.companion-preview-feed__workshop {
  margin-top: var(--space-3);
}

.companion-preview-feed__picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.companion-preview-feed__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.companion-preview-feed__select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-main);
}

.companion-preview-feed__limit {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: #f87171;
}

.companion-preview-bond {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

body.reduce-motion .companion-heart-float,
body.reduce-motion .companion-image-preview__frame--comfort {
  animation: none;
}

/* ??? ???? ??? */

.pet-image-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.12);
  border-radius: var(--radius);
}

.pet-image-frame--sm { width: 48px; height: 48px; }
.pet-image-frame--md { width: 80px; height: 80px; }
.pet-image-frame--lg { width: 96px; height: 96px; }

.pet-image-frame.is-loading {
  background: rgba(148, 163, 184, 0.12);
}

.pet-image-frame.is-error {
  background: linear-gradient(135deg, var(--bg-elevated), #2a2a45);
}

.pet-image-frame__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.25rem;
  pointer-events: none;
  opacity: 0.85;
}

.pet-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pet-image-frame img.is-loaded {
  opacity: 1;
}

.pet-image-frame img.is-loaded + .pet-image-frame__fallback,
.pet-image-frame.is-error .pet-image-frame__fallback {
  opacity: 0;
}

.pet-image-frame.is-error .pet-image-frame__fallback {
  opacity: 1;
  font-size: 1.25rem;
}

body.reduce-motion .pet-image-frame img {
  transition: none;
}

.pet-img {
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.pet-img--sm { width: 48px; height: 48px; }
.pet-img--md { width: 80px; height: 80px; }
.pet-img--lg { width: 96px; height: 96px; }

.pet-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-elevated), #2a2a45);
  color: var(--text-muted);
  font-size: 1.5rem;
  font-weight: 700;
}

/* ??????????????? */
.pet-img-wrap {
  position: relative;
  display: inline-flex;
  border-radius: var(--radius);
  overflow: hidden;
}

.pet-img-wrap--sm { width: 48px; height: 48px; }
.pet-img-wrap--md { width: 80px; height: 80px; }
.pet-img-wrap--lg { width: 96px; height: 96px; }

.pet-img-wrap .pet-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-img--preview {
  filter: grayscale(100%) blur(2px) brightness(0.5);
  transform: scale(1.08);
}

.pet-img-wrap--preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 26, 0.35);
  pointer-events: none;
}

.collection-card--locked .pet-img-wrap {
  opacity: 0.9;
}

/* ??? ?? ??? */

.stars {
  display: inline-flex;
  gap: 1px;
}

.star {
  color: var(--bg-elevated);
  font-size: 0.875rem;
}

.star--filled {
  color: var(--accent);
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

/* ??? ??? ??? */

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

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

.stats-row dt {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.stats-row dd {
  font-size: 1rem;
  font-weight: 700;
}

.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 24px;
}

.settings-version__mono {
  font-size: 0.68rem;
  word-break: break-all;
  line-height: 1.35;
}

.settings-version__list .stats-row dd {
  text-align: right;
}

.settings-version__note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.version-info-card,
.settings-version-card {
  display: block;
  width: 100%;
  min-height: 96px;
}

.version-info-card--compact {
  min-height: 72px;
}

.version-info-row,
.version-info-list .stats-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.version-info-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.version-info-value {
  flex: 1 1 auto;
  text-align: right;
  word-break: break-word;
  color: var(--color-text-main, var(--text-main, #e8e8f0));
  font-weight: 700;
  font-size: 1rem;
}

.version-info-value--mono {
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

.version-info-list .version-info-value--mono {
  font-size: 0.68rem;
}

.settings-version__list .version-info-value,
.settings-version__list .stats-row dd {
  text-align: right;
  color: var(--color-text-main, var(--text-main, #e8e8f0));
}

.more-version-section {
  margin-top: 12px;
}

.version-info-note {
  display: block;
  visibility: visible;
  opacity: 1;
}

@media (max-width: 430px) {
  .version-info-row,
  .version-info-list .stats-row {
    display: block;
    padding: 10px 0;
  }

  .version-info-value,
  .settings-version__list .version-info-value,
  .settings-version__list .stats-row dd {
    display: block;
    text-align: left;
    margin-top: 2px;
    width: 100%;
  }

  .version-info-card {
    min-height: 96px;
    padding: 0;
  }
}

/* ??? ???????? localhost? ??? */

.dev-tools {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.04);
}

.dev-tools__note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.dev-tools .btn--dev + .btn--dev {
  margin-top: 8px;
}

.btn--dev {
  background: rgba(251, 191, 36, 0.12);
  color: var(--accent);
  border: 1px dashed rgba(251, 191, 36, 0.4);
}

/* ??? ?? ??? */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 430px;
  max-height: 85dvh;
  overflow-y: auto;
  padding: 24px;
  padding-bottom: calc(24px + var(--safe-bottom));
  position: relative;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  cursor: pointer;
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.modal-close:active {
  color: var(--color-text-main);
  background: var(--color-bg-card-soft);
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ??? ?? ??? */

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

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-textarea,
.form-select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--bg-elevated);
  color: var(--text);
  resize: vertical;
}

.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ??? Toast ??? */

.reward-toast {
  position: fixed;
  top: calc(var(--safe-top) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.9375rem;
  z-index: 300;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}

.reward-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.reward-toast--bond {
  border-color: rgba(167, 139, 250, 0.4);
  top: calc(var(--safe-top) + 64px);
}

.reward-toast__icon {
  font-size: 1.25rem;
}

.reward-toast strong {
  color: var(--accent);
}

.reward-toast--bond strong {
  color: var(--rarity-sr);
}

.reward-toast__energy {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--success);
}

/* ??? ??? ??? */

.expedition-energy {
  margin-bottom: 16px;
  padding: 16px;
  background: linear-gradient(145deg, var(--bg-card), rgba(52, 211, 153, 0.08));
  border-color: rgba(52, 211, 153, 0.2);
}

.expedition-energy__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.expedition-energy__icon {
  font-size: 1.75rem;
}

.expedition-energy__label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.expedition-energy__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success);
}

.expedition-energy__hint {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.expedition-active-card {
  margin-bottom: 20px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.expedition-active-card__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

.expedition-active-card__body,
.expedition-status-badge,
.expedition-active-card .section-title {
  position: relative;
  z-index: 1;
}

.expedition-active-card--area-mist_forest .expedition-active-card__fx {
  background:
    radial-gradient(circle at 20% 80%, rgba(52, 211, 153, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(52, 211, 153, 0.08) 0%, transparent 40%);
  animation: mistDrift 6s ease-in-out infinite;
}

.expedition-active-card--area-mist_forest .expedition-active-card__fx::before,
.expedition-active-card--area-mist_forest .expedition-active-card__fx::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.5);
  animation: floatDot 5s ease-in-out infinite;
}

.expedition-active-card--area-mist_forest .expedition-active-card__fx::before {
  top: 30%;
  left: 15%;
}

.expedition-active-card--area-mist_forest .expedition-active-card__fx::after {
  top: 60%;
  right: 20%;
  animation-delay: 2s;
}

.expedition-active-card--area-lava_rift .expedition-active-card__fx {
  background: linear-gradient(180deg, transparent 60%, rgba(251, 146, 60, 0.08) 100%);
  animation: heatWave 3s ease-in-out infinite;
}

.expedition-active-card--area-lava_rift .expedition-active-card__fx::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fb923c;
  box-shadow: 20px 30px 0 #f97316, 60px 10px 0 rgba(251, 146, 60, 0.6), 100px 50px 0 #fb923c;
  top: 40%;
  left: 10%;
  animation: emberFloat 4s ease-in-out infinite;
  opacity: 0.7;
}

.expedition-active-card--area-machine_ruins .expedition-active-card__fx {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 8px,
    rgba(96, 165, 250, 0.04) 8px,
    rgba(96, 165, 250, 0.04) 9px
  );
  animation: scanLine 4s linear infinite;
}

.expedition-active-card--area-machine_ruins .expedition-active-card__fx::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.7);
  box-shadow: 40px 20px 0 rgba(96, 165, 250, 0.4), 80px 60px 0 rgba(96, 165, 250, 0.5);
  top: 25%;
  right: 15%;
  animation: techBlink 3s ease-in-out infinite;
}

.expedition-active-card--area-astral_rift .expedition-active-card__fx {
  background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.15) 0%, transparent 70%);
  animation: astralSpin 8s linear infinite;
}

.expedition-active-card--area-astral_rift .expedition-active-card__fx::before {
  content: '';
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 50%;
  animation: astralRing 6s ease-in-out infinite;
}

.expedition-active-card--area-polar_shore .expedition-active-card__fx {
  background:
    linear-gradient(160deg, rgba(103, 232, 249, 0.1) 0%, transparent 55%),
    linear-gradient(340deg, rgba(167, 139, 250, 0.08) 0%, transparent 50%);
  animation: polarAurora 5s ease-in-out infinite;
}

.expedition-active-card--area-polar_shore .expedition-active-card__fx::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  top: 35%;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.5), transparent);
  animation: auroraSweep 4s ease-in-out infinite;
}

.expedition-active-card--area-harvest_fields .expedition-active-card__fx {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.06) 0%, transparent 45%);
  animation: harvestSway 6s ease-in-out infinite;
}

.expedition-active-card--area-harvest_fields .expedition-active-card__fx::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 10%;
  right: 10%;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.35) 0,
    rgba(251, 191, 36, 0.35) 8px,
    transparent 8px,
    transparent 16px
  );
  opacity: 0.6;
}

@keyframes mistDrift {
  0%, 100% { opacity: 0.45; transform: translateX(0); }
  50% { opacity: 0.65; transform: translateX(4px); }
}

@keyframes floatDot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-8px); opacity: 0.8; }
}

@keyframes heatWave {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-3px); opacity: 0.7; }
}

@keyframes emberFloat {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-6px); opacity: 0.9; }
}

@keyframes scanLine {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

@keyframes techBlink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

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

@keyframes astralRing {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.08); opacity: 0.6; }
}

@keyframes polarAurora {
  0%, 100% { opacity: 0.5; filter: hue-rotate(0deg); }
  50% { opacity: 0.75; filter: hue-rotate(15deg); }
}

@keyframes auroraSweep {
  0%, 100% { transform: translateX(-20%) scaleX(0.8); opacity: 0.3; }
  50% { transform: translateX(20%) scaleX(1.2); opacity: 0.7; }
}

@keyframes harvestSway {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.expedition-active-card--glow {
  animation: expedition-glow 2.5s ease-in-out infinite;
  border-color: rgba(124, 92, 255, 0.35);
}

.expedition-active-card--ready {
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.15);
}

@keyframes expedition-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(124, 92, 255, 0.15); }
  50% { box-shadow: 0 0 18px rgba(124, 92, 255, 0.35); }
}

.expedition-active-card__body {
  margin-top: 12px;
}

.expedition-active-card__pet {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.expedition-active-card__pet-img {
  flex-shrink: 0;
}

.expedition-pet-img--float img,
.expedition-pet-img--float .pet-img {
  animation: expeditionPetFloat 3s ease-in-out infinite;
}

.expedition-pet-img--complete img,
.expedition-pet-img--complete .pet-img {
  animation: expeditionPetComplete 0.8s ease;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.35);
  border-radius: 12px;
}

@keyframes expeditionPetFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes expeditionPetComplete {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.03); }
}

.expedition-active-card__status-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.expedition-status-log {
  font-size: 0.8125rem;
  color: var(--text);
  font-style: italic;
  text-align: center;
  min-height: 2.5em;
  margin-bottom: 10px;
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

.expedition-status-log--changing {
  opacity: 0.35;
}

.expedition-complete-msg {
  font-size: 0.875rem;
  color: var(--success);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.5;
  font-weight: 600;
}

.expedition-countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.expedition-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulseDot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

.expedition-active-card__name {
  font-weight: 600;
  font-size: 1rem;
}

.expedition-active-card__area {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.expedition-active-card__times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.75rem;
}

.expedition-active-card__times dt {
  color: var(--text-muted);
}

.expedition-countdown {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.expedition-countdown__label {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.expedition-claim-btn {
  animation: claim-pulse 1.5s ease-in-out infinite;
}

.expedition-claim-btn--glow {
  animation: claim-glow 1.8s ease-in-out infinite;
}

@keyframes claim-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(52, 211, 153, 0.25); transform: scale(1); }
  50% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.5); transform: scale(1.02); }
}

@keyframes claim-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); box-shadow: 0 0 16px rgba(52, 211, 153, 0.4); }
}

.expedition-areas {
  margin-bottom: 20px;
}

.expedition-area-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.expedition-area-card {
  padding: 14px;
  transition: border-color 0.15s, transform 0.15s;
}

.expedition-area-card--locked {
  opacity: 0.65;
}

.expedition-area-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.expedition-area-card__header h3 {
  font-size: 1rem;
}

.expedition-area-card__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.expedition-area-card__meta {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  margin-bottom: 6px;
}

.expedition-area-card__rewards {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.expedition-area-card__unlock {
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 8px;
}

.expedition-pets {
  margin-bottom: 24px;
}

.expedition-reward-modal--animate {
  animation: modal-fade-in 0.35s ease;
}

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

.expedition-reward-modal__pet {
  text-align: center;
  margin: 12px 0;
}

.expedition-reward-list {
  list-style: none;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expedition-reward-list li {
  font-size: 0.9375rem;
}

.expedition-bonus {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.expedition-bonus-detail {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.expedition-levelup {
  font-size: 0.875rem;
  color: var(--rarity-sr);
  margin-bottom: 12px;
  text-align: center;
}

/* ??? ???? ??? */

.update-banner {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: calc(100% - 32px);
  max-width: 398px;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  color: var(--text);
  padding: 12px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 250;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: var(--shadow-lg);
}

.update-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.update-banner__text {
  font-size: 0.875rem;
  font-weight: 600;
}

/* ???????????????????????????????????????
   v1.3 ????
   ??????????????????????????????????????? */

/* ??? Toast ?? ??? */

.toast-container {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 350;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 32px);
  max-width: 398px;
  pointer-events: none;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 12px 18px;
  border-radius: var(--radius-card);
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast--success { border-color: rgba(52, 211, 153, 0.35); }
.toast--error { border-color: rgba(248, 113, 113, 0.35); }
.toast--warning { border-color: rgba(251, 191, 36, 0.35); }
.toast--info { border-color: rgba(124, 92, 255, 0.35); }
.toast--reward { border-color: rgba(251, 191, 36, 0.35); }

.toast__icon { font-size: 1.125rem; flex-shrink: 0; }
.toast__message { line-height: 1.5; }

/* ??? ??? ??? */

.empty-state {
  text-align: center;
  padding: 36px 20px;
  background: var(--bg-card-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  animation: fadeIn 0.3s ease;
}

.empty-state__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
  opacity: 0.6;
}

.empty-state__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.empty-state__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ??? ?????? ??? */

.task-card__rewards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.task-reward-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.task-reward-tag--stardust { color: var(--accent-warning); }
.task-reward-tag--energy { color: var(--accent-success); }

.task-card__done-info {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.task-card__complete-btn {
  margin-left: auto;
}

/* ??? Segmented Control ??? */

.segmented-control {
  display: flex;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 3px;
  gap: 3px;
}

.segmented-control__btn {
  flex: 1;
  padding: 10px 8px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.segmented-control__btn.active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.segmented-control__btn--urgent.active { color: var(--priority-urgent); }
.segmented-control__btn--important.active { color: var(--priority-important); }

.form-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.form-hint {
  font-size: 0.75rem;
  color: var(--accent-warning);
  margin-top: -4px;
}

/* ??? ????? ??? */

.gacha-hint {
  font-size: 0.8125rem;
  color: var(--accent-warning);
  margin-top: 10px;
  text-align: center;
}

.gacha-hint:not([hidden]) + .btn--gacha {
  margin-top: 6px;
}

/* Legacy Summon Result - Deprecated?10 ???? UI? */

.ten-pull-result {
  text-align: center;
  position: relative;
}

.ten-pull-result--UR { box-shadow: inset 0 0 80px rgba(232, 121, 249, 0.12); }
.ten-pull-result--SSR { box-shadow: inset 0 0 60px rgba(167, 139, 250, 0.12); }
.ten-pull-result--SR { box-shadow: inset 0 0 40px rgba(96, 165, 250, 0.1); }

.ten-pull-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0;
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-1);
}

@media (min-width: 380px) {
  .ten-pull-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
  }
}

.ten-pull-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-1);
  text-align: center;
  opacity: 0;
  animation: tenCardIn var(--duration-slow) ease forwards;
}

.ten-pull-card.rarity-R { border-color: rgba(52, 211, 153, 0.35); }
.ten-pull-card.rarity-SR { border-color: rgba(96, 165, 250, 0.4); }
.ten-pull-card.rarity-SSR {
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.2);
}
.ten-pull-card.rarity-UR {
  border-color: rgba(232, 121, 249, 0.55);
  box-shadow: 0 0 16px rgba(232, 121, 249, 0.25);
}

@keyframes tenCardIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.ten-pull-card__name {
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-top: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ten-pull-card__badge {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-success);
  display: block;
  margin-top: 2px;
}

.ten-pull-card__frag {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: block;
  margin-top: 2px;
}

.ten-pull-card__pity {
  font-size: var(--font-size-xs);
  color: var(--color-warning);
  display: block;
  margin-top: 2px;
}

.ten-pull-summary {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px 0 16px;
  text-align: left;
  font-size: 0.8125rem;
}

.ten-pull-summary li {
  padding: 4px 0;
  color: var(--text-muted);
}

.ten-pull-summary strong { color: var(--text-main); }

.pull-result__pity-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.15);
  color: var(--accent-warning);
  margin-bottom: 8px;
}

/* ??? ?????? ??? */

.collection-companion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.collection-companion__label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.collection-companion__name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.collection-companion--empty {
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* ??? ?????? ??? */

.expedition-area-card--mist_forest {
  background: linear-gradient(145deg, var(--bg-card), rgba(52, 211, 153, 0.06));
  border-color: rgba(52, 211, 153, 0.2);
}

.expedition-area-card--lava_rift {
  background: linear-gradient(145deg, var(--bg-card), rgba(239, 68, 68, 0.08));
  border-color: rgba(239, 68, 68, 0.25);
}

.expedition-area-card--machine_ruins {
  background: linear-gradient(145deg, var(--bg-card), rgba(96, 165, 250, 0.08));
  border-color: rgba(96, 165, 250, 0.25);
}

.expedition-area-card--astral_rift {
  background: linear-gradient(145deg, var(--bg-card), rgba(167, 139, 250, 0.1));
  border-color: rgba(232, 121, 249, 0.25);
}

.expedition-area-card--polar_shore {
  background: linear-gradient(145deg, var(--bg-card), rgba(103, 232, 249, 0.08));
  border-color: rgba(103, 232, 249, 0.25);
}

.expedition-area-card--harvest_fields {
  background: linear-gradient(145deg, var(--bg-card), rgba(251, 191, 36, 0.08));
  border-color: rgba(251, 191, 36, 0.25);
}

.expedition-status-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.expedition-status-badge--active {
  background: rgba(124, 92, 255, 0.15);
  color: var(--accent-primary);
}

.expedition-status-badge--ready {
  background: rgba(52, 211, 153, 0.15);
  color: var(--accent-success);
}

.expedition-energy--low {
  border-color: rgba(248, 113, 113, 0.3);
  background: linear-gradient(145deg, var(--bg-card), rgba(248, 113, 113, 0.06));
}

.expedition-energy__warning {
  font-size: 0.8125rem;
  color: var(--accent-danger);
  margin-top: 8px;
}

/* ??? ????? ??? */

.section-title--danger { color: var(--accent-danger); }

.settings-section-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.settings-danger {
  border-color: rgba(248, 113, 113, 0.2);
}

.settings-backup,
.settings-stats,
.settings-danger,
.settings-preferences {
  margin-bottom: 16px;
}

.settings-backup__intro {
  margin-bottom: 12px;
}

.settings-backup__actions {
  margin-bottom: 16px;
}

.settings-backup__import {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-backup__hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.settings-backup__hint--loading {
  color: var(--accent-primary);
}

.settings-backup__hint--error {
  color: var(--accent-danger);
}

.import-preview {
  margin-top: 4px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.45);
}

.import-preview__warning {
  font-size: 0.8125rem;
  color: #fbbf24;
  line-height: 1.5;
  margin-bottom: 12px;
}

.import-preview__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}

.import-preview__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.import-preview__row dt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.import-preview__row dd {
  font-size: 0.8125rem;
  color: var(--text);
  text-align: right;
  margin: 0;
  word-break: break-all;
}

.import-preview__danger-note {
  font-size: 0.8125rem;
  color: var(--accent-danger);
  line-height: 1.5;
  margin-bottom: 12px;
}

.import-success-panel {
  margin-top: 4px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.25);
  background: rgba(16, 185, 129, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.import-success-panel__text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6ee7b7;
}

.import-success-panel__subtext {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ??? ????????? ??? */

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.settings-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.settings-toggle__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.settings-toggle__desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.settings-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.settings-toggle__switch {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
}

.settings-toggle__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.settings-toggle__input:checked + .settings-toggle__switch {
  background: var(--primary-light);
  border-color: var(--primary);
}

.settings-toggle__input:checked + .settings-toggle__switch::after {
  transform: translateX(20px);
  background: var(--primary);
}

/* ??? ???? ??? */

.confirm-modal {
  text-align: center;
}

.confirm-modal__icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.confirm-modal__text {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.confirm-modal__actions {
  display: flex;
  gap: 10px;
}

.confirm-modal__actions .btn { flex: 1; }

/* ??? ???? contain ?? ??? */

.companion-card__image .pet-img,
.companion-card__image .pet-img-wrap {
  object-fit: contain;
}

.companion-card__image .pet-img--lg,
.companion-card__image .pet-img-wrap--lg,
.companion-card__image .pet-image-frame--lg {
  width: 88px;
  height: 88px;
}

.pet-img--contain {
  object-fit: contain !important;
}

.collection-card__image .pet-img,
.collection-card__image .pet-img-wrap .pet-img,
.collection-card__image .pet-image-frame {
  object-fit: contain;
}

.rarity-N { background: rgba(156, 163, 175, 0.15); color: var(--rarity-n); }
.rarity-R { background: rgba(52, 211, 153, 0.15); color: var(--rarity-r); }
.rarity-SR { background: rgba(96, 165, 250, 0.15); color: var(--rarity-sr); }
.rarity-SSR { background: rgba(167, 139, 250, 0.15); color: var(--rarity-ssr); }
.rarity-UR { background: rgba(232, 121, 249, 0.15); color: var(--rarity-ur); }

.collection-card.rarity-R { border-color: rgba(52, 211, 153, 0.3); }
.collection-card.rarity-UR {
  border-color: rgba(232, 121, 249, 0.4);
  background: linear-gradient(145deg, var(--bg-card), rgba(232, 121, 249, 0.06));
}

.companion-card.rarity-UR { border-color: rgba(232, 121, 249, 0.4); }
.companion-card.rarity-SSR { border-color: rgba(167, 139, 250, 0.35); }

.card {
  animation: fadeIn 0.25s ease;
}

.companion-card:active {
  transform: scale(0.98);
}

/* ??? ?????? ??? */

body.reduce-motion .companion-card--breathe,
body.reduce-motion .expedition-active-card--glow,
body.reduce-motion .expedition-pet-img--float img,
body.reduce-motion .expedition-pet-img--float .pet-img,
body.reduce-motion .expedition-pulse-dot,
body.reduce-motion .expedition-claim-btn,
body.reduce-motion .expedition-claim-btn--glow,
body.reduce-motion .expedition-active-card__fx,
body.reduce-motion .expedition-active-card__fx::before,
body.reduce-motion .expedition-active-card__fx::after,
body.reduce-motion .card-animate,
body.reduce-motion .card,
body.reduce-motion .btn--gacha,
/* Legacy Summon Result - Deprecated?reduce-motion? */
body.reduce-motion .pull-result--animate,
body.reduce-motion .ten-pull-card {
  animation: none !important;
}

body.reduce-motion .companion-bubble,
body.reduce-motion .companion-bubble__text--show {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.reduce-motion .expedition-active-card--ready {
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
}

body.reduce-motion * {
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .companion-card--breathe,
  .expedition-active-card--glow,
  .expedition-pet-img--float img,
  .expedition-pulse-dot,
  .expedition-claim-btn--glow {
    animation: none !important;
  }
}

/* ??? ?? / ???? ??? */

.page-header--with-back {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.page-header--with-back .page-header__inner {
  flex: 1;
  min-width: 0;
}

.page-back-btn {
  background: var(--color-bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 2px;
}

.page-back-btn:active {
  color: var(--primary);
}

.achievement-strip {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.achievement-strip:active {
  transform: scale(0.99);
}

.achievement-strip__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.achievement-strip__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.achievement-strip__text {
  flex: 1;
  min-width: 0;
}

.achievement-strip__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.achievement-strip__desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.achievement-strip__badge {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  flex-shrink: 0;
}

.achievement-strip__arrow {
  color: var(--text-muted);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.companion-card__player-title {
  font-size: 0.75rem;
  color: var(--primary);
  margin: 2px 0 6px;
  opacity: 0.9;
}

.more-menu {
  padding: var(--space-1) 0;
  overflow: hidden;
}

.more-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.more-menu-item:last-child {
  border-bottom: none;
}

.more-menu-item:active {
  background: rgba(167, 139, 250, 0.06);
}

.more-menu-icon {
  font-size: 1.375rem;
  flex-shrink: 0;
}

.more-menu-text {
  flex: 1;
  min-width: 0;
}

.more-menu-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.more-menu-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.more-menu-arrow {
  color: var(--text-muted);
  font-size: 1.25rem;
}

.more-menu-badge {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  flex-shrink: 0;
}

.more-menu-badge[hidden] {
  display: none;
}

.share-card,
.share-install {
  margin-bottom: 16px;
}

.share-card .settings-section-note,
.share-install p {
  line-height: 1.6;
}

.share-invitation {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card-soft);
}

.share-invitation img { border-radius: 12px; }
.share-invitation__name { margin: 12px 0 8px; font-weight: 700; }
.share-invitation__description { font-size: 1.125rem; line-height: 1.65; }
.share-destinations { display: grid; gap: 10px; margin-top: 20px; }
.share-destinations .share-link { font-size: 0.875rem; text-decoration: none; }
.share-link strong, .share-link span { display: block; }
.share-link span { margin-top: 6px; color: var(--text-secondary); line-height: 1.6; }
.share-message summary { cursor: pointer; min-height: 44px; padding: 12px 0; }
.share-message p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; user-select: text; }

.share-actions {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.share-link {
  display: block;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--accent-primary);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.share-install p {
  margin-top: 12px;
  font-size: 0.875rem;
}

.share-install .share-install__note {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.achievement-summary {
  margin-bottom: var(--space-3);
  padding: var(--space-4);
}

.achievement-title-bar {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.achievement-summary__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.achievement-summary__stat {
  text-align: center;
}

.achievement-summary__label {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.achievement-summary__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.achievement-summary__value--claimable {
  color: #34d399;
}

.progress-bar__fill--achievement {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.achievement-summary__actions {
  margin-top: var(--space-3);
}

.achievement-summary__actions .btn--claim-all {
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 8px 20px rgba(52, 211, 153, 0.15);
}

.achievement-summary__actions .btn {
  font-weight: 600;
}

.achievement-title-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.achievement-title-bar__label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin: 0;
}

.achievement-title-bar__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
  margin: 2px 0 0;
}

.filter-bar--achievements {
  margin-bottom: 12px;
  flex-wrap: wrap;
  max-height: none;
}

.achievement-list {
  padding-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.achievement-card {
  padding: 14px 16px;
}

.achievement-card--claimable {
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.08);
}

.achievement-card--claimed {
  opacity: 0.85;
}

.achievement-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.achievement-card__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.achievement-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.achievement-card__category {
  display: inline-block;
  font-size: 0.625rem;
  color: var(--text-muted);
  background: rgba(167, 139, 250, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

.achievement-card__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.45;
}

.achievement-card__progress {
  margin-bottom: 10px;
}

.achievement-card__progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.achievement-card__rewards {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.achievement-card__rewards p {
  margin: 0 0 2px;
}

.achievement-card__reward-label {
  color: var(--text);
  font-weight: 500;
}

.achievement-card__footer {
  display: flex;
  justify-content: flex-end;
}

.achievement-card__status {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
}

.achievement-card__status--done {
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
}

.achievement-card__status--locked {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
}

.achievement-error {
  text-align: center;
  color: var(--text-muted);
  padding: 8px 0;
  margin: 0;
}

.title-modal__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: -8px 0 16px;
}

.title-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 12px;
}

.title-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.title-item--locked {
  opacity: 0.5;
}

.title-item--equipped {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.06);
}

.title-item__info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.title-item__name {
  font-size: 0.875rem;
  font-weight: 500;
}

.title-item__badge {
  font-size: 0.625rem;
  color: var(--primary);
  background: rgba(167, 139, 250, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.title-item__lock {
  font-size: 0.875rem;
  opacity: 0.6;
}

body.reduce-motion .achievement-strip:active {
  transform: none;
}

/* ???????????????????????????????????????
   v1.6 ? ???? ? ???? ? ??
   ??????????????????????????????????????? */

body.modal-open {
  overflow: hidden;
  touch-action: none;
}

body.modal-open .app {
  pointer-events: none;
}

body.modal-open .modal-overlay {
  pointer-events: auto;
}

/* ???? */
.error-state {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: var(--radius-lg);
}

.error-state__icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-danger);
}

.error-state__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: var(--space-2);
}

.error-state__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}

/* ???? */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
}

.loading-state__spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-state__text {
  font-size: var(--font-size-sm);
}

.skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.skeleton-line {
  height: 14px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-bg-card-soft) 50%, var(--color-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

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

body.reduce-motion .skeleton-line,
body.reduce-motion .loading-state__spinner {
  animation: none !important;
}

/* ???????? */
.notification-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-danger);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  flex-shrink: 0;
}

.notification-dot--hint {
  background: var(--color-secondary);
  box-shadow: 0 0 5px rgba(167, 139, 250, 0.4);
}

/* ????? */
.stat-card--claimable {
  border-color: rgba(52, 211, 153, 0.25);
  background: linear-gradient(145deg, var(--color-bg-card), rgba(52, 211, 153, 0.06));
}

.stat-card--claimable .stat-value {
  color: var(--color-success);
}

.stat-card--claimable.stat-card--highlight {
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.15);
}

/* ?????? */
.gacha-hero {
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
  margin-bottom: var(--space-2);
}

.gacha-hero__symbol {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 0 12px rgba(124, 92, 255, 0.4));
}

.gacha-hero__tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.gacha-panel {
  position: relative;
  overflow: hidden;
}

.gacha-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124, 92, 255, 0.08) 0%, transparent 55%);
  pointer-events: none;
}

.gacha-panel > * {
  position: relative;
  z-index: 1;
}

/* ?????? */
.bottom-nav {
  background: rgba(22, 22, 37, 0.96);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

.nav-item {
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-1);
  min-height: var(--tap-min);
}

.nav-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ?????? */
.task-card__complete-btn.btn--primary {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
}

/* ?????? */
.expedition-start-hint {
  font-size: var(--font-size-sm);
  color: var(--color-warning);
  text-align: center;
  margin-top: var(--space-2);
  line-height: 1.45;
}

/* ?????? */
.settings-stats .stats-row dd {
  color: var(--color-text-main);
  font-variant-numeric: tabular-nums;
}

/* Toast ???? default ??????? sweet? */
body[data-theme="default"] .toast--success {
  background: linear-gradient(135deg, var(--color-bg-card), rgba(52, 211, 153, 0.06));
}

body[data-theme="default"] .toast--error {
  background: linear-gradient(135deg, var(--color-bg-card), rgba(248, 113, 113, 0.06));
}

body[data-theme="default"] .toast--warning {
  background: linear-gradient(135deg, var(--color-bg-card), rgba(251, 191, 36, 0.06));
}

body[data-theme="default"] .toast--info {
  background: linear-gradient(135deg, var(--color-bg-card), rgba(124, 92, 255, 0.06));
}

/* ???? token ?? */
.expedition-area-card--mist_forest {
  border-color: color-mix(in srgb, var(--expedition-forest) 25%, transparent);
}

.expedition-area-card--lava_rift {
  border-color: color-mix(in srgb, var(--expedition-lava) 30%, transparent);
}

.expedition-area-card--machine_ruins {
  border-color: color-mix(in srgb, var(--expedition-machine) 30%, transparent);
}

.expedition-area-card--astral_rift {
  border-color: color-mix(in srgb, var(--expedition-astral) 30%, transparent);
}

/* ????? */
.text-caption { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.text-body { font-size: var(--font-size-md); line-height: 1.5; }
.text-card-title { font-size: var(--font-size-lg); font-weight: 600; }
.text-stat { font-size: var(--font-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ??? QuestNote v1.7 ?????? ??? */

.task-view-tabs {
  margin: var(--space-3) 0 var(--space-2);
}

.task-view-content {
  padding: 0 0 calc(var(--nav-height) + var(--space-16));
}

.filter-bar--categories {
  margin: 0 0 var(--space-3);
}

.section-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ?????? */
.today-plan-summary {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.today-plan-summary__inner {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.today-plan-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.today-plan-summary__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.today-plan-summary__value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-main);
}

.today-plan-summary__stat--warn .today-plan-summary__value {
  color: var(--color-danger);
}

/* ?? badge */
.badge--category {
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge--category-gray { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.badge--category-blue { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.badge--category-purple { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
.badge--category-green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.badge--category-red { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.badge--category-gold { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }

/* ?? badge */
.badge--date {
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge--date-none { background: rgba(100, 116, 139, 0.12); color: var(--color-text-muted); }
.badge--date-overdue { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.badge--date-today { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.badge--date-tomorrow { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.badge--date-upcoming { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
.badge--date-future { background: rgba(100, 116, 139, 0.12); color: var(--color-text-muted); }
.badge--date-done { background: rgba(100, 116, 139, 0.1); color: var(--color-text-muted); }

.badge--today-plan {
  background: rgba(124, 92, 255, 0.18);
  color: var(--color-primary-light);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

/* ??? */
.task-card__subtasks {
  margin: var(--space-2) 0;
}

.task-card__subtask-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.progress-bar--subtask {
  flex: 1;
  height: 4px;
}

.task-card__subtask-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.subtask-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.subtask-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.subtask-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  background: transparent;
  color: var(--color-success);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.subtask-check.checked {
  border-color: var(--color-success);
  background: rgba(52, 211, 153, 0.15);
}

.subtask-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-main);
  line-height: 1.45;
  word-break: break-word;
}

.subtask-item--done .subtask-text {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* ???? */
.smart-list-hub {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.smart-list-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  width: 100%;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.smart-list-card:active {
  background: var(--color-bg-elevated);
}

.smart-list-card__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.smart-list-card__body {
  flex: 1;
  min-width: 0;
}

.smart-list-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--color-text-main);
}

.smart-list-card__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.smart-list-card__count {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary-light);
  font-variant-numeric: tabular-nums;
}

.smart-list-card__arrow {
  color: var(--color-text-muted);
  font-size: 1.25rem;
}

.smart-list-back {
  margin-bottom: var(--space-3);
}

.smart-list-detail .section-title {
  padding: 0;
  margin-bottom: var(--space-1);
}

/* ???? */
.form-select {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-main);
  font-size: var(--font-size-md);
  min-height: var(--tap-min);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin: 0;
}

.form-toggle {
  margin: var(--space-3) 0;
}

.subtask-form-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.subtask-form-item {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.subtask-form-item .form-input {
  flex: 1;
}

.subtask-form-add {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.subtask-form-add .form-input {
  flex: 1;
}

.subtask-form-remove {
  flex-shrink: 0;
  min-width: 36px;
  padding: var(--space-2);
}

.task-card__meta {
  flex-wrap: wrap;
  gap: var(--space-1);
}

.task-card__actions {
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ??? ???? ??? */

.habit-summary {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color var(--duration-fast);
}

.habit-summary:active {
  border-color: var(--color-primary);
}

.habit-summary__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.habit-summary__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.habit-summary__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.habit-summary__label {
  color: var(--color-text-muted);
}

.habit-summary__value {
  font-weight: 700;
  color: var(--color-text-main);
}

.habit-summary__cta {
  font-size: var(--font-size-xs);
  color: var(--color-primary-light);
  font-weight: 600;
  white-space: nowrap;
}

.habit-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}

.habit-stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.habit-stat-card--wide {
  grid-column: 1 / -1;
}

.habit-stat-card__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.habit-stat-card__value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-main);
  font-variant-numeric: tabular-nums;
}

.habit-stat-card__value--streak {
  color: #f59e0b;
}

.habit-view-content {
  padding: 0 var(--space-4) calc(var(--space-8) + 72px);
}

.habit-section {
  margin-bottom: var(--space-4);
}

.habit-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.habit-section__title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0;
}

.habit-section__hint {
  position: relative;
}

.habit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.habit-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.habit-card--done {
  border-color: rgba(52, 211, 153, 0.35);
}

.habit-card--completing {
  animation: habit-complete-bounce 0.45s ease;
}

@keyframes habit-complete-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.habit-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.habit-card__name {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin: 0;
  color: var(--color-text-main);
}

.habit-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.45;
}

.habit-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.badge--habit-freq {
  background: rgba(124, 92, 255, 0.15);
  color: var(--color-primary-light);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.habit-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.habit-card__streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  font-weight: 600;
}

.habit-card__streak-glow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  animation: streak-glow 2s ease-in-out infinite;
}

@keyframes streak-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.habit-card__progress {
  font-variant-numeric: tabular-nums;
}

.habit-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.habit-card__status {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-success);
  margin-bottom: var(--space-2);
}

.habit-archived-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-bottom: var(--space-3);
}

.habit-done-banner {
  text-align: center;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: var(--radius-lg);
}

.habit-done-banner__title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-success);
  margin: 0 0 var(--space-1);
}

.habit-done-banner__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

body.reduce-motion .habit-card--completing,
body.reduce-motion .habit-card__streak-glow {
  animation: none;
}

body.reduce-motion .task-card--just-done,
body.reduce-motion .task-card--completing {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .habit-card--completing,
  .habit-card__streak-glow {
    animation: none;
  }
}

/* ??? V1.9 ??????Quick Add ??? */

.task-action-bar {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.task-action-bar__row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.task-action-bar__input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  font-size: var(--font-size-md);
}

.task-action-bar__add {
  flex-shrink: 0;
  min-height: 42px;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.task-action-bar__search {
  flex-shrink: 0;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.quick-add-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.quick-add-preview__item {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

.tag-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-chips-row--form {
  margin-top: var(--space-2);
}

.tag-chips-row--popular {
  margin-bottom: var(--space-2);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: var(--radius-full);
  cursor: pointer;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.tag-chip--card {
  font-size: 0.6875rem;
  padding: 2px 8px;
  cursor: pointer;
}

.tag-chip--more {
  cursor: default;
  opacity: 0.7;
}

.tag-chip--selectable.tag-chip--active,
.tag-chip--selected {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
}

.tag-chip__count {
  opacity: 0.65;
  font-size: 0.625rem;
}

.tag-chip__remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.7;
}

.tag-chip__remove:hover {
  opacity: 1;
}

.task-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-2);
}

.popular-tags-section {
  margin-bottom: var(--space-3);
}

.smart-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(99, 102, 241, 0.08);
  border-radius: var(--radius-md);
  border-left: 3px solid rgba(99, 102, 241, 0.4);
}

.search-modal__input {
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-md);
}

.search-results {
  max-height: 55vh;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}

.search-results__limit {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-2);
}

.search-results__section {
  margin-bottom: var(--space-4);
}

.search-results__heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.search-result-card {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.search-result-card:hover {
  border-color: rgba(99, 102, 241, 0.35);
}

.search-result-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.search-result-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin: 0;
}

.search-result-card__title mark,
.search-result-card__preview mark {
  background: rgba(251, 191, 36, 0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

.search-result-card__preview {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
}

.search-result-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.search-result-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-chip--sm {
  font-size: 0.625rem;
  padding: 1px 6px;
}

.search-result-card__status {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.badge--done {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* ??? ???? ??? */

.workshop-summary {
  margin-bottom: var(--space-3);
}

.workshop-summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.workshop-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workshop-summary__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.workshop-summary__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent);
}

.workshop-summary__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.segmented-control--workshop {
  margin-bottom: var(--space-3);
}

.workshop-content {
  padding-bottom: var(--space-6);
}

.workshop-material-list,
.workshop-craft-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.workshop-material-card--empty {
  opacity: 0.65;
}

.workshop-material-card__header,
.workshop-craft-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.workshop-material-card__header h3,
.workshop-craft-card__header h3 {
  margin: 0;
  font-size: var(--font-size-md);
}

.workshop-material-card__qty {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
}

.workshop-material-card__desc,
.workshop-craft-card__effect {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.workshop-material-card__source {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.workshop-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workshop-tag {
  font-size: 0.625rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
}

.workshop-craft-card__favorite {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  color: #fbbf24;
}

.workshop-recipe-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workshop-recipe-list li {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
}

.workshop-recipe-list__item--missing {
  color: #f87171;
}

.workshop-craft-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.workshop-craft-card--success {
  animation: workshopCraftGlow 0.8s ease;
}

@keyframes workshopCraftGlow {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 20px rgba(167, 139, 250, 0.35); }
}

.workshop-gift-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.workshop-gift-section {
  padding: var(--space-3);
}

.workshop-gift-pet-list,
.workshop-gift-item-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workshop-gift-pet,
.workshop-gift-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.workshop-gift-pet--selected,
.workshop-gift-item--selected {
  border-color: var(--color-accent);
  background: rgba(167, 139, 250, 0.1);
}

.workshop-gift-pet__img {
  flex-shrink: 0;
}

.workshop-gift-pet__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.workshop-gift-pet__name,
.workshop-gift-item__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.workshop-gift-pet__meta,
.workshop-gift-item__effect {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.workshop-gift-pet__companion {
  font-size: 0.625rem;
  color: var(--color-accent);
}

.workshop-gift-pet__reason {
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.workshop-gift-pet:disabled,
.workshop-gift-item:disabled {
  opacity: 0.6;
  cursor: default;
}

.workshop-gift-pet__name {
  overflow-wrap: anywhere;
}

.workshop-gift-others {
  margin-top: var(--space-3);
}

.workshop-gift-others summary {
  cursor: pointer;
  padding: var(--space-2) 0;
}

.workshop-gift-status {
  padding: var(--space-3);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.workshop-craft-card__source,
.workshop-craft-card__desc,
.workshop-gift-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.workshop-gift-item {
  flex-direction: column;
  align-items: flex-start;
}

.workshop-gift-item__stock {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
}

.workshop-gift-preview__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-size-sm);
}

.workshop-gift-preview__levelup {
  color: #fbbf24;
}

.workshop-gift-preview__limit {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: #f87171;
}

.workshop-gift-preview--favorite {
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.25);
}

.workshop-gift-pet--bounce {
  animation: workshopPetBounce 0.6s ease;
}

@keyframes workshopPetBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

.expedition-reward-modal__workshop-hint {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

body.reduce-motion .workshop-craft-card--success,
body.reduce-motion .workshop-gift-pet--bounce {
  animation: none;
}

/* ??? ???? ??? */

.pet-original-name {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pet-original-name--sm {
  font-size: 0.6875rem;
}

.pet-original-name--xs {
  display: block;
  font-size: 0.625rem;
  margin-top: 2px;
}

.pet-original-name--center {
  text-align: center;
  margin-bottom: var(--space-2);
}

.companion-card__name-wrap {
  min-width: 0;
}

.pet-detail__nickname {
  margin-top: var(--space-3);
  padding: var(--space-3);
  text-align: left;
}

.pet-detail__display-name {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.pet-detail__nickname-empty {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pet-detail__nickname-empty--center {
  text-align: center;
}

.pet-detail__nickname-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.collection-card--nickname-glow {
  animation: workshopCraftGlow 0.8s ease;
}

.nickname-modal {
  max-width: 100%;
}

.nickname-modal__pet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.nickname-modal__original,
.nickname-modal__current {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.nickname-modal__current--empty {
  font-style: italic;
}

.nickname-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.nickname-modal__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.nickname-modal__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: var(--color-text);
}

.nickname-modal__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.nickname-modal__counter {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
}

.nickname-modal__counter--over {
  color: #f87171;
}

.nickname-modal__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.nickname-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

body.reduce-motion .collection-card--nickname-glow {
  animation: none;
}

/* ???????????????????????????????????????
   V2.1.4 ? Default ???? UI ??
   ???? body[data-theme="default"] ? :root ??
   ??????????????????????????????????????? */

body[data-theme="default"] {
  --color-bg-main: #080B16;
  --color-bg-surface: #0E1324;
  --color-bg-card: #141A2E;
  --color-bg-card-soft: #18203A;
  --color-bg-elevated: #1D2540;
  --color-text-main: #F4F7FF;
  --color-text-secondary: #C7D2EA;
  --color-text-muted: #9BA8C7;
  --color-text-soft: #7F8CAF;
  --color-text-disabled: #5F6B86;
  --color-text-inverse: #080B16;
  --color-primary: #8B5CF6;
  --color-primary-hover: #7C3AED;
  --color-primary-soft: rgba(139, 92, 246, 0.18);
  --color-primary-light: #C4B5FD;
  --color-primary-border: rgba(167, 139, 250, 0.42);
  --color-secondary: #22D3EE;
  --color-secondary-hover: #06B6D4;
  --color-secondary-soft: rgba(34, 211, 238, 0.14);
  --color-accent: #FBBF24;
  --color-accent-hover: #F59E0B;
  --color-accent-soft: rgba(251, 191, 36, 0.16);
  --color-success: #34D399;
  --color-success-hover: #10B981;
  --color-success-soft: rgba(52, 211, 153, 0.15);
  --color-danger: #FB7185;
  --color-danger-hover: #F43F5E;
  --color-danger-soft: rgba(251, 113, 133, 0.16);
  --color-warning: #F59E0B;
  --color-warning-soft: rgba(245, 158, 11, 0.16);
  --color-border: rgba(148, 163, 184, 0.22);
  --color-border-soft: rgba(148, 163, 184, 0.14);
  --color-divider: rgba(148, 163, 184, 0.16);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.46);
  --shadow-glow: 0 0 28px rgba(139, 92, 246, 0.32);
  --rarity-n: #94A3B8;
  --rarity-r: #38BDF8;
  --rarity-sr: #A78BFA;
  --rarity-ssr: #FBBF24;
  --rarity-ur: #F472B6;
  --priority-normal: #34D399;
  --priority-important: #FBBF24;
  --priority-urgent: #FB7185;
  --bg-gradient: linear-gradient(165deg, #080B16 0%, #0E1324 42%, #141A2E 100%);
  --bg-card-hover: #1D2540;
  --border: var(--color-border);
  --border-glow: rgba(167, 139, 250, 0.28);
  --primary-glow: rgba(139, 92, 246, 0.34);

  /* V2.2.4 ???????? */
  --default-result-bg-main: #080B16;
  --default-result-bg-surface: #101628;
  --default-result-bg-card: #151D34;
  --default-result-bg-card-soft: #1B2542;
  --default-result-bg-elevated: #202B4A;

  --default-result-text-main: #F4F7FF;
  --default-result-text-secondary: #C7D2EA;
  --default-result-text-muted: #9BA8C7;
  --default-result-text-soft: #7F8CAF;
  --default-result-text-dark: #080B16;

  --default-result-primary: #8B5CF6;
  --default-result-primary-hover: #7C3AED;
  --default-result-secondary: #22D3EE;
  --default-result-secondary-hover: #06B6D4;
  --default-result-gold: #FBBF24;
  --default-result-gold-hover: #F59E0B;
  --default-result-success: #34D399;
  --default-result-success-soft: rgba(52, 211, 153, 0.15);

  --default-result-border: rgba(167, 139, 250, 0.28);
  --default-result-border-soft: rgba(148, 163, 184, 0.18);

  --default-result-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  --default-result-shadow-strong: 0 24px 64px rgba(0, 0, 0, 0.58);
  --default-result-glow-purple: 0 0 32px rgba(139, 92, 246, 0.28);
  --default-result-glow-cyan: 0 0 28px rgba(34, 211, 238, 0.20);
  --default-result-glow-gold: 0 0 28px rgba(251, 191, 36, 0.24);

  --default-rarity-n-bg: rgba(148, 163, 184, 0.16);
  --default-rarity-n-text: #CBD5E1;
  --default-rarity-n-border: rgba(148, 163, 184, 0.32);

  --default-rarity-r-bg: rgba(56, 189, 248, 0.16);
  --default-rarity-r-text: #7DD3FC;
  --default-rarity-r-border: rgba(56, 189, 248, 0.38);

  --default-rarity-sr-bg: rgba(167, 139, 250, 0.18);
  --default-rarity-sr-text: #DDD6FE;
  --default-rarity-sr-border: rgba(167, 139, 250, 0.42);

  --default-rarity-ssr-bg: rgba(251, 191, 36, 0.18);
  --default-rarity-ssr-text: #FDE68A;
  --default-rarity-ssr-border: rgba(251, 191, 36, 0.46);

  --default-rarity-ur-bg: rgba(244, 114, 182, 0.18);
  --default-rarity-ur-text: #FBCFE8;
  --default-rarity-ur-border: rgba(244, 114, 182, 0.48);
}

/* ??? ?????? ??? */

body[data-theme="default"] .card,
body[data-theme="default"] .task-card,
body[data-theme="default"] .habit-card,
body[data-theme="default"] .achievement-card,
body[data-theme="default"] .workshop-material-card,
body[data-theme="default"] .workshop-craft-card,
body[data-theme="default"] .workshop-gift-card {
  background: linear-gradient(180deg, #161D33 0%, #11182B 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  border-radius: 18px;
}

body[data-theme="default"] .stat-card {
  background: linear-gradient(180deg, #161D33 0%, #131A2E 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

body[data-theme="default"] .stat-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

body[data-theme="default"] .stat-value {
  color: var(--color-text-main);
}

body[data-theme="default"] .stat-card--stardust {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(145deg, #161D33, rgba(251, 191, 36, 0.08));
}

body[data-theme="default"] .stat-card--stardust .stat-value {
  color: var(--color-accent);
}

body[data-theme="default"] .stat-card--energy {
  border-color: rgba(52, 211, 153, 0.28);
  background: linear-gradient(145deg, #161D33, rgba(52, 211, 153, 0.08));
}

body[data-theme="default"] .stat-card--energy .stat-value {
  color: var(--color-success);
}

body[data-theme="default"] .page-subtitle,
body[data-theme="default"] .section-desc,
body[data-theme="default"] .settings-section-note {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .section-title {
  color: var(--color-text-muted);
}

/* ??? ????? ??? */

body[data-theme="default"] .task-card__title,
body[data-theme="default"] .habit-card__name,
body[data-theme="default"] .form-label {
  color: var(--color-text-main);
}

body[data-theme="default"] .task-card__meta,
body[data-theme="default"] .task-card__preview,
body[data-theme="default"] .task-card__done-info,
body[data-theme="default"] .habit-card__desc,
body[data-theme="default"] .habit-card__meta {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .task-reward-tag {
  background: rgba(29, 37, 64, 0.85);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-soft);
}

body[data-theme="default"] .task-reward-tag--stardust {
  background: rgba(245, 158, 11, 0.16);
  color: #FBBF24;
  border-color: rgba(251, 191, 36, 0.30);
  font-weight: 700;
}

body[data-theme="default"] .task-reward-tag--energy {
  background: rgba(52, 211, 153, 0.14);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.28);
  font-weight: 700;
}

body[data-theme="default"] .btn--danger {
  background: rgba(251, 113, 133, 0.16);
  color: #FB7185;
  border: 1px solid rgba(251, 113, 133, 0.30);
  font-weight: 700;
}

body[data-theme="default"] .btn--ghost.btn--danger {
  background: rgba(251, 113, 133, 0.14);
  color: #FB7185;
  border: 1px solid rgba(251, 113, 133, 0.28);
}

body[data-theme="default"] .btn--danger:active:not(:disabled),
body[data-theme="default"] .btn--ghost.btn--danger:active:not(:disabled) {
  background: rgba(251, 113, 133, 0.26);
  color: #FDA4AF;
}

body[data-theme="default"] .confirm-modal .btn--danger {
  background: linear-gradient(145deg, #E11D48, #BE123C);
  color: #FFFFFF;
  border: 1px solid rgba(253, 164, 175, 0.35);
  box-shadow: 0 8px 18px rgba(190, 18, 60, 0.28);
}

body[data-theme="default"] .btn:disabled,
body[data-theme="default"] .btn[disabled] {
  opacity: 1;
  background: #2A3147;
  color: #7F8CAF;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: none;
}

body[data-theme="default"] .btn--primary {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #FFFFFF;
  border: 1px solid rgba(196, 181, 253, 0.32);
  box-shadow: 0 8px 22px rgba(109, 40, 217, 0.30);
}

body[data-theme="default"] .btn--primary:active:not(:disabled) {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
}

body[data-theme="default"] .btn--secondary {
  background: rgba(139, 92, 246, 0.14);
  color: #DDD6FE;
  border: 1px solid rgba(167, 139, 250, 0.28);
}

body[data-theme="default"] .btn--ghost {
  color: var(--color-text-muted);
}

/* ??? ??? ??? */

body[data-theme="default"] .empty-state,
body[data-theme="default"] .companion-empty {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(34, 211, 238, 0.08) 100%);
  border: 1px solid rgba(167, 139, 250, 0.24);
  color: var(--color-text-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 22px rgba(0, 0, 0, 0.22);
  border-radius: 18px;
}

body[data-theme="default"] .empty-state__title {
  color: var(--color-text-main);
  font-weight: 800;
}

body[data-theme="default"] .empty-state__desc,
body[data-theme="default"] .companion-empty {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

body[data-theme="default"] .empty-state__icon {
  opacity: 0.75;
}

/* ??? ???????? ??? */

body[data-theme="default"] .gacha-hero__symbol {
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.38));
  color: var(--color-accent);
}

body[data-theme="default"] .gacha-hero__tagline {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .gacha-panel {
  background: linear-gradient(180deg, #161D33 0%, #11182B 100%);
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36), 0 0 24px rgba(139, 92, 246, 0.08);
}

body[data-theme="default"] .gacha-panel::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.10) 0%, transparent 55%);
  opacity: 0.85;
}

body[data-theme="default"] .gacha-pool,
body[data-theme="default"] .gacha-title,
body[data-theme="default"] .pool-title {
  color: #F4F7FF;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(139, 92, 246, 0.34);
}

body[data-theme="default"] .gacha-stardust__label,
body[data-theme="default"] .gacha-info,
body[data-theme="default"] .gacha-subtitle,
body[data-theme="default"] .pity-label {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .gacha-info strong,
body[data-theme="default"] .pity-value {
  color: var(--color-text-main);
}

body[data-theme="default"] .gacha-stardust__value {
  color: var(--color-accent);
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.28);
}

body[data-theme="default"] .btn--gacha,
body[data-theme="default"] button[data-action="single-pull"],
body[data-theme="default"] #btn-pull {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #FFFFFF;
  border: 1px solid rgba(196, 181, 253, 0.36);
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.34);
  animation: none;
  background-size: auto;
}

body[data-theme="default"] .btn--gacha-ten,
body[data-theme="default"] button[data-action="ten-pull"],
body[data-theme="default"] #btn-pull-ten {
  background: linear-gradient(135deg, #22D3EE 0%, #8B5CF6 48%, #FBBF24 100%);
  color: #FFFFFF;
  border: 1px solid rgba(251, 191, 36, 0.32);
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.22), 0 0 24px rgba(139, 92, 246, 0.24);
  animation: none;
  background-size: auto;
}

body[data-theme="default"] .btn--gacha:disabled,
body[data-theme="default"] .btn--gacha-ten:disabled,
body[data-theme="default"] #btn-pull:disabled,
body[data-theme="default"] #btn-pull-ten:disabled {
  background: #2A3147;
  color: #7F8CAF;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: none;
  opacity: 1;
}

body[data-theme="default"] .rate-tag {
  background: rgba(24, 32, 58, 0.9);
  border-color: var(--color-border-soft);
  color: var(--color-text-secondary);
}

/* ??? ?????????? ??? */

body[data-theme="default"] .collection-card,
body[data-theme="default"] .pet-card {
  background: linear-gradient(180deg, #18203A 0%, #11182B 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
  border-radius: 18px;
}

body[data-theme="default"] .collection-card--locked {
  opacity: 0.62;
  background: linear-gradient(180deg, #12182C 0%, #0E1324 100%);
  border-color: rgba(148, 163, 184, 0.14);
}

body[data-theme="default"] .collection-card__name,
body[data-theme="default"] .pet-nickname,
body[data-theme="default"] .current-companion-name,
body[data-theme="default"] .companion-nickname,
body[data-theme="default"] .collection-companion__name,
body[data-theme="default"] .companion-card__name {
  color: #F4F7FF;
  font-weight: 800;
}

body[data-theme="default"] .pet-original-name,
body[data-theme="default"] .companion-original-name,
body[data-theme="default"] .collection-companion .pet-original-name {
  color: var(--color-text-muted);
}

body[data-theme="default"] .collection-card__title {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .collection-card.rarity-R { border-color: rgba(56, 189, 248, 0.32); }
body[data-theme="default"] .collection-card.rarity-SR { border-color: rgba(167, 139, 250, 0.36); }
body[data-theme="default"] .collection-card.rarity-SSR {
  border-color: rgba(251, 191, 36, 0.38);
  background: linear-gradient(180deg, #1A2038 0%, #141A2E 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30), 0 0 16px rgba(251, 191, 36, 0.10);
}
body[data-theme="default"] .collection-card.rarity-UR {
  border-color: rgba(244, 114, 182, 0.40);
  background: linear-gradient(180deg, #1C1A34 0%, #141A2E 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30), 0 0 20px rgba(244, 114, 182, 0.12);
}

body[data-theme="default"] .companion-badge,
body[data-theme="default"] .badge-companion {
  background: rgba(52, 211, 153, 0.14);
  color: #6EE7B7;
  border: 1px solid rgba(52, 211, 153, 0.36);
}

body[data-theme="default"] .btn--companion,
body[data-theme="default"] button[data-action="set-companion"],
body[data-theme="default"] button[data-action="set-companion-detail"] {
  background: linear-gradient(135deg, #34D399 0%, #059669 100%);
  color: #06130F;
  border: 1px solid rgba(110, 231, 183, 0.34);
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.24);
  font-weight: 800;
}

body[data-theme="default"] .btn--companion:active:not(:disabled),
body[data-theme="default"] button[data-action="set-companion"]:active:not(:disabled),
body[data-theme="default"] button[data-action="set-companion-detail"]:active:not(:disabled) {
  background: linear-gradient(135deg, #6EE7B7 0%, #10B981 100%);
}

body[data-theme="default"] .btn--companion:disabled,
body[data-theme="default"] button[data-action="set-companion"]:disabled,
body[data-theme="default"] button[data-action="set-companion-detail"]:disabled {
  background: #223348;
  color: #7F8CAF;
  box-shadow: none;
  border-color: rgba(148, 163, 184, 0.16);
  opacity: 1;
}

/* ??? ???? Modal??????? ??? */

body[data-theme="default"] .modal-overlay {
  background: rgba(8, 11, 22, 0.72);
  backdrop-filter: blur(6px);
}

body[data-theme="default"] .modal {
  background: linear-gradient(180deg, #18203A 0%, #0E1324 100%);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52), 0 0 34px rgba(139, 92, 246, 0.12);
  color: var(--color-text-main);
}

body[data-theme="default"] .modal:has(.pet-detail) {
  background: linear-gradient(180deg, #18203A 0%, #0E1324 100%);
  border: 1px solid rgba(167, 139, 250, 0.24);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52), 0 0 34px rgba(139, 92, 246, 0.16);
}

body[data-theme="default"] .modal-title {
  color: var(--color-text-main);
  border-bottom: 1px solid rgba(167, 139, 250, 0.16);
  padding-bottom: var(--space-3);
}

body[data-theme="default"] .modal-close {
  background: rgba(29, 37, 64, 0.9);
  border-color: var(--color-border-soft);
  color: var(--color-text-muted);
}

body[data-theme="default"] .pet-detail__hero .pet-img-wrap {
  background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.18) 0%, rgba(14, 19, 36, 0.4) 70%);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36), 0 0 28px rgba(139, 92, 246, 0.14);
}

body[data-theme="default"] .pet-detail__name {
  color: #F4F7FF;
}

body[data-theme="default"] .pet-detail__title,
body[data-theme="default"] .pet-detail__subtitle {
  color: var(--color-text-muted);
}

body[data-theme="default"] .pet-detail__desc,
body[data-theme="default"] .pet-detail__lore,
body[data-theme="default"] .pet-description-box,
body[data-theme="default"] .pet-lore-box {
  background: rgba(8, 11, 22, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #DDE6FA;
  line-height: 1.75;
  border-radius: 18px;
  padding: 16px;
  font-size: 0.9375rem;
}

body[data-theme="default"] .pet-detail__lore {
  border-left: 3px solid rgba(34, 211, 238, 0.45);
}

body[data-theme="default"] .pet-detail__locked,
body[data-theme="default"] .pet-detail__nickname-empty {
  color: var(--color-text-muted);
}

body[data-theme="default"] .pet-detail__display-name {
  color: #F4F7FF;
  font-weight: 800;
}

body[data-theme="default"] .pet-detail__nickname.card {
  background: linear-gradient(180deg, #161D33 0%, #11182B 100%);
  border-color: rgba(148, 163, 184, 0.18);
}

body[data-theme="default"] .bond-unlock {
  background: rgba(14, 19, 36, 0.55);
  border-color: var(--color-border-soft);
}

body[data-theme="default"] .bond-unlock--open {
  border-color: rgba(167, 139, 250, 0.32);
}

body[data-theme="default"] .bond-unlock__lv {
  color: #DDD6FE;
}

body[data-theme="default"] .bond-unlock__text {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .bond-unlock--open .bond-unlock__text {
  color: var(--color-text-main);
}

/* ??? ?????? ??? */

body[data-theme="default"] .expedition-area-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  position: relative;
}

body[data-theme="default"] .expedition-area-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%);
  opacity: 0.08;
  pointer-events: none;
}

body[data-theme="default"] .expedition-area-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 55%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  opacity: 0.08;
  pointer-events: none;
}

body[data-theme="default"] .expedition-area-card--mist_forest {
  background: linear-gradient(135deg, #102116 0%, #0C1712 100%);
  border-color: rgba(134, 239, 172, 0.28);
}

body[data-theme="default"] .expedition-area-card--lava_rift {
  background: linear-gradient(135deg, #2A1510 0%, #160C0A 100%);
  border-color: rgba(253, 186, 116, 0.30);
}

body[data-theme="default"] .expedition-area-card--machine_ruins {
  background: linear-gradient(135deg, #1B1B34 0%, #101426 100%);
  border-color: rgba(196, 181, 253, 0.30);
}

body[data-theme="default"] .expedition-area-card--astral_rift {
  background: linear-gradient(135deg, #102033 0%, #0B1224 100%);
  border-color: rgba(103, 232, 249, 0.30);
}

body[data-theme="default"] .expedition-area-card--polar_shore {
  background: linear-gradient(135deg, #0E1E28 0%, #0A141C 100%);
  border-color: rgba(103, 232, 249, 0.26);
}

body[data-theme="default"] .expedition-area-card--harvest_fields {
  background: linear-gradient(135deg, #1E1A10 0%, #12100A 100%);
  border-color: rgba(251, 191, 36, 0.28);
}

body[data-theme="default"] .expedition-area-card--mist_forest .expedition-area-card__header h3 {
  color: #86EFAC;
}

body[data-theme="default"] .expedition-area-card--lava_rift .expedition-area-card__header h3 {
  color: #FDBA74;
}

body[data-theme="default"] .expedition-area-card--machine_ruins .expedition-area-card__header h3 {
  color: #C4B5FD;
}

body[data-theme="default"] .expedition-area-card--astral_rift .expedition-area-card__header h3 {
  color: #67E8F9;
}

body[data-theme="default"] .expedition-area-card--polar_shore .expedition-area-card__header h3 {
  color: #7DD3FC;
}

body[data-theme="default"] .expedition-area-card--harvest_fields .expedition-area-card__header h3 {
  color: #FCD34D;
}

body[data-theme="default"] .expedition-area-card__desc,
body[data-theme="default"] .expedition-area-card__meta,
body[data-theme="default"] .expedition-area-card__rewards {
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
}

body[data-theme="default"] .expedition-area-card__header,
body[data-theme="default"] .expedition-area-card__unlock {
  position: relative;
  z-index: 1;
}

body[data-theme="default"] .expedition-countdown {
  color: var(--color-secondary);
}

body[data-theme="default"] .expedition-countdown__label,
body[data-theme="default"] .expedition-active-card__area {
  color: var(--color-text-muted);
}

body[data-theme="default"] .expedition-energy {
  background: linear-gradient(180deg, #161D33 0%, #11182B 100%);
  border-color: rgba(52, 211, 153, 0.24);
}

body[data-theme="default"] .expedition-energy__label,
body[data-theme="default"] .expedition-energy__hint {
  color: var(--color-text-muted);
}

body[data-theme="default"] .expedition-energy__value {
  color: var(--color-success);
}

/* ??? ?? ??? */

body[data-theme="default"] .workshop-material-card__qty {
  color: var(--color-accent);
  font-weight: 800;
}

body[data-theme="default"] .workshop-material-card__desc,
body[data-theme="default"] .workshop-craft-card__effect,
body[data-theme="default"] .workshop-summary__label,
body[data-theme="default"] .workshop-summary__hint {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .workshop-material-card__header h3,
body[data-theme="default"] .workshop-craft-card__header h3,
body[data-theme="default"] .workshop-summary__value {
  color: var(--color-text-main);
}

body[data-theme="default"] .workshop-tag {
  background: rgba(29, 37, 64, 0.85);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-soft);
}

body[data-theme="default"] .workshop-craft-card__favorite {
  color: var(--color-accent);
}

body[data-theme="default"] .workshop-recipe-list__item--missing {
  color: var(--color-danger);
}

body[data-theme="default"] .workshop-gift-pet__meta,
body[data-theme="default"] .workshop-gift-item__effect {
  color: var(--color-text-secondary);
}

/* ??? ?????? ??? */

body[data-theme="default"] .more-menu {
  background: linear-gradient(180deg, #18203A 0%, #11182B 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
}

body[data-theme="default"] .more-menu-item {
  border-bottom-color: var(--color-divider);
}

body[data-theme="default"] .more-menu-item:active {
  background: rgba(139, 92, 246, 0.10);
}

body[data-theme="default"] .more-menu-label {
  color: var(--color-text-main);
  font-weight: 800;
  font-size: 0.9375rem;
}

body[data-theme="default"] .more-menu-desc {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

body[data-theme="default"] .more-menu-icon {
  background: rgba(139, 92, 246, 0.16);
  color: #C4B5FD;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

body[data-theme="default"] .more-menu-arrow {
  color: var(--color-text-muted);
}

body[data-theme="default"] .achievement-strip__title--empty,
body[data-theme="default"] .achievement-title-bar__value--empty,
body[data-theme="default"] .title-empty,
body[data-theme="default"] .no-title,
body[data-theme="default"] .equipped-title-empty {
  color: var(--color-text-muted);
  font-weight: 600;
}

body[data-theme="default"] .achievement-strip__title {
  color: var(--color-text-main);
  font-weight: 700;
}

body[data-theme="default"] .achievement-strip__desc {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .achievement-card__name {
  color: var(--color-text-main);
  font-weight: 700;
}

body[data-theme="default"] .achievement-card__desc,
body[data-theme="default"] .achievement-card__progress-label,
body[data-theme="default"] .achievement-card__reward-label {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .achievement-card--claimable {
  border-color: rgba(52, 211, 153, 0.32);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 0 16px rgba(52, 211, 153, 0.10);
}

body[data-theme="default"] .achievement-card__status--done {
  color: var(--color-success);
}

body[data-theme="default"] .achievement-card__status--locked {
  color: var(--color-text-muted);
}

body[data-theme="default"] .achievement-title-bar__value:not(.achievement-title-bar__value--empty) {
  color: var(--color-text-main);
  font-weight: 800;
}

body[data-theme="default"] .badge {
  font-weight: 600;
}

body[data-theme="default"] .rarity-N { background: rgba(148, 163, 184, 0.16); color: var(--rarity-n); }
body[data-theme="default"] .rarity-R { background: rgba(56, 189, 248, 0.14); color: var(--rarity-r); }
body[data-theme="default"] .rarity-SR { background: rgba(167, 139, 250, 0.16); color: var(--rarity-sr); }
body[data-theme="default"] .rarity-SSR { background: rgba(251, 191, 36, 0.16); color: var(--rarity-ssr); }
body[data-theme="default"] .rarity-UR { background: rgba(244, 114, 182, 0.16); color: var(--rarity-ur); }

/* ??? ???? ??? */

body[data-theme="default"] .bottom-nav {
  background: rgba(14, 19, 36, 0.92);
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.32);
}

body[data-theme="default"] .nav-item {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  min-height: var(--tap-min);
}

body[data-theme="default"] .nav-item.active {
  color: #F4F7FF;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: var(--radius-pill);
  margin: 4px 2px;
}

/* ??? Modal / Toast ??? */

body[data-theme="default"] .toast {
  background: linear-gradient(180deg, #18203A 0%, #141A2E 100%);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
  font-size: 0.9375rem;
  box-shadow: var(--shadow-lg);
}

body[data-theme="default"] .toast--success {
  background: linear-gradient(135deg, #141A2E, rgba(52, 211, 153, 0.12));
  border-color: rgba(52, 211, 153, 0.32);
}

body[data-theme="default"] .toast--error {
  background: linear-gradient(135deg, #141A2E, rgba(251, 113, 133, 0.10));
  border-color: rgba(251, 113, 133, 0.32);
}

body[data-theme="default"] .toast--warning {
  background: linear-gradient(135deg, #141A2E, rgba(245, 158, 11, 0.10));
  border-color: rgba(245, 158, 11, 0.30);
}

body[data-theme="default"] .toast--info {
  background: linear-gradient(135deg, #141A2E, rgba(139, 92, 246, 0.12));
  border-color: rgba(167, 139, 250, 0.30);
}

body[data-theme="default"] .reward-toast {
  background: linear-gradient(180deg, #18203A 0%, #141A2E 100%);
  border-color: var(--color-border);
  color: var(--color-text-main);
}

/* Legacy Summon Result - Deprecated?default ????? */
body[data-theme="default"] .pull-result__desc,
body[data-theme="default"] .pull-result__detail,
body[data-theme="default"] .ten-pull-summary {
  color: var(--color-text-secondary);
}

body[data-theme="default"] .ten-pull-card {
  background: linear-gradient(180deg, #18203A 0%, #11182B 100%);
  border-color: var(--color-border);
}

body[data-theme="default"] .filter-btn {
  background: rgba(24, 32, 58, 0.9);
  color: var(--color-text-muted);
  border-color: var(--color-border-soft);
}

body[data-theme="default"] .filter-btn.active {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

body[data-theme="default"] .companion-bubble {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

body[data-theme="default"] .companion-bubble__text {
  color: var(--color-text-main);
  font-size: 0.875rem;
}

body[data-theme="default"] .fab {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  box-shadow: 0 8px 24px rgba(109, 40, 217, 0.36);
}

/* ??? Reduce Motion?default???? */

body.reduce-motion[data-theme="default"]::before {
  background-image: none;
}

body.reduce-motion[data-theme="default"] .gacha-panel::before {
  opacity: 0.5;
}

body.reduce-motion[data-theme="default"] .expedition-area-card::before,
body.reduce-motion[data-theme="default"] .expedition-area-card::after {
  opacity: 0;
}

body.reduce-motion[data-theme="default"] .btn--gacha,
body.reduce-motion[data-theme="default"] .btn--gacha-ten {
  animation: none;
}

body.reduce-motion[data-theme="default"] .collection-card.rarity-UR,
body.reduce-motion[data-theme="default"] .collection-card.rarity-SSR {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
}

body.reduce-motion[data-theme="default"] .gacha-pool,
body.reduce-motion[data-theme="default"] .gacha-title {
  text-shadow: none;
}

/* ???????????????????????????????????????
   V2.1.2 ? ??????????????
   ??????????????????????????????????????? */

body[data-theme="sweet"] {
  --color-bg-main: #FFF7FB;
  --color-bg-surface: #FFF1F7;
  --color-bg-card: #FFFFFF;
  --color-bg-card-soft: #FFF8FC;
  --color-bg-elevated: #FFFFFF;

  --color-empty-bg: #FFF3E6;
  --color-empty-bg-soft: #FFF8EF;
  --color-empty-border: #F4CBAA;

  --color-text-main: #3D2633;
  --color-text-secondary: #6F4C5E;
  --color-text-muted: #7A4E62;
  --color-text-soft: #8A6677;
  --color-text-disabled: #B894A6;
  --color-text-inverse: #FFFFFF;

  --color-primary: #C73578;
  --color-primary-hover: #B82E6D;
  --color-primary-soft: #FFE0EE;
  --color-primary-soft-2: #FFF0F7;
  --color-primary-light: #8B2E5A;

  --color-secondary: #6F55D9;
  --color-secondary-hover: #5E49C2;
  --color-secondary-soft: #EEE9FF;

  --color-accent: #E8952F;
  --color-accent-soft: #FFF1D8;

  --color-success: #2F7664;
  --color-success-hover: #285F51;
  --color-success-soft: #E7F6F1;

  --color-danger: #C93E5D;
  --color-warning: #B66A1E;

  /* V2.7.4 Sweet ???????????? */
  --sweet-text-berry: #8B2E5A;
  --sweet-text-purple: #4A3580;
  --sweet-text-blue: #2A5A8C;
  --sweet-text-green: #1F5C4A;
  --sweet-text-gold: #8A5514;
  --sweet-text-danger: #9B2D45;

  /* V2.7.5 Sweet ??????? */
  --wheel-sweet-card-bg: #FFF9FC;
  --wheel-sweet-card-border: #E7B8CC;
  --wheel-sweet-title: #6F2947;
  --wheel-sweet-text: #60404F;
  --wheel-sweet-muted: #765A68;
  --wheel-sweet-primary: #A83F6B;
  --wheel-sweet-primary-hover: #8F3159;
  --wheel-sweet-primary-text: #FFFFFF;
  --wheel-sweet-gold-bg: #FFF0CF;
  --wheel-sweet-gold-text: #75450D;
  --wheel-sweet-purple-bg: #EEE7FF;
  --wheel-sweet-purple-text: #4D368A;
  --wheel-sweet-pink-bg: #FADCE9;
  --wheel-sweet-pink-text: #702A4A;
  --wheel-sweet-green-bg: #DFF3EB;
  --wheel-sweet-green-text: #285E4E;
  --wheel-sweet-blue-bg: #E1EEFA;
  --wheel-sweet-blue-text: #285576;
  --wheel-sweet-danger-bg: #FCE3E8;
  --wheel-sweet-danger-text: #8A2942;

  --color-border: #F0C9DA;
  --color-border-soft: #F7DDEA;
  --color-divider: #F4D6E4;

  --shadow-sm: 0 4px 12px rgba(199, 53, 120, 0.10);
  --shadow-md: 0 8px 24px rgba(199, 53, 120, 0.14);
  --shadow-lg: 0 14px 36px rgba(199, 53, 120, 0.18);
  --shadow-glow: 0 0 22px rgba(199, 53, 120, 0.22);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;

  --rarity-n: #7B8190;
  --rarity-r: #3977C8;
  --rarity-sr: #7656D6;
  --rarity-ssr: #C27A19;
  --rarity-ur: #B83274;

  --priority-normal: #2F7664;
  --priority-important: #B66A1E;
  --priority-urgent: #C93E5D;

  --bg-gradient: linear-gradient(165deg, #FFF7FB 0%, #FFF1F7 48%, #F8E8F5 100%);
  --bg-card-hover: #FFF8FC;
  --border: var(--color-border);
  --border-glow: rgba(199, 53, 120, 0.20);
  --primary-glow: rgba(199, 53, 120, 0.28);
  --accent-success: var(--color-success);
  --accent-warning: var(--color-warning);
  --accent-danger: var(--color-danger);
  --accent-primary: var(--color-primary);
  --accent-secondary: var(--color-secondary);
  --text: var(--color-text-main);
  --text-main: var(--color-text-main);
  --text-muted: var(--color-text-muted);

  /* V2.2.3 ???????? */
  --sweet-result-bg-main: #FFF8FC;
  --sweet-result-bg-surface: #FFFFFF;
  --sweet-result-bg-soft: #FFF1F7;
  --sweet-result-bg-soft-2: #F9F3FF;

  --sweet-result-text-main: #352431;
  --sweet-result-text-secondary: #64485A;
  --sweet-result-text-muted: #86677A;
  --sweet-result-text-soft: #A07F92;
  --sweet-result-text-on-dark: #FFFFFF;

  --sweet-result-primary: #C73578;
  --sweet-result-primary-hover: #B92D6B;
  --sweet-result-secondary: #6F55D9;
  --sweet-result-secondary-hover: #5E49C2;
  --sweet-result-accent-gold: #B9771F;
  --sweet-result-accent-gold-soft: #FFF1D8;
  --sweet-result-success: #2F7664;
  --sweet-result-success-soft: #E7F6F1;

  --sweet-result-border: #EDC9DA;
  --sweet-result-border-soft: #F5DDEA;
  --sweet-result-shadow: 0 14px 34px rgba(199, 53, 120, 0.14);
  --sweet-result-shadow-strong: 0 20px 48px rgba(199, 53, 120, 0.18);

  --sweet-rarity-n-bg: #F3F4F6;
  --sweet-rarity-n-text: #616977;
  --sweet-rarity-n-border: #D4D7DE;

  --sweet-rarity-r-bg: #EAF3FF;
  --sweet-rarity-r-text: #2E6FBE;
  --sweet-rarity-r-border: #B7D4F6;

  --sweet-rarity-sr-bg: #EEE9FF;
  --sweet-rarity-sr-text: #6248C9;
  --sweet-rarity-sr-border: #CFC3F6;

  --sweet-rarity-ssr-bg: #FFF1D8;
  --sweet-rarity-ssr-text: #A96817;
  --sweet-rarity-ssr-border: #F0C878;

  --sweet-rarity-ur-bg: #FFE3F0;
  --sweet-rarity-ur-text: #AF2F6D;
  --sweet-rarity-ur-border: #F3A8C7;
}

body[data-theme="sweet"]::before {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(199, 53, 120, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(111, 85, 217, 0.07) 0%, transparent 38%),
    radial-gradient(circle at 72% 12%, rgba(232, 149, 47, 0.06) 0%, transparent 32%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 224, 238, 0.30) 0%, transparent 55%);
}

body[data-theme="sweet"] .card {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .stat-card {
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .stat-card--stardust {
  border-color: rgba(194, 122, 25, 0.28);
  background: linear-gradient(145deg, #FFFFFF, var(--color-accent-soft));
}

body[data-theme="sweet"] .stat-card--stardust .stat-icon {
  color: #C27A19;
  opacity: 1;
}

body[data-theme="sweet"] .stat-card--stardust .stat-value {
  color: #B66A1E;
}

body[data-theme="sweet"] .stat-card--today {
  background: linear-gradient(145deg, #FFF8FC 0%, #FFF1F7 100%);
  border-color: var(--color-border-soft);
  box-shadow: 0 4px 12px rgba(199, 53, 120, 0.06);
}

body[data-theme="sweet"] .stat-card--today .stat-icon {
  color: #B83274;
  opacity: 1;
}

body[data-theme="sweet"] .stat-card--today .stat-value {
  color: #6F4C5E;
  font-weight: 700;
}

body[data-theme="sweet"] .stat-card--today .stat-label {
  color: var(--color-text-muted);
}

body[data-theme="sweet"] .stat-card--energy {
  border-color: rgba(47, 118, 100, 0.30);
  background: linear-gradient(145deg, #FFFFFF, var(--color-success-soft));
}

body[data-theme="sweet"] .stat-card--energy .stat-value {
  color: var(--sweet-text-green);
}

body[data-theme="sweet"] .stat-card--energy .stat-icon {
  color: var(--sweet-text-green);
  opacity: 1;
}

body[data-theme="sweet"] .btn--primary {
  background: linear-gradient(135deg, #D44786 0%, #C73578 100%);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 16px rgba(199, 53, 120, 0.22);
}

body[data-theme="sweet"] .btn--primary:active:not(:disabled) {
  background: linear-gradient(135deg, #C73578 0%, #B82E6D 100%);
}

body[data-theme="sweet"] .btn--secondary {
  background: var(--color-primary-soft-2);
  border-color: var(--color-border);
  color: var(--color-text-main);
}

body[data-theme="sweet"] .btn:disabled {
  opacity: 1;
  background: #E9CEDA;
  color: var(--color-text-soft);
  border-color: var(--color-border-soft);
}

body[data-theme="sweet"] .bottom-nav {
  background: rgba(255, 241, 247, 0.96);
  border-top-color: var(--color-border);
  box-shadow: 0 -4px 20px rgba(199, 53, 120, 0.08);
}

body[data-theme="sweet"] .nav-item {
  color: var(--color-text-soft);
}

body[data-theme="sweet"] .nav-item.active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  margin: 4px 2px;
}

body[data-theme="sweet"] .nav-badge--alert {
  background: var(--color-danger);
  box-shadow: 0 0 6px rgba(201, 62, 93, 0.40);
}

body[data-theme="sweet"] .nav-badge--hint {
  background: rgba(111, 85, 217, 0.85);
  box-shadow: 0 0 5px rgba(111, 85, 217, 0.30);
}

body[data-theme="sweet"] .task-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .task-card--done {
  opacity: 0.78;
  background: rgba(255, 255, 255, 0.72);
}

body[data-theme="sweet"] .task-card.priority-urgent {
  border-left-color: var(--priority-urgent);
  background: linear-gradient(90deg, rgba(201, 62, 93, 0.07) 0%, #FFFFFF 28%);
}

body[data-theme="sweet"] .gacha-panel {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF1F7 100%);
  border-color: var(--color-border-soft);
}

body[data-theme="sweet"] .gacha-panel::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(111, 85, 217, 0.10) 0%, transparent 55%);
}

body[data-theme="sweet"] .gacha-pool {
  color: #5E376E;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-theme="sweet"] .gacha-stardust__label,
body[data-theme="sweet"] .gacha-info,
body[data-theme="sweet"] .gacha-hero__tagline {
  color: var(--color-text-secondary);
}

body[data-theme="sweet"] .gacha-hero__symbol {
  color: #C27A19;
  filter: drop-shadow(0 2px 8px rgba(194, 122, 25, 0.28));
}

body[data-theme="sweet"] .gacha-stardust__value {
  color: var(--sweet-text-gold);
  text-shadow: none;
}

body[data-theme="sweet"] .btn--gacha {
  animation: none;
  background: linear-gradient(135deg, #D44786 0%, #C73578 100%);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 8px 18px rgba(199, 53, 120, 0.24);
}

body[data-theme="sweet"] .btn--gacha:active:not(:disabled) {
  background: linear-gradient(135deg, #C73578 0%, #B82E6D 100%);
}

body[data-theme="sweet"] .btn--gacha-ten {
  background: linear-gradient(135deg, #7D65E8 0%, #6F55D9 100%);
  box-shadow: 0 8px 18px rgba(111, 85, 217, 0.24);
}

body[data-theme="sweet"] .btn--gacha-ten:active:not(:disabled) {
  background: linear-gradient(135deg, #6F55D9 0%, #5E49C2 100%);
}

body[data-theme="sweet"] .btn--gacha:disabled,
body[data-theme="sweet"] .btn--gacha-ten:disabled {
  background: #E9CEDA;
  color: #8A6677;
  box-shadow: none;
  opacity: 1;
}

body[data-theme="sweet"] .btn--companion {
  background: linear-gradient(135deg, #3F9A83 0%, #2F7664 100%);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 8px 18px rgba(47, 118, 100, 0.22);
}

body[data-theme="sweet"] .btn--companion:active:not(:disabled) {
  background: linear-gradient(135deg, #347965 0%, #285F51 100%);
}

body[data-theme="sweet"] .btn--companion:disabled {
  background: #D7EDE7;
  color: #56786E;
  box-shadow: none;
}

body[data-theme="sweet"] .collection-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .collection-card.rarity-R {
  border-color: rgba(57, 119, 200, 0.35);
}

body[data-theme="sweet"] .collection-card.rarity-SR {
  border-color: rgba(118, 86, 214, 0.38);
}

body[data-theme="sweet"] .collection-card.rarity-SSR {
  border-color: rgba(194, 122, 25, 0.38);
}

body[data-theme="sweet"] .collection-card.rarity-UR {
  border-color: rgba(184, 50, 116, 0.42);
  box-shadow: var(--shadow-glow);
}

body[data-theme="sweet"] .collection-companion__label {
  color: var(--color-text-secondary);
}

body[data-theme="sweet"] .collection-companion__name,
body[data-theme="sweet"] .companion-card__name {
  color: #B83274;
  font-weight: 800;
}

body[data-theme="sweet"] .pet-original-name,
body[data-theme="sweet"] .collection-companion .pet-original-name {
  color: var(--color-text-secondary);
  font-weight: 500;
}

body[data-theme="sweet"] .companion-badge {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid #A8D8CA;
}

body[data-theme="sweet"] .companion-badge--detail {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid #A8D8CA;
}

body[data-theme="sweet"] .expedition-active-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .expedition-area-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(111, 76, 94, 0.10);
  overflow: hidden;
}

body[data-theme="sweet"] .expedition-area-card::before,
body[data-theme="sweet"] .expedition-area-card::after {
  display: none;
  opacity: 0;
  pointer-events: none;
}

body[data-theme="sweet"] .expedition-area-card--mist_forest {
  background: #F1FAF4;
  border-color: #BFE6CB;
}

body[data-theme="sweet"] .expedition-area-card--lava_rift {
  background: #FFF1EA;
  border-color: #F1BAA6;
}

body[data-theme="sweet"] .expedition-area-card--machine_ruins {
  background: #F4F0FF;
  border-color: #CFC3F6;
}

body[data-theme="sweet"] .expedition-area-card--astral_rift {
  background: #F2F7FF;
  border-color: #BBD6F7;
}

body[data-theme="sweet"] .expedition-area-card--polar_shore {
  background: #EEF9FC;
  border-color: #B8E4EF;
}

body[data-theme="sweet"] .expedition-area-card--harvest_fields {
  background: #FFFAEF;
  border-color: #F0D9A8;
}

body[data-theme="sweet"] .expedition-area-card--mist_forest .expedition-area-card__header h3 {
  color: #2F6B4F;
}

body[data-theme="sweet"] .expedition-area-card--lava_rift .expedition-area-card__header h3 {
  color: #9B4A2F;
}

body[data-theme="sweet"] .expedition-area-card--machine_ruins .expedition-area-card__header h3 {
  color: #5B4CA3;
}

body[data-theme="sweet"] .expedition-area-card--astral_rift .expedition-area-card__header h3 {
  color: #345F96;
}

body[data-theme="sweet"] .expedition-area-card--polar_shore .expedition-area-card__header h3 {
  color: #2F6678;
}

body[data-theme="sweet"] .expedition-area-card--harvest_fields .expedition-area-card__header h3 {
  color: #8A6220;
}

body[data-theme="sweet"] .expedition-area-card__desc,
body[data-theme="sweet"] .expedition-area-card__meta,
body[data-theme="sweet"] .expedition-area-card__rewards {
  color: #5A3A4B;
}

body[data-theme="sweet"] .achievement-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .achievement-card--unlocked {
  background: linear-gradient(145deg, #FFFFFF, var(--color-primary-soft-2));
}

body[data-theme="sweet"] .workshop-material-card,
body[data-theme="sweet"] .workshop-craft-card,
body[data-theme="sweet"] .workshop-gift-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .modal-overlay {
  background: rgba(61, 38, 51, 0.42);
}

body[data-theme="sweet"] .modal:has(.pet-detail) {
  background: #FFFFFF;
  border: 1px solid #F0C9DA;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 18px 42px rgba(199, 53, 120, 0.18);
  color: var(--color-text-main);
}

body[data-theme="sweet"] .modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border);
}

body[data-theme="sweet"] .modal-close {
  background: var(--color-primary-soft-2);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

body[data-theme="sweet"] .pet-detail__hero .pet-img-wrap {
  background: #FFFFFF;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(111, 85, 217, 0.12);
}

body[data-theme="sweet"] .pet-detail__name {
  color: #B83274;
  font-weight: 800;
}

body[data-theme="sweet"] .pet-detail.rarity-UR .pet-detail__name {
  color: var(--rarity-ur);
}

body[data-theme="sweet"] .pet-detail.rarity-SSR .pet-detail__name {
  color: var(--rarity-ssr);
}

body[data-theme="sweet"] .pet-detail__title,
body[data-theme="sweet"] .pet-detail__subtitle {
  color: var(--color-text-secondary);
}

body[data-theme="sweet"] .pet-detail__desc {
  background: #FFF8FC;
  border: 1px solid #F7DDEA;
  color: #4A3340;
  line-height: 1.75;
  border-radius: 18px;
  padding: 16px;
  font-size: 0.9375rem;
}

body[data-theme="sweet"] .pet-detail__lore {
  background: #FFF8FC;
  border: 1px solid #F7DDEA;
  border-left: 3px solid var(--color-secondary);
  color: #4A3340;
  line-height: 1.75;
  border-radius: 18px;
  padding: 16px;
  font-size: 0.9375rem;
}

body[data-theme="sweet"] .pet-detail__nickname {
  background: linear-gradient(135deg, #FFF0F7 0%, #EEE9FF 100%);
  border-color: var(--color-border-soft);
}

body[data-theme="sweet"] .pet-detail__display-name {
  color: #B83274;
  font-weight: 800;
}

body[data-theme="sweet"] .pet-detail__nickname-empty {
  color: var(--color-text-muted);
  font-weight: 600;
}

body[data-theme="sweet"] .pet-detail__nickname-actions .btn--secondary {
  background: #FFF0F7;
  color: #B83274;
  border: 1px solid #E7AFC8;
}

body[data-theme="sweet"] .pet-detail__bond-lv {
  color: var(--color-secondary);
}

body[data-theme="sweet"] .pet-detail__locked {
  color: var(--color-text-muted);
}

/* V2.6.0 ? ??????????sweet???????????? */
body[data-theme="sweet"] .bond-unlock {
  background: #F3F4F6;
  border: 1px solid #D4D7DE;
}
body[data-theme="sweet"] .bond-unlock--open {
  background: #FFF8FC;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .bond-unlock__lv {
  color: #4E3BA8;
}
body[data-theme="sweet"] .bond-unlock__text {
  color: #616977;
}
body[data-theme="sweet"] .bond-unlock--open .bond-unlock__text {
  color: #3D2633;
}

body[data-theme="sweet"] .tag {
  background: var(--color-primary-soft-2);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

body[data-theme="sweet"] .toast {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
  color: #2D1A24;
  font-weight: 600;
  font-size: 0.9375rem;
}

body[data-theme="sweet"] .companion-bubble {
  background: #FFFFFF;
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .companion-bubble::after {
  background: #FFFFFF;
  border-color: var(--color-border);
}

body[data-theme="sweet"] .companion-bubble__text {
  color: var(--color-text-main);
  font-style: normal;
  font-weight: 500;
}

body[data-theme="sweet"] .companion-bubble__text--changing {
  color: var(--color-text-secondary);
  opacity: 0.65;
}

body[data-theme="sweet"] .segmented-control {
  background: var(--color-bg-card-soft);
  border: 1px solid var(--color-border-soft);
}

body[data-theme="sweet"] .segmented-control__btn {
  color: var(--color-text-soft);
}

body[data-theme="sweet"] .segmented-control__btn.active {
  background: var(--color-primary-soft);
  color: var(--color-text-main);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .empty-state {
  background: linear-gradient(135deg, var(--color-empty-bg-soft) 0%, var(--color-empty-bg) 100%);
  border: 1px solid var(--color-empty-border);
  color: #725568;
  box-shadow: 0 6px 18px rgba(232, 149, 47, 0.10);
}

body[data-theme="sweet"] .empty-state__title {
  color: #5A3A4B;
  font-weight: 700;
}

body[data-theme="sweet"] .empty-state__desc {
  color: #7A4E62;
}

body[data-theme="sweet"] .empty-state__icon {
  opacity: 0.85;
}

body[data-theme="sweet"] .achievement-strip__title--empty,
body[data-theme="sweet"] .achievement-title-bar__value--empty,
body[data-theme="sweet"] .title-empty,
body[data-theme="sweet"] .no-title,
body[data-theme="sweet"] .equipped-title-empty {
  color: #6F4C5E;
  font-weight: 600;
}

body[data-theme="sweet"] .achievement-strip__title {
  color: #2D1A24;
  font-weight: 700;
}

body[data-theme="sweet"] .achievement-title-bar__value:not(.achievement-title-bar__value--empty) {
  color: #B83274;
  font-weight: 800;
}

body[data-theme="sweet"] .achievement-strip__desc,
body[data-theme="sweet"] .achievement-title-bar__label {
  color: #5A3A4B;
}

body[data-theme="sweet"] .achievement-summary__label {
  color: #5A3A4B;
  font-size: 0.75rem;
  font-weight: 600;
}

body[data-theme="sweet"] .achievement-summary__value {
  color: #2D1A24;
  font-weight: 800;
}

body[data-theme="sweet"] .achievement-summary__value--claimable {
  color: #1F5A4D;
}

body[data-theme="sweet"] .achievement-card__name {
  color: #2D1A24;
  font-weight: 700;
}

body[data-theme="sweet"] .achievement-card__desc,
body[data-theme="sweet"] .achievement-card__progress-label,
body[data-theme="sweet"] .achievement-card__rewards {
  color: #5A3A4B;
}

body[data-theme="sweet"] .achievement-card__progress-label span:last-child {
  color: #3D2633;
  font-weight: 700;
}

body[data-theme="sweet"] .achievement-card__reward-label {
  color: #3D2633;
  font-weight: 700;
}

body[data-theme="sweet"] .achievement-card__category {
  color: #6F4C5E;
  background: rgba(199, 53, 120, 0.10);
  font-weight: 600;
}

body[data-theme="sweet"] .achievement-card__status--done {
  color: #1F5A4D;
  background: rgba(47, 118, 100, 0.16);
  font-weight: 700;
}

body[data-theme="sweet"] .achievement-card__status--locked {
  color: #6F4C5E;
  background: rgba(111, 76, 94, 0.10);
  font-weight: 600;
}

body[data-theme="sweet"] .achievement-card--claimed {
  opacity: 1;
}

body[data-theme="sweet"] .achievement-error {
  color: #6F4C5E;
}

body[data-theme="sweet"] .filter-bar--achievements .filter-btn {
  color: #6F4C5E;
}

body[data-theme="sweet"] .filter-bar--achievements .filter-btn.active {
  color: #FFFFFF;
}

body[data-theme="sweet"] .more-menu {
  background: #FFFFFF;
  border: 1px solid #F0C9DA;
  box-shadow: 0 6px 18px rgba(199, 53, 120, 0.10);
}

body[data-theme="sweet"] .more-menu-item {
  border-bottom-color: var(--color-divider);
  color: var(--color-text-main);
}

body[data-theme="sweet"] .more-menu-item:active {
  background: var(--color-primary-soft-2);
}

body[data-theme="sweet"] .more-menu-label {
  color: #3D2633;
  font-weight: 800;
}

body[data-theme="sweet"] .more-menu-desc {
  color: #6F4C5E;
}

body[data-theme="sweet"] .more-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: #FFF0F7;
  border: 1px solid #E7AFC8;
  font-size: 1.125rem;
}

body[data-theme="sweet"] .more-menu-arrow {
  color: var(--color-text-soft);
}

body[data-theme="sweet"] .settings-section-note,
body[data-theme="sweet"] .settings-backup__hint,
body[data-theme="sweet"] .text-caption,
body[data-theme="sweet"] .stat-label,
body[data-theme="sweet"] .section-count,
body[data-theme="sweet"] .companion-card__hint,
body[data-theme="sweet"] .companion-card__detail-hint,
body[data-theme="sweet"] .companion-bond__label {
  color: var(--color-text-muted);
}

body[data-theme="sweet"] button.companion-card__detail-button:active {
  background: rgba(168, 63, 107, 0.1);
}

body[data-theme="sweet"] .page-subtitle {
  color: var(--color-text-secondary);
}

body[data-theme="sweet"] .fab {
  background: linear-gradient(135deg, #D44786 0%, #6F55D9 100%);
  box-shadow: 0 6px 20px rgba(199, 53, 120, 0.28);
}

body[data-theme="sweet"] .collection-companion--empty {
  color: var(--color-text-muted);
  font-weight: 600;
}

body[data-theme="sweet"] .expedition-energy {
  background: #F1FAF4;
  border: 1px solid #BFE6CB;
  box-shadow: 0 6px 18px rgba(47, 118, 100, 0.08);
}

body[data-theme="sweet"] .expedition-energy--low {
  background: #FFF5F7;
  border-color: #E8B4BF;
  box-shadow: 0 6px 18px rgba(201, 62, 93, 0.06);
}

body[data-theme="sweet"] .expedition-energy__label,
body[data-theme="sweet"] .expedition-energy__hint {
  color: var(--color-text-muted);
}

body[data-theme="sweet"] .expedition-energy__value {
  color: var(--color-success);
}

body[data-theme="sweet"] .expedition-energy__warning {
  color: var(--color-danger);
}

/* ???????????????????????????????????????
   V2.3.7 ? Sweet ?? Toast ?????
   ??????????????????????????????????????? */

body[data-theme="sweet"] .toast,
body[data-theme="sweet"] .reward-toast {
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 0.92rem;
  box-shadow: 0 12px 30px rgba(199, 53, 120, 0.16);
}

body[data-theme="sweet"] .toast {
  background: #FFFFFF;
  color: #3D2633;
  border: 1px solid #F0C9DA;
}

body[data-theme="sweet"] .toast__message,
body[data-theme="sweet"] .toast__icon,
body[data-theme="sweet"] .reward-toast__message {
  color: inherit;
}

body[data-theme="sweet"] .toast__message,
body[data-theme="sweet"] .reward-toast__message {
  font-weight: 700;
  line-height: 1.5;
}

body[data-theme="sweet"] .toast strong,
body[data-theme="sweet"] .toast .toast-highlight,
body[data-theme="sweet"] .reward-toast strong,
body[data-theme="sweet"] .reward-toast .toast-highlight {
  color: inherit;
  font-weight: 900;
}

body[data-theme="sweet"] .toast--success {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}

body[data-theme="sweet"] .toast--success .toast__icon {
  color: #2F7664;
}

body[data-theme="sweet"] .toast--reward {
  background: #FFF1D8;
  color: #8A4F10;
  border-color: #F0C878;
}

body[data-theme="sweet"] .toast--reward .toast__icon {
  color: #B66A1E;
}

body[data-theme="sweet"] .toast--info {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}

body[data-theme="sweet"] .toast--info .toast__icon {
  color: #6F55D9;
}

body[data-theme="sweet"] .toast--warning {
  background: #FFF3E6;
  color: #8A4F10;
  border-color: #F0C878;
}

body[data-theme="sweet"] .toast--warning .toast__icon {
  color: #B66A1E;
}

body[data-theme="sweet"] .toast--error {
  background: #FFE3EA;
  color: #9F263F;
  border-color: #F3A8B8;
}

body[data-theme="sweet"] .toast--error .toast__icon {
  color: #C93E5D;
}

body[data-theme="sweet"] .reward-toast {
  background: #FFF1D8;
  color: #8A4F10;
  border: 1px solid #F0C878;
  font-weight: 700;
  white-space: normal;
  max-width: min(92vw, 420px);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

body[data-theme="sweet"] .reward-toast strong,
body[data-theme="sweet"] .reward-toast .toast-highlight {
  color: #8A4F10;
}

body[data-theme="sweet"] .reward-toast__energy {
  color: #1F5C4D;
  font-weight: 800;
  width: 100%;
}

body[data-theme="sweet"] .reward-toast__energy strong,
body[data-theme="sweet"] .reward-toast__energy .toast-highlight {
  color: #2F7664;
}

body[data-theme="sweet"] .reward-toast--bond {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}

body[data-theme="sweet"] .reward-toast--bond strong,
body[data-theme="sweet"] .reward-toast--bond .toast-highlight {
  color: #6F55D9;
}

body[data-theme="sweet"] .reward-toast--daily {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}

body[data-theme="sweet"] .reward-toast--daily strong {
  color: #2F7664;
}

@media (max-width: 430px) {
  body[data-theme="sweet"] .toast-container {
    width: calc(100vw - 28px);
    max-width: 420px;
  }

  body[data-theme="sweet"] .toast,
  body[data-theme="sweet"] .reward-toast {
    width: calc(100vw - 28px);
    max-width: 420px;
    font-size: 0.92rem;
  }
}

body.reduce-motion[data-theme="sweet"]::before {
  background-image: none;
}

body.reduce-motion[data-theme="sweet"] .gacha-panel::before {
  opacity: 0.5;
}

body.reduce-motion[data-theme="sweet"] .collection-card.rarity-UR {
  box-shadow: var(--shadow-md);
}

/* V2.1.6 ? Sweet ??????????? */

body[data-theme="sweet"] .modal:has(#task-form) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8FC 100%);
  border: 1px solid #F0C9DA;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 10px 28px rgba(199, 53, 120, 0.12);
  color: #3D2633;
  -webkit-overflow-scrolling: touch;
}

body[data-theme="sweet"] .modal:has(#task-form) .modal-title {
  color: #3D2633;
  font-weight: 800;
}

body[data-theme="sweet"] .modal:has(#task-form) .modal-close {
  background: #FFF0F7;
  border-color: #E7AFC8;
  color: #7A4E62;
}

body[data-theme="sweet"] #task-form.task-form {
  color: #3D2633;
}

/* V2.2 ? Sweet ??????????????????????? */

body[data-theme="sweet"] .modal:has(#habit-form) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8FC 100%);
  border: 1px solid #F0C9DA;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 10px 28px rgba(199, 53, 120, 0.12);
  color: #3D2633;
  -webkit-overflow-scrolling: touch;
}

body[data-theme="sweet"] .modal:has(#habit-form) .modal-title {
  color: #3D2633;
  font-weight: 800;
}

body[data-theme="sweet"] .modal:has(#habit-form) .modal-close {
  background: #FFF0F7;
  border-color: #E7AFC8;
  color: #7A4E62;
}

body[data-theme="sweet"] #habit-form.task-form {
  color: #3D2633;
}

body[data-theme="sweet"] #habit-form .form-label {
  color: #5A3A4B;
  font-weight: 700;
}

body[data-theme="sweet"] #habit-form .form-hint,
body[data-theme="sweet"] #habit-form .settings-toggle__desc {
  color: #7A4E62;
  font-weight: 500;
}

body[data-theme="sweet"] #habit-form .form-input,
body[data-theme="sweet"] #habit-form .form-textarea,
body[data-theme="sweet"] #habit-form .form-select,
body[data-theme="sweet"] #habit-form input[type="date"] {
  color: #3D2633;
  background: #FFFFFF;
  border: 1px solid #E7AFC8;
  border-radius: 16px;
  caret-color: #C73578;
  box-shadow: inset 0 1px 0 rgba(199, 53, 120, 0.04);
}

body[data-theme="sweet"] #habit-form .form-textarea {
  min-height: 92px;
  line-height: 1.55;
}

body[data-theme="sweet"] #habit-form .form-input::placeholder,
body[data-theme="sweet"] #habit-form .form-textarea::placeholder {
  color: #9A7285;
  opacity: 1;
}

body[data-theme="sweet"] #habit-form .form-input:focus,
body[data-theme="sweet"] #habit-form .form-textarea:focus,
body[data-theme="sweet"] #habit-form .form-select:focus,
body[data-theme="sweet"] #habit-form input[type="date"]:focus {
  color: #3D2633;
  background: #FFFFFF;
  border-color: #C73578;
  box-shadow: 0 0 0 3px rgba(199, 53, 120, 0.18);
  outline: none;
}

body[data-theme="sweet"] #habit-form .form-actions {
  gap: 12px;
}

body[data-theme="sweet"] #habit-form .form-actions .btn--primary {
  background: linear-gradient(135deg, #D44786 0%, #6F55D9 100%);
  border: 1px solid rgba(199, 53, 120, 0.28);
}

body[data-theme="sweet"] #habit-form .form-actions .btn--ghost {
  background: #FFF0F7;
  border-color: #E7AFC8;
  color: #7A4E62;
}

/* V2.2 ? Sweet ?????????????? */

body[data-theme="sweet"] .modal:has(.title-modal) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8FC 100%);
  border: 1px solid #F0C9DA;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 10px 28px rgba(199, 53, 120, 0.12);
  color: #3D2633;
}

body[data-theme="sweet"] .modal:has(.title-modal) .modal-title {
  color: #3D2633;
  font-weight: 800;
}

body[data-theme="sweet"] .modal:has(.title-modal) .modal-close {
  background: #FFF0F7;
  border-color: #E7AFC8;
  color: #7A4E62;
}

body[data-theme="sweet"] .title-modal__desc {
  color: #7A4E62;
  font-weight: 500;
}

body[data-theme="sweet"] .title-list {
  gap: 10px;
  margin-bottom: 14px;
}

body[data-theme="sweet"] .title-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(111, 85, 217, 0.14);
  border-radius: 16px;
  padding: 12px 14px;
}

body[data-theme="sweet"] .title-item--equipped {
  border-color: rgba(199, 53, 120, 0.22);
  background: linear-gradient(135deg, rgba(255, 230, 240, 0.9), rgba(245, 237, 255, 0.9));
}

body[data-theme="sweet"] .title-item__name {
  font-weight: 700;
  color: #3D2633;
}

body[data-theme="sweet"] .title-item__badge {
  color: #C73578;
  background: rgba(199, 53, 120, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
}

body[data-theme="sweet"] .title-item .btn.btn--secondary {
  background: #FFFFFF;
  border-color: rgba(111, 85, 217, 0.18);
  color: #6F55D9;
}

body[data-theme="sweet"] .title-modal #btn-clear-title.btn {
  background: #FFF0F7;
  border-color: #E7AFC8;
  color: #7A4E62;
  border-radius: 16px;
}

body[data-theme="sweet"] #task-form .form-label {
  color: #5A3A4B;
  font-weight: 700;
}

body[data-theme="sweet"] #task-form .form-hint,
body[data-theme="sweet"] #task-form .settings-toggle__desc {
  color: #7A4E62;
  font-weight: 500;
}

body[data-theme="sweet"] #task-form .settings-toggle__label {
  color: #5A3A4B;
  font-weight: 700;
}

body[data-theme="sweet"] #task-form .form-input,
body[data-theme="sweet"] #task-form .form-textarea,
body[data-theme="sweet"] #task-form .form-select,
body[data-theme="sweet"] #task-form input[type="date"],
body[data-theme="sweet"] #task-form .subtask-form-input {
  color: #3D2633;
  background: #FFFFFF;
  border: 1px solid #E7AFC8;
  border-radius: 16px;
  caret-color: #C73578;
  box-shadow: inset 0 1px 0 rgba(199, 53, 120, 0.04);
}

body[data-theme="sweet"] #task-form .form-textarea {
  min-height: 112px;
  line-height: 1.55;
}

body[data-theme="sweet"] #task-form input[type="date"] {
  color-scheme: light;
  min-height: var(--tap-min);
}

body[data-theme="sweet"] #task-form .form-input::placeholder,
body[data-theme="sweet"] #task-form .form-textarea::placeholder,
body[data-theme="sweet"] #task-form .subtask-form-input::placeholder {
  color: #9A7285;
  opacity: 1;
}

body[data-theme="sweet"] #task-form .form-input:focus,
body[data-theme="sweet"] #task-form .form-textarea:focus,
body[data-theme="sweet"] #task-form .form-select:focus,
body[data-theme="sweet"] #task-form input[type="date"]:focus,
body[data-theme="sweet"] #task-form .subtask-form-input:focus {
  color: #3D2633;
  background: #FFFFFF;
  border-color: #C73578;
  box-shadow: 0 0 0 3px rgba(199, 53, 120, 0.18);
  outline: none;
}

body[data-theme="sweet"] #task-form .form-input:disabled,
body[data-theme="sweet"] #task-form .form-textarea:disabled,
body[data-theme="sweet"] #task-form .form-select:disabled {
  color: #8A6677;
  background: #F8EAF1;
  border-color: #E9CEDA;
  opacity: 1;
}

body[data-theme="sweet"] #task-form .form-select option {
  color: #3D2633;
  background: #FFFFFF;
}

body[data-theme="sweet"] #task-form #task-priority-group.segmented-control {
  background: #FFF8FC;
  border: 1px solid #F7DDEA;
  border-radius: 16px;
  padding: 4px;
  gap: 4px;
}

body[data-theme="sweet"] #task-form #task-priority-group .segmented-control__btn {
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

body[data-theme="sweet"] #task-form #task-priority-group .segmented-control__btn[data-value="normal"] {
  background: #E7F6F1;
  color: #2F7664;
  border-color: #A8D8CA;
}

body[data-theme="sweet"] #task-form #task-priority-group .segmented-control__btn[data-value="important"],
body[data-theme="sweet"] #task-form #task-priority-group .segmented-control__btn--important {
  background: #FFF1D8;
  color: #B66A1E;
  border-color: #F0C878;
}

body[data-theme="sweet"] #task-form #task-priority-group .segmented-control__btn[data-value="urgent"],
body[data-theme="sweet"] #task-form #task-priority-group .segmented-control__btn--urgent {
  background: #FFE3EA;
  color: #C93E5D;
  border-color: #F3A8B8;
}

body[data-theme="sweet"] #task-form #task-priority-group .segmented-control__btn.active {
  box-shadow: 0 0 0 3px rgba(199, 53, 120, 0.12);
  font-weight: 800;
}

body[data-theme="sweet"] #task-form .settings-toggle__switch {
  background: #FFFFFF;
  border: 1px solid #E7AFC8;
}

body[data-theme="sweet"] #task-form .settings-toggle__switch::after {
  background: #9A7285;
}

body[data-theme="sweet"] #task-form .settings-toggle__input:checked + .settings-toggle__switch {
  background: #C73578;
  border-color: #C73578;
}

body[data-theme="sweet"] #task-form .settings-toggle__input:checked + .settings-toggle__switch::after {
  background: #FFFFFF;
}

body[data-theme="sweet"] #task-form .form-toggle {
  background: #FFF8FC;
  border: 1px solid #F7DDEA;
  border-radius: 18px;
  padding: 14px 16px;
}

body[data-theme="sweet"] #task-form .subtask-form-list {
  background: #FFF8FC;
  border: 1px solid #F7DDEA;
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 10px;
}

body[data-theme="sweet"] #task-form .subtask-form-add {
  margin-bottom: 8px;
}

body[data-theme="sweet"] #task-form #subtask-add-btn {
  background: #FFF0F7;
  color: #B83274;
  border: 1px solid #E7AFC8;
  font-weight: 700;
  white-space: nowrap;
}

body[data-theme="sweet"] #task-form #subtask-add-btn:active:not(:disabled) {
  background: #FFE0EE;
}

body[data-theme="sweet"] #task-form .subtask-form-remove {
  color: #C93E5D;
  border-color: #F3A8B8;
  background: #FFE3EA;
}

body[data-theme="sweet"] #task-form .form-error {
  color: #C93E5D;
  background: #FFE3EA;
  border: 1px solid #F3A8B8;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
}

body[data-theme="sweet"] #task-form .form-actions {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #F7DDEA;
  gap: 10px;
}

body[data-theme="sweet"] #task-form .form-actions .btn--primary {
  background: linear-gradient(135deg, #D44786 0%, #C73578 100%);
  color: #FFFFFF;
  border: none;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(199, 53, 120, 0.24);
}

body[data-theme="sweet"] #task-form .form-actions .btn--primary:active:not(:disabled) {
  background: linear-gradient(135deg, #C73578 0%, #B82E6D 100%);
}

body[data-theme="sweet"] #task-form .form-actions .btn--primary:disabled {
  background: #E9CEDA;
  color: #8A6677;
  box-shadow: none;
  opacity: 1;
}

body[data-theme="sweet"] #task-form .form-actions .btn--ghost,
body[data-theme="sweet"] #task-form #form-cancel {
  background: #FFF0F7;
  color: #B83274;
  border: 1px solid #E7AFC8;
  font-weight: 700;
}

body[data-theme="sweet"] #task-form .form-actions .btn--ghost:active:not(:disabled),
body[data-theme="sweet"] #task-form #form-cancel:active:not(:disabled) {
  background: #FFE0EE;
}

/* V2.1.5 ? Sweet ?????????????????? */
body[data-theme="sweet"] input,
body[data-theme="sweet"] textarea,
body[data-theme="sweet"] select,
body[data-theme="sweet"] .form-input,
body[data-theme="sweet"] .form-textarea,
body[data-theme="sweet"] .form-select,
body[data-theme="sweet"] .task-input,
body[data-theme="sweet"] .task-textarea,
body[data-theme="sweet"] .new-task-input,
body[data-theme="sweet"] .new-task-textarea,
body[data-theme="sweet"] .subtask-input,
body[data-theme="sweet"] .subtask-form-input {
  color: #3D2633;
  background: #FFFFFF;
  border-color: #E7AFC8;
  caret-color: #C73578;
}

body[data-theme="sweet"] input::placeholder,
body[data-theme="sweet"] textarea::placeholder,
body[data-theme="sweet"] .form-input::placeholder,
body[data-theme="sweet"] .form-textarea::placeholder,
body[data-theme="sweet"] .task-input::placeholder,
body[data-theme="sweet"] .task-textarea::placeholder,
body[data-theme="sweet"] .new-task-input::placeholder,
body[data-theme="sweet"] .new-task-textarea::placeholder,
body[data-theme="sweet"] .subtask-input::placeholder,
body[data-theme="sweet"] .subtask-form-input::placeholder {
  color: #9A7285;
  opacity: 1;
}

body[data-theme="sweet"] input:focus,
body[data-theme="sweet"] textarea:focus,
body[data-theme="sweet"] select:focus,
body[data-theme="sweet"] .form-input:focus,
body[data-theme="sweet"] .form-textarea:focus,
body[data-theme="sweet"] .form-select:focus,
body[data-theme="sweet"] .task-input:focus,
body[data-theme="sweet"] .task-textarea:focus,
body[data-theme="sweet"] .new-task-input:focus,
body[data-theme="sweet"] .new-task-textarea:focus,
body[data-theme="sweet"] .subtask-input:focus,
body[data-theme="sweet"] .subtask-form-input:focus {
  color: #3D2633;
  background: #FFFFFF;
  border-color: #C73578;
  box-shadow: 0 0 0 3px rgba(199, 53, 120, 0.18);
  outline: none;
}

body[data-theme="sweet"] input:disabled,
body[data-theme="sweet"] textarea:disabled,
body[data-theme="sweet"] select:disabled,
body[data-theme="sweet"] .form-input:disabled,
body[data-theme="sweet"] .form-textarea:disabled,
body[data-theme="sweet"] .form-select:disabled {
  color: #8A6677;
  background: #F8EAF1;
  border-color: #E9CEDA;
}

/* ??? ???????? ??? */

.settings-theme {
  margin-bottom: var(--space-4);
}

.theme-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  background: var(--color-bg-card-soft);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
}

.theme-card:active {
  transform: scale(0.985);
}

.theme-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.theme-card--active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}

.theme-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.theme-card__title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-main);
}

.theme-card__badge {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.theme-card__badge[hidden] {
  display: none;
}

.theme-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 0;
}

.theme-card__preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.theme-card__preview-frame {
  flex: 1;
  min-height: 52px;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  border: 1px solid transparent;
}

.theme-card__preview-frame--default {
  background: linear-gradient(145deg, #080B16, #141A2E);
  border-color: rgba(167, 139, 250, 0.28);
}

.theme-card__preview-frame--sweet {
  background: linear-gradient(145deg, #FFF7FB, #FFF1F7);
  border-color: #F0C9DA;
}

.theme-card__swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.theme-card__swatch--primary-default {
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
}

.theme-card__swatch--accent-default {
  background: #fbbf24;
}

.theme-card__swatch--primary-sweet {
  background: linear-gradient(135deg, #C73578, #D44786);
}

.theme-card__swatch--accent-sweet {
  background: #6F55D9;
}

.theme-card__preview-btn {
  height: 22px;
  min-width: 48px;
  border-radius: var(--radius-pill);
  border: none;
}

.theme-card__preview-btn--default {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.theme-card__preview-btn--sweet {
  background: linear-gradient(135deg, #C73578, #D44786);
}

/* =========================
   Daily Blessing
   ========================= */

.daily-blessing-section {
  margin-bottom: var(--space-md);
}

.daily-blessing-section--home {
  margin-top: 0;
  margin-bottom: 16px;
}

.daily-blessing-gacha-entry {
  margin-bottom: var(--space-md);
}

.daily-blessing-gacha-entry__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
}

.daily-blessing-gacha-entry__main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.daily-blessing-gacha-entry__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.daily-blessing-gacha-entry__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.daily-blessing-gacha-entry__title {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
}

.daily-blessing-gacha-entry__summary {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-blessing-gacha-entry__status {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(139, 92, 246, 0.14);
  color: var(--text-secondary);
}

.daily-blessing-gacha-entry__status--done {
  background: rgba(52, 211, 153, 0.14);
  color: var(--success);
}

.daily-blessing-gacha-entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#view-gacha .daily-blessing-gacha-entry {
  margin-top: 0;
}

.daily-blessing-section--pending .daily-blessing-card {
  animation: daily-blessing-glow 3s ease-in-out infinite;
}

@keyframes daily-blessing-glow {
  0%, 100% { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36), 0 0 22px rgba(139, 92, 246, 0.14); }
  50% { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36), 0 0 32px rgba(139, 92, 246, 0.26); }
}

body.reduce-motion .daily-blessing-section--pending .daily-blessing-card {
  animation: none;
}

.daily-blessing-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 1rem 1.05rem 1.1rem;
}

.daily-blessing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.daily-blessing-card > * {
  position: relative;
  z-index: 1;
}

/* Header */
.daily-blessing-card__header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.daily-blessing-card__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  min-width: 0;
  padding: 0.15rem 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
}

.daily-blessing-card__toggle:active {
  opacity: 0.88;
}

.daily-blessing-card__icon {
  flex-shrink: 0;
  font-size: 1.45rem;
  line-height: 1;
  width: 2rem;
  text-align: center;
}

.daily-blessing-card__icon--sweet {
  display: none;
}

.daily-blessing-card__header-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.daily-blessing-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.daily-blessing-subtitle {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.35;
  opacity: 0.88;
}

.daily-blessing-subtitle--sweet {
  display: none;
}

.daily-blessing-card__compact-summary {
  display: none;
  font-size: 0.76rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.82;
}

.daily-blessing-card--collapsed .daily-blessing-subtitle {
  display: none;
}

.daily-blessing-card--collapsed .daily-blessing-card__compact-summary {
  display: block;
}

.daily-blessing-card--collapsed .daily-status-badge {
  display: none;
}

.daily-status-badge {
  flex-shrink: 0;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.daily-blessing-card__chevron {
  flex-shrink: 0;
  font-size: 0.68rem;
  opacity: 0.65;
  padding-left: 0.1rem;
}

.daily-blessing-card__quick-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.daily-blessing-card__quick-btn {
  min-height: 34px;
  padding: 0.25rem 0.6rem;
  font-size: 0.74rem;
}

/* Body */
.daily-blessing-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 0.95rem;
  margin-top: 0.85rem;
  border-top: 1px solid rgba(167, 139, 250, 0.14);
}

.daily-blessing-card--collapsed .daily-blessing-card__body {
  display: none;
}

/* Streak */
.daily-streak-section {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.daily-streak-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.daily-streak-stat {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.6rem 0.7rem;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.14);
}

.daily-streak-stat__label {
  font-size: 0.68rem;
  opacity: 0.72;
  letter-spacing: 0.03em;
}

.daily-streak-stat__value {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.daily-streak-number {
  font-weight: 900;
}

.daily-milestone-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.daily-milestone-progress__label {
  font-size: 0.74rem;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.daily-milestone-progress__value {
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  opacity: 0.85;
}

.daily-milestone-progress__bar {
  height: 7px;
}

.daily-milestone-progress__fill {
  background: linear-gradient(90deg, #8b5cf6, #fbbf24);
}

/* Reward preview */
.daily-reward-preview__title {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.88;
}

.daily-reward-preview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.daily-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.2);
}

.daily-reward-chip--bonus {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.32);
}

.daily-reward-chip__icon {
  font-size: 0.85rem;
  line-height: 1;
}

/* Actions */
.daily-blessing-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.daily-blessing-card__btn {
  min-height: 46px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 14px;
}

/* Footer */
.daily-blessing-card__footer {
  margin: 0;
  padding: 0.62rem 0.72rem;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.12);
}

/* ??? Default ???? ??? */

/* =========================
   Daily Blessing ? ?????default / sweet?
   ========================= */

body[data-theme="default"] .daily-blessing-card,
body[data-theme="default"] .daily-checkin-card {
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.24), transparent 34%),
    radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.14), transparent 32%),
    linear-gradient(180deg, #18203A 0%, #101628 100%);
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.36),
    0 0 26px rgba(139, 92, 246, 0.16);
  color: #F4F7FF;
}

body[data-theme="default"] .daily-blessing-card::before,
body[data-theme="default"] .daily-checkin-card::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.08;
}

body[data-theme="default"] .daily-blessing-title,
body[data-theme="default"] .daily-checkin-title {
  color: #F4F7FF;
  font-weight: 900;
  letter-spacing: 0.02em;
}

body[data-theme="default"] .daily-blessing-subtitle,
body[data-theme="default"] .daily-checkin-subtitle {
  color: #C7D2EA;
}

body[data-theme="default"] .daily-blessing-card__compact-summary {
  color: #C7D2EA;
}

body[data-theme="default"] .daily-streak-number {
  color: #FBBF24;
  font-weight: 900;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.28);
}

body[data-theme="default"] .daily-streak-stat {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(167, 139, 250, 0.22);
}

body[data-theme="default"] .daily-streak-stat__label,
body[data-theme="default"] .daily-milestone-progress__label {
  color: #C7D2EA;
}

body[data-theme="default"] .daily-streak-stat__value,
body[data-theme="default"] .daily-milestone-progress__value {
  color: #F4F7FF;
}

body[data-theme="default"] .daily-status-badge {
  background: rgba(139, 92, 246, 0.18);
  color: #DDD6FE;
  border: 1px solid rgba(167, 139, 250, 0.32);
}

body[data-theme="default"] .daily-status-badge.done {
  background: rgba(52, 211, 153, 0.16);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.34);
}

body[data-theme="default"] .daily-blessing-card__body {
  border-top-color: rgba(167, 139, 250, 0.18);
}

body[data-theme="default"] .daily-reward-preview__title {
  color: #DDD6FE;
}

body[data-theme="default"] .daily-reward-chip {
  background: rgba(24, 32, 58, 0.55);
  border-color: rgba(167, 139, 250, 0.28);
  color: #F4F7FF;
}

body[data-theme="default"] .daily-reward-chip--bonus {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.38);
  color: #FDE68A;
}

body[data-theme="default"] .daily-blessing-card__footer {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.18);
  color: #C7D2EA;
}

body[data-theme="default"] .daily-blessing-card--pending {
  border-color: rgba(167, 139, 250, 0.42);
}

body[data-theme="default"] .daily-blessing-card__icon--default {
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.45));
}

body[data-theme="default"] .daily-milestone-progress__bar {
  background: rgba(15, 22, 40, 0.7);
}

body[data-theme="default"] .daily-milestone-progress__fill {
  background: linear-gradient(90deg, #7c3aed, #fbbf24);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

/* ??? Sweet ???? ??? */

body[data-theme="sweet"] .daily-blessing-card__icon--default {
  display: none;
}

body[data-theme="sweet"] .daily-blessing-card__icon--sweet {
  display: block;
}

body[data-theme="sweet"] .daily-blessing-subtitle--default {
  display: none;
}

body[data-theme="sweet"] .daily-blessing-subtitle--sweet {
  display: block;
}

body[data-theme="sweet"] .daily-blessing-card,
body[data-theme="sweet"] .daily-checkin-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 182, 210, 0.45), transparent 38%),
    radial-gradient(circle at 6% 92%, rgba(186, 168, 255, 0.28), transparent 36%),
    linear-gradient(165deg, #fffaf7 0%, #fff5f9 48%, #f9f4ff 100%);
  border: 1.5px solid rgba(199, 53, 120, 0.16);
  box-shadow:
    0 10px 28px rgba(199, 53, 120, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: #4a3d5c;
}

body[data-theme="sweet"] .daily-blessing-card::before,
body[data-theme="sweet"] .daily-checkin-card::before {
  background-image:
    radial-gradient(circle, rgba(199, 53, 120, 0.08) 1px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.55;
}

body[data-theme="sweet"] .daily-blessing-title,
body[data-theme="sweet"] .daily-checkin-title {
  color: #6f55d9;
  font-weight: 900;
}

body[data-theme="sweet"] .daily-blessing-subtitle,
body[data-theme="sweet"] .daily-checkin-subtitle {
  color: #c73578;
}

body[data-theme="sweet"] .daily-blessing-card__compact-summary {
  color: #8b6b9e;
}

body[data-theme="sweet"] .daily-streak-number {
  color: #c73578;
  font-weight: 900;
}

body[data-theme="sweet"] .daily-streak-stat {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(199, 53, 120, 0.12);
}

body[data-theme="sweet"] .daily-streak-stat__label,
body[data-theme="sweet"] .daily-milestone-progress__label {
  color: #8b6b9e;
}

body[data-theme="sweet"] .daily-streak-stat__value,
body[data-theme="sweet"] .daily-milestone-progress__value {
  color: #4a3d5c;
}

body[data-theme="sweet"] .daily-status-badge {
  background: rgba(111, 85, 217, 0.1);
  color: #6f55d9;
  border: 1px solid rgba(111, 85, 217, 0.22);
}

body[data-theme="sweet"] .daily-status-badge.done {
  background: rgba(199, 53, 120, 0.1);
  color: #c73578;
  border-color: rgba(199, 53, 120, 0.24);
}

body[data-theme="sweet"] .daily-blessing-card__body {
  border-top-color: rgba(199, 53, 120, 0.1);
}

body[data-theme="sweet"] .daily-reward-preview__title {
  color: #6f55d9;
}

body[data-theme="sweet"] .daily-reward-chip {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(111, 85, 217, 0.16);
  color: #4a3d5c;
}

body[data-theme="sweet"] .daily-reward-chip--bonus {
  background: linear-gradient(135deg, rgba(255, 230, 240, 0.95), rgba(245, 237, 255, 0.95));
  border-color: rgba(199, 53, 120, 0.22);
  color: #c73578;
}

body[data-theme="sweet"] .daily-blessing-card__footer {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(199, 53, 120, 0.1);
  color: #8b6b9e;
}

body[data-theme="sweet"] .daily-blessing-card--pending {
  border-color: rgba(199, 53, 120, 0.28);
}

body[data-theme="sweet"] .daily-blessing-section--pending .daily-blessing-card {
  animation: daily-blessing-glow-sweet 3s ease-in-out infinite;
}

@keyframes daily-blessing-glow-sweet {
  0%, 100% { box-shadow: 0 10px 28px rgba(199, 53, 120, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
  50% { box-shadow: 0 12px 32px rgba(199, 53, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
}

body[data-theme="sweet"] .daily-milestone-progress__bar {
  background: rgba(199, 53, 120, 0.08);
}

body[data-theme="sweet"] .daily-milestone-progress__fill {
  background: linear-gradient(90deg, #6f55d9, #c73578);
}

/* =========================
   Daily Wheel
   ========================= */

.wheel-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 100%;
  padding-bottom: var(--space-3);
}

.daily-wheel-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wheel-modal__status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.wheel-modal__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
}

.wheel-container {
  position: relative;
  width: 100%;
  max-width: min(78vw, 320px);
  min-height: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.daily-wheel-stage {
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.daily-wheel-wrapper {
  position: relative;
  width: min(76vw, 292px);
  height: min(76vw, 292px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  flex: 0 0 auto;
  contain: layout paint;
}

.daily-wheel-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

body[data-theme="default"] .daily-wheel-wrapper::before {
  box-shadow:
    0 0 0 2px rgba(139, 92, 246, 0.2),
    inset 0 0 24px rgba(0, 0, 0, 0.28);
}

body[data-theme="sweet"] .daily-wheel-wrapper::before {
  box-shadow:
    0 0 0 2px rgba(200, 117, 152, 0.55),
    inset 0 0 18px rgba(111, 41, 71, 0.06);
}

.daily-wheel-pointer {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  z-index: 6;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #fbbf24;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

body[data-theme="default"] .daily-wheel-pointer {
  border-top-color: #fbbf24;
}

body[data-theme="sweet"] .daily-wheel-pointer {
  border-top-color: #6F2947;
  filter: drop-shadow(0 2px 3px rgba(93, 38, 63, 0.35));
}

.daily-wheel-rotor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0) rotate(var(--wheel-rotation, 0deg));
}

.daily-wheel-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center center;
  transform-box: fill-box;
  border-radius: 50%;
}

body[data-theme="default"] .daily-wheel-outer-ring {
  stroke: rgba(251, 191, 36, 0.55);
  stroke-width: 3;
}

body[data-theme="sweet"] .daily-wheel-outer-ring {
  stroke: #C87598;
  stroke-width: 3;
}

.daily-wheel-label {
  font-family: inherit;
  font-weight: 800;
  pointer-events: none;
  user-select: none;
}

.daily-wheel-label__name {
  font-size: 0.75rem;
  font-weight: 700;
}

.daily-wheel-label__amount {
  font-size: 0.75rem;
  font-weight: 800;
}

body[data-theme="default"] .daily-wheel-label {
  fill: #f4f7ff;
}

body[data-theme="sweet"] .daily-wheel-label {
  fill: #4A2E3B;
}

.daily-wheel-center-button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  z-index: 5;
  border: 3px solid #fbbf24;
  background: linear-gradient(145deg, #7c3aed, #5b21b6);
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.daily-wheel-center-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body[data-theme="sweet"] .daily-wheel-center-button {
  background: #A83F6B;
  border: 2px solid #8F3159;
  color: #FFFFFF;
  font-size: var(--font-size-md, 0.88rem);
  font-weight: 800;
  box-shadow:
    0 5px 14px rgba(93, 38, 63, 0.18),
    inset 0 1px 0 #FFFFFF;
}

body[data-theme="sweet"] .daily-wheel-center-button:hover:not(:disabled),
body[data-theme="sweet"] .daily-wheel-center-button:active:not(:disabled) {
  background: #8F3159;
}

body[data-theme="sweet"] .daily-wheel-center-button:disabled {
  opacity: 1;
  background: #E3D4DA;
  color: #65515A;
  border-color: #CCBBC2;
  box-shadow: none;
  cursor: not-allowed;
}

.daily-wheel-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
  width: 100%;
  max-width: min(76vw, 292px);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.daily-wheel-preview__item {
  text-align: center;
  padding: 3px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="sweet"] .daily-wheel-preview__item {
  background: #FADCE9;
  color: #702A4A;
  border: 1px solid #E7B8CC;
  font-weight: 600;
}

body.reduce-motion .daily-wheel-rotor {
  transition-duration: 300ms !important;
}

@media (max-width: 380px) {
  .daily-wheel-wrapper {
    width: min(74vw, 270px);
    height: min(74vw, 270px);
  }

  .daily-wheel-center-button {
    width: 66px;
    height: 66px;
    min-width: 66px;
    min-height: 66px;
    font-size: 0.75rem;
  }

  .daily-wheel-label__name,
  .daily-wheel-label__amount {
    font-size: 0.75rem;
  }

  .daily-wheel-preview {
    max-width: min(74vw, 270px);
  }
}

/* Daily Wheel ? ???? */

.reward-toast--daily {
  max-width: min(92vw, 360px);
  text-align: center;
}

/* ???????????????????????????????????????????????????????????
   V2.2.3 Sweet ?? ? ?????????? sweet theme?
   ??????????????????????????????????????????????????????????? */

/* ??? Modal ?? ??? */

body[data-theme="sweet"] .modal:has(.sweet-summon-result) {
  width: min(92vw, 440px);
  max-width: min(92vw, 440px);
  max-height: 86vh;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

body[data-theme="sweet"] .modal:has(.sweet-summon-result) .modal-close {
  display: none;
}

/* ??? ????? Modal ?? ??? */

body[data-theme="sweet"] .sweet-summon-result {
  background: var(--sweet-result-bg-surface);
  border: 1px solid var(--sweet-result-border);
  border-radius: 28px;
  box-shadow: var(--sweet-result-shadow-strong);
  color: var(--sweet-result-text-main);
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
}

body[data-theme="sweet"] .sweet-summon-result__header {
  background: linear-gradient(135deg, #FFF0F7 0%, #F7F0FF 100%);
  border-bottom: 1px solid var(--sweet-result-border-soft);
  padding: 16px 18px 14px;
  flex-shrink: 0;
}

body[data-theme="sweet"] .sweet-summon-result__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

body[data-theme="sweet"] .sweet-summon-result__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sweet-result-text-secondary);
}

body[data-theme="sweet"] .sweet-summon-result__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--sweet-result-primary);
  line-height: 1.3;
}

body[data-theme="sweet"] .sweet-summon-result__pity {
  margin: 8px 0 0;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--sweet-result-accent-gold);
}

body[data-theme="sweet"] .sweet-summon-result__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 12px;
  flex: 1 1 auto;
  min-height: 0;
}

body[data-theme="sweet"] .sweet-summon-result__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--sweet-result-border-soft);
  background: transparent;
  flex-shrink: 0;
}

/* ??? ???Badge / Chip ??? */

body[data-theme="sweet"] .sweet-summon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

body[data-theme="sweet"] .sweet-summon-badge--rarity[data-rarity="N"] {
  background: var(--sweet-rarity-n-bg);
  color: var(--sweet-rarity-n-text);
  border-color: var(--sweet-rarity-n-border);
}

body[data-theme="sweet"] .sweet-summon-badge--rarity[data-rarity="R"] {
  background: var(--sweet-rarity-r-bg);
  color: var(--sweet-rarity-r-text);
  border-color: var(--sweet-rarity-r-border);
}

body[data-theme="sweet"] .sweet-summon-badge--rarity[data-rarity="SR"] {
  background: var(--sweet-rarity-sr-bg);
  color: var(--sweet-rarity-sr-text);
  border-color: var(--sweet-rarity-sr-border);
}

body[data-theme="sweet"] .sweet-summon-badge--rarity[data-rarity="SSR"] {
  background: var(--sweet-rarity-ssr-bg);
  color: var(--sweet-rarity-ssr-text);
  border-color: var(--sweet-rarity-ssr-border);
}

body[data-theme="sweet"] .sweet-summon-badge--rarity[data-rarity="UR"] {
  background: var(--sweet-rarity-ur-bg);
  color: var(--sweet-rarity-ur-text);
  border-color: var(--sweet-rarity-ur-border);
}

body[data-theme="sweet"] .sweet-summon-badge--new {
  background: var(--sweet-result-success-soft);
  color: var(--sweet-result-success);
  border-color: #A8D8CA;
  animation: sweetSummonBadgePop 0.4s ease 0.15s both;
}

body[data-theme="sweet"] .sweet-summon-badge--fragment {
  background: var(--sweet-result-accent-gold-soft);
  color: var(--sweet-rarity-ssr-text);
  border-color: var(--sweet-rarity-ssr-border);
}

body[data-theme="sweet"] .sweet-summon-badge--status {
  background: var(--sweet-result-bg-soft);
  color: var(--sweet-result-text-secondary);
  border-color: var(--sweet-result-border-soft);
  font-weight: 700;
}

body[data-theme="sweet"] .sweet-summon-badge--status-new {
  color: var(--sweet-result-success);
  background: var(--sweet-result-success-soft);
  border-color: #A8D8CA;
}

body[data-theme="sweet"] .sweet-summon-badge--status-dup {
  color: var(--sweet-rarity-ssr-text);
  background: var(--sweet-result-accent-gold-soft);
  border-color: var(--sweet-rarity-ssr-border);
}

body[data-theme="sweet"] .sweet-summon-badge--pity {
  background: var(--sweet-result-accent-gold-soft);
  color: var(--sweet-result-accent-gold);
  border-color: var(--sweet-rarity-ssr-border);
  font-size: 0.625rem;
  padding: 2px 8px;
}

body[data-theme="sweet"] .sweet-summon-badge--highest {
  font-size: 0.75rem;
  padding: 5px 12px;
}

/* ??? ??????? ??? */

body[data-theme="sweet"] .sweet-summon-showcase {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sweet-result-bg-main) 100%);
  border: 1px solid var(--sweet-result-border-soft);
  border-radius: 24px;
  box-shadow: var(--sweet-result-shadow);
  padding: 18px 16px 16px;
  animation: sweetSummonFadeUp 0.5s ease both;
}

body[data-theme="sweet"] .sweet-summon-showcase[data-rarity="SSR"] {
  border-color: var(--sweet-rarity-ssr-border);
}

body[data-theme="sweet"] .sweet-summon-showcase[data-rarity="UR"] {
  border-color: var(--sweet-rarity-ur-border);
}

body[data-theme="sweet"] .sweet-summon-showcase__frame {
  margin: 0 auto 14px;
  max-width: min(70vw, 210px);
  padding: 8px;
  background: var(--sweet-result-bg-surface);
  border: 1px solid var(--sweet-result-border-soft);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(199, 53, 120, 0.10);
}

body[data-theme="sweet"] .sweet-summon-showcase__frame .pet-img-wrap {
  border-radius: 16px;
  overflow: hidden;
}

body[data-theme="sweet"] .sweet-summon-showcase__name {
  margin: 0 0 10px;
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--sweet-result-text-main);
  line-height: 1.25;
}

body[data-theme="sweet"] .sweet-summon-showcase__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

body[data-theme="sweet"] .sweet-summon-showcase__line {
  margin: 0 0 10px;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--sweet-result-text-secondary);
  line-height: 1.5;
}

body[data-theme="sweet"] .sweet-summon-showcase__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--sweet-result-text-secondary);
  text-align: left;
}

/* ??? ???????? ??? */

body[data-theme="sweet"] .sweet-summon-info {
  margin-top: 12px;
  background: var(--sweet-result-bg-main);
  border: 1px solid var(--sweet-result-border-soft);
  border-radius: 18px;
  padding: 4px 14px;
}

body[data-theme="sweet"] .sweet-summon-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--sweet-result-border-soft);
}

body[data-theme="sweet"] .sweet-summon-info__row:last-child {
  border-bottom: none;
}

body[data-theme="sweet"] .sweet-summon-info__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sweet-result-text-muted);
  text-align: left;
}

body[data-theme="sweet"] .sweet-summon-info__value {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--sweet-result-text-main);
  text-align: right;
}

body[data-theme="sweet"] .sweet-summon-info__value--success {
  color: var(--sweet-result-success);
}

body[data-theme="sweet"] .sweet-summon-info__value--fragment {
  color: var(--sweet-rarity-ssr-text);
}

/* ??? ???Summary 2?2 ??? */

body[data-theme="sweet"] .sweet-summon-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

body[data-theme="sweet"] .sweet-summon-summary__item {
  background: var(--sweet-result-bg-surface);
  border: 1px solid var(--sweet-result-border-soft);
  border-radius: 16px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

body[data-theme="sweet"] .sweet-summon-summary__item--highest {
  background: var(--sweet-result-accent-gold-soft);
  border-color: var(--sweet-rarity-ssr-border);
}

body[data-theme="sweet"] .sweet-summon-summary__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sweet-result-text-muted);
}

body[data-theme="sweet"] .sweet-summon-summary__value {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--sweet-result-text-main);
  line-height: 1.2;
}

body[data-theme="sweet"] .sweet-summon-summary__item--new .sweet-summon-summary__value {
  color: var(--sweet-result-success);
}

body[data-theme="sweet"] .sweet-summon-summary__item--frag .sweet-summon-summary__value {
  color: var(--sweet-rarity-ssr-text);
}

body[data-theme="sweet"] .sweet-summon-summary__item--highest .sweet-summon-summary__value {
  color: var(--sweet-rarity-ssr-text);
}

/* ??? ???Grid ??? ??? */

body[data-theme="sweet"] .sweet-summon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 360px) {
  body[data-theme="sweet"] .sweet-summon-grid {
    grid-template-columns: 1fr;
  }
}

body[data-theme="sweet"] .sweet-summon-grid-card {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sweet-result-bg-main) 100%);
  border: 1px solid var(--sweet-result-border);
  border-radius: 20px;
  box-shadow: 0 8px 18px rgba(199, 53, 120, 0.08);
  color: var(--sweet-result-text-main);
  display: flex;
  flex-direction: column;
  min-height: 168px;
  overflow: hidden;
  opacity: 0;
  animation: sweetSummonCardIn 0.4s ease forwards;
}

body[data-theme="sweet"] .sweet-summon-grid-card[data-rarity="SSR"] {
  border-color: var(--sweet-rarity-ssr-border);
}

body[data-theme="sweet"] .sweet-summon-grid-card[data-rarity="UR"] {
  border-color: var(--sweet-rarity-ur-border);
}

body[data-theme="sweet"] .sweet-summon-grid-card__media {
  padding: 10px 10px 0;
  background: var(--sweet-result-bg-main);
  flex-shrink: 0;
}

body[data-theme="sweet"] .sweet-summon-grid-card__media .pet-img-wrap,
body[data-theme="sweet"] .sweet-summon-grid-card__media img,
body[data-theme="sweet"] .sweet-summon-grid-card__media .pet-img {
  border-radius: 14px;
}

body[data-theme="sweet"] .sweet-summon-grid-card__body {
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

body[data-theme="sweet"] .sweet-summon-grid-card__name {
  margin: 2px 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--sweet-result-text-main);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

body[data-theme="sweet"] .sweet-summon-grid-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
}

/* ??? ???? ??? */

body[data-theme="sweet"] .sweet-summon-btn {
  width: 100%;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  line-height: 1.2;
}

body[data-theme="sweet"] .sweet-summon-btn--primary {
  background: linear-gradient(135deg, #D44786 0%, var(--sweet-result-primary) 100%);
  color: var(--sweet-result-text-on-dark);
  box-shadow: 0 8px 18px rgba(199, 53, 120, 0.22);
}

body[data-theme="sweet"] .sweet-summon-btn--secondary {
  background: linear-gradient(135deg, #7D65E8 0%, var(--sweet-result-secondary) 100%);
  color: var(--sweet-result-text-on-dark);
  box-shadow: 0 8px 18px rgba(111, 85, 217, 0.20);
}

body[data-theme="sweet"] .sweet-summon-btn--ghost {
  background: var(--sweet-result-bg-soft);
  color: var(--sweet-result-primary);
  border: 1px solid #E7AFC8;
  font-weight: 700;
}

body[data-theme="sweet"] .sweet-summon-btn--primary:disabled,
body[data-theme="sweet"] .sweet-summon-btn--secondary:disabled {
  background: #E9CEDA;
  color: var(--sweet-result-text-muted);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

/* ??? ?????? ??? */

@keyframes sweetSummonFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sweetSummonBadgePop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sweetSummonCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="sweet"] .sweet-summon-showcase,
  body[data-theme="sweet"] .sweet-summon-grid-card,
  body[data-theme="sweet"] .sweet-summon-badge--new {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

body.reduce-motion[data-theme="sweet"] .sweet-summon-showcase,
body.reduce-motion[data-theme="sweet"] .sweet-summon-grid-card,
body.reduce-motion[data-theme="sweet"] .sweet-summon-badge--new {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ???????????????????????????????????????????????????????????
   V2.2.4 Default ?? ? ?????????? default theme?
   ??????????????????????????????????????????????????????????? */

body[data-theme="default"] .modal:has(.default-summon-result) {
  width: min(92vw, 440px);
  max-width: min(92vw, 440px);
  max-height: 86vh;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

body[data-theme="default"] .modal:has(.default-summon-result) .modal-close {
  display: none;
}

/* ??? ????? Modal ?? ??? */

body[data-theme="default"] .default-summon-result {
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.10), transparent 32%),
    linear-gradient(180deg, #18203A 0%, #0E1324 100%);
  border: 1px solid var(--default-result-border);
  border-radius: 28px;
  box-shadow: var(--default-result-shadow-strong), var(--default-result-glow-purple);
  color: var(--default-result-text-main);
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  animation: defaultSummonModalIn 0.45s ease both;
}

body[data-theme="default"] .default-summon-result__header {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.20) 0%, rgba(34, 211, 238, 0.10) 100%);
  border-bottom: 1px solid rgba(167, 139, 250, 0.22);
  padding: 16px 18px 14px;
  flex-shrink: 0;
}

body[data-theme="default"] .default-summon-result__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

body[data-theme="default"] .default-summon-result__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--default-result-text-muted);
}

body[data-theme="default"] .default-summon-result__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--default-result-text-main);
  letter-spacing: 0.03em;
  text-shadow: 0 0 18px rgba(139, 92, 246, 0.34);
  line-height: 1.3;
}

body[data-theme="default"] .default-summon-result__pity {
  margin: 8px 0 0;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--default-rarity-ssr-text);
}

body[data-theme="default"] .default-summon-result__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 12px;
  flex: 1 1 auto;
  min-height: 0;
}

body[data-theme="default"] .default-summon-result__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--default-result-border-soft);
  background: transparent;
  flex-shrink: 0;
}

/* ??? ???Badge ??? */

body[data-theme="default"] .default-summon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

body[data-theme="default"] .default-summon-badge--rarity[data-rarity="N"] {
  background: var(--default-rarity-n-bg);
  color: var(--default-rarity-n-text);
  border-color: var(--default-rarity-n-border);
}

body[data-theme="default"] .default-summon-badge--rarity[data-rarity="R"] {
  background: var(--default-rarity-r-bg);
  color: var(--default-rarity-r-text);
  border-color: var(--default-rarity-r-border);
}

body[data-theme="default"] .default-summon-badge--rarity[data-rarity="SR"] {
  background: var(--default-rarity-sr-bg);
  color: var(--default-rarity-sr-text);
  border-color: var(--default-rarity-sr-border);
}

body[data-theme="default"] .default-summon-badge--rarity[data-rarity="SSR"] {
  background: var(--default-rarity-ssr-bg);
  color: var(--default-rarity-ssr-text);
  border-color: var(--default-rarity-ssr-border);
}

body[data-theme="default"] .default-summon-badge--rarity[data-rarity="UR"] {
  background: var(--default-rarity-ur-bg);
  color: var(--default-rarity-ur-text);
  border-color: var(--default-rarity-ur-border);
  box-shadow: 0 0 18px rgba(244, 114, 182, 0.18);
}

body[data-theme="default"] .default-summon-badge--new {
  background: var(--default-result-success-soft);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.36);
  animation: defaultSummonBadgePop 0.4s ease 0.15s both;
}

body[data-theme="default"] .default-summon-badge--fragment {
  background: rgba(251, 191, 36, 0.16);
  color: var(--default-rarity-ssr-text);
  border-color: rgba(251, 191, 36, 0.36);
}

body[data-theme="default"] .default-summon-badge--status {
  background: rgba(139, 92, 246, 0.12);
  color: var(--default-result-text-secondary);
  border-color: rgba(167, 139, 250, 0.28);
  font-weight: 700;
}

body[data-theme="default"] .default-summon-badge--status-new {
  color: #6EE7B7;
  background: var(--default-result-success-soft);
  border-color: rgba(52, 211, 153, 0.36);
}

body[data-theme="default"] .default-summon-badge--status-dup {
  color: var(--default-rarity-ssr-text);
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.32);
}

body[data-theme="default"] .default-summon-badge--pity {
  background: rgba(251, 191, 36, 0.14);
  color: var(--default-rarity-ssr-text);
  border-color: rgba(251, 191, 36, 0.32);
  font-size: 0.625rem;
  padding: 2px 8px;
}

body[data-theme="default"] .default-summon-badge--highest {
  font-size: 0.75rem;
  padding: 5px 12px;
}

/* ??? ?????????? ??? */

body[data-theme="default"] .default-summon-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(139, 92, 246, 0.22), transparent 42%),
    radial-gradient(circle at center, rgba(34, 211, 238, 0.10), transparent 56%),
    linear-gradient(180deg, #1B2542 0%, #11182B 100%);
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.36);
  padding: 18px 16px 16px;
  animation: defaultSummonFadeUp 0.5s ease both;
}

body[data-theme="default"] .default-summon-showcase__altar {
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  box-shadow: 0 0 28px rgba(139, 92, 246, 0.16);
  pointer-events: none;
  animation: defaultSummonAltarPulse 4s ease-in-out infinite;
}

body[data-theme="default"] .default-summon-showcase[data-rarity="SSR"] {
  border-color: rgba(251, 191, 36, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 32px rgba(0, 0, 0, 0.34), var(--default-result-glow-gold);
  background:
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 38%),
    linear-gradient(180deg, #2C2540 0%, #11182B 100%);
}

body[data-theme="default"] .default-summon-showcase[data-rarity="UR"] {
  border-color: rgba(244, 114, 182, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 32px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(244, 114, 182, 0.20),
    0 0 42px rgba(139, 92, 246, 0.14);
  background:
    radial-gradient(circle at top right, rgba(244, 114, 182, 0.18), transparent 38%),
    radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.16), transparent 42%),
    linear-gradient(180deg, #221B3A 0%, #11182B 100%);
}

body[data-theme="default"] .default-summon-showcase__hint {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

body[data-theme="default"] .default-summon-showcase__hint--ur {
  color: var(--default-rarity-ur-text);
}

body[data-theme="default"] .default-summon-showcase__hint--ssr {
  color: var(--default-rarity-ssr-text);
}

body[data-theme="default"] .default-summon-showcase__frame {
  position: relative;
  z-index: 1;
  margin: 0 auto 14px;
  max-width: min(70vw, 210px);
  padding: 8px;
  border-radius: 22px;
  background: rgba(8, 11, 22, 0.42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

body[data-theme="default"] .default-summon-showcase__frame .pet-img-wrap {
  border-radius: 16px;
  overflow: hidden;
}

body[data-theme="default"] .default-summon-showcase__name {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--default-result-text-main);
  line-height: 1.25;
}

body[data-theme="default"] .default-summon-showcase__badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

body[data-theme="default"] .default-summon-showcase__line {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--default-result-text-secondary);
  line-height: 1.5;
}

body[data-theme="default"] .default-summon-showcase__desc {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--default-result-text-secondary);
  text-align: left;
}

/* ??? ???????? ??? */

body[data-theme="default"] .default-summon-info {
  margin-top: 12px;
  background: rgba(8, 11, 22, 0.36);
  border: 1px solid var(--default-result-border-soft);
  border-radius: 18px;
  padding: 4px 14px;
}

body[data-theme="default"] .default-summon-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

body[data-theme="default"] .default-summon-info__row:last-child {
  border-bottom: none;
}

body[data-theme="default"] .default-summon-info__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--default-result-text-muted);
  text-align: left;
}

body[data-theme="default"] .default-summon-info__value {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--default-result-text-main);
  text-align: right;
}

body[data-theme="default"] .default-summon-info__value--success {
  color: #6EE7B7;
}

body[data-theme="default"] .default-summon-info__value--fragment {
  color: var(--default-rarity-ssr-text);
}

/* ??? ???Summary 2?2 ??? */

body[data-theme="default"] .default-summon-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  background: rgba(8, 11, 22, 0.36);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 12px;
}

body[data-theme="default"] .default-summon-summary__item {
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

body[data-theme="default"] .default-summon-summary__item--new {
  background: var(--default-result-success-soft);
  border-color: rgba(52, 211, 153, 0.28);
}

body[data-theme="default"] .default-summon-summary__item--frag,
body[data-theme="default"] .default-summon-summary__item--highest {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.28);
}

body[data-theme="default"] .default-summon-summary__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--default-result-text-muted);
}

body[data-theme="default"] .default-summon-summary__value {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--default-result-text-main);
  line-height: 1.2;
}

body[data-theme="default"] .default-summon-summary__item--new .default-summon-summary__value {
  color: #6EE7B7;
}

body[data-theme="default"] .default-summon-summary__item--frag .default-summon-summary__value,
body[data-theme="default"] .default-summon-summary__item--highest .default-summon-summary__value {
  color: var(--default-rarity-ssr-text);
}

/* ??? ???Grid ??? ??? */

body[data-theme="default"] .default-summon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 360px) {
  body[data-theme="default"] .default-summon-grid {
    grid-template-columns: 1fr;
  }
}

body[data-theme="default"] .default-summon-grid-card {
  background: linear-gradient(180deg, #1B2542 0%, #11182B 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  color: var(--default-result-text-main);
  display: flex;
  flex-direction: column;
  min-height: 168px;
  overflow: hidden;
  opacity: 0;
  animation: defaultSummonCardIn 0.4s ease forwards;
}

body[data-theme="default"] .default-summon-grid-card[data-rarity="SSR"] {
  border-color: rgba(251, 191, 36, 0.42);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), var(--default-result-glow-gold);
}

body[data-theme="default"] .default-summon-grid-card[data-rarity="UR"] {
  border-color: rgba(244, 114, 182, 0.46);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 22px rgba(244, 114, 182, 0.18);
}

body[data-theme="default"] .default-summon-grid-card__media {
  padding: 10px 10px 0;
  flex-shrink: 0;
}

body[data-theme="default"] .default-summon-grid-card__media .pet-img-wrap,
body[data-theme="default"] .default-summon-grid-card__media img,
body[data-theme="default"] .default-summon-grid-card__media .pet-img {
  border-radius: 14px;
  background: rgba(8, 11, 22, 0.42);
}

body[data-theme="default"] .default-summon-grid-card__body {
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

body[data-theme="default"] .default-summon-grid-card__name {
  margin: 2px 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--default-result-text-main);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

body[data-theme="default"] .default-summon-grid-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
}

/* ??? ???? ??? */

body[data-theme="default"] .default-summon-btn {
  width: 100%;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.2;
}

body[data-theme="default"] .default-summon-btn--primary {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #FFFFFF;
  border: 1px solid rgba(196, 181, 253, 0.36);
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.30);
}

body[data-theme="default"] .default-summon-btn--ten {
  background: linear-gradient(135deg, #22D3EE 0%, #8B5CF6 52%, #FBBF24 100%);
  color: #FFFFFF;
  border: 1px solid rgba(251, 191, 36, 0.32);
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.20), 0 0 24px rgba(139, 92, 246, 0.18);
}

body[data-theme="default"] .default-summon-btn--ghost {
  background: rgba(148, 163, 184, 0.10);
  color: var(--default-result-text-secondary);
  border: 1px solid rgba(148, 163, 184, 0.22);
  font-weight: 700;
}

body[data-theme="default"] .default-summon-btn--primary:disabled,
body[data-theme="default"] .default-summon-btn--ten:disabled {
  background: #2A3147;
  color: var(--default-result-text-soft);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

/* ??? ?????? ??? */

@keyframes defaultSummonModalIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes defaultSummonFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes defaultSummonBadgePop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes defaultSummonCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes defaultSummonAltarPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="default"] .default-summon-result,
  body[data-theme="default"] .default-summon-showcase,
  body[data-theme="default"] .default-summon-showcase__altar,
  body[data-theme="default"] .default-summon-grid-card,
  body[data-theme="default"] .default-summon-badge--new {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

body.reduce-motion[data-theme="default"] .default-summon-result,
body.reduce-motion[data-theme="default"] .default-summon-showcase,
body.reduce-motion[data-theme="default"] .default-summon-showcase__altar,
body.reduce-motion[data-theme="default"] .default-summon-grid-card,
body.reduce-motion[data-theme="default"] .default-summon-badge--new {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* =========================
   V2.3.8 ? Sweet ??????????????
   ?? body[data-theme="sweet"]???? default ??
   ========================= */

/* ?? Sweet ?????????? ?? */
body[data-theme="sweet"] .gacha-rates {
  background: #FFFFFF;
  border: 1px solid #F0C9DA;
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 8px 20px rgba(199, 53, 120, 0.10);
}

body[data-theme="sweet"] .rate-tag {
  background: #FFF8FC;
  border: 1px solid #F7DDEA;
  color: #3D2633;
  font-weight: 800;
}

body[data-theme="sweet"] .rate-tag .rate-tag__label {
  color: #3D2633;
  font-weight: 800;
}

body[data-theme="sweet"] .rate-tag .rate-tag__value {
  color: #4E3BA8;
  font-weight: 900;
}

body[data-theme="sweet"] .rate-tag.rate-N,
body[data-theme="sweet"] .rate-tag[data-rarity="N"] {
  background: #F3F4F6;
  border-color: #D9DDE4;
  color: #616977;
}
body[data-theme="sweet"] .rate-tag.rate-N .rate-tag__label,
body[data-theme="sweet"] .rate-tag.rate-N .rate-tag__value {
  color: #616977;
}

body[data-theme="sweet"] .rate-tag.rate-R,
body[data-theme="sweet"] .rate-tag[data-rarity="R"] {
  background: #EAF3FF;
  border-color: #B7D6F5;
  color: #2E6FBE;
}
body[data-theme="sweet"] .rate-tag.rate-R .rate-tag__label,
body[data-theme="sweet"] .rate-tag.rate-R .rate-tag__value {
  color: #2E6FBE;
}

body[data-theme="sweet"] .rate-tag.rate-SR,
body[data-theme="sweet"] .rate-tag[data-rarity="SR"] {
  background: #EEE9FF;
  border-color: #CFC3F6;
  color: #4E3BA8;
}
body[data-theme="sweet"] .rate-tag.rate-SR .rate-tag__label,
body[data-theme="sweet"] .rate-tag.rate-SR .rate-tag__value {
  color: #4E3BA8;
  font-weight: 900;
}

body[data-theme="sweet"] .rate-tag.rate-SSR,
body[data-theme="sweet"] .rate-tag[data-rarity="SSR"] {
  background: #FFF1D8;
  border-color: #F0C878;
  color: #8A4F10;
}
body[data-theme="sweet"] .rate-tag.rate-SSR .rate-tag__label,
body[data-theme="sweet"] .rate-tag.rate-SSR .rate-tag__value {
  color: #8A4F10;
  font-weight: 900;
}

body[data-theme="sweet"] .rate-tag.rate-UR,
body[data-theme="sweet"] .rate-tag[data-rarity="UR"] {
  background: #FFE3F0;
  border-color: #F3A8C7;
  color: #9F2F67;
}
body[data-theme="sweet"] .rate-tag.rate-UR .rate-tag__label,
body[data-theme="sweet"] .rate-tag.rate-UR .rate-tag__value {
  color: #9F2F67;
  font-weight: 900;
}

/* ?? Sweet ??????????? ?? */
body[data-theme="sweet"] .modal:has(.expedition-reward-modal) {
  background: #FFFFFF;
  border: 1px solid #F0C9DA;
  box-shadow: 0 18px 44px rgba(199, 53, 120, 0.18);
  color: #3D2633;
}

body[data-theme="sweet"] .expedition-reward-modal {
  background: #FFFFFF;
  color: #3D2633;
}

body[data-theme="sweet"] .expedition-reward-modal__title,
body[data-theme="sweet"] .expedition-reward-modal .modal-title {
  color: #B83274;
  font-weight: 900;
}

body[data-theme="sweet"] .expedition-reward-modal__pet-name {
  color: #3D2633;
  font-weight: 800;
}

body[data-theme="sweet"] .expedition-reward-modal .pet-original-name {
  color: #6F4C5E;
}

body[data-theme="sweet"] .expedition-reward-list {
  background: #FFF8FC;
  border: 1px solid #F0C9DA;
  border-radius: 16px;
  color: #3D2633;
}

body[data-theme="sweet"] .expedition-reward-item {
  background: #FFFFFF;
  border: 1px solid #F7DDEA;
  color: #3D2633;
}

body[data-theme="sweet"] .expedition-reward-item .expedition-reward-value {
  color: inherit;
  font-weight: 900;
}

body[data-theme="sweet"] .expedition-reward-item[data-reward-type="stardust"] {
  background: #FFF1D8;
  border-color: #F0C878;
  color: #8A4F10;
}

body[data-theme="sweet"] .expedition-reward-item[data-reward-type="material"] {
  background: #E7F6F1;
  border-color: #8FCDBD;
  color: #1F5C4D;
}

body[data-theme="sweet"] .expedition-reward-item[data-reward-type="bond"] {
  background: #EEE9FF;
  border-color: #CFC3F6;
  color: #4E3BA8;
}

body[data-theme="sweet"] .expedition-reward-item[data-reward-type="fragment"] {
  background: #FFE3F0;
  border-color: #F3A8C7;
  color: #9F2F67;
}

body[data-theme="sweet"] .expedition-reward-item .expedition-bonus {
  color: #6F4C5E;
  font-weight: 600;
}

body[data-theme="sweet"] .expedition-reward-modal__workshop-hint,
body[data-theme="sweet"] .expedition-bonus-detail {
  color: #6F4C5E;
}

body[data-theme="sweet"] .expedition-levelup {
  color: #B83274;
  font-weight: 800;
}

body[data-theme="sweet"] .expedition-confirm-button,
body[data-theme="sweet"] .expedition-reward-modal .btn--primary {
  background: linear-gradient(135deg, #D44786 0%, #C73578 100%);
  color: #FFFFFF;
  border: none;
  font-weight: 800;
}

/* ============================================================
   V2.4.0 ? SSR / UR ??????
   ??????????????? default / sweet??z-index ?? Modal?
   ============================================================ */
.summon-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12250; /* 高於 dream-bloom / awakening，低於系統 alert */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  overflow: hidden;
  animation: summonRevealFadeIn 260ms ease-out forwards;
  -webkit-tap-highlight-color: transparent;
  color: #f4f7ff;
}

.summon-reveal-overlay.is-ssr .summon-reveal-bg {
  background: radial-gradient(circle at 50% 45%, rgba(167, 139, 250, 0.28) 0%, rgba(8, 11, 22, 0.88) 62%);
  background-color: rgba(8, 11, 22, 0.88);
}
.summon-reveal-overlay.is-ur .summon-reveal-bg {
  background: radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.32) 0%, rgba(5, 8, 18, 0.92) 60%);
  background-color: rgba(5, 8, 18, 0.92);
}

.summon-reveal-bg {
  position: absolute;
  inset: 0;
}

.summon-reveal-stage {
  position: relative;
  width: min(88vw, 420px);
  height: min(88vw, 420px);
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ?? */
.summon-reveal-aura {
  position: absolute;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  animation: summonAuraPulse 1300ms ease-out 120ms both;
}
.summon-reveal-overlay.is-ssr .summon-reveal-aura {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.55) 0%, rgba(167, 139, 250, 0.35) 45%, transparent 72%);
}
.summon-reveal-overlay.is-ur .summon-reveal-aura {
  background: radial-gradient(circle,
    rgba(251, 191, 36, 0.5) 0%,
    rgba(244, 114, 182, 0.42) 32%,
    rgba(34, 211, 238, 0.34) 56%,
    transparent 74%);
}

/* ???? */
.summon-reveal-ring {
  position: absolute;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3);
}
.summon-reveal-overlay.is-ssr .summon-reveal-ring {
  border: 2px solid rgba(251, 191, 36, 0.56);
  animation: summonRingBurst 1300ms ease-out 200ms both;
}
.summon-reveal-overlay.is-ur .summon-reveal-ring {
  border: 3px solid rgba(244, 114, 182, 0.62);
  animation: summonURRingBurst 1800ms cubic-bezier(0.16, 0.8, 0.3, 1) 220ms both;
}

/* UR ???? */
.summon-reveal-overlay.is-ur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  animation: summonURFlash 720ms ease-out 620ms both;
}

/* ?? */
.summon-reveal-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.summon-reveal-particle {
  position: absolute;
  bottom: 42%;
  width: var(--p-size, 6px);
  height: var(--p-size, 6px);
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation: summonParticleDrift var(--p-dur, 1200ms) ease-out var(--p-delay, 0ms) both;
}
.summon-reveal-overlay.is-ssr .summon-reveal-particle {
  background: #FBBF24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}
.summon-reveal-overlay.is-ur .summon-reveal-particle:nth-child(3n) { background: #F472B6; box-shadow: 0 0 6px rgba(244, 114, 182, 0.8); }
.summon-reveal-overlay.is-ur .summon-reveal-particle:nth-child(3n+1) { background: #22D3EE; box-shadow: 0 0 6px rgba(34, 211, 238, 0.8); }
.summon-reveal-overlay.is-ur .summon-reveal-particle:nth-child(3n+2) { background: #FBBF24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.8); }

/* ?? */
.summon-reveal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(26px) scale(0.94);
  animation: summonCardRise 900ms cubic-bezier(0.16, 0.8, 0.3, 1) 260ms both;
}
.summon-reveal-overlay.is-ur .summon-reveal-card {
  animation-delay: 620ms;
}

.summon-reveal-rarity {
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.5);
  animation: summonRarityPop 620ms cubic-bezier(0.2, 1.2, 0.4, 1) 360ms both;
}
.summon-reveal-overlay.is-ssr .summon-reveal-rarity {
  font-size: clamp(2.875rem, 15vw, 5.125rem);
  color: #FDE68A;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.7), 0 0 34px rgba(167, 139, 250, 0.5);
}
.summon-reveal-overlay.is-ur .summon-reveal-rarity {
  font-size: clamp(3.625rem, 19vw, 6.75rem);
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(244, 114, 182, 0.8), 0 0 40px rgba(34, 211, 238, 0.6);
  animation-delay: 720ms;
}

.summon-reveal-pet-frame {
  width: clamp(120px, 42vw, 190px);
  height: clamp(120px, 42vw, 190px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.summon-reveal-pet-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  transition: opacity 400ms ease-out;
}
.summon-reveal-pet-image.is-loaded {
  opacity: 1;
}

.summon-reveal-pet-frame.is-missing {
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.45);
}

.summon-reveal-fallback-label {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  padding: 0.5rem;
}

.summon-reveal-overlay.is-fallback .summon-reveal-aura,
.summon-reveal-overlay.is-fallback .summon-reveal-ring,
.summon-reveal-overlay.is-fallback .summon-reveal-particles,
.summon-reveal-overlay.is-fallback .summon-reveal-moon,
.summon-reveal-overlay.is-fallback .summon-reveal-fall-petals {
  display: none;
}

.summon-reveal-caption {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.summon-reveal-overlay.is-ssr .summon-reveal-caption { color: #FDE68A; }
.summon-reveal-overlay.is-ur .summon-reveal-caption { color: #FBCFE8; }

/* ?????????????????????? / ????? */
.summon-reveal-continue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px));
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8125rem;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.summon-reveal-overlay.is-ready .summon-reveal-continue {
  opacity: 1;
  animation: summonContinueHint 1.8s ease-in-out infinite;
}

@keyframes summonContinueHint {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ???? */
.summon-reveal-skip {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  min-height: 44px;
  min-width: 88px;
  padding: 0 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2;
}
.summon-reveal-skip:active {
  background: rgba(255, 255, 255, 0.26);
}

/* --- V3.4.2 SSR+ 名稱／進度／雙 UR 映襯 --- */
.summon-reveal-name {
  margin-top: 0.15rem;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  font-weight: 800;
  color: #f8fafc;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 16rem;
}
.summon-reveal-title {
  font-size: clamp(0.78rem, 3vw, 0.92rem);
  font-weight: 600;
  color: #d5def0;
  text-align: center;
  max-width: 16rem;
  min-height: 1.1em;
}
.summon-reveal-progress {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(8, 12, 24, 0.72);
  border: 1px solid rgba(232, 238, 248, 0.28);
  color: #e8eef8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 2;
}
.summon-reveal-pool {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: min(70vw, 18rem);
  height: 3.5rem;
  margin-left: calc(min(70vw, 18rem) / -2);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(148, 180, 220, 0.28), transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}

/* 永眠花皇兔：月亮核心／收束 */
.summon-reveal-overlay.is-moon-ur .summon-reveal-bg {
  background:
    radial-gradient(circle at 50% 28%, rgba(220, 230, 255, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(90, 70, 140, 0.28) 0%, rgba(5, 10, 22, 0.94) 62%);
  background-color: #050a16;
}
.summon-reveal-overlay.is-moon-ur .summon-reveal-aura {
  background: radial-gradient(circle,
    rgba(232, 238, 248, 0.42) 0%,
    rgba(120, 140, 200, 0.28) 40%,
    transparent 72%);
  animation: summonMoonConverge 1600ms ease-out 180ms both;
}
.summon-reveal-overlay.is-moon-ur .summon-reveal-ring {
  border: 2px solid rgba(210, 220, 245, 0.55);
  animation: summonRingBurst 1600ms ease-out 260ms both;
}
.summon-reveal-overlay.is-moon-ur .summon-reveal-rarity {
  color: #e8eef8;
  text-shadow: 0 0 18px rgba(180, 200, 255, 0.75), 0 0 36px rgba(107, 91, 149, 0.55);
}
.summon-reveal-overlay.is-moon-ur .summon-reveal-caption {
  color: #c7d2ea;
}
.summon-reveal-moon {
  position: absolute;
  top: 10%;
  left: 50%;
  width: min(42vw, 9.5rem);
  height: min(42vw, 9.5rem);
  margin-left: calc(min(42vw, 9.5rem) / -2);
  pointer-events: none;
  z-index: 1;
}
.summon-reveal-moon__disc {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #f7f9ff 0%, #d8e0f5 42%, #9aa8c8 78%, #6b7a9e 100%);
  box-shadow:
    0 0 28px rgba(220, 230, 255, 0.55),
    0 0 60px rgba(140, 160, 220, 0.28);
  opacity: 0;
  transform: scale(0.55) translateY(18px);
  animation: summonMoonRise 1400ms cubic-bezier(0.16, 0.8, 0.3, 1) 120ms both;
}
.summon-reveal-moon__glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 230, 255, 0.35), transparent 68%);
  opacity: 0;
  animation: summonMoonGlow 1800ms ease-out 280ms both;
}
.summon-reveal-overlay.is-moon-ur .summon-reveal-card {
  animation-delay: 520ms;
}
.summon-reveal-overlay.is-moon-ur::after {
  animation: none;
  opacity: 0;
}

/* 曙綻花后兔：花瓣落下／展開 */
.summon-reveal-overlay.is-petal-ur .summon-reveal-bg {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 220, 200, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 50% 60%, rgba(232, 160, 150, 0.22) 0%, rgba(28, 14, 24, 0.94) 64%);
  background-color: #1a1018;
}
.summon-reveal-overlay.is-petal-ur .summon-reveal-aura {
  background: radial-gradient(circle,
    rgba(255, 236, 220, 0.5) 0%,
    rgba(244, 180, 160, 0.38) 36%,
    rgba(232, 194, 122, 0.28) 58%,
    transparent 74%);
  animation: summonPetalBloom 1600ms ease-out 160ms both;
}
.summon-reveal-overlay.is-petal-ur .summon-reveal-ring {
  border: 2px solid rgba(246, 199, 192, 0.62);
  animation: summonURRingBurst 1700ms cubic-bezier(0.16, 0.8, 0.3, 1) 220ms both;
}
.summon-reveal-overlay.is-petal-ur .summon-reveal-rarity {
  color: #fff4e8;
  text-shadow: 0 0 18px rgba(244, 180, 160, 0.8), 0 0 36px rgba(232, 194, 122, 0.55);
}
.summon-reveal-overlay.is-petal-ur .summon-reveal-caption {
  color: #f6d7c8;
}
.summon-reveal-overlay.is-petal-ur .summon-reveal-title {
  color: #f0dcc8;
}
.summon-reveal-fall-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.summon-reveal-fall-petal {
  position: absolute;
  top: -8%;
  left: var(--fp-x, 50%);
  width: var(--fp-size, 12px);
  height: calc(var(--fp-size, 12px) * 1.35);
  border-radius: 60% 40% 60% 40%;
  background: linear-gradient(145deg, #fff1e6, #f6b4a8 55%, #e8a07a);
  opacity: 0;
  will-change: transform, opacity;
  animation: summonPetalFall var(--fp-dur, 2000ms) linear var(--fp-delay, 0ms) infinite;
  box-shadow: 0 0 8px rgba(246, 180, 160, 0.35);
}
.summon-reveal-fall-petal.is-static {
  top: 18%;
  opacity: 0.7;
  animation: none;
}
.summon-reveal-overlay.is-petal-ur .summon-reveal-card {
  animation-delay: 480ms;
}
.summon-reveal-overlay.is-petal-ur::after {
  background: #fff4e8;
  animation: summonURFlash 720ms ease-out 520ms both;
}

@keyframes summonMoonRise {
  from { opacity: 0; transform: scale(0.55) translateY(22px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes summonMoonGlow {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes summonMoonConverge {
  0% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes summonPetalBloom {
  0% { opacity: 0; transform: scale(0.45); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes summonPetalFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10%, 0) rotate(0deg);
  }
  12% { opacity: 0.9; }
  100% {
    opacity: 0;
    transform: translate3d(var(--fp-drift, 0), 110vh, 0) rotate(var(--fp-rot, 40deg));
  }
}

.dream-bloom-overlay.is-ssrplus-handoff .dream-bloom-controls {
  visibility: hidden;
}

.summon-reveal-overlay.is-reduced .summon-reveal-fall-petals .summon-reveal-fall-petal:not(.is-static) {
  animation: none;
  opacity: 0.65;
}
.summon-reveal-overlay.is-reduced .summon-reveal-moon__disc {
  animation: none;
  opacity: 1;
  transform: none;
}

@keyframes summonRevealFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes summonAuraPulse {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.65; transform: scale(1.25); }
}
@keyframes summonRingBurst {
  0% { opacity: 0; transform: scale(0.3); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes summonURRingBurst {
  0% { opacity: 0; transform: scale(0.25) rotate(0deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.4) rotate(140deg); }
}
@keyframes summonURFlash {
  0% { opacity: 0; }
  20% { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes summonParticleDrift {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--p-dx, 0), calc(var(--p-dy, 0) - 60px)) scale(1); }
}
@keyframes summonCardRise {
  0% { opacity: 0; transform: translateY(26px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes summonRarityPop {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* Reduce Motion???????????????? / ?? / ?? */
.summon-reveal-overlay.is-reduced .summon-reveal-particles,
.summon-reveal-overlay.is-reduced .summon-reveal-ring,
.summon-reveal-overlay.is-reduced::after {
  display: none;
}
.summon-reveal-overlay.is-reduced .summon-reveal-aura {
  animation: none;
  opacity: 0.5;
  transform: scale(1);
}
.summon-reveal-overlay.is-reduced .summon-reveal-card,
.summon-reveal-overlay.is-reduced .summon-reveal-rarity {
  animation: none;
  opacity: 1;
  transform: none;
}
.summon-reveal-overlay.is-reduced .summon-reveal-pet-image {
  opacity: 1;
  transition: none;
}

body.reduce-motion .summon-reveal-overlay .summon-reveal-particles,
body.reduce-motion .summon-reveal-overlay .summon-reveal-ring,
body.reduce-motion .summon-reveal-overlay::after {
  display: none;
}
body.reduce-motion .summon-reveal-overlay * {
  animation-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .summon-reveal-overlay,
  .summon-reveal-overlay *,
  .summon-reveal-overlay::before,
  .summon-reveal-overlay::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
  .summon-reveal-overlay .summon-reveal-particles,
  .summon-reveal-overlay .summon-reveal-ring,
  .summon-reveal-overlay::after {
    display: none;
  }
  .summon-reveal-overlay .summon-reveal-card,
  .summon-reveal-overlay .summon-reveal-rarity,
  .summon-reveal-overlay .summon-reveal-aura,
  .summon-reveal-overlay .summon-reveal-pet-image {
    opacity: 1;
    transform: none;
  }
}

/* ?? ?????????????? ?? */
.dev-tools__group + .dev-tools__group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(148, 163, 184, 0.5);
}
.dev-tools__subtitle {
  font-size: 0.875rem;
  font-weight: 800;
  margin: 0 0 4px;
}
.btn--dev {
  min-height: 44px;
}

/* ============================================================
   V2.5.0 ? ??????? / ???Daily & Weekly Quests
   V2.7.1 ? ???????????????????????? / ???????
   ???????sweet ? default ??????????? / ??????
   ============================================================ */
.quest-panel {
  display: block;
  margin: 12px 0;
}
.quest-panel[hidden] {
  display: none;
}
.quest-panel__inner {
  padding: 16px;
  border-radius: 26px;
}
.quest-panel__header-wrap {
  display: block;
}
.quest-panel__header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  font: inherit;
  color: inherit;
}
.quest-panel__icon {
  flex-shrink: 0;
  font-size: 1.45rem;
  line-height: 1;
  width: 2rem;
  text-align: center;
}
.quest-panel__header-main {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  flex: 1;
}
.quest-panel__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.quest-panel__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.quest-panel__subtitle {
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.88;
}
.quest-panel__status-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.quest-panel__collapse-icon {
  flex-shrink: 0;
  font-size: 0.68rem;
  line-height: 1;
  opacity: 0.65;
  padding-left: 0.1rem;
}
.quest-panel__body {
  display: block;
}
.quest-panel__body[hidden] {
  display: none;
}
/* ??????? reward-badge ?????????? status-badge */
.quest-panel__reward-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.quest-panel__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.quest-panel__summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.quest-panel__summary-label {
  font-size: 0.72rem;
  font-weight: 600;
}
.quest-panel__summary-value {
  font-size: 0.98rem;
  font-weight: 800;
}
.quest-panel__footer-hint {
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 14px 0 0;
  text-align: center;
}
/* ??????? quest-summary ????????? */
.quest-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
}
.quest-summary__item {
  font-size: 0.82rem;
  font-weight: 600;
}
.quest-panel__tabs {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.quest-tab {
  flex: 1;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.quest-tab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.quest-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.quest-card {
  border-radius: 14px;
  padding: 14px;
  border: 1px solid transparent;
}
.quest-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.quest-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}
.quest-status-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.quest-card__description {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 8px 0 10px;
}
.quest-card__progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quest-card__progress-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}
.quest-card__progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.quest-card__progress-text {
  font-size: 0.82rem;
  font-weight: 700;
  min-width: 48px;
  text-align: right;
}
.quest-card__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.quest-reward-chip {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.quest-claim-button {
  margin-top: 12px;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.quest-claim-button:disabled {
  cursor: default;
}
.quest-empty {
  font-size: 0.85rem;
  text-align: center;
  padding: 18px 8px;
}

/* ??? Sweet ????????? + ????? ??? */
body[data-theme="sweet"] .quest-panel__inner {
  background:
    radial-gradient(circle at top right, rgba(199, 53, 120, 0.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(111, 85, 217, 0.12), transparent 32%),
    linear-gradient(180deg, #FFFFFF 0%, #FFF8FC 100%);
  border: 1px solid #F0C9DA;
  border-radius: 26px;
  box-shadow: 0 12px 30px rgba(199, 53, 120, 0.14);
  color: #3D2633;
}
body[data-theme="sweet"] .quest-panel__eyebrow {
  color: #B83274;
}
body[data-theme="sweet"] .quest-panel__title {
  color: #3D2633;
}
body[data-theme="sweet"] .quest-panel__subtitle {
  color: #6F4C5E;
}
body[data-theme="sweet"] .quest-panel__collapse-icon {
  color: #6F4C5E;
}
body[data-theme="sweet"] .quest-summary__item {
  color: #6F4C5E;
}
body[data-theme="sweet"] .quest-panel__summary-item {
  background: rgba(255, 255, 255, 0.76);
  border-color: #F7DDEA;
}
body[data-theme="sweet"] .quest-panel__summary-label {
  color: #6F4C5E;
}
body[data-theme="sweet"] .quest-panel__summary-value {
  color: #B83274;
}
body[data-theme="sweet"] .quest-panel__footer-hint {
  color: #6F4C5E;
}
body[data-theme="sweet"] .quest-panel__reward-badge,
body[data-theme="sweet"] .quest-panel__status-badge--claimable {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .quest-panel__status-badge--progress {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .quest-panel__status-badge--done {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .quest-tab {
  background: #FFF8FC;
  color: #6F4C5E;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .quest-tab.is-active {
  background: #C73578;
  color: #FFFFFF;
  border-color: #C73578;
}
body[data-theme="sweet"] .quest-tab.is-active .quest-tab__dot {
  background: #FFFFFF;
}
body[data-theme="sweet"] .quest-tab__dot {
  background: #C73578;
}
body[data-theme="sweet"] .quest-card {
  background: rgba(255, 255, 255, 0.84);
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .quest-card.is-complete {
  background: #F7FFFC;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .quest-card.is-claimed {
  background: #F3F4F6;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .quest-card__title {
  color: #3D2633;
}
body[data-theme="sweet"] .quest-card__description {
  color: #6F4C5E;
}
body[data-theme="sweet"] .quest-card.is-claimed .quest-card__title {
  color: #616977;
}
body[data-theme="sweet"] .quest-card.is-claimed .quest-card__description {
  color: #777F8D;
}
body[data-theme="sweet"] .quest-card__progress-text {
  color: #3D2633;
}
body[data-theme="sweet"] .quest-card__progress-bar {
  background: #F3DDEA;
}
body[data-theme="sweet"] .quest-card__progress-fill {
  background: #C73578;
}
body[data-theme="sweet"] .quest-status-badge--progress {
  background: #FFF0F7;
  color: #B83274;
  border-color: #E7AFC8;
}
body[data-theme="sweet"] .quest-status-badge--claimable {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .quest-status-badge--claimed {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .quest-reward-chip[data-reward-type="stardust"] {
  background: #FFF1D8;
  color: #8A4F10;
  border-color: #F0C878;
}
body[data-theme="sweet"] .quest-reward-chip[data-reward-type="energy"] {
  background: #EAF3FF;
  color: #2E6FBE;
  border-color: #B7D4F6;
}
body[data-theme="sweet"] .quest-reward-chip[data-reward-type="material"] {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .quest-reward-chip[data-reward-type="item"] {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .quest-claim-button {
  background: #C73578;
  color: #FFFFFF;
}
body[data-theme="sweet"] .quest-claim-button:disabled {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .quest-empty {
  color: #86677A;
}

/* ??? Default ?????????????? + ????? ??? */
body[data-theme="default"] .quest-panel__inner {
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.24), transparent 34%),
    radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.14), transparent 32%),
    linear-gradient(180deg, #18203A 0%, #101628 100%);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 24px;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.36),
    0 0 26px rgba(139, 92, 246, 0.16);
  color: #F4F7FF;
}
body[data-theme="default"] .quest-panel__eyebrow {
  color: #DDD6FE;
}
body[data-theme="default"] .quest-panel__title {
  color: #F4F7FF;
}
body[data-theme="default"] .quest-panel__subtitle {
  color: #C7D2EA;
}
body[data-theme="default"] .quest-panel__collapse-icon {
  color: #C7D2EA;
}
body[data-theme="default"] .quest-summary__item {
  color: #C7D2EA;
}
body[data-theme="default"] .quest-panel__summary-item {
  background: rgba(15, 23, 42, 0.42);
  border-color: rgba(148, 163, 184, 0.18);
}
body[data-theme="default"] .quest-panel__summary-label {
  color: #C7D2EA;
}
body[data-theme="default"] .quest-panel__summary-value {
  color: #FBBF24;
}
body[data-theme="default"] .quest-panel__footer-hint {
  color: #C7D2EA;
}
body[data-theme="default"] .quest-panel__reward-badge,
body[data-theme="default"] .quest-panel__status-badge--claimable {
  background: rgba(52, 211, 153, 0.16);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.36);
}
body[data-theme="default"] .quest-panel__status-badge--progress {
  background: rgba(167, 139, 250, 0.18);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.42);
}
body[data-theme="default"] .quest-panel__status-badge--done {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.26);
}
body[data-theme="default"] .quest-tab {
  background: rgba(148, 163, 184, 0.12);
  color: #C7D2EA;
  border-color: rgba(148, 163, 184, 0.22);
}
body[data-theme="default"] .quest-tab.is-active {
  background: #8B5CF6;
  color: #FFFFFF;
  border-color: #8B5CF6;
}
body[data-theme="default"] .quest-tab.is-active .quest-tab__dot {
  background: #FFFFFF;
}
body[data-theme="default"] .quest-tab__dot {
  background: #22D3EE;
}
body[data-theme="default"] .quest-card {
  background: rgba(20, 26, 46, 0.78);
  border-color: rgba(167, 139, 250, 0.24);
}
body[data-theme="default"] .quest-card.is-complete {
  background: rgba(52, 211, 153, 0.10);
  border-color: rgba(52, 211, 153, 0.36);
}
body[data-theme="default"] .quest-card.is-claimed {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.24);
}
body[data-theme="default"] .quest-card__title {
  color: #F4F7FF;
}
body[data-theme="default"] .quest-card__description {
  color: #C7D2EA;
}
body[data-theme="default"] .quest-card.is-claimed .quest-card__title {
  color: #CBD5E1;
}
body[data-theme="default"] .quest-card.is-claimed .quest-card__description {
  color: #9BA8C7;
}
body[data-theme="default"] .quest-card__progress-text {
  color: #F4F7FF;
}
body[data-theme="default"] .quest-card__progress-bar {
  background: rgba(148, 163, 184, 0.16);
}
body[data-theme="default"] .quest-card__progress-fill {
  background: #8B5CF6;
}
body[data-theme="default"] .quest-card[data-scope="weekly"] .quest-card__progress-fill {
  background: #22D3EE;
}
body[data-theme="default"] .quest-status-badge--progress {
  background: rgba(139, 92, 246, 0.18);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.42);
}
body[data-theme="default"] .quest-status-badge--claimable {
  background: rgba(52, 211, 153, 0.16);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.36);
}
body[data-theme="default"] .quest-status-badge--claimed {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.26);
}
body[data-theme="default"] .quest-reward-chip[data-reward-type="stardust"] {
  background: rgba(251, 191, 36, 0.16);
  color: #FDE68A;
  border-color: rgba(251, 191, 36, 0.36);
}
body[data-theme="default"] .quest-reward-chip[data-reward-type="energy"] {
  background: rgba(56, 189, 248, 0.14);
  color: #7DD3FC;
  border-color: rgba(56, 189, 248, 0.34);
}
body[data-theme="default"] .quest-reward-chip[data-reward-type="material"] {
  background: rgba(52, 211, 153, 0.14);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.34);
}
body[data-theme="default"] .quest-reward-chip[data-reward-type="item"] {
  background: rgba(167, 139, 250, 0.16);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.36);
}
body[data-theme="default"] .quest-claim-button {
  background: #8B5CF6;
  color: #FFFFFF;
}
body[data-theme="default"] .quest-claim-button:disabled {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.26);
}
body[data-theme="default"] .quest-empty {
  color: #9BA8C7;
}

/* ??? V2.7.1 ??????????????????? ??? */
@media (max-width: 430px) {
  .quest-panel__summary {
    grid-template-columns: 1fr;
  }
  .quest-card {
    padding: 12px;
  }
}

/* =====================================================================
   V2.6.0 ? ????????????? / ?? / ???? / ???
   ?????????????????sweet?/ ???default??
   ????????????????????????????
   ===================================================================== */

/* ?? ????????????? ?? */
.bond-section {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.08);
}
.bond-section__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.bond-section__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}
.bond-section__title--story {
  margin-top: 14px;
  margin-bottom: 8px;
}

.bond-status-card {
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.bond-status-card__level {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 700;
}
.bond-status-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.bond-status-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.bond-status-card__next {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ?? ???? ?? */
.bond-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* ?? ?????? ?? */
.bond-liberated-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* ?? ???? ?? */
.bond-story {
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.bond-story p {
  margin: 0 0 8px;
  font-size: 0.84375rem;
  line-height: 1.7;
}
.bond-story p:last-child {
  margin-bottom: 0;
}
.bond-story__rarity {
  font-weight: 600;
}
.bond-story.is-locked p {
  font-weight: 600;
}

/* ?? ?????????????? / ???? ?? */
.companion-card__bond-badge,
.collection-card__bond-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
}
.collection-card__bond-badge .bond-badge {
  font-size: 0.625rem;
  padding: 2px 7px;
}
.collection-card__image {
  position: relative;
}

/* ?? ???????Lv.4+ ????? ?? */
.companion-bond-effect {
  position: absolute;
  inset: -6% 8% auto 8%;
  top: 6%;
  height: 62%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.companion-bond-effect.is-active {
  opacity: 1;
  animation: bondGlowPulse 3.6s ease-in-out infinite;
}
@keyframes bondGlowPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.45; }
  50% { transform: scale(1.04); opacity: 0.8; }
}

/* ?? ?????? toast ?? */
.bond-unlock-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 88vw;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
  border: 1px solid transparent;
}
.bond-unlock-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.bond-unlock-toast__icon {
  font-size: 1.125rem;
  flex: 0 0 auto;
}
.bond-unlock-toast__text {
  flex: 1 1 auto;
}

/* ?? Lv.5 ???? ?? */
.pet-card.is-bond-liberated,
.collection-card.is-bond-liberated,
.companion-card.is-bond-liberated,
.pet-detail-card.is-bond-liberated {
  position: relative;
}

/* =========================== Sweet ?? =========================== */
body[data-theme="sweet"] .bond-section {
  background: #FFF8FC;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .bond-section__title { color: #3D2633; }
body[data-theme="sweet"] .bond-status-card {
  background: #FFFFFF;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .bond-status-card__level { color: #3D2633; }
body[data-theme="sweet"] .bond-status-card__next { color: #6F4C5E; }
body[data-theme="sweet"] .bond-status-card__chip {
  background: #EEE9FF;
  color: #4E3BA8;
  border: 1px solid #CFC3F6;
}
body[data-theme="sweet"] .bond-status-card__chip--none {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}

body[data-theme="sweet"] .bond-badge {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .bond-badge.is-liberated,
body[data-theme="sweet"] .bond-liberated-label {
  background: #FFF1D8;
  color: #8A4F10;
  border-color: #F0C878;
}

body[data-theme="sweet"] .bond-story {
  background: #FFF8FC;
  border-color: #F0C9DA;
  color: #3D2633;
}
body[data-theme="sweet"] .bond-story p { color: #3D2633; }
body[data-theme="sweet"] .bond-story__rarity { color: #6F4C5E; }
body[data-theme="sweet"] .bond-story.is-locked {
  background: #F3F4F6;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .bond-story.is-locked p { color: #616977; }

body[data-theme="sweet"] .bond-unlock-toast {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .bond-unlock-toast--liberated {
  background: #FFF1D8;
  color: #8A4F10;
  border-color: #F0C878;
}

body[data-theme="sweet"] .companion-bond-effect {
  background: radial-gradient(closest-side, rgba(199, 53, 120, 0.22), transparent 72%);
}
body[data-theme="sweet"] .collection-card.is-bond-liberated,
body[data-theme="sweet"] .pet-detail-card.is-bond-liberated {
  border-color: #C73578;
  box-shadow: 0 0 0 1px #C73578, 0 6px 20px rgba(199, 53, 120, 0.22);
}
body[data-theme="sweet"] .companion-card.is-bond-liberated {
  box-shadow: 0 0 0 2px #C73578, 0 10px 30px rgba(199, 53, 120, 0.22);
}
body[data-theme="sweet"] .workshop-gift-pet__liberated {
  color: #8A4F10;
  background: #FFF1D8;
  border: 1px solid #F0C878;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.625rem;
  font-weight: 800;
}

/* =========================== Default ?? =========================== */
body[data-theme="default"] .bond-section {
  background: #141A2E;
  border-color: rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .bond-section__title { color: #F4F7FF; }
body[data-theme="default"] .bond-status-card {
  background: #1B2542;
  border-color: rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .bond-status-card__level { color: #F4F7FF; }
body[data-theme="default"] .bond-status-card__next { color: #C7D2EA; }
body[data-theme="default"] .bond-status-card__chip {
  background: rgba(167, 139, 250, 0.18);
  color: #DDD6FE;
  border: 1px solid rgba(167, 139, 250, 0.42);
}
body[data-theme="default"] .bond-status-card__chip--none {
  background: rgba(148, 163, 184, 0.14);
  color: #9BA8C7;
  border-color: rgba(148, 163, 184, 0.3);
}

body[data-theme="default"] .bond-badge {
  background: rgba(167, 139, 250, 0.18);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.42);
}
body[data-theme="default"] .bond-badge.is-liberated,
body[data-theme="default"] .bond-liberated-label {
  background: rgba(251, 191, 36, 0.16);
  color: #FDE68A;
  border-color: rgba(251, 191, 36, 0.36);
}

body[data-theme="default"] .bond-story {
  background: #141A2E;
  border-color: rgba(167, 139, 250, 0.28);
  color: #F4F7FF;
}
body[data-theme="default"] .bond-story p { color: #F4F7FF; }
body[data-theme="default"] .bond-story__rarity { color: #C7D2EA; }
body[data-theme="default"] .bond-story.is-locked {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.28);
}
body[data-theme="default"] .bond-story.is-locked p { color: #9BA8C7; }

body[data-theme="default"] .bond-unlock-toast {
  background: #1B2542;
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.42);
}
body[data-theme="default"] .bond-unlock-toast--liberated {
  background: #23213f;
  color: #FDE68A;
  border-color: rgba(251, 191, 36, 0.36);
}

body[data-theme="default"] .companion-bond-effect {
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.28), transparent 72%);
}
body[data-theme="default"] .collection-card.is-bond-liberated,
body[data-theme="default"] .pet-detail-card.is-bond-liberated {
  border-color: #A78BFA;
  box-shadow: 0 0 0 1px #A78BFA, 0 6px 20px rgba(139, 92, 246, 0.28);
}
body[data-theme="default"] .companion-card.is-bond-liberated {
  box-shadow: 0 0 0 2px #A78BFA, 0 10px 30px rgba(139, 92, 246, 0.28);
}
body[data-theme="default"] .workshop-gift-pet__liberated {
  color: #FDE68A;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.36);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.625rem;
  font-weight: 800;
}

/* ?? Reduce Motion???????????????????? ?? */
body.reduce-motion .companion-bond-effect.is-active {
  animation: none;
  opacity: 0.55;
}
body.reduce-motion .bond-unlock-toast {
  transition: opacity 0.2s ease;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .companion-bond-effect.is-active {
    animation: none;
    opacity: 0.55;
  }
}

/* ???????????????????????????????????????
   V2.6.1 ? ????????? pet-image-viewer
   ?? overlay?z-index ???? modal?modal-overlay=200?
   ??????????????????????????????????????? */

body.is-pet-image-viewer-open {
  overflow: hidden;
}

.pet-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pet-image-viewer.is-open {
  opacity: 1;
}

.pet-image-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 18, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pet-image-viewer__content {
  position: relative;
  width: min(92vw, 520px);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid transparent;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: scale(0.96);
  transition: transform 0.2s ease;
  background: #141A2E;
  color: #F4F7FF;
}
.pet-image-viewer.is-open .pet-image-viewer__content {
  transform: scale(1);
}

.pet-image-viewer__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pet-image-viewer__header {
  padding: 16px 56px 12px 20px;
  text-align: left;
}
.pet-image-viewer__title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
}
.pet-image-viewer__subtitle {
  font-size: 0.8125rem;
  margin-top: 2px;
}
.pet-image-viewer__meta {
  font-size: 0.8125rem;
  font-weight: 700;
  margin-top: 4px;
}

.pet-image-viewer__image-frame {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.pet-image-viewer__image {
  width: 100%;
  height: 100%;
  max-height: 64vh;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.pet-image-viewer__image-frame.is-loaded .pet-image-viewer__image {
  opacity: 1;
}
.pet-image-viewer__image-frame.is-error .pet-image-viewer__image {
  display: none;
}

.pet-image-viewer__loading,
.pet-image-viewer__error {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
}
.pet-image-viewer__image-frame.is-loading .pet-image-viewer__loading {
  display: flex;
}
.pet-image-viewer__image-frame.is-error .pet-image-viewer__error {
  display: flex;
}

.pet-image-viewer__preview-note:not(:empty) {
  position: absolute;
  inset: auto 16px 16px;
  text-align: center;
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--color-text-secondary);
  background: var(--color-bg-card-soft);
}

.pet-image-viewer__hint {
  padding: 10px 20px 16px;
  font-size: 0.8125rem;
  text-align: center;
}

/* ???????????????????????? */
.pet-detail-image-button {
  position: relative;
  display: inline-block;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.pet-detail__image-hint {
  font-size: 0.75rem;
  text-align: center;
  margin: 6px 0 0;
}

/* ?? Sweet ?? viewer ?? ?? */
body[data-theme="sweet"] .pet-image-viewer__content {
  background: #FFFFFF;
  border-color: #F0C9DA;
  color: #3D2633;
}
body[data-theme="sweet"] .pet-image-viewer__header {
  background: linear-gradient(135deg, #FFF0F7 0%, #F9F3FF 100%);
  border-bottom: 1px solid #F0C9DA;
}
body[data-theme="sweet"] .pet-image-viewer__title {
  color: #B83274;
}
body[data-theme="sweet"] .pet-image-viewer__subtitle {
  color: #6F4C5E;
}
body[data-theme="sweet"] .pet-image-viewer__meta {
  color: #4E3BA8;
}
body[data-theme="sweet"] .pet-image-viewer__close {
  background: #FFF0F7;
  color: #B83274;
  border-color: #E7AFC8;
}
body[data-theme="sweet"] .pet-image-viewer__image-frame {
  background: #FFF8FC;
  border-top: 1px solid #F0C9DA;
  border-bottom: 1px solid #F0C9DA;
}
body[data-theme="sweet"] .pet-image-viewer__loading {
  color: #6F4C5E;
}
body[data-theme="sweet"] .pet-image-viewer__error {
  background: #FFE3EA;
  color: #9F263F;
  border: 1px solid #F3A8B8;
}
body[data-theme="sweet"] .pet-image-viewer__hint {
  color: #6F4C5E;
}

/* ?? Default ?? viewer ?? ?? */
body[data-theme="default"] .pet-image-viewer__content {
  background: #141A2E;
  border-color: rgba(167, 139, 250, 0.28);
  color: #F4F7FF;
}
body[data-theme="default"] .pet-image-viewer__header {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.20), rgba(34, 211, 238, 0.12));
  border-bottom: 1px solid rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .pet-image-viewer__title {
  color: #F4F7FF;
}
body[data-theme="default"] .pet-image-viewer__subtitle {
  color: #C7D2EA;
}
body[data-theme="default"] .pet-image-viewer__meta {
  color: #DDD6FE;
}
body[data-theme="default"] .pet-image-viewer__close {
  background: rgba(148, 163, 184, 0.14);
  color: #F4F7FF;
  border-color: rgba(148, 163, 184, 0.28);
}
body[data-theme="default"] .pet-image-viewer__image-frame {
  background: #101628;
  border-top: 1px solid rgba(167, 139, 250, 0.22);
  border-bottom: 1px solid rgba(167, 139, 250, 0.22);
}
body[data-theme="default"] .pet-image-viewer__loading {
  color: #C7D2EA;
}
body[data-theme="default"] .pet-image-viewer__error {
  background: rgba(159, 38, 63, 0.24);
  color: #FECDD3;
  border: 1px solid rgba(244, 63, 94, 0.4);
}
body[data-theme="default"] .pet-image-viewer__hint {
  color: #C7D2EA;
}

/* Reduce Motion??? viewer ???????? */
body.reduce-motion .pet-image-viewer,
body.reduce-motion .pet-image-viewer__content,
body.reduce-motion .pet-image-viewer__image {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .pet-image-viewer,
  .pet-image-viewer__content,
  .pet-image-viewer__image {
    transition: none;
  }
}

/* ============================================================
   V2.7.0 ? ?????????
   ?????????????chip / ??? / ???????????
   ?????????????????????
   ============================================================ */

/* ?? ?????????????? ?? */
.exploration-panel {
  display: block;
  margin-bottom: 16px;
}
.exploration-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.exploration-panel__claimable {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.exploration-panel__hint {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 12px;
}
/* V2.7.2 ? ?????????????????? */
.exploration-panel__wrap {
  padding: 4px;
}
.exploration-panel__wrap.is-collapsed {
  padding: 4px;
}
.exploration-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.exploration-panel__toggle-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.exploration-panel__toggle-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.exploration-panel__toggle-title {
  font-size: 1.02rem;
  font-weight: 800;
}
.exploration-panel__toggle-chevron {
  flex-shrink: 0;
  font-size: 0.72rem;
  opacity: 0.7;
}
.exploration-panel__body {
  padding: 4px 8px 8px;
}
body[data-theme="sweet"] .exploration-panel__toggle-title {
  color: #3D2633;
}
body[data-theme="sweet"] .exploration-panel__toggle-chevron {
  color: #6F4C5E;
}
body[data-theme="default"] .exploration-panel__toggle-title {
  color: #F4F7FF;
}
body[data-theme="default"] .exploration-panel__toggle-chevron {
  color: #C7D2EA;
}
.exploration-area-list {
  display: grid;
  gap: 14px;
}
.exploration-area-card {
  border-radius: 16px;
  border: 1px solid transparent;
  padding: 16px;
}
.exploration-area-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.exploration-area-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0;
}
.exploration-progress-label {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.exploration-progress-bar {
  position: relative;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.exploration-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
  min-width: 0;
}
.exploration-progress-bar__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.exploration-area-card__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.exploration-area-card__runs {
  font-size: 0.82rem;
  font-weight: 600;
}
.exploration-next-milestone {
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.5;
}
.exploration-area-card__earned {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.exploration-collapse-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
}
.exploration-collapse-toggle__icon {
  font-size: 0.9rem;
}
.exploration-story {
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 12px 14px;
  margin-top: 8px;
}
.exploration-story__text {
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
}
.exploration-story__text + .exploration-story__text {
  margin-top: 8px;
}
.exploration-milestone-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.exploration-milestone-card {
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 12px 14px;
}
.exploration-milestone-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.exploration-milestone-card__percent {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
}
.exploration-milestone-card__title {
  font-size: 0.92rem;
  font-weight: 700;
  flex: 1 1 auto;
}
.exploration-milestone-card__desc {
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0 0 10px;
}
.exploration-milestone-card__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.exploration-reward-chip {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.exploration-claim-button {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.exploration-claim-button:disabled {
  cursor: default;
}
.exploration-status-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* ?? Sweet ?? ?? */
body[data-theme="sweet"] .exploration-area-card {
  background: #FFFFFF;
  color: #3D2633;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .exploration-area-title {
  color: #3D2633;
}
body[data-theme="sweet"] .exploration-panel__hint,
body[data-theme="sweet"] .exploration-area-card__runs {
  color: #6F4C5E;
}
body[data-theme="sweet"] .exploration-next-milestone {
  color: #3D2633;
}
body[data-theme="sweet"] .exploration-panel__claimable {
  background: #E7F6F1;
  color: #1F5C4D;
  border: 1px solid #8FCDBD;
}
body[data-theme="sweet"] .exploration-progress-label {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .exploration-progress-bar {
  background: #F3DDEA;
}
body[data-theme="sweet"] .exploration-progress-fill {
  background: #C73578;
}
body[data-theme="sweet"] .exploration-progress-bar__text {
  color: #3D2633;
}
body[data-theme="sweet"] .exploration-collapse-toggle {
  background: #FFF8FC;
  color: #3D2633;
  border-color: #F0C9DA;
}
/* ????????????????????????? */
body[data-theme="sweet"] .exploration-story.is-unlocked {
  background: #FFF8FC;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .exploration-story.is-unlocked .exploration-story__text {
  color: #3D2633;
}
body[data-theme="sweet"] .exploration-story.is-locked {
  background: #F3F4F6;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .exploration-story.is-locked .exploration-story__text {
  color: #616977;
}
body[data-theme="sweet"] .exploration-milestone-card {
  background: #FFF8FC;
  color: #3D2633;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .exploration-milestone-card.is-claimable {
  background: #E7F6F1;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .exploration-milestone-card.is-claimed {
  background: #F3F4F6;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .exploration-milestone-card__percent {
  background: #EEE9FF;
  color: #4E3BA8;
}
body[data-theme="sweet"] .exploration-milestone-card__title {
  color: #3D2633;
}
body[data-theme="sweet"] .exploration-milestone-card__desc {
  color: #6F4C5E;
}
body[data-theme="sweet"] .exploration-status-badge--claimable {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .exploration-status-badge--claimed {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .exploration-status-badge--locked {
  background: #FFF8FC;
  color: #86677A;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .exploration-status-badge--done {
  background: #FFE3F0;
  color: #9F2F67;
  border-color: #F3A8C7;
}
body[data-theme="sweet"] .exploration-reward-chip[data-reward-type="stardust"] {
  background: #FFF1D8;
  color: #8A4F10;
  border-color: #F0C878;
}
body[data-theme="sweet"] .exploration-reward-chip[data-reward-type="material"] {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .exploration-reward-chip[data-reward-type="item"] {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .exploration-reward-chip[data-reward-type="title"] {
  background: #FFE3F0;
  color: #9F2F67;
  border-color: #F3A8C7;
}
body[data-theme="sweet"] .exploration-claim-button {
  background: #C73578;
  color: #FFFFFF;
}
body[data-theme="sweet"] .exploration-claim-button:disabled {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}

/* ?? Default ?????? ?? */
body[data-theme="default"] .exploration-area-card {
  background: #141A2E;
  color: #F4F7FF;
  border-color: rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .exploration-area-title {
  color: #F4F7FF;
}
body[data-theme="default"] .exploration-panel__hint,
body[data-theme="default"] .exploration-area-card__runs {
  color: #C7D2EA;
}
body[data-theme="default"] .exploration-next-milestone {
  color: #C7D2EA;
}
body[data-theme="default"] .exploration-panel__claimable {
  background: rgba(52, 211, 153, 0.16);
  color: #6EE7B7;
  border: 1px solid rgba(52, 211, 153, 0.36);
}
body[data-theme="default"] .exploration-progress-label {
  background: rgba(167, 139, 250, 0.18);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.42);
}
body[data-theme="default"] .exploration-progress-bar {
  background: rgba(148, 163, 184, 0.16);
}
body[data-theme="default"] .exploration-progress-fill {
  background: #8B5CF6;
}
body[data-theme="default"] .exploration-progress-bar__text {
  color: #F4F7FF;
}
body[data-theme="default"] .exploration-collapse-toggle {
  background: #1B2542;
  color: #F4F7FF;
  border-color: rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .exploration-story.is-unlocked {
  background: #1B2542;
  border-color: rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .exploration-story.is-unlocked .exploration-story__text {
  color: #F4F7FF;
}
body[data-theme="default"] .exploration-story.is-locked {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.18);
}
body[data-theme="default"] .exploration-story.is-locked .exploration-story__text {
  color: #9BA8C7;
}
body[data-theme="default"] .exploration-milestone-card {
  background: #1B2542;
  color: #F4F7FF;
  border-color: rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .exploration-milestone-card.is-claimable {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.36);
}
body[data-theme="default"] .exploration-milestone-card.is-claimed {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.26);
}
body[data-theme="default"] .exploration-milestone-card__percent {
  background: rgba(167, 139, 250, 0.18);
  color: #DDD6FE;
}
body[data-theme="default"] .exploration-milestone-card__title {
  color: #F4F7FF;
}
body[data-theme="default"] .exploration-milestone-card__desc {
  color: #C7D2EA;
}
body[data-theme="default"] .exploration-status-badge--claimable {
  background: rgba(52, 211, 153, 0.16);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.36);
}
body[data-theme="default"] .exploration-status-badge--claimed {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.26);
}
body[data-theme="default"] .exploration-status-badge--locked {
  background: rgba(148, 163, 184, 0.10);
  color: #9BA8C7;
  border-color: rgba(148, 163, 184, 0.18);
}
body[data-theme="default"] .exploration-status-badge--done {
  background: rgba(244, 114, 182, 0.16);
  color: #FBCFE8;
  border-color: rgba(244, 114, 182, 0.34);
}
body[data-theme="default"] .exploration-reward-chip[data-reward-type="stardust"] {
  background: rgba(251, 191, 36, 0.16);
  color: #FDE68A;
  border-color: rgba(251, 191, 36, 0.36);
}
body[data-theme="default"] .exploration-reward-chip[data-reward-type="material"] {
  background: rgba(52, 211, 153, 0.14);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.34);
}
body[data-theme="default"] .exploration-reward-chip[data-reward-type="item"] {
  background: rgba(167, 139, 250, 0.16);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.36);
}
body[data-theme="default"] .exploration-reward-chip[data-reward-type="title"] {
  background: rgba(244, 114, 182, 0.16);
  color: #FBCFE8;
  border-color: rgba(244, 114, 182, 0.34);
}
body[data-theme="default"] .exploration-claim-button {
  background: #8B5CF6;
  color: #FFFFFF;
}
body[data-theme="default"] .exploration-claim-button:disabled {
  background: rgba(148, 163, 184, 0.16);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.26);
}

/* Reduce Motion??????????????????? */
body.reduce-motion .exploration-progress-fill {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .exploration-progress-fill {
    transition: none;
  }
}

/* ============================================================
   V2.7.2 ? ?????????????? + ?? Modal
   sweet / default ??????????????
   ============================================================ */

/* ??? ?????? ??? */
.expedition-map__hint {
  font-size: 0.8rem;
  margin: 4px 0 10px;
}
.expedition-area-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.expedition-area-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.expedition-area-card__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  min-width: 0;
}
.expedition-explore-badge,
.expedition-area-card__status {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.expedition-area-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.expedition-area-card__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.expedition-reward-chip {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.expedition-area-card__progress {
  margin-bottom: 10px;
}
.expedition-area-progress-bar {
  position: relative;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
}
.expedition-area-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.expedition-area-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 800;
}
.expedition-area-card__next {
  font-size: 0.74rem;
  margin: 6px 0 0;
}
.expedition-area-card__actions {
  margin-top: 4px;
}
.expedition-dispatch-button {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.expedition-dispatch-button:disabled {
  cursor: default;
}

/* ??? ?? Modal ??? */
body.expedition-dispatch-open {
  overflow: hidden;
}
.expedition-dispatch-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.expedition-dispatch-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 32, 0.55);
  backdrop-filter: blur(2px);
}
.expedition-dispatch-modal__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid transparent;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  animation: modal-fade-in 0.28s ease;
}
.expedition-dispatch-modal__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
}
.expedition-dispatch-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}
.expedition-dispatch-modal__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: rgba(148, 163, 184, 0.16);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.expedition-dispatch-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 8px;
}
.expedition-dispatch-modal__area-summary {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  margin-bottom: 14px;
}
.expedition-dispatch-area__name {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
}
.expedition-dispatch-area__desc {
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0 0 8px;
}
.expedition-dispatch-area__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.expedition-dispatch-area__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.expedition-dispatch-area__explore {
  font-size: 0.74rem;
  font-weight: 600;
  margin: 4px 0 0;
}
.expedition-dispatch-modal__pet-title {
  font-size: 0.86rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.expedition-dispatch-modal__pet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 42vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.expedition-dispatch-empty {
  font-size: 0.82rem;
  text-align: center;
  padding: 18px 8px;
}
.expedition-pet-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.expedition-pet-option:not(.is-disabled):active {
  transform: scale(0.99);
}
.expedition-pet-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.expedition-pet-option__img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.expedition-pet-option__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.expedition-pet-option__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.expedition-pet-option__name {
  font-size: 0.88rem;
  font-weight: 800;
}
.expedition-pet-option__original {
  font-size: 0.68rem;
}
.expedition-pet-option__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.expedition-pet-option__bond,
.expedition-pet-option__liberated,
.expedition-pet-option__busy {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}
.expedition-pet-option__check {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 900;
}
.expedition-dispatch-modal__preview {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 0.78rem;
  line-height: 1.5;
}
.expedition-dispatch-modal__footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.expedition-dispatch-cancel-button,
.expedition-dispatch-confirm-button {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
}
.expedition-dispatch-cancel-button {
  flex: 0 0 34%;
}
.expedition-dispatch-confirm-button:disabled {
  cursor: default;
}

/* ??? Sweet ?? ??? */
body[data-theme="sweet"] .expedition-map__hint,
body[data-theme="sweet"] .expedition-area-card__next {
  color: #6F4C5E;
}
body[data-theme="sweet"] .expedition-area-card__title {
  color: #3D2633;
}
body[data-theme="sweet"] .expedition-area-card__meta {
  color: #3D2633;
}
body[data-theme="sweet"] .expedition-explore-badge {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .expedition-area-card__status--ready {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .expedition-area-card__status--busy {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .expedition-area-card__status--locked {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .expedition-reward-chip[data-reward-type="stardust"] {
  background: #FFF1D8;
  color: #8A4F10;
  border-color: #F0C878;
}
body[data-theme="sweet"] .expedition-reward-chip[data-reward-type="material"] {
  background: #E7F6F1;
  color: #1F5C4D;
  border-color: #8FCDBD;
}
body[data-theme="sweet"] .expedition-reward-chip[data-reward-type="bond"] {
  background: #EEE9FF;
  color: #4E3BA8;
  border-color: #CFC3F6;
}
body[data-theme="sweet"] .expedition-area-progress-bar {
  background: #F3DDEA;
}
body[data-theme="sweet"] .expedition-area-progress-fill {
  background: #C73578;
}
body[data-theme="sweet"] .expedition-area-progress-text {
  color: #3D2633;
}
body[data-theme="sweet"] .expedition-dispatch-button {
  background: #C73578;
  color: #FFFFFF;
}
body[data-theme="sweet"] .expedition-dispatch-button:disabled {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .expedition-dispatch-modal__content {
  background: #FFFFFF;
  border-color: #F0C9DA;
  color: #3D2633;
}
body[data-theme="sweet"] .expedition-dispatch-modal__header {
  background: linear-gradient(135deg, #FFF0F7 0%, #F9F3FF 100%);
}
body[data-theme="sweet"] .expedition-dispatch-modal__title {
  color: #B83274;
}
body[data-theme="sweet"] .expedition-dispatch-modal__close {
  color: #B83274;
  background: rgba(199, 53, 120, 0.1);
}
body[data-theme="sweet"] .expedition-dispatch-modal__area-summary {
  background: #FFF8FC;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .expedition-dispatch-area__name {
  color: #3D2633;
}
body[data-theme="sweet"] .expedition-dispatch-area__desc,
body[data-theme="sweet"] .expedition-dispatch-area__meta,
body[data-theme="sweet"] .expedition-dispatch-area__explore,
body[data-theme="sweet"] .expedition-dispatch-modal__pet-title {
  color: #6F4C5E;
}
body[data-theme="sweet"] .expedition-dispatch-area__meta .is-low {
  color: #B4381F;
  font-weight: 800;
}
body[data-theme="sweet"] .expedition-dispatch-empty {
  color: #86677A;
}
body[data-theme="sweet"] .expedition-pet-option {
  background: #FFFFFF;
  border-color: #F0C9DA;
}
body[data-theme="sweet"] .expedition-pet-option.is-selected {
  background: #FFF0F7;
  border-color: #C73578;
}
body[data-theme="sweet"] .expedition-pet-option__name {
  color: #3D2633;
}
body[data-theme="sweet"] .expedition-pet-option__original {
  color: #86677A;
}
body[data-theme="sweet"] .expedition-pet-option__bond {
  background: #EEE9FF;
  color: #4E3BA8;
}
body[data-theme="sweet"] .expedition-pet-option__liberated {
  background: #FFF1D8;
  color: #8A4F10;
}
body[data-theme="sweet"] .expedition-pet-option__busy {
  background: #F3F4F6;
  color: #616977;
}
body[data-theme="sweet"] .expedition-pet-option__check {
  color: #C73578;
}
body[data-theme="sweet"] .expedition-dispatch-modal__preview {
  color: #3D2633;
  background: #FFF8FC;
}
body[data-theme="sweet"] .expedition-dispatch-modal__footer {
  background: #FFFFFF;
  border-top: 1px solid #F0C9DA;
}
body[data-theme="sweet"] .expedition-dispatch-confirm-button {
  background: #C73578;
  color: #FFFFFF;
}
body[data-theme="sweet"] .expedition-dispatch-confirm-button:disabled {
  background: #F3F4F6;
  color: #616977;
  border-color: #D4D7DE;
}
body[data-theme="sweet"] .expedition-dispatch-cancel-button {
  background: #FFF0F7;
  color: #B83274;
  border-color: #E7AFC8;
}

/* ??? Default ?????? ??? */
body[data-theme="default"] .expedition-map__hint,
body[data-theme="default"] .expedition-area-card__next {
  color: #C7D2EA;
}
body[data-theme="default"] .expedition-area-card__title {
  color: #F4F7FF;
}
body[data-theme="default"] .expedition-area-card__meta {
  color: #F4F7FF;
}
body[data-theme="default"] .expedition-explore-badge {
  background: rgba(167, 139, 250, 0.18);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.42);
}
body[data-theme="default"] .expedition-area-card__status--ready {
  background: rgba(52, 211, 153, 0.16);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.36);
}
body[data-theme="default"] .expedition-area-card__status--busy {
  background: rgba(167, 139, 250, 0.18);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.42);
}
body[data-theme="default"] .expedition-area-card__status--locked {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.26);
}
body[data-theme="default"] .expedition-reward-chip[data-reward-type="stardust"] {
  background: rgba(251, 191, 36, 0.16);
  color: #FDE68A;
  border-color: rgba(251, 191, 36, 0.36);
}
body[data-theme="default"] .expedition-reward-chip[data-reward-type="material"] {
  background: rgba(52, 211, 153, 0.14);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.34);
}
body[data-theme="default"] .expedition-reward-chip[data-reward-type="bond"] {
  background: rgba(167, 139, 250, 0.16);
  color: #DDD6FE;
  border-color: rgba(167, 139, 250, 0.36);
}
body[data-theme="default"] .expedition-area-progress-bar {
  background: rgba(148, 163, 184, 0.16);
}
body[data-theme="default"] .expedition-area-progress-fill {
  background: #8B5CF6;
}
body[data-theme="default"] .expedition-area-progress-text {
  color: #F4F7FF;
}
body[data-theme="default"] .expedition-dispatch-button {
  background: #8B5CF6;
  color: #FFFFFF;
}
body[data-theme="default"] .expedition-dispatch-button:disabled {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.26);
}
body[data-theme="default"] .expedition-dispatch-modal__content {
  background: #141A2E;
  border-color: rgba(167, 139, 250, 0.28);
  color: #F4F7FF;
}
body[data-theme="default"] .expedition-dispatch-modal__header {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.12));
}
body[data-theme="default"] .expedition-dispatch-modal__title {
  color: #F4F7FF;
}
body[data-theme="default"] .expedition-dispatch-modal__close {
  color: #F4F7FF;
  background: rgba(148, 163, 184, 0.16);
}
body[data-theme="default"] .expedition-dispatch-modal__area-summary {
  background: #1B2542;
  border-color: rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .expedition-dispatch-area__name {
  color: #F4F7FF;
}
body[data-theme="default"] .expedition-dispatch-area__desc,
body[data-theme="default"] .expedition-dispatch-area__meta,
body[data-theme="default"] .expedition-dispatch-area__explore,
body[data-theme="default"] .expedition-dispatch-modal__pet-title {
  color: #C7D2EA;
}
body[data-theme="default"] .expedition-dispatch-area__meta .is-low {
  color: #FCA5A5;
  font-weight: 800;
}
body[data-theme="default"] .expedition-dispatch-empty {
  color: #9BA8C7;
}
body[data-theme="default"] .expedition-pet-option {
  background: rgba(20, 26, 46, 0.88);
  border-color: rgba(167, 139, 250, 0.24);
}
body[data-theme="default"] .expedition-pet-option.is-selected {
  background: rgba(139, 92, 246, 0.18);
  border-color: #A78BFA;
}
body[data-theme="default"] .expedition-pet-option__name {
  color: #F4F7FF;
}
body[data-theme="default"] .expedition-pet-option__original {
  color: #9BA8C7;
}
body[data-theme="default"] .expedition-pet-option__bond {
  background: rgba(167, 139, 250, 0.16);
  color: #DDD6FE;
}
body[data-theme="default"] .expedition-pet-option__liberated {
  background: rgba(251, 191, 36, 0.16);
  color: #FDE68A;
}
body[data-theme="default"] .expedition-pet-option__busy {
  background: rgba(148, 163, 184, 0.14);
  color: #CBD5E1;
}
body[data-theme="default"] .expedition-pet-option__check {
  color: #A78BFA;
}
body[data-theme="default"] .expedition-dispatch-modal__preview {
  color: #F4F7FF;
  background: #1B2542;
}
body[data-theme="default"] .expedition-dispatch-modal__footer {
  background: #141A2E;
  border-top: 1px solid rgba(167, 139, 250, 0.28);
}
body[data-theme="default"] .expedition-dispatch-confirm-button {
  background: #8B5CF6;
  color: #FFFFFF;
}
body[data-theme="default"] .expedition-dispatch-confirm-button:disabled {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.26);
}
body[data-theme="default"] .expedition-dispatch-cancel-button {
  background: rgba(148, 163, 184, 0.12);
  color: #F4F7FF;
  border-color: rgba(148, 163, 184, 0.28);
}

@media (max-width: 430px) {
  .expedition-dispatch-modal__content {
    max-height: 88vh;
  }
  .expedition-dispatch-modal__pet-list {
    max-height: 38vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .expedition-area-progress-fill {
    transition: none;
  }
  .expedition-dispatch-modal__content {
    animation: none;
  }
}

/* ============================================================
   V2.7.3 ? ??????????????Typography Scale Polish?
   ??????? / ?? / ?????????????
   ???????????????????????? typography?
   ??? font-size / line-height / font-weight ??? spacing?
   ============================================================ */

/* ?? 1. ????? ?? */
.page-title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-black);
}

/* ?? 3. ?????????? ?? */
.page-subtitle {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-medium);
}

/* ?? 2. ?????????? / ???? / ???? / ??? / ???? ?? */
.card-title,
.task-card__title,
.quest-card__title,
.quest-panel__title,
.expedition-area-card__title,
.exploration-area-card__title,
.workshop-item__title,
.achievement-card__name,
.daily-blessing-gacha-entry__title,
.daily-blessing-card__title,
.smart-list-card__title,
.empty-state__title,
.expedition-active-card__name,
.expedition-dispatch-area__name {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-heavy);
}

/* ?? 4. ???? / ?? ?? */
.card-description,
.quest-card__description,
.expedition-area-card__meta,
.exploration-area-card__meta,
.workshop-item__description,
.achievement-card__desc {
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-regular);
}

/* ?? 5. ??????? / ?? / ?? / ????? ?? */
.expedition-energy__label,
.expedition-countdown__label,
.collection-companion__label,
.settings-section-note,
.expedition-active-card__status-label,
.achievement-summary__label,
.achievement-title-bar__label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
}

/* ?? 6. badge / chip???? / ?? / ?? / ??? / ????? ??
   ???? 0.76rem??? bold??? 1.2 */
.badge,
.tag,
.tag-chip--card,
.tag-chip__count,
.tag-chip--sm,
.workshop-tag,
.companion-badge,
.achievement-card__category,
.title-item__badge,
.bond-badge,
.bond-liberated-label,
.bond-status-card__chip,
.workshop-gift-pet__liberated,
.expedition-status-badge,
.expedition-explore-badge,
.expedition-area-card__status {
  font-size: 0.76rem;
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}
/* ?????????????????????? */
.collection-card__bond-badge .bond-badge {
  font-size: var(--font-size-xs);
}

/* ?? 7. ??????/?/??/??/??/?????? 0.88rem??? 1.2 ?? */
.btn {
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-heavy);
}
.btn--ghost,
.btn--sm {
  font-size: var(--font-size-md);
}
.btn--gacha,
.btn--gacha-ten {
  font-size: var(--font-size-lg);
}

/* ?? 8. Modal ?? ?? */
.modal-title,
.expedition-dispatch-modal__title {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-black);
}

/* Modal ?? */
.modal-body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

/* ?? 9. Toast / ?? ?? */
.toast,
.toast__message {
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-bold);
}

/* ?? ???? label?? 0.68rem?????? ?? */
.nav-label {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-medium);
}

/* ?? ???????? / ?? / ?????????? ??
   ?? 9px / 10px / 11px ? < 0.72rem ?????? */
.workshop-gift-pet__companion,
.collection-card__title {
  font-size: var(--font-size-xs);
}
.expedition-pet-option__original {
  font-size: var(--font-size-sm);
}
.expedition-pet-option__bond,
.expedition-pet-option__liberated,
.expedition-pet-option__busy,
.expedition-pet-option__companion {
  font-size: var(--font-size-xs);
}
.pet-original-name--sm,
.pet-original-name--xs {
  font-size: var(--font-size-xs);
}
.bond-section__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}
.bond-status-card__next {
  font-size: var(--font-size-sm);
}

/* ?? ????iPhone????? ?? */
@media (max-width: 430px) {
  /* ????????? xl??????? */
  .page-title {
    font-size: var(--font-size-xl);
  }
  /* ???????? ~0.9rem????? 0.82rem */
  .card-description,
  .quest-card__description,
  .workshop-item__description,
  .achievement-card__desc {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
  }
  /* badge / chip ????? ? 0.76rem */
  .badge,
  .tag,
  .companion-badge,
  .bond-badge,
  .expedition-status-badge,
  .expedition-explore-badge,
  .expedition-area-card__status {
    font-size: 0.76rem;
  }
  /* ???? ? 0.88rem */
  .btn {
    font-size: var(--font-size-md);
  }
}

/* ============================================================
   V2.7.4 ? ???????????????Sweet contrast + core typography?
   ============================================================ */

/* ?? ??????????????????? */
.stat-label {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

.task-reward-tag {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

.rate-tag {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

.quest-panel__eyebrow {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

.quest-panel__status-badge {
  font-size: 0.76rem;
  line-height: var(--line-height-tight);
}

.expedition-area-progress-text {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

.expedition-countdown__value,
#expedition-countdown {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-heavy);
}

.daily-wheel-label__name {
  font-size: 0.75rem;
}

.daily-wheel-label__amount {
  font-size: 0.75rem;
}

body[data-theme="sweet"] .sweet-summon-badge,
body[data-theme="sweet"] .sweet-summon-badge--pity {
  font-size: 0.76rem;
  line-height: var(--line-height-tight);
}

.tag-chip--card {
  font-size: var(--font-size-xs);
}

.tag-chip__count {
  font-size: var(--font-size-xs);
}

/* ?? ?? Modal????????? ?? */
.expedition-dispatch-modal__pet-note {
  margin: 0 0 10px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}

.expedition-pet-option__companion {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: var(--font-weight-bold);
  background: rgba(52, 211, 153, 0.16);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.28);
}

body[data-theme="default"] .expedition-dispatch-modal__pet-note {
  color: var(--color-text-muted);
}

body[data-theme="default"] .expedition-pet-option__companion {
  background: rgba(52, 211, 153, 0.16);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.30);
}

body[data-theme="sweet"] .expedition-dispatch-modal__pet-note {
  color: var(--sweet-text-berry);
}

body[data-theme="sweet"] .expedition-pet-option__companion {
  background: #E7F6F1;
  color: var(--sweet-text-green);
  border-color: rgba(47, 118, 100, 0.28);
}

body[data-theme="sweet"] .collection-card__image-hint {
  color: var(--color-text-muted);
}

/* ?? Sweet?badge / chip / ???????????????? */
body[data-theme="sweet"] .badge--category-gray {
  background: #F1F3F5;
  color: #4B5563;
}
body[data-theme="sweet"] .badge--category-blue {
  background: #EAF3FF;
  color: var(--sweet-text-blue);
}
body[data-theme="sweet"] .badge--category-purple {
  background: #EEE9FF;
  color: var(--sweet-text-purple);
}
body[data-theme="sweet"] .badge--category-green {
  background: #E7F6F1;
  color: var(--sweet-text-green);
}
body[data-theme="sweet"] .badge--category-red {
  background: #FDE8EE;
  color: var(--sweet-text-danger);
}
body[data-theme="sweet"] .badge--category-gold {
  background: #FFF1D8;
  color: var(--sweet-text-gold);
}

body[data-theme="sweet"] .badge--date-none,
body[data-theme="sweet"] .badge--date-future,
body[data-theme="sweet"] .badge--date-done {
  background: #F1F3F5;
  color: #5B6472;
}
body[data-theme="sweet"] .badge--date-overdue {
  background: #FDE8EE;
  color: var(--sweet-text-danger);
}
body[data-theme="sweet"] .badge--date-today {
  background: #FFF1D8;
  color: var(--sweet-text-gold);
}
body[data-theme="sweet"] .badge--date-tomorrow {
  background: #EAF3FF;
  color: var(--sweet-text-blue);
}
body[data-theme="sweet"] .badge--date-upcoming {
  background: #EEE9FF;
  color: var(--sweet-text-purple);
}

body[data-theme="sweet"] .badge--today-plan {
  background: #EEE9FF;
  color: var(--sweet-text-purple);
}

body[data-theme="sweet"] .tag-chip--selectable.tag-chip--active,
body[data-theme="sweet"] .tag-chip--selected {
  background: #EEE9FF;
  color: var(--sweet-text-purple);
  border-color: rgba(111, 85, 217, 0.28);
}

body[data-theme="sweet"] .btn--dev {
  background: #FFF1D8;
  color: var(--sweet-text-gold);
  border-color: rgba(138, 85, 20, 0.30);
}

body[data-theme="sweet"] .btn--danger,
body[data-theme="sweet"] .btn--ghost.btn--danger {
  background: #FCE3E8;
  color: #8A2942;
  border: 1px solid #E8A0B0;
  font-weight: 700;
  box-shadow: none;
  opacity: 1;
}

body[data-theme="sweet"] .btn--danger:active:not(:disabled),
body[data-theme="sweet"] .btn--ghost.btn--danger:active:not(:disabled) {
  background: #F5CDD6;
  color: #6F1F35;
  border-color: #D98A9C;
}

body[data-theme="sweet"] .confirm-modal .btn--danger {
  background: #C93E5D;
  color: #FFFFFF;
  border: 1px solid #A8324C;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(169, 50, 76, 0.24);
}

body[data-theme="sweet"] .confirm-modal .btn--danger:active:not(:disabled) {
  background: #A8324C;
  color: #FFFFFF;
}

/* ???????????????????????????? */
body[data-theme="sweet"] .modal:has(.confirm-modal--danger) {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF7F9 58%, #FDECF1 100%);
  border-color: #E8A0B0;
}

body[data-theme="sweet"] .confirm-modal--danger .confirm-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #FCE3E8;
  border: 1px solid #E8A0B0;
}

body[data-theme="sweet"] .confirm-modal--danger .modal-title {
  color: #B83255;
  font-weight: 800;
}

body[data-theme="sweet"] .confirm-modal--danger .confirm-modal__text {
  color: #704454;
  font-weight: 600;
}

body[data-theme="sweet"] .confirm-modal--danger #confirm-cancel {
  background: #FFF9FB;
  color: #765A68;
  border: 1px solid #DDBFCC;
}

body[data-theme="default"] .modal:has(.confirm-modal--danger) {
  background: linear-gradient(180deg, #202840 0%, #151C30 100%);
  border-color: rgba(251, 113, 133, 0.36);
}

body[data-theme="default"] .confirm-modal--danger .modal-title {
  color: #FDA4AF;
  border-bottom-color: rgba(251, 113, 133, 0.24);
}

body[data-theme="default"] .confirm-modal--danger .confirm-modal__text {
  color: #E5E7EB;
  font-weight: 600;
}

body[data-theme="default"] .confirm-modal--danger #confirm-cancel {
  background: #29324A;
  color: #D7DEEE;
  border: 1px solid rgba(203, 213, 225, 0.24);
}

body[data-theme="sweet"] .rarity-N,
body[data-theme="sweet"] .badge.rarity-N {
  background: var(--sweet-rarity-n-bg);
  color: var(--sweet-rarity-n-text);
}

body[data-theme="sweet"] .rarity-SSR,
body[data-theme="sweet"] .badge.rarity-SSR {
  background: var(--sweet-rarity-ssr-bg);
  color: var(--sweet-rarity-ssr-text);
}

/* ???????????????????????????? */
body[data-theme="sweet"] .task-reward-tag {
  background: #FFF5F9;
  color: #60404F;
  border: 1px solid #E7B8CC;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.25;
  padding: 4px 10px;
}

body[data-theme="sweet"] .task-reward-tag--stardust {
  background: #FFF0CF;
  color: #75450D;
  border-color: rgba(117, 69, 13, 0.24);
}

body[data-theme="sweet"] .task-reward-tag--energy {
  background: #DFF3EB;
  color: #285E4E;
  border-color: rgba(40, 94, 78, 0.24);
}

/* ???????????????????????????????????????????????????????????
   V2.7.5 ? ???????? + Sweet ?????????
   ??????????????????????????????????????????????????????????? */

/* Sweet??????? Modal ??? */
body[data-theme="sweet"] .modal:has(.daily-wheel-modal-body) {
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 222, 235, 0.72), transparent 38%),
    linear-gradient(155deg, #FFFFFF 0%, #FFF7FB 58%, #FFF1F6 100%);
  border: 1px solid var(--wheel-sweet-card-border, #E7B8CC);
  border-radius: var(--radius-lg, 24px);
  box-shadow:
    0 14px 32px rgba(116, 47, 77, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--wheel-sweet-text, #60404F);
}

body[data-theme="sweet"] .daily-wheel-modal-body {
  gap: var(--space-4, 16px);
  padding: 4px 2px 8px;
}

body[data-theme="sweet"] .daily-wheel-modal-body .modal-title {
  color: var(--wheel-sweet-title, #6F2947);
  font-size: var(--font-size-lg, 1.05rem);
  font-weight: 800;
  line-height: var(--line-height-tight, 1.2);
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0;
}

body[data-theme="sweet"] .wheel-modal__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--font-size-sm, 0.82rem);
  font-weight: 700;
  line-height: 1.3;
  border: 1px solid transparent;
}

body[data-theme="sweet"] .wheel-modal__status--available {
  background: var(--wheel-sweet-purple-bg, #EEE7FF);
  color: var(--wheel-sweet-purple-text, #4D368A);
  border-color: rgba(77, 54, 138, 0.22);
}

body[data-theme="sweet"] .wheel-modal__status--done {
  background: var(--wheel-sweet-green-bg, #DFF3EB);
  color: var(--wheel-sweet-green-text, #285E4E);
  border-color: rgba(40, 94, 78, 0.22);
}

body[data-theme="sweet"] .wheel-modal__hint {
  color: var(--wheel-sweet-muted, #765A68);
  font-size: var(--font-size-sm, 0.82rem);
  line-height: 1.45;
  font-weight: 500;
}

body[data-theme="sweet"] .daily-wheel-label__name,
body[data-theme="sweet"] .daily-wheel-label__amount {
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

body[data-theme="sweet"] .daily-wheel-label__name {
  font-weight: 700;
}

body[data-theme="sweet"] .daily-wheel-label__amount {
  font-weight: 800;
}

body[data-theme="sweet"] .daily-wheel-preview {
  color: var(--wheel-sweet-text, #60404F);
  font-size: var(--font-size-sm, 0.82rem);
}

body[data-theme="sweet"] .daily-wheel-preview__item {
  background: var(--wheel-sweet-pink-bg, #FADCE9);
  color: var(--wheel-sweet-pink-text, #702A4A);
  border: 1px solid var(--wheel-sweet-card-border, #E7B8CC);
}

/* ??????????????? toast ???????????? reward toast? */
body[data-theme="sweet"] .reward-toast--daily {
  background: var(--wheel-sweet-gold-bg, #FFF0CF);
  color: var(--wheel-sweet-gold-text, #75450D);
  border: 1px solid rgba(117, 69, 13, 0.22);
}

/* ???????????????????????????????????????????????????????????
   V2.8.0 ? ?????????????
   ??????????????????????????????????????????????????????????? */

.collection-progress-summary,
.collection-milestones-panel {
  margin-bottom: var(--space-3);
}

.collection-progress-summary {
  padding: var(--space-4);
}

.collection-summary__header,
.collection-summary__count,
.collection-summary__next,
.collection-milestones-toggle {
  display: flex;
  align-items: center;
}

.collection-summary__header {
  justify-content: space-between;
  gap: var(--space-3);
}

.collection-summary__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}

.collection-summary__count {
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.collection-summary__count strong {
  color: var(--color-text-main);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.collection-summary__icon {
  font-size: var(--font-size-2xl);
}

.collection-summary__progress {
  height: 8px;
  margin: var(--space-3) 0 var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, 0.18);
}

.collection-summary__progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width var(--duration-normal) ease;
}

.collection-summary__next {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.collection-summary__next strong {
  color: var(--color-accent);
}

.collection-summary__rarities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}

.collection-rarity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-card-soft);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

.collection-rarity-chip strong {
  color: var(--color-text-main);
}

.collection-milestones-panel {
  padding: 0;
  overflow: hidden;
}

.collection-milestones-toggle {
  width: 100%;
  min-height: 52px;
  gap: var(--space-2);
  padding: 12px var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text-main);
  text-align: left;
  cursor: pointer;
}

.collection-milestones-toggle__title {
  flex: 0 0 auto;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.collection-milestones-toggle__meta {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-align: right;
}

.collection-milestones-toggle__arrow {
  flex: 0 0 auto;
  font-size: var(--font-size-xl);
  transform: rotate(0deg);
  transition: transform var(--duration-fast) ease;
}

.collection-milestones-toggle[aria-expanded="true"] .collection-milestones-toggle__arrow {
  transform: rotate(180deg);
}

.collection-milestones-toggle:focus-visible,
.collection-milestone-filter:focus-visible,
.collection-milestone__claim:focus-visible,
.collection-milestones-more:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: -3px;
}

.collection-milestones-content {
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.collection-milestone-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--space-3) 0;
}

.collection-milestone-filter {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-card-soft);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
}

.collection-milestone-filter.is-active {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-light);
}

.collection-milestone-list {
  display: grid;
  gap: var(--space-2);
}

.collection-milestone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: rgba(14, 19, 36, 0.55);
}

.collection-milestone--claimable {
  border-color: rgba(251, 191, 36, 0.38);
}

.collection-milestone--claimed {
  border-color: rgba(52, 211, 153, 0.28);
}

.collection-milestone__icon {
  font-size: var(--font-size-xl);
}

.collection-milestone__body {
  min-width: 0;
}

.collection-milestone__title {
  margin: 0;
  color: var(--color-text-main);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
}

.collection-milestone__description,
.collection-milestone__progress {
  margin: 2px 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.collection-milestone__description {
  color: var(--color-text-secondary);
}

.collection-milestone__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--color-text-main);
  font-weight: var(--font-weight-bold);
}

.collection-milestone__progress span {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.collection-milestone__action {
  align-self: center;
}

.collection-milestone__claim,
.collection-milestones-more {
  min-height: 38px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #302005;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heavy);
}

.collection-milestone__claim {
  min-width: 60px;
  padding: 8px 12px;
}

.collection-milestone__claim:disabled {
  opacity: 0.65;
}

.collection-milestone__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-card-soft);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.collection-milestone__status--claimed {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.collection-milestones-more {
  width: 100%;
  margin-top: var(--space-3);
  background: transparent;
  color: var(--color-accent);
}

.collection-milestone-empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.collection-milestone-empty strong {
  color: var(--color-text-main);
}

body[data-theme="default"] .collection-progress-summary,
body[data-theme="default"] .collection-milestones-panel {
  background: #141A2E;
  color: #F4F7FF;
}

body[data-theme="sweet"] .collection-progress-summary,
body[data-theme="sweet"] .collection-milestones-panel {
  border-color: #E7B8CC;
  background: #FFF8FC;
  color: #3D2633;
}

body[data-theme="sweet"] .collection-summary__title,
body[data-theme="sweet"] .collection-summary__count strong,
body[data-theme="sweet"] .collection-milestones-toggle,
body[data-theme="sweet"] .collection-milestone__title,
body[data-theme="sweet"] .collection-milestone__progress,
body[data-theme="sweet"] .collection-milestone-empty strong {
  color: #3D2633;
}

body[data-theme="sweet"] .collection-summary__count,
body[data-theme="sweet"] .collection-summary__next,
body[data-theme="sweet"] .collection-milestones-toggle__meta,
body[data-theme="sweet"] .collection-milestone__description,
body[data-theme="sweet"] .collection-milestone-empty {
  color: #704454;
}

body[data-theme="sweet"] .collection-summary__next strong,
body[data-theme="sweet"] .collection-milestone__progress span {
  color: #75450D;
}

body[data-theme="sweet"] .collection-summary__progress {
  background: #E8DCE3;
}

body[data-theme="sweet"] .collection-summary__progress-fill {
  background: linear-gradient(90deg, #B83274, #8A5514);
}

body[data-theme="sweet"] .collection-rarity-chip {
  border-color: #DDBFCC;
  background: #FFFFFF;
  color: #60404F;
}

body[data-theme="sweet"] .collection-rarity-chip strong {
  color: #6F2947;
}

body[data-theme="sweet"] .collection-milestone-filter {
  border-color: #DDBFCC;
  background: #FFFFFF;
  color: #60404F;
}

body[data-theme="sweet"] .collection-milestone-filter.is-active {
  border-color: #8B70C9;
  background: #EEE9FF;
  color: #4A3580;
}

body[data-theme="sweet"] .collection-milestone {
  border-color: #E7B8CC;
  background: #FFFFFF;
}

body[data-theme="sweet"] .collection-milestone--claimable {
  border-color: #C79A57;
  background: #FFF9EE;
}

body[data-theme="sweet"] .collection-milestone--claimed {
  border-color: #91C8B5;
  background: #E7F6F1;
}

body[data-theme="sweet"] .collection-milestone__claim {
  border-color: #A62C64;
  background: #C73578;
  color: #FFFFFF;
}

body[data-theme="sweet"] .collection-milestone__status {
  background: #EEE9FF;
  color: #4A3580;
}

body[data-theme="sweet"] .collection-milestone__status--claimed {
  background: #DFF3EB;
  color: #285E4E;
}

body[data-theme="sweet"] .collection-milestones-more {
  border-color: #B98AA0;
  background: #FFFFFF;
  color: #8B2E5A;
}

@media (max-width: 430px) {
  .collection-milestones-toggle {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .collection-milestones-toggle__meta {
    order: 3;
    flex-basis: 100%;
    padding-left: 0;
    text-align: left;
  }

  .collection-milestones-toggle__arrow {
    margin-left: auto;
  }

  .collection-milestone {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .collection-milestone__action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-summary__progress-fill,
  .collection-milestones-toggle__arrow {
    transition: none;
  }
}

.reduce-motion .collection-summary__progress-fill,
.reduce-motion .collection-milestones-toggle__arrow {
  transition: none;
}

/* ============================================================ *
 * ???? ? V2.9.0
 * ??? design tokens ????????????
 * ??? Sweet ???? chip / ??? / ???????
 * ============================================================ */
.handbook-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.handbook-loading,
.handbook-empty {
  margin: 0;
  padding: var(--space-4) var(--space-2);
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

/* --- ?????????? --- */
.handbook-summary {
  padding: var(--space-4);
}

.handbook-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.handbook-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-card-soft);
  border: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.handbook-stat__icon {
  font-size: 1.15rem;
  line-height: 1;
}

.handbook-stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.handbook-stat__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-main);
  overflow-wrap: anywhere;
}

/* --- ????????? --- */
.handbook-goals {
  padding: var(--space-4);
}

.handbook-goals__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-main);
}

.handbook-goals__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.handbook-goal {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-card-soft);
  border: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
}

.handbook-goal--claimable {
  border-color: var(--color-accent);
}

.handbook-goal__icon {
  font-size: 1.4rem;
  line-height: 1.1;
  flex-shrink: 0;
}

.handbook-goal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.handbook-goal__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.handbook-goal__name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-main);
  overflow-wrap: anywhere;
}

.handbook-goal__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.handbook-goal__count {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.handbook-goal__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- ??? --- */
.handbook-progress {
  display: block;
  flex: 1;
  height: 8px;
  min-width: 60px;
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}

.handbook-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
}

/* --- ?? chip?????????????/????????? --- */
.handbook-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

.handbook-chip--claimable {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.handbook-chip--info {
  background: var(--color-primary-soft);
  color: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

/* --- ????? --- */
.handbook-section {
  padding: 0;
  overflow: hidden;
}

.handbook-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.handbook-section__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-main);
  flex-shrink: 0;
}

.handbook-section__summary {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handbook-section__chevron {
  font-size: 1rem;
  color: var(--color-text-muted);
  transition: transform var(--duration-normal) ease;
  flex-shrink: 0;
}

.handbook-section.is-expanded .handbook-section__chevron {
  transform: rotate(180deg);
}

.handbook-section__header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.handbook-section__body {
  padding: 0 var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* --- ????? --- */
.handbook-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-divider);
}

.handbook-row:first-child {
  border-top: none;
}

.handbook-row__label {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.handbook-row__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-main);
  text-align: right;
}

/* --- ??? chips --- */
.handbook-rarity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.handbook-rarity-chip {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* --- ???? --- */
.handbook-pets {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
}

.handbook-pet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 40%;
  min-width: 0;
}

.handbook-pet__role {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.handbook-pet__name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-main);
  text-align: center;
  overflow-wrap: anywhere;
}

.handbook-pet__bond {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* --- ???? --- */
.handbook-area {
  padding: var(--space-2) 0;
}

.handbook-area__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.handbook-area__name {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.handbook-area__pct {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-main);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.handbook-area-extra {
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

body.reduce-motion .handbook-section__chevron {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .handbook-section__chevron {
    transition: none;
  }
}

/* ---- Sweet ??????????????? ---- */
body[data-theme="sweet"] .handbook-stat,
body[data-theme="sweet"] .handbook-goal {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

body[data-theme="sweet"] .handbook-stat__value,
body[data-theme="sweet"] .handbook-goal__name,
body[data-theme="sweet"] .handbook-section__title,
body[data-theme="sweet"] .handbook-goals__title,
body[data-theme="sweet"] .handbook-row__value,
body[data-theme="sweet"] .handbook-area__pct,
body[data-theme="sweet"] .handbook-pet__name {
  color: var(--color-text-main);
}

body[data-theme="sweet"] .handbook-goal__count,
body[data-theme="sweet"] .handbook-row__label,
body[data-theme="sweet"] .handbook-area__name,
body[data-theme="sweet"] .handbook-pet__bond {
  color: var(--sweet-text-berry);
}

body[data-theme="sweet"] .handbook-goal__hint,
body[data-theme="sweet"] .handbook-stat__label,
body[data-theme="sweet"] .handbook-pet__role,
body[data-theme="sweet"] .handbook-section__summary {
  color: var(--color-text-muted);
}

/* Sweet ??????????????????? */
body[data-theme="sweet"] .handbook-progress {
  background: rgba(199, 53, 120, 0.16);
}

body[data-theme="sweet"] .handbook-progress__fill {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

/* Sweet chip???????? WCAG AA? */
body[data-theme="sweet"] .handbook-chip--claimable {
  background: var(--color-accent-soft);
  color: var(--sweet-text-gold);
  border-color: var(--color-accent);
}

body[data-theme="sweet"] .handbook-chip--info {
  background: var(--color-secondary-soft);
  color: var(--sweet-text-purple);
  border-color: var(--color-secondary);
}

body[data-theme="sweet"] .handbook-rarity-chip {
  background: var(--color-bg-card-soft);
  color: var(--sweet-text-berry);
  border-color: var(--color-border);
}

body[data-theme="sweet"] .handbook-goal--claimable {
  border-color: var(--color-accent);
}

/* Sweet ??????? page-back-btn?????? */
body[data-theme="sweet"] #view-handbook .page-back-btn {
  color: var(--color-primary);
}


/* ??????????????????????????????????????????????????????????????????????????????
   V3.0.0 ????H?c
   ?????????????????????????????????????????????????????????????????????????????? */

.page-header--tasks .page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.page-header--tasks .page-header__inner {
  flex: 1;
  min-width: 0;
}

.mailbox-entry-btn {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text-main);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mailbox-entry-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mailbox-entry-btn__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.mailbox-entry-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-bg-main);
}

.mailbox-entry-btn__badge[hidden] {
  display: none !important;
}

.mailbox-entry-btn__gift {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-bg-main);
}

/* display:inline-flex ????? hidden??????? */
.mailbox-entry-btn__gift[hidden] {
  display: none !important;
}

.mailbox-entry-btn__gift--pulse {
  animation: mailbox-gift-pulse 0.9s ease-out 1;
}

@keyframes mailbox-gift-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

body.reduce-motion .mailbox-entry-btn__gift--pulse {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .mailbox-entry-btn__gift--pulse {
    animation: none;
  }
}

body.global-mailbox-open {
  overflow: hidden;
  touch-action: none;
}

.global-mailbox-modal {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.global-mailbox-modal.open {
  display: flex;
  pointer-events: auto;
}

.global-mailbox-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 20, 0.62);
}

.global-mailbox-modal__sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-bottom: none;
  box-shadow: var(--shadow-md);
  /* The sheet already sits below the viewport's top safe area. */
  padding-top: 12px;
  padding-bottom: max(12px, var(--safe-bottom));
  overflow: hidden;
}

.global-mailbox-modal__header,
.global-mailbox-modal__offline,
.global-mailbox-modal__filters {
  /* Long letters scroll in the body; toolbar rows must keep their height. */
  flex-shrink: 0;
}

.global-mailbox-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 16px 10px;
}

.global-mailbox-modal__title-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.global-mailbox-modal__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-main);
}

.global-mailbox-modal__unread {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.global-mailbox-modal__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.global-mailbox-modal__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-main);
  font-size: 1rem;
  cursor: pointer;
}

.global-mailbox-modal__icon-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.global-mailbox-modal__icon-btn:disabled,
.global-mailbox-modal__icon-btn.is-loading {
  opacity: 0.55;
  cursor: not-allowed;
}

.global-mailbox-modal__offline {
  margin: 0 16px 8px;
  font-size: var(--font-size-sm);
  color: var(--color-warning);
}

.global-mailbox-modal__filters {
  display: flex;
  gap: 8px;
  padding: 0 16px 10px;
  overflow-x: auto;
}

.mailbox-filter-chip {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.mailbox-filter-chip.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-light);
  font-weight: 600;
}

.global-mailbox-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
  overscroll-behavior: contain;
}

.mailbox-empty {
  text-align: center;
  padding: 48px 16px;
}

.mailbox-empty__icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.mailbox-empty__title {
  margin: 0 0 6px;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-main);
}

.mailbox-empty__desc {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

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

.mailbox-list-item__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: start;
  text-align: left;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card-soft);
  color: var(--color-text-main);
  cursor: pointer;
}

.mailbox-list-item.is-unread .mailbox-list-item__btn {
  border-color: var(--color-primary-border);
}

.mailbox-list-item.is-claimable .mailbox-list-item__btn {
  border-color: rgba(251, 191, 36, 0.55);
}

.mailbox-list-item__icon {
  font-size: 1.35rem;
  line-height: 1.2;
}

.mailbox-list-item__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mailbox-list-item__title {
  font-size: var(--font-size-md);
  font-weight: 650;
  line-height: 1.35;
  word-break: break-word;
}

.mailbox-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mailbox-list-item__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.mailbox-list-item__marks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.mailbox-list-item__unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-danger);
}

.mailbox-list-item__gift {
  font-size: 0.85rem;
}

.mailbox-type-chip,
.mailbox-claim-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.mailbox-type-chip--update,
.mailbox-type-chip--announcement {
  background: var(--color-primary-soft);
  color: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.mailbox-type-chip--maintenance {
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border-color: rgba(245, 158, 11, 0.45);
}

.mailbox-type-chip--compensation {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: rgba(251, 191, 36, 0.5);
}

.mailbox-type-chip--local-dev {
  background: rgba(148, 163, 184, 0.18);
  color: var(--color-text-secondary);
  border-color: rgba(148, 163, 184, 0.4);
  border-style: dashed;
}

.mailbox-claim-chip--claimable {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: rgba(251, 191, 36, 0.55);
}

.mailbox-claim-chip--claimed {
  background: var(--color-success-soft);
  color: var(--color-success);
  border-color: rgba(52, 211, 153, 0.45);
}

.mailbox-claim-chip--expired,
.mailbox-claim-chip--unavailable {
  background: rgba(148, 163, 184, 0.12);
  color: var(--color-text-muted);
}

.mailbox-claim-chip--version_mismatch,
.mailbox-claim-chip--invalid {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: rgba(251, 113, 133, 0.4);
}

.mailbox-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 8px;
}

.mailbox-detail__back {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--color-primary-light);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 4px 0;
}

.mailbox-detail__back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mailbox-detail__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mailbox-detail__icon {
  font-size: 1.5rem;
  line-height: 1.2;
}

.mailbox-detail__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1.35;
  word-break: break-word;
}

.mailbox-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mailbox-detail__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.mailbox-detail__body {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-word;
}

.mailbox-reward-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  padding: 12px 14px;
}

.mailbox-reward-preview__title {
  margin: 0 0 8px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-main);
}

.mailbox-reward-preview__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mailbox-reward-preview__error {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  font-weight: 600;
}

.mailbox-reward-preview__empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.mailbox-detail__claim-btn,
.mailbox-detail__action-btn {
  width: 100%;
  min-height: 44px;
  font-size: var(--font-size-md);
}

.mailbox-detail__claim-note {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* Default?G?`???Q?H?c */
body[data-theme="default"] .mailbox-entry-btn {
  background: #18203A;
  border-color: rgba(167, 139, 250, 0.35);
}

body[data-theme="default"] .global-mailbox-modal__sheet {
  background: linear-gradient(180deg, #141A2E 0%, #0E1324 100%);
  border-color: rgba(167, 139, 250, 0.28);
}

body[data-theme="default"] .global-mailbox-modal__title {
  color: #F4F7FF;
}

body[data-theme="default"] .mailbox-list-item__btn {
  background: #18203A;
}

body[data-theme="default"] .mailbox-type-chip--compensation,
body[data-theme="default"] .mailbox-claim-chip--claimable {
  color: #FBBF24;
}

body[data-theme="default"] .mailbox-claim-chip--claimed {
  color: #34D399;
}

/* Sweet?G???o?H??P */
body[data-theme="sweet"] .mailbox-entry-btn {
  background: #FFF7FB;
  border-color: rgba(199, 53, 120, 0.28);
  color: #6B2148;
}

body[data-theme="sweet"] .mailbox-entry-btn__badge {
  color: #fff;
}

body[data-theme="sweet"] .mailbox-entry-btn__gift {
  background: #FFF3D6;
  border-color: #C48A1A;
  color: #6B4A12;
}

body[data-theme="sweet"] .global-mailbox-modal__backdrop {
  background: rgba(84, 40, 58, 0.35);
}

body[data-theme="sweet"] .global-mailbox-modal__sheet {
  background: #FFF9F4;
  border-color: rgba(199, 53, 120, 0.22);
}

body[data-theme="sweet"] .global-mailbox-modal__title,
body[data-theme="sweet"] .mailbox-list-item__title,
body[data-theme="sweet"] .mailbox-detail__title,
body[data-theme="sweet"] .mailbox-empty__title,
body[data-theme="sweet"] .mailbox-reward-preview__title {
  color: #6B2148;
}

body[data-theme="sweet"] .global-mailbox-modal__unread,
body[data-theme="sweet"] .mailbox-list-item__date,
body[data-theme="sweet"] .mailbox-detail__date,
body[data-theme="sweet"] .mailbox-empty__desc,
body[data-theme="sweet"] .mailbox-detail__claim-note {
  color: #8A5070;
}

body[data-theme="sweet"] .mailbox-detail__body,
body[data-theme="sweet"] .mailbox-reward-preview__list {
  color: #5C2A44;
}

body[data-theme="sweet"] .global-mailbox-modal__icon-btn,
body[data-theme="sweet"] .mailbox-filter-chip,
body[data-theme="sweet"] .mailbox-list-item__btn,
body[data-theme="sweet"] .mailbox-reward-preview {
  background: #FFF1F6;
  border-color: rgba(199, 53, 120, 0.22);
  color: #6B2148;
}

body[data-theme="sweet"] .mailbox-filter-chip.is-active {
  background: #F3E8FF;
  color: #5B21B6;
  border-color: #7C3AED;
}

body[data-theme="sweet"] .mailbox-type-chip--update,
body[data-theme="sweet"] .mailbox-type-chip--announcement {
  background: #F3E8FF;
  color: #5B21B6;
  border-color: #7C3AED;
}

body[data-theme="sweet"] .mailbox-type-chip--compensation,
body[data-theme="sweet"] .mailbox-claim-chip--claimable {
  background: #FFF3D6;
  color: #6B4A12;
  border-color: #C48A1A;
}

body[data-theme="sweet"] .mailbox-type-chip--local-dev {
  background: #F3E8FF;
  color: #5B21B6;
  border-color: #7C3AED;
  border-style: dashed;
}

body[data-theme="sweet"] .mailbox-claim-chip--claimed {
  background: #D1FAE5;
  color: #065F46;
  border-color: #059669;
}

body[data-theme="sweet"] .mailbox-claim-chip--invalid,
body[data-theme="sweet"] .mailbox-claim-chip--version_mismatch,
body[data-theme="sweet"] .mailbox-reward-preview__error {
  color: #9F1239;
}

body[data-theme="sweet"] .mailbox-detail__back {
  color: #7C3AED;
}

body[data-theme="sweet"] .mailbox-detail__claim-btn:disabled {
  opacity: 0.55;
}

@media (min-width: 720px) {
  .global-mailbox-modal {
    align-items: center;
  }

  .global-mailbox-modal__sheet {
    border-radius: var(--radius-xl);
    border-bottom: 1px solid var(--color-border);
    max-height: min(86vh, 820px);
  }
}

/* ============================================================
   V3.3.0 Theme pool presentation + dream bloom summon
   ============================================================ */

:root {
  --dream-night: #0a1024;
  --dream-mist: #6b5b95;
  --dream-pool: #1a3a5c;
  --dream-moon: #e8eef8;
  --dream-petal: #d4c4e8;
  --dream-gold: #e6d5a8;
  --dream-omen-n: var(--rarity-n);
  --dream-omen-r: var(--rarity-r);
  --dream-omen-sr: var(--rarity-sr);
  --dream-omen-ssr: var(--rarity-ssr);
  --dream-omen-ur: var(--rarity-ur);
}

/* --- Themed gacha panel --- */
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] {
  position: relative;
  overflow: hidden;
  border-color: rgba(180, 170, 220, 0.28);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(90, 70, 140, 0.35), transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(20, 50, 80, 0.45), transparent 60%),
    linear-gradient(180deg, #0c1228 0%, #10182f 45%, #0a1422 100%);
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-pool {
  display: none;
}

.gacha-theme-stage {
  position: relative;
  margin: 0 0 1rem;
  padding: 0.75rem 0 0.25rem;
  z-index: 1;
}

.gacha-theme-stage__atmosphere {
  pointer-events: none;
  position: absolute;
  inset: -1rem -1.25rem auto;
  height: 14rem;
  z-index: 0;
  overflow: hidden;
}

.gacha-theme-stage__mist,
.gacha-theme-stage__pool,
.gacha-theme-stage__petals,
.gacha-theme-stage__dust,
.gacha-theme-stage__arch,
.gacha-theme-stage__moon {
  position: absolute;
  inset: 0;
}

.gacha-theme-stage__mist {
  background: radial-gradient(ellipse at 30% 40%, rgba(107, 91, 149, 0.35), transparent 55%),
    radial-gradient(ellipse at 70% 30%, rgba(80, 100, 160, 0.25), transparent 50%);
}

.gacha-theme-stage__pool {
  top: 55%;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(26, 58, 92, 0.45));
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
}

.gacha-theme-stage__moon {
  width: 3.5rem;
  height: 3.5rem;
  top: 0.5rem;
  right: 1.25rem;
  left: auto;
  bottom: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--dream-moon), rgba(232, 238, 248, 0.2));
  opacity: 0.55;
  box-shadow: 0 0 24px rgba(232, 238, 248, 0.25);
}

.gacha-theme-stage__arch {
  top: 10%;
  left: 50%;
  width: 8rem;
  height: 4.5rem;
  transform: translateX(-50%);
  border: 1px solid rgba(212, 196, 232, 0.18);
  border-bottom: none;
  border-radius: 8rem 8rem 0 0;
  opacity: 0.35;
  filter: blur(0.3px);
}

.gacha-theme-stage__petals::before,
.gacha-theme-stage__petals::after,
.gacha-theme-stage__dust::before {
  content: '';
  position: absolute;
  width: 0.45rem;
  height: 0.7rem;
  border-radius: 60% 40% 60% 40%;
  background: var(--dream-petal);
  opacity: 0.35;
  animation: dreamPetalDrift 9s ease-in-out infinite;
}

.gacha-theme-stage__petals::before { left: 18%; top: 30%; }
.gacha-theme-stage__petals::after { left: 72%; top: 22%; animation-delay: -3s; width: 0.35rem; height: 0.55rem; }
.gacha-theme-stage__dust::before {
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  left: 45%;
  top: 18%;
  background: var(--dream-moon);
  animation-duration: 7s;
}

@keyframes dreamPetalDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.25; }
  50% { transform: translateY(18px) rotate(18deg); opacity: 0.45; }
}

.gacha-theme-stage__badge,
.gacha-theme-stage__name,
.gacha-theme-stage__eyebrow,
.gacha-theme-stage__tagline,
.gacha-theme-stage__heroes,
.gacha-theme-stage__meta,
.gacha-theme-details-btn,
.gacha-theme-details {
  position: relative;
  z-index: 1;
}

.gacha-theme-stage__badge {
  display: inline-block;
  margin: 0 0 0.35rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--dream-moon);
  border: 1px solid rgba(232, 238, 248, 0.28);
  border-radius: 999px;
  background: rgba(20, 28, 52, 0.55);
}

.gacha-theme-stage__name {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: 0.04em;
}

.gacha-theme-stage__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: var(--dream-petal);
}

.gacha-theme-stage__tagline {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 28rem;
  white-space: pre-line;
}

.gacha-theme-stage__heroes {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.65rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

@media (max-width: 360px) {
  .gacha-theme-stage__heroes {
    grid-template-columns: 1fr;
  }
}

.gacha-theme-hero {
  margin: 0;
  text-align: center;
}

.gacha-theme-hero__frame {
  position: relative;
  margin: 0 auto 0.45rem;
  width: min(100%, 11rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(232, 238, 248, 0.18), transparent 55%),
    rgba(10, 16, 36, 0.65);
  box-shadow: 0 0 0 1px rgba(230, 213, 168, 0.28), 0 8px 28px rgba(0, 0, 0, 0.35);
}

.gacha-theme-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.92;
}

.gacha-theme-hero__img.is-loading {
  visibility: hidden;
}

/* 大獎預覽：降彩為近似黑白剪影感，非全塗黑 */
.gacha-theme-hero__img.is-silhouette,
.gacha-theme-featured__img.is-silhouette {
  filter: grayscale(1) contrast(1.08) brightness(0.82);
  opacity: 0.9;
}

.gacha-theme-hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 35%, rgba(232, 238, 248, 0.12), transparent 62%);
  box-shadow: inset 0 0 24px rgba(10, 16, 36, 0.45);
}

.gacha-theme-hero__cap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gacha-theme-hero__rarity {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dream-omen-ur);
}

.gacha-theme-hero__name {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--dream-petal);
  line-height: 1.35;
}

.gacha-theme-hero__title {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.gacha-theme-featured {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gacha-theme-featured__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.45rem;
  align-items: center;
  padding: 0.35rem 0.45rem;
  border-radius: 0.75rem;
  background: rgba(14, 20, 40, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.22);
}

.gacha-theme-featured__item img,
.gacha-theme-featured__img {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(8, 12, 24, 0.7);
}

.gacha-theme-featured__rarity {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--dream-omen-ssr);
  letter-spacing: 0.08em;
}

.gacha-theme-featured__name {
  display: block;
  font-size: 0.78rem;
  color: var(--dream-petal);
  line-height: 1.35;
}

.gacha-theme-stage__meta {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.gacha-theme-details-btn {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.65rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  color: var(--dream-moon);
  background: rgba(20, 28, 52, 0.6);
  border: 1px solid rgba(232, 238, 248, 0.22);
  border-radius: 0.55rem;
  cursor: pointer;
}

.gacha-theme-details-btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.gacha-theme-details {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.75rem;
  background: rgba(8, 12, 24, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.gacha-theme-details dl {
  margin: 0;
  display: grid;
  gap: 0.35rem;
}

.gacha-theme-details dt {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.gacha-theme-details dd {
  margin: 0 0 0.25rem;
  color: var(--color-text-main);
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .btn--gacha {
  background: linear-gradient(135deg, rgba(90, 70, 140, 0.95), rgba(40, 70, 110, 0.95));
  border-color: rgba(212, 196, 232, 0.35);
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .btn--gacha-ten {
  background: linear-gradient(135deg, rgba(120, 90, 60, 0.55), rgba(90, 70, 140, 0.9));
}

/* --- Debut overlay（永眠花海入場） --- */
.dream-debut-overlay {
  position: fixed;
  inset: 0;
  touch-action: none;
  overscroll-behavior: contain;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  color: #f2f6ff;
  background: transparent;
  opacity: 0;
  transition: opacity 0.55s ease;
  --debut-night: #050914;
  --debut-mist: rgba(107, 91, 149, 0.38);
  --debut-moon: #e8eef8;
  --debut-silver: #b8c8e0;
  --debut-petal: #d4c4e8;
}

.dream-debut-overlay.is-active { opacity: 1; }
.dream-debut-overlay.is-exiting { opacity: 0; pointer-events: none; }

.dream-debut-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dream-debut-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(90, 78, 140, 0.28), transparent 52%),
    radial-gradient(ellipse at 50% 88%, rgba(30, 55, 90, 0.22), transparent 48%),
    linear-gradient(180deg, #04070f 0%, #0a1224 48%, #070d18 100%);
  opacity: 0;
  transition: opacity 0.7s ease, filter 0.8s ease;
}

.dream-debut-overlay.is-phase-night .dream-debut-bg,
.dream-debut-overlay.is-skipped .dream-debut-bg {
  opacity: 1;
}

.dream-debut-overlay.is-phase-reveal .dream-debut-bg {
  opacity: 0.42;
  filter: blur(1.5px);
}

.dream-debut-mist {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse at 30% 40%, var(--debut-mist), transparent 42%),
    radial-gradient(ellipse at 72% 58%, rgba(70, 100, 150, 0.18), transparent 45%);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s ease, transform 2.4s ease;
}

.dream-debut-overlay.is-phase-night .dream-debut-mist {
  opacity: 0.85;
  transform: scale(1);
}

.dream-debut-overlay.is-phase-reveal .dream-debut-mist {
  opacity: 0.25;
}

.dream-debut-dust {
  position: absolute;
  inset: 0;
}

.dream-debut-dust__mote {
  position: absolute;
  left: var(--p-x, 50%);
  top: 12%;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--debut-moon) 80%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--debut-moon) 45%, transparent);
  opacity: 0;
  animation: dreamDebutDustDrift var(--p-dur, 1.6s) ease-in var(--p-delay, 0ms) infinite;
}

.dream-debut-mirror {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(68vw, 16rem);
  height: min(28vw, 7rem);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.dream-debut-overlay.is-phase-pool .dream-debut-mirror,
.dream-debut-overlay.is-phase-bloom .dream-debut-mirror,
.dream-debut-overlay.is-phase-line .dream-debut-mirror,
.dream-debut-overlay.is-skipped .dream-debut-mirror {
  opacity: 1;
}

.dream-debut-overlay.is-phase-reveal .dream-debut-mirror {
  opacity: 0.35;
}

.dream-debut-mirror__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(200, 220, 245, 0.42), rgba(120, 160, 200, 0.12) 42%, transparent 70%);
  filter: blur(0.5px);
  transform: scale(0.55);
  opacity: 0;
}

.dream-debut-overlay.is-phase-pool .dream-debut-mirror__glow,
.dream-debut-overlay.is-phase-bloom .dream-debut-mirror__glow,
.dream-debut-overlay.is-phase-line .dream-debut-mirror__glow,
.dream-debut-overlay.is-skipped .dream-debut-mirror__glow {
  animation: dreamDebutMirrorGlow 1.5s ease forwards;
}

.dream-debut-mirror__ripple {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(220, 230, 245, 0.38);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 0;
}

.dream-debut-overlay.is-phase-pool .dream-debut-mirror__ripple--1,
.dream-debut-overlay.is-phase-bloom .dream-debut-mirror__ripple--1,
.dream-debut-overlay.is-phase-line .dream-debut-mirror__ripple--1 {
  animation: dreamDebutRipple 2s ease-out 0.15s forwards;
}

.dream-debut-overlay.is-phase-pool .dream-debut-mirror__ripple--2,
.dream-debut-overlay.is-phase-bloom .dream-debut-mirror__ripple--2,
.dream-debut-overlay.is-phase-line .dream-debut-mirror__ripple--2 {
  animation: dreamDebutRipple 2.15s ease-out 0.55s forwards;
}

.dream-debut-overlay.is-skipped .dream-debut-mirror__ripple {
  opacity: 0;
  animation: none;
}

.dream-debut-flower {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5.5rem;
  height: 5.5rem;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  transition: opacity 0.55s ease, transform 1.1s ease;
}

.dream-debut-overlay.is-phase-bloom .dream-debut-flower,
.dream-debut-overlay.is-phase-line .dream-debut-flower,
.dream-debut-overlay.is-skipped .dream-debut-flower {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.dream-debut-overlay.is-phase-reveal .dream-debut-flower {
  opacity: 0.28;
  transform: translate(-50%, -54%) scale(1.04);
}

.dream-debut-flower__aura {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 230, 250, 0.28), transparent 68%);
  opacity: 0;
  transform: scale(0.5);
}

.dream-debut-overlay.is-phase-bloom .dream-debut-flower__aura,
.dream-debut-overlay.is-phase-line .dream-debut-flower__aura {
  animation: dreamDebutFlowerAura 1.4s ease forwards;
}

.dream-debut-overlay.is-skipped .dream-debut-flower__aura {
  opacity: 0.5;
  transform: scale(1.15);
  animation: none;
}

.dream-debut-flower__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  background: radial-gradient(circle at 35% 30%, #fff, var(--debut-moon) 45%, rgba(180, 170, 220, 0.55));
  box-shadow:
    0 0 10px rgba(232, 238, 248, 0.55),
    0 0 22px rgba(170, 150, 210, 0.28);
  opacity: 0;
}

.dream-debut-overlay.is-phase-bloom .dream-debut-flower__core,
.dream-debut-overlay.is-phase-line .dream-debut-flower__core,
.dream-debut-overlay.is-skipped .dream-debut-flower__core {
  animation: dreamDebutFlowerCore 1s ease forwards;
}

.dream-debut-flower__petal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.05rem;
  height: 1.85rem;
  margin-left: -0.525rem;
  margin-top: -1.85rem;
  border-radius: 60% 60% 45% 45%;
  background:
    linear-gradient(180deg, rgba(240, 244, 255, 0.72), rgba(180, 170, 220, 0.42) 55%, rgba(120, 110, 170, 0.18));
  transform-origin: 50% 100%;
  opacity: 0;
  box-shadow: 0 0 10px rgba(200, 190, 230, 0.18);
  --petal-rot: 0deg;
  transform: rotate(var(--petal-rot)) scale(0.35);
}

.dream-debut-flower__petal--1 { --petal-rot: 0deg; }
.dream-debut-flower__petal--2 { --petal-rot: 72deg; }
.dream-debut-flower__petal--3 { --petal-rot: 144deg; }
.dream-debut-flower__petal--4 { --petal-rot: 216deg; }
.dream-debut-flower__petal--5 { --petal-rot: 288deg; }

.dream-debut-overlay.is-phase-bloom .dream-debut-flower__petal--1,
.dream-debut-overlay.is-phase-line .dream-debut-flower__petal--1 {
  animation: dreamDebutPetalOpen 1.15s ease 0.05s forwards;
}
.dream-debut-overlay.is-phase-bloom .dream-debut-flower__petal--2,
.dream-debut-overlay.is-phase-line .dream-debut-flower__petal--2 {
  animation: dreamDebutPetalOpen 1.15s ease 0.12s forwards;
}
.dream-debut-overlay.is-phase-bloom .dream-debut-flower__petal--3,
.dream-debut-overlay.is-phase-line .dream-debut-flower__petal--3 {
  animation: dreamDebutPetalOpen 1.15s ease 0.2s forwards;
}
.dream-debut-overlay.is-phase-bloom .dream-debut-flower__petal--4,
.dream-debut-overlay.is-phase-line .dream-debut-flower__petal--4 {
  animation: dreamDebutPetalOpen 1.15s ease 0.28s forwards;
}
.dream-debut-overlay.is-phase-bloom .dream-debut-flower__petal--5,
.dream-debut-overlay.is-phase-line .dream-debut-flower__petal--5 {
  animation: dreamDebutPetalOpen 1.15s ease 0.36s forwards;
}

.dream-debut-overlay.is-skipped .dream-debut-flower__petal {
  opacity: 0.92;
  transform: rotate(var(--petal-rot)) scale(1);
  animation: none;
}

.dream-debut-line {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em 0.35em;
  max-width: min(92vw, 22rem);
  margin: 0;
  padding: 0.55rem 0.85rem;
  text-align: center;
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  font-weight: 560;
  letter-spacing: 0.12em;
  line-height: 1.55;
  color: var(--debut-moon);
  text-shadow:
    0 1px 2px rgba(4, 8, 18, 0.75),
    0 0 18px rgba(20, 28, 48, 0.55);
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.18), rgba(8, 14, 28, 0.05));
  border-radius: 0.65rem;
}

.dream-debut-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  margin-top: min(42vh, 14rem);
  max-width: min(92vw, 22rem);
}

.dream-debut-copy .dream-debut-line {
  margin-top: 0;
}

.dream-debut-continue {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(232, 238, 248, 0.78);
  text-shadow: 0 1px 2px rgba(4, 8, 18, 0.65);
  opacity: 0;
}

.dream-debut-overlay.is-ready .dream-debut-continue {
  opacity: 0.92;
  animation: dreamDebutLineSeg 0.45s ease forwards;
}

.dream-debut-line__seg {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45rem);
  filter: blur(1.5px);
}

.dream-debut-overlay.is-phase-line .dream-debut-line__seg[data-seg="a"],
.dream-debut-overlay.is-skipped .dream-debut-line__seg {
  animation: dreamDebutLineSeg 0.7s ease forwards;
}

.dream-debut-overlay.is-phase-line .dream-debut-line__seg[data-seg="b"] {
  animation: dreamDebutLineSeg 0.7s ease 0.28s forwards;
}

.dream-debut-overlay.is-phase-line .dream-debut-line__seg[data-seg="c"] {
  animation: dreamDebutLineSeg 0.75s ease 0.55s forwards;
}

/* reveal 期間保持台詞可讀；真正淡出交給 is-exiting */
.dream-debut-overlay.is-phase-reveal:not(.is-exiting) .dream-debut-line {
  opacity: 1;
}

.dream-debut-overlay.is-exiting .dream-debut-line {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.dream-debut-overlay.is-skipped .dream-debut-line__seg {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

.dream-debut-skip {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  z-index: 3;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  color: #e8eef8;
  background: rgba(16, 24, 42, 0.72);
  border: 1px solid rgba(232, 238, 248, 0.22);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* 短轉場／Reduced：壓縮延遲，保留核心層 */
.dream-debut-overlay.is-short .dream-debut-mirror__glow,
.dream-debut-overlay.is-short .dream-debut-mirror__ripple,
.dream-debut-overlay.is-short .dream-debut-flower__aura,
.dream-debut-overlay.is-short .dream-debut-flower__core,
.dream-debut-overlay.is-short .dream-debut-flower__petal,
.dream-debut-overlay.is-short .dream-debut-line__seg {
  animation-duration: 0.35s;
  animation-delay: 0.05s;
}

.dream-debut-overlay.is-reduced .dream-debut-dust,
body.reduce-motion .dream-debut-dust {
  display: none;
}

.dream-debut-overlay.is-reduced .dream-debut-bg,
.dream-debut-overlay.is-reduced .dream-debut-mist,
.dream-debut-overlay.is-reduced .dream-debut-mirror,
.dream-debut-overlay.is-reduced .dream-debut-flower,
.dream-debut-overlay.is-reduced .dream-debut-line__seg,
body.reduce-motion .dream-debut-overlay .dream-debut-bg,
body.reduce-motion .dream-debut-overlay .dream-debut-mist,
body.reduce-motion .dream-debut-overlay .dream-debut-mirror,
body.reduce-motion .dream-debut-overlay .dream-debut-flower,
body.reduce-motion .dream-debut-overlay .dream-debut-line__seg {
  animation: none !important;
  transition-duration: 0.25s !important;
  opacity: 1;
  transform: none;
  filter: none;
}

.dream-debut-overlay.is-reduced .dream-debut-flower,
body.reduce-motion .dream-debut-overlay .dream-debut-flower {
  transform: translate(-50%, -50%) scale(1);
}

/* 主畫面銜接 */
.gacha-panel.is-pool-debut-veil {
  opacity: 0.68;
  transform: translateY(3px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.gacha-panel.is-pool-debut-reveal {
  animation: dreamDebutPanelReveal 0.75s ease both;
}

@keyframes dreamDebutDustDrift {
  0% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.7); }
  18% { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(calc(-50% + (var(--p-i, 0) * 3px - 12px)), 240%, 0) scale(0.95); }
}

@keyframes dreamDebutMirrorGlow {
  from { opacity: 0; transform: scale(0.5); }
  55% { opacity: 1; transform: scale(1.05); }
  to { opacity: 0.92; transform: scale(1); }
}

@keyframes dreamDebutRipple {
  from { opacity: 0.65; transform: translate(-50%, -50%) scale(0.35); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(3.1); }
}

@keyframes dreamDebutFlowerAura {
  from { opacity: 0; transform: scale(0.45); }
  50% { opacity: 0.9; transform: scale(1.05); }
  to { opacity: 0.55; transform: scale(1.2); }
}

@keyframes dreamDebutFlowerCore {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes dreamDebutPetalOpen {
  from { opacity: 0; transform: rotate(var(--petal-rot, 0deg)) scale(0.3) translateY(0.4rem); }
  to { opacity: 0.92; transform: rotate(var(--petal-rot, 0deg)) scale(1) translateY(0); }
}

@keyframes dreamDebutLineSeg {
  from { opacity: 0; transform: translateY(0.45rem); filter: blur(1.5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes dreamDebutPanelReveal {
  from { opacity: 0.72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

body[data-theme="sweet"] .dream-debut-overlay {
  color: #f7f2ff;
}

body[data-theme="sweet"] .dream-debut-line {
  color: #f4f0ff;
  text-shadow:
    0 1px 2px rgba(20, 12, 36, 0.8),
    0 0 16px rgba(40, 24, 56, 0.55);
}

body[data-theme="sweet"] .dream-debut-skip {
  color: #f7f2ff;
  background: rgba(36, 24, 48, 0.78);
  border-color: rgba(232, 220, 248, 0.28);
}

@media (max-width: 360px) {
  .dream-debut-flower {
    width: 4.6rem;
    height: 4.6rem;
  }

  .dream-debut-line {
    letter-spacing: 0.08em;
    font-size: clamp(0.88rem, 4.2vw, 1rem);
    padding: 0.45rem 0.65rem;
  }
}

/* --- Dream bloom summon overlay --- */
.dream-bloom-overlay {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
  /* 固定夜空字色，避免 Sweet 等淺色主題深色文字繼承進來 */
  color: #f4f7ff;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.dream-bloom-overlay.is-active { opacity: 1; }

.dream-bloom-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dream-bloom-bg__night {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #070b18 0%, #10182e 50%, #0a1524 100%);
}

.dream-bloom-bg__mist {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(107, 91, 149, 0.32), transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(40, 60, 100, 0.25), transparent 45%);
}

.dream-bloom-bg__moon {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--dream-moon), rgba(232, 238, 248, 0.15));
  opacity: 0.5;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.dream-bloom-bg__arch {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 10rem;
  height: 5rem;
  transform: translateX(-50%);
  border: 1px solid rgba(212, 196, 232, 0.16);
  border-bottom: 0;
  border-radius: 10rem 10rem 0 0;
  opacity: 0.25;
}

.dream-bloom-bg__pool {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: min(92vw, 26rem);
  height: 8rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(90, 150, 190, 0.35), rgba(10, 30, 50, 0.1) 70%);
  box-shadow: inset 0 0 30px rgba(120, 180, 220, 0.15);
}

.dream-bloom-particles { position: absolute; inset: 0; }

.dream-bloom-petal {
  position: absolute;
  left: var(--p-x, 50%);
  top: -5%;
  width: 0.45rem;
  height: 0.7rem;
  border-radius: 60% 40%;
  background: var(--dream-petal);
  opacity: 0.35;
  animation: dreamPetalFall var(--p-dur, 1.2s) linear var(--p-delay, 0s) infinite;
}

@keyframes dreamPetalFall {
  from { transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.4; }
  to { transform: translateY(110vh) rotate(120deg); opacity: 0; }
}

.dream-bloom-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.dream-bloom-dust {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -0.3rem;
  border-radius: 50%;
  background: var(--dream-moon);
  box-shadow: 0 0 14px var(--dream-moon);
  opacity: 0;
}

.dream-bloom-overlay[data-state='dreamDust'] .dream-bloom-dust {
  animation: dreamDustFall 0.55s ease-in forwards;
}

.dream-bloom-overlay[data-mode='ten'][data-state='dreamDust'] .dream-bloom-dust {
  box-shadow:
    0 0 14px var(--dream-moon),
    -18px -8px 10px rgba(232, 238, 248, 0.55),
    16px -12px 10px rgba(232, 238, 248, 0.45),
    -28px 4px 8px rgba(212, 196, 232, 0.4),
    24px 2px 8px rgba(212, 196, 232, 0.35);
}

.dream-bloom-ripple {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(232, 238, 248, 0.5);
  opacity: 0;
}

.dream-bloom-overlay[data-state='mirrorRipple'] .dream-bloom-ripple,
.dream-bloom-overlay[data-state='rarityOmen'] .dream-bloom-ripple,
.dream-bloom-overlay[data-state='bloom'] .dream-bloom-ripple {
  animation: dreamRipple 1.1s ease-out forwards;
}

.dream-bloom-omen {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 6rem;
  height: 6rem;
  margin: -3rem 0 0 -3rem;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.dream-bloom-overlay[data-state='rarityOmen'] .dream-bloom-omen,
.dream-bloom-overlay[data-state='bloom'] .dream-bloom-omen {
  opacity: 1;
}

.dream-bloom-overlay[data-omen='N'] .dream-bloom-omen {
  box-shadow: 0 0 24px color-mix(in srgb, var(--dream-omen-n) 55%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--dream-omen-n) 25%, transparent), transparent 70%);
}
.dream-bloom-overlay[data-omen='R'] .dream-bloom-omen {
  box-shadow: 0 0 28px color-mix(in srgb, var(--dream-omen-r) 55%, transparent), 0 0 48px color-mix(in srgb, var(--dream-omen-r) 25%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--dream-omen-r) 28%, transparent), transparent 70%);
}
.dream-bloom-overlay[data-omen='SR'] .dream-bloom-omen {
  box-shadow: 0 0 32px color-mix(in srgb, var(--dream-omen-sr) 60%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--dream-omen-sr) 32%, transparent), transparent 70%);
}
.dream-bloom-overlay[data-omen='SSR'] .dream-bloom-omen {
  box-shadow: 0 0 36px color-mix(in srgb, var(--dream-omen-ssr) 55%, transparent), 0 0 60px color-mix(in srgb, var(--dream-gold) 30%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--dream-omen-ssr) 30%, transparent), transparent 70%);
}
.dream-bloom-overlay[data-omen='UR'] .dream-bloom-omen {
  box-shadow: 0 0 40px color-mix(in srgb, var(--dream-omen-ur) 55%, transparent), 0 0 70px color-mix(in srgb, var(--dream-mist) 40%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--dream-omen-ur) 28%, transparent), transparent 70%);
}

.dream-bloom-overlay[data-omen='UR'][data-state='rarityOmen'] .dream-bloom-bg__moon,
.dream-bloom-overlay[data-omen='UR'][data-state='bloom'] .dream-bloom-bg__moon {
  opacity: 0.12;
}

.dream-bloom-overlay[data-omen='UR'][data-state='bloom'] .dream-bloom-bg__arch {
  opacity: 0.55;
  box-shadow: 0 0 20px rgba(230, 213, 168, 0.25);
}

.dream-bloom-buds {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 0;
  height: 0;
}

.dream-bloom-bud {
  position: absolute;
  width: 1.1rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.55rem;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(180deg, var(--dream-petal), rgba(90, 70, 140, 0.8));
  transform: rotate(var(--bud-angle, 0deg)) translateY(-4.5rem) scale(0.4);
  opacity: 0;
}

.dream-bloom-overlay[data-state='bloom'] .dream-bloom-bud,
.dream-bloom-overlay[data-state='revealing'] .dream-bloom-bud {
  animation: dreamBudRise 0.55s ease var(--bud-delay, 0ms) forwards;
}

@keyframes dreamBudRise {
  from { opacity: 0; transform: rotate(var(--bud-angle, 0deg)) translateY(-2rem) scale(0.3); }
  to { opacity: 0.9; transform: rotate(var(--bud-angle, 0deg)) translateY(-5.2rem) scale(1); }
}

.dream-bloom-crest {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 5rem;
  height: 5rem;
  margin: -2.5rem 0 0 -2.5rem;
  border: 1px solid rgba(230, 213, 168, 0.35);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
}

.dream-bloom-overlay[data-omen='SSR'][data-state='bloom'] .dream-bloom-crest,
.dream-bloom-overlay[data-omen='SSR'][data-state='revealing'] .dream-bloom-crest,
.dream-bloom-overlay[data-omen='UR'][data-state='bloom'] .dream-bloom-crest {
  opacity: 0.8;
  transform: scale(1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.dream-bloom-ur {
  position: absolute;
  inset: 10% 5% 20%;
  display: grid;
  place-items: center;
}

.dream-bloom-ur__flower {
  width: min(70vw, 16rem);
  height: min(70vw, 16rem);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 238, 248, 0.2), transparent 40%),
    conic-gradient(from 0deg, rgba(107, 91, 149, 0.0), rgba(230, 213, 168, 0.35), rgba(244, 114, 182, 0.25), rgba(107, 91, 149, 0.0));
  opacity: 0;
}

.dream-bloom-ur.is-active .dream-bloom-ur__flower {
  animation: dreamUrFlower 1.4s ease forwards;
}

.dream-bloom-ur__silhouette {
  position: absolute;
  width: 8rem;
  height: 9rem;
  background: radial-gradient(ellipse at 50% 60%, rgba(20, 8, 30, 0.9), transparent 72%);
  opacity: 0;
}

.dream-bloom-ur.is-active .dream-bloom-ur__silhouette {
  animation: dreamSilhouetteIn 1s ease 0.35s forwards;
}

.dream-bloom-ur__rings {
  position: absolute;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  border: 1px solid rgba(230, 213, 168, 0.35);
  opacity: 0;
}

.dream-bloom-ur.is-active .dream-bloom-ur__rings {
  animation: dreamRipple 1.5s ease 0.2s forwards;
}

@keyframes dreamUrFlower {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.dream-bloom-seal {
  position: relative;
  width: min(92vw, 20rem);
  padding: 1.1rem 1rem 1.25rem;
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(24, 30, 52, 0.92), rgba(12, 18, 34, 0.95));
  border: 1px solid rgba(212, 196, 232, 0.28);
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.dream-bloom-seal[data-rarity='SSR'] {
  border-color: color-mix(in srgb, var(--dream-omen-ssr) 45%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 28px color-mix(in srgb, var(--dream-omen-ssr) 22%, transparent);
}

.dream-bloom-seal[data-rarity='UR'] {
  border-color: color-mix(in srgb, var(--dream-omen-ur) 50%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 32px color-mix(in srgb, var(--dream-omen-ur) 25%, transparent);
}

.dream-bloom-seal__media {
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
  margin: 0.35rem auto 0.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(8, 12, 24, 0.55);
}

.dream-bloom-seal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.dream-bloom-seal__img.is-loaded { opacity: 1; }
.dream-bloom-seal__media:has(.is-error)::after,
.dream-bloom-mini-seal__media:has(.is-error)::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(230, 213, 168, 0.8);
  font-size: 2rem;
}

.dream-bloom-seal__petal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(212, 196, 232, 0.18), transparent 55%);
}

.dream-bloom-seal__reflect {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0.6rem;
  height: 2rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(90, 150, 190, 0.25), transparent 70%);
  pointer-events: none;
}

.dream-bloom-seal__rarity {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.dream-bloom-seal[data-rarity='N'] .dream-bloom-seal__rarity { color: var(--dream-omen-n); }
.dream-bloom-seal[data-rarity='R'] .dream-bloom-seal__rarity { color: var(--dream-omen-r); }
.dream-bloom-seal[data-rarity='SR'] .dream-bloom-seal__rarity { color: var(--dream-omen-sr); }
.dream-bloom-seal[data-rarity='SSR'] .dream-bloom-seal__rarity { color: var(--dream-omen-ssr); }
.dream-bloom-seal[data-rarity='UR'] .dream-bloom-seal__rarity { color: var(--dream-omen-ur); }

.dream-bloom-seal__name {
  margin: 0.2rem 0 0.15rem;
  font-size: 1.2rem;
  color: #f4f7ff;
}

.dream-bloom-seal__title,
.dream-bloom-seal__meet,
.dream-bloom-seal__comp {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: #c7d2ea;
}

.dream-bloom-seal__meet {
  color: #d4c4e8;
}

.dream-bloom-summary {
  width: min(96vw, 26rem);
  max-height: min(78dvh, 36rem);
  overflow: auto;
  padding: 0.85rem 0.75rem 1rem;
  border-radius: 1rem;
  background: rgba(10, 14, 28, 0.92);
  border: 1px solid rgba(212, 196, 232, 0.22);
}

.dream-bloom-summary__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  color: var(--dream-petal, #d4c4e8);
  letter-spacing: 0.08em;
}

.dream-bloom-summary__title {
  margin: 0.25rem 0 0.75rem;
  font-size: 1.05rem;
  color: #f4f7ff;
}

.dream-bloom-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.dream-bloom-mini-seal {
  display: grid;
  gap: 0.2rem;
  padding: 0.45rem;
  border-radius: 0.75rem;
  background: rgba(20, 26, 46, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.18);
  text-align: center;
  min-width: 0;
}

.dream-bloom-mini-seal[data-rarity='SSR'] {
  border-color: color-mix(in srgb, var(--dream-omen-ssr) 40%, transparent);
}
.dream-bloom-mini-seal[data-rarity='UR'] {
  border-color: color-mix(in srgb, var(--dream-omen-ur) 45%, transparent);
}

.dream-bloom-mini-seal__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.55rem;
  overflow: hidden;
  background: rgba(8, 12, 24, 0.5);
}

.dream-bloom-mini-seal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dream-bloom-mini-seal__rarity {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.dream-bloom-mini-seal[data-rarity='N'] .dream-bloom-mini-seal__rarity { color: var(--dream-omen-n); }
.dream-bloom-mini-seal[data-rarity='R'] .dream-bloom-mini-seal__rarity { color: var(--dream-omen-r); }
.dream-bloom-mini-seal[data-rarity='SR'] .dream-bloom-mini-seal__rarity { color: var(--dream-omen-sr); }
.dream-bloom-mini-seal[data-rarity='SSR'] .dream-bloom-mini-seal__rarity { color: var(--dream-omen-ssr); }
.dream-bloom-mini-seal[data-rarity='UR'] .dream-bloom-mini-seal__rarity { color: var(--dream-omen-ur); }

.dream-bloom-mini-seal__name {
  font-size: 0.75rem;
  color: #f4f7ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dream-bloom-mini-seal__meet {
  font-size: 0.68rem;
  color: #b8c4dc;
}

.dream-bloom-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.dream-bloom-controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  padding-top: 0.75rem;
}

.dream-bloom-btn {
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #f4f7ff;
  background: rgba(28, 36, 60, 0.92);
  border: 1px solid rgba(232, 238, 248, 0.38);
  border-radius: 0.55rem;
  cursor: pointer;
}

.dream-bloom-btn--primary {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(110, 88, 168, 0.98), rgba(48, 82, 128, 0.98));
  border-color: rgba(232, 238, 248, 0.45);
}

.dream-bloom-btn--ghost {
  color: #e8eef8;
  background: rgba(12, 18, 34, 0.78);
  border-color: rgba(212, 220, 240, 0.42);
}

.dream-bloom-btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.dream-bloom-overlay.is-reduced .dream-bloom-petal,
body.reduce-motion .dream-bloom-petal {
  display: none;
}

.dream-bloom-overlay.is-reduced .dream-bloom-dust,
.dream-bloom-overlay.is-reduced .dream-bloom-ripple,
.dream-bloom-overlay.is-reduced .dream-bloom-bud,
.dream-bloom-overlay.is-reduced .dream-bloom-ur__flower,
body.reduce-motion .dream-bloom-dust,
body.reduce-motion .dream-bloom-ripple,
body.reduce-motion .dream-bloom-bud,
body.reduce-motion .dream-bloom-ur__flower {
  animation: none !important;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gacha-theme-stage__petals::before,
  .gacha-theme-stage__petals::after,
  .gacha-theme-stage__dust::before,
  .dream-bloom-petal {
    animation: none !important;
  }

  .dream-debut-overlay *,
  .dream-bloom-overlay * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

body.themed-summon-active {
  overflow: hidden;
  overscroll-behavior: none;
}


/* === V3.4.0 晨醒花庭 === */
.gacha-panel[data-pool-theme='eternal_slumber_bloom'][data-pool-phase='awakened'] {
  --dream-moon: #fff4e8;
  --dream-mist: #f6c7c0;
  --dream-gold: #e8c27a;
  background:
    radial-gradient(ellipse at 70% 10%, rgba(244, 180, 160, 0.28), transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(232, 194, 122, 0.18), transparent 50%),
    linear-gradient(165deg, #1a1630 0%, #2a1f3a 40%, #3a2a3a 70%, #4a3040 100%);
}

.gacha-theme-stage.is-awakened .gacha-theme-stage__atmosphere {
  filter: saturate(1.15) hue-rotate(-12deg) brightness(1.08);
}

.gacha-theme-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.gacha-theme-dual__item {
  margin: 0;
  text-align: center;
}
.gacha-theme-dual__item img {
  width: 100%;
  max-width: 9rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.75rem;
  filter: saturate(0.85);
}
.gacha-theme-dual__item figcaption {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: rgba(255, 244, 232, 0.85);
}
.gacha-theme-hero.is-dimmed {
  opacity: 0.55;
}

.gacha-awakening-panel {
  margin: 0.85rem 0 0.4rem;
  border: 1px solid rgba(232, 194, 122, 0.28);
  border-radius: 0.75rem;
  background: rgba(12, 14, 28, 0.35);
  color: #f4f0ea;
  padding: 0.35rem 0.65rem 0.55rem;
}
.gacha-awakening-panel__summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  font-size: 0.88rem;
}
.gacha-awakening-panel__summary::-webkit-details-marker { display: none; }
.gacha-awakening-bar {
  margin: 0.55rem 0 0.45rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.gacha-awakening-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8b6bb5, #f0b7a8 55%, #e8c27a);
  transition: width 0.35s ease;
}
.gacha-awakening-bar__fill.is-complete {
  background: linear-gradient(90deg, #f0b7a8, #e8c27a);
}
.gacha-awakening-panel__desc,
.gacha-awakening-panel__counts,
.gacha-awakening-panel__note {
  margin: 0.35rem 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(244, 240, 234, 0.82);
}
.gacha-awakening-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.gacha-awakening-preview__item {
  text-align: center;
  font-size: 0.62rem;
  color: rgba(244, 240, 234, 0.9);
}
.gacha-awakening-preview__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.45rem;
  display: block;
  margin-bottom: 0.25rem;
}
.gacha-awakening-preview__item.is-locked img {
  filter: grayscale(0.85) saturate(0.35) brightness(0.72);
}
.gacha-awakening-preview__item.is-locked::after {
  content: '鎖';
  display: inline-block;
  margin-top: 0.1rem;
  font-size: 0.58rem;
  opacity: 0.75;
}

.dream-bloom-ur.is-dawn-ur .dream-bloom-ur__flower {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 232, 0.35), transparent 42%),
    conic-gradient(from 20deg, rgba(244, 180, 160, 0.0), rgba(232, 194, 122, 0.55), rgba(246, 199, 192, 0.4), rgba(244, 180, 160, 0.0));
  box-shadow: 0 0 40px rgba(232, 194, 122, 0.35);
}
.dream-bloom-ur.is-dawn-ur .dream-bloom-ur__silhouette {
  background: radial-gradient(ellipse at 50% 60%, rgba(60, 28, 24, 0.85), transparent 72%);
}

.pool-awakening-overlay {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 50% 20%, rgba(244, 180, 160, 0.25), transparent 50%),
    linear-gradient(180deg, #0a1020, #1c1530 45%, #3a2438 100%);
  color: #fff4e8;
}
.pool-awakening-skip,
.pool-awakening-confirm,
.pool-awakening-fallback button {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  border: 1px solid rgba(255,244,232,0.35);
  background: rgba(20,16,32,0.65);
  color: inherit;
  border-radius: 0.5rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.pool-awakening-confirm {
  position: static;
  margin-top: 0.75rem;
}
.pool-awakening-stage {
  width: min(28rem, 100%);
  text-align: center;
  display: grid;
  gap: 0.65rem;
  justify-items: center;
}
.pool-awakening-mirror {
  position: relative;
  width: min(16rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(120,160,200,0.35), 0 0 28px rgba(232,194,122,0.25);
}
.pool-awakening-mirror img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.7s ease, filter 0.7s ease;
}
.pool-awakening-mirror__dawn { opacity: 0; }
.pool-awakening-overlay[data-phase='reflection'] .pool-awakening-mirror__dawn,
.pool-awakening-overlay[data-phase='open-eyes'] .pool-awakening-mirror__dawn,
.pool-awakening-overlay[data-phase='step-out'] .pool-awakening-mirror__dawn,
.pool-awakening-overlay.is-finale .pool-awakening-mirror__dawn { opacity: 1; }
.pool-awakening-overlay[data-phase='palette-shift'] .pool-awakening-mirror,
.pool-awakening-overlay.is-finale .pool-awakening-mirror {
  box-shadow: inset 0 0 24px rgba(244,180,160,0.35), 0 0 36px rgba(232,194,122,0.4);
}
.pool-awakening-cast {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
}
.pool-awakening-cast__item {
  opacity: 0.25;
  filter: grayscale(1);
  transition: opacity 0.35s ease, filter 0.35s ease;
  font-size: 0.62rem;
}
.pool-awakening-cast__item.is-lit {
  opacity: 1;
  filter: none;
}
.pool-awakening-cast__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.4rem;
  display: block;
  margin-bottom: 0.2rem;
}
.pool-awakening-message,
.pool-awakening-title {
  margin: 0;
}
.pool-awakening-title { font-size: 1.2rem; }
.pool-awakening-reward {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}
.pool-awakening-reward img {
  width: 6.5rem;
  height: 6.5rem;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: 0 0 18px rgba(232,194,122,0.35);
}
.pool-awakening-fallback {
  position: fixed;
  inset: 0;
  z-index: 12150;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: rgba(8,10,20,0.92);
  color: #fff4e8;
  text-align: center;
}
.pool-awakening-fallback button {
  position: static;
  justify-self: center;
}
.pool-awakening-overlay.is-reduced .pool-awakening-mirror__dawn {
  opacity: 1;
}
.pool-awakening-overlay.is-reduced .pool-awakening-cast__item {
  opacity: 1;
  filter: none;
}

@media (max-width: 320px) {
  .gacha-awakening-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pool-awakening-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pool-awakening-overlay *,
  .gacha-awakening-bar__fill {
    animation: none !important;
    transition: none !important;
  }
}


/* === V3.4.1 pool UI tokens + single result + contrast === */
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] {
  --pool-text-primary: #f4f7ff;
  --pool-text-secondary: rgba(232, 238, 248, 0.92);
  --pool-text-muted: rgba(210, 220, 240, 0.78);
  --pool-surface: rgba(12, 18, 36, 0.78);
  --pool-surface-strong: rgba(10, 14, 28, 0.92);
  --pool-surface-soft: rgba(20, 28, 52, 0.62);
  --pool-border: rgba(200, 210, 235, 0.28);
  --pool-accent: #e6d5a8;
  --pool-accent-text: #1a1428;
  --pool-warning: #fbbf24;
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'][data-pool-phase='awakened'] {
  --pool-text-primary: #fff8f0;
  --pool-text-secondary: rgba(255, 244, 232, 0.94);
  --pool-text-muted: rgba(255, 236, 220, 0.82);
  --pool-surface: rgba(28, 18, 28, 0.82);
  --pool-surface-strong: rgba(22, 14, 22, 0.94);
  --pool-surface-soft: rgba(48, 28, 36, 0.7);
  --pool-border: rgba(232, 194, 122, 0.38);
  --pool-accent: #e8c27a;
  --pool-accent-text: #2a1810;
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__badge,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__name,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__eyebrow,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__tagline,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__meta,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-details-btn,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-details,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-awakening-panel {
  color: var(--pool-text-primary);
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__name {
  font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__eyebrow,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__tagline,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__meta {
  color: var(--pool-text-secondary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__tagline,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__meta {
  font-size: 0.9rem;
  line-height: 1.5;
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-hero__cap,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-featured__item {
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: 0.75rem;
  padding: 0.45rem 0.55rem;
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-details {
  background: var(--pool-surface-strong);
  border: 1px solid var(--pool-border);
  border-radius: 0.85rem;
  padding: 0.75rem 0.9rem;
  color: var(--pool-text-secondary);
  font-size: 0.875rem;
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-details dt {
  color: var(--pool-text-muted);
}
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-details dd {
  color: var(--pool-text-primary);
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-awakening-panel {
  background: var(--pool-surface);
  border-color: var(--pool-border);
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-awakening-panel__desc,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-awakening-panel__counts,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-awakening-panel__note {
  color: var(--pool-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-details-btn,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .btn--gacha,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .btn--gacha-ten {
  font-size: 0.95rem;
  min-height: 2.75rem;
}

.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .btn--gacha:disabled,
.gacha-panel[data-pool-theme='eternal_slumber_bloom'] .btn--gacha-ten:disabled {
  opacity: 0.55;
  color: var(--pool-text-secondary);
}

/* 單抽結果置中（與十連 grid 分離） */
.summon-result-single {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-inline: auto;
}

.summon-result-single__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.summon-result-single__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summon-result-single__showcase {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.summon-result-single__frame {
  width: min(78vw, 17.5rem);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0.35rem auto 0.65rem;
  display: grid;
  place-items: center;
}

.summon-result-single__frame .pet-img-wrap,
.summon-result-single__frame img,
.summon-result-single__frame .pet-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: cover;
  margin-inline: auto;
}

.summon-result-single__status {
  margin: 0.15rem 0 0.2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.summon-result-single__name {
  margin: 0.15rem 0 0.2rem !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.3;
  text-align: center;
}

.summon-result-single__title {
  margin: 0 0 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.88;
  text-align: center;
}

.summon-result-single__badges {
  justify-content: center !important;
  margin-inline: auto;
}

.sweet-summon-result__actions--continue,
.default-summon-result__actions--continue,
.summon-result-actions--continue {
  align-items: stretch;
}

/* 結果 Modal：提高遮罩不透明度，避免背後晨醒畫面透出 */
.modal-overlay.open:has(.summon-result-single),
.modal-overlay.open:has(.sweet-summon-result),
.modal-overlay.open:has(.default-summon-result) {
  background: rgba(4, 8, 18, 0.88);
  backdrop-filter: none;
}

body[data-theme="default"] .modal-overlay.open:has(.summon-result-single),
body[data-theme="default"] .modal-overlay.open:has(.default-summon-result),
body[data-theme="sweet"] .modal-overlay.open:has(.summon-result-single),
body[data-theme="sweet"] .modal-overlay.open:has(.sweet-summon-result) {
  background: rgba(4, 8, 18, 0.9);
  backdrop-filter: none;
}

.dream-bloom-overlay {
  background: #070b18;
  color: #f4f7ff;
}

body[data-theme="sweet"] .dream-bloom-overlay,
body[data-theme="sweet"] .dream-bloom-btn,
body[data-theme="sweet"] .dream-bloom-btn--ghost,
body[data-theme="sweet"] .dream-bloom-btn--primary,
body[data-theme="sweet"] .dream-bloom-seal__name,
body[data-theme="sweet"] .dream-bloom-summary__title,
body[data-theme="sweet"] .dream-bloom-mini-seal__name {
  color: #f4f7ff;
}

body[data-theme="sweet"] .dream-bloom-seal__title,
body[data-theme="sweet"] .dream-bloom-seal__meet,
body[data-theme="sweet"] .dream-bloom-seal__comp,
body[data-theme="sweet"] .dream-bloom-mini-seal__meet {
  color: #c7d2ea;
}

body[data-theme="sweet"] .dream-bloom-btn--ghost {
  color: #e8eef8;
}

.pool-awakening-overlay {
  opacity: 0;
}
.pool-awakening-overlay.is-ready {
  opacity: 1;
  transition: opacity 0.28s ease;
}

@media (max-width: 320px) {
  .summon-result-single__frame {
    width: min(72vw, 14.5rem);
  }
  .summon-result-single__name {
    font-size: 1.1rem !important;
  }
  .gacha-panel[data-pool-theme='eternal_slumber_bloom'] .gacha-theme-stage__tagline {
    font-size: 0.8125rem;
  }
}

/* Pool content has independent visual and unlock sections. Legacy order is retained. */
.gacha-pool-content { margin: 0 0 1rem; padding-bottom: 0.25rem; }
.gacha-pool-content > .gacha-theme-stage { margin-bottom: 0; padding-bottom: 0; }
.gacha-pool-content > .gacha-awakening-panel { position: relative; z-index: 1; }
.gacha-panel:not([data-pool-theme]) .gacha-awakening-panel {
  background: var(--color-bg-card-soft);
  border-color: var(--color-border);
  color: var(--color-text-main);
}
.gacha-panel:not([data-pool-theme]) .gacha-awakening-panel__desc,
.gacha-panel:not([data-pool-theme]) .gacha-awakening-panel__counts,
.gacha-panel:not([data-pool-theme]) .gacha-awakening-panel__note,
.gacha-panel:not([data-pool-theme]) .gacha-awakening-preview__item {
  color: var(--color-text-secondary);
}
.gacha-pool-content .gacha-theme-details-btn[hidden],
.gacha-pool-content .gacha-theme-hero[hidden] { display: none; }

/* glacier_arrival: owned, finite CSS/SVG scenery shared by debut and summon. */
.glacier-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #09232d;
  contain: layout paint;
}
.glacier-scene__sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 36%, #b5cdd0 0%, #426b80 32%, #09232d 70%);
}
.glacier-scene__landscape { position: absolute; width: 100%; height: 100%; inset: 0; }
.glacier-scene__wall { transform-box: fill-box; transform-origin: center; }
.glacier-scene__wall--left { transform: translateX(9%); }
.glacier-scene__wall--right { transform: translateX(-9%); }
.glacier-scene__fog {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0d2b36aa 12%, #a7c6d8cc 48%, #28556355 78%);
  opacity: 0.95;
}
.glacier-scene__beacons { position: absolute; inset: 0; }
.glacier-scene__beacons i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 17px;
  border-radius: 50% 50% 35% 35%;
  background: #ffe5ad;
  box-shadow: 0 0 12px 4px #e9843c99, 0 0 38px 8px #ed673c44;
  opacity: 0;
}
.glacier-scene__oath {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem;
  border: 2px solid #f4ca8b;
  transform: rotate(45deg) scale(0.8);
  opacity: 0;
  box-shadow: inset 0 0 22px #f4ca8b33, 0 0 34px #f4ca8b22;
}
.glacier-scene__oath::after { content: ''; position: absolute; inset: 11px; border: 1px solid #f4ca8b99; }
.glacier-scene__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #02111977, transparent 30%, transparent 62%, #03131cdd);
}
[data-animation='glacier_arrival'].is-active .glacier-scene__wall--left { animation: glacierLeftArrival 3.4s ease-out forwards; }
[data-animation='glacier_arrival'].is-active .glacier-scene__wall--right { animation: glacierRightArrival 3.4s ease-out forwards; }
[data-animation='glacier_arrival'].is-active .glacier-scene__fog { animation: glacierFogArrival 3.4s ease-out forwards; }
[data-animation='glacier_arrival'].is-active .glacier-scene__ship { animation: glacierShipArrival 3.4s ease-out forwards; transform-origin: 50% 62%; }
[data-animation='glacier_arrival'].is-active .glacier-scene__ripples { animation: glacierWaterArrival 3.4s ease-out forwards; transform-origin: 50% 55%; }
[data-animation='glacier_arrival'].is-active .glacier-scene__beacons i { animation: glacierBeaconArrival 1s ease-out calc(0.4s + var(--i) * 0.16s) forwards; }
[data-animation='glacier_arrival']:is([data-state='rarityOmen'], [data-state='bloom'], .is-phase-line) .glacier-scene__oath { opacity: 0.9; transform: rotate(45deg) scale(1); transition: opacity 0.5s, transform 0.7s; }
[data-animation='glacier_arrival'][data-state='summary'] .glacier-scene { opacity: 0.5; transition: opacity 0.35s; }
[data-animation='glacier_arrival'] .dream-bloom-omen { background: radial-gradient(circle, #e4bd7844, transparent 66%); }
[data-animation='glacier_arrival'][data-omen='UR'] .glacier-scene__oath { border-width: 3px; box-shadow: 0 0 52px #efad5d88; }
[data-animation='glacier_arrival'] .dream-bloom-seal__petal,
[data-animation='glacier_arrival'] .dream-bloom-seal__reflect { display: none; }
[data-animation='glacier_arrival'] .dream-bloom-seal { border-color: #94c4cf; background: #102d38eb; }
[data-animation='glacier_arrival'] .dream-bloom-mini-seal { background: #102d38eb; border-color: #6899a6; }
[data-animation='glacier_arrival'] .dream-bloom-summary__eyebrow { color: #f4ca8b; }
[data-animation='glacier_arrival'] .dream-bloom-btn--primary { background: #d8a469; color: #172a32; border-color: #f4ca8b; }
[data-animation='glacier_arrival'] .dream-debut-copy { align-self: end; margin-bottom: 12vh; }
[data-animation='glacier_arrival'] .dream-debut-line { text-shadow: 0 2px 12px #00131f, 0 1px 3px #00131f; }
@keyframes glacierLeftArrival { from { transform: translateX(9%); } to { transform: translateX(-5%); } }
@keyframes glacierRightArrival { from { transform: translateX(-9%); } to { transform: translateX(5%); } }
@keyframes glacierFogArrival { from { opacity: 0.95; } to { opacity: 0.15; } }
@keyframes glacierShipArrival { from { transform: translateY(-10px) scale(0.85); } to { transform: translateY(0) scale(1); } }
@keyframes glacierWaterArrival { from { transform: scaleY(0.86); opacity: 0.15; } to { transform: scaleY(1.08); opacity: 0.4; } }
@keyframes glacierBeaconArrival { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.gacha-panel[data-pool-theme='glacier_arrival'] {
  position: relative;
  overflow: hidden;
  --pool-text-primary: #edf7fa;
  --pool-text-secondary: #c5dce2;
  --pool-text-muted: #9bbec8;
  --pool-surface: #102e3c;
  --pool-border: #467183;
  --pool-accent: #f4ca8b;
  --dream-moon: #e2f3f8;
  color: var(--pool-text-primary);
  background: linear-gradient(165deg, #1b4558, #0c2634 60%, #152830);
  border-color: var(--pool-border);
}
.gacha-panel[data-pool-theme='glacier_arrival'] .gacha-pool,
.gacha-panel[data-pool-theme='glacier_arrival'] .gacha-theme-stage__atmosphere { display: none; }
.gacha-panel[data-pool-theme='glacier_arrival'] :is(.gacha-theme-stage__name, .gacha-theme-stage__eyebrow, .gacha-theme-stage__tagline, .gacha-theme-stage__meta, .gacha-theme-details-btn, .gacha-theme-details, .gacha-theme-details dd, .gacha-theme-hero__name) { color: var(--pool-text-primary); }
.gacha-panel[data-pool-theme='glacier_arrival'] :is(.gacha-theme-details dt, .gacha-theme-hero__cap, .gacha-theme-featured__item) { color: var(--pool-text-secondary); }
.gacha-panel[data-pool-theme='glacier_arrival'] :is(.gacha-theme-details, .gacha-theme-hero__cap, .gacha-theme-featured__item) { background: var(--pool-surface); border: 1px solid var(--pool-border); border-radius: 0.75rem; padding: 0.65rem; }
.gacha-panel[data-pool-theme='glacier_arrival'] .gacha-theme-stage__badge { color: var(--pool-accent); border-color: #d8a46988; }
.gacha-panel[data-pool-theme='glacier_arrival'] .btn--gacha { background: #d8a469; color: #122832; }
.gacha-panel[data-pool-theme='glacier_arrival'] .btn--gacha-ten { background: #244f60; color: #f4ca8b; border-color: #d8a469; }

/* Motion is finite. Reduced motion and skip render the arrival composition at rest. */
[data-animation='glacier_arrival']:is(.is-reduced, .is-skipped, .is-short) .glacier-scene *,
[data-animation='glacier_arrival'][data-state='summary'] .glacier-scene *,
body.reduce-motion [data-animation='glacier_arrival'] .glacier-scene * { animation: none !important; transition: none !important; }
[data-animation='glacier_arrival']:is(.is-reduced, .is-skipped, .is-short, [data-state='summary']) .glacier-scene__wall,
body.reduce-motion [data-animation='glacier_arrival'] .glacier-scene__wall { transform: none; }
[data-animation='glacier_arrival']:is(.is-reduced, .is-skipped, .is-short, [data-state='summary']) .glacier-scene__fog,
body.reduce-motion [data-animation='glacier_arrival'] .glacier-scene__fog { opacity: 0.15; }
[data-animation='glacier_arrival']:is(.is-reduced, .is-skipped, .is-short, [data-state='summary']) .glacier-scene__beacons i,
body.reduce-motion [data-animation='glacier_arrival'] .glacier-scene__beacons i { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-animation='glacier_arrival'] .glacier-scene * { animation: none !important; transition: none !important; }
  [data-animation='glacier_arrival'] .glacier-scene__wall { transform: none; }
  [data-animation='glacier_arrival'] .glacier-scene__fog { opacity: 0.15; }
  [data-animation='glacier_arrival'] .glacier-scene__beacons i { opacity: 1; }
}
@media (max-width: 480px) {
  [data-animation='glacier_arrival'] .dream-debut-copy { margin-bottom: 15vh; }
  [data-animation='glacier_arrival'] .dream-debut-line { font-size: clamp(1.2rem, 5.6vw, 1.7rem); }
}

/* First-use teaching uses the existing palette and leaves product controls interactive. */
body.onboarding-dialog-open { overflow: hidden; }
body.onboarding-active .view.active { padding-bottom: calc(var(--page-padding-bottom) + var(--onboarding-coach-space, 330px)); }
html:has(body.onboarding-active) { scroll-padding-bottom: calc(var(--nav-height) + var(--onboarding-coach-space, 330px)); }

.more-menu-icon--image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.more-menu-icon--image img { display: block; width: 28px; height: 28px; border-radius: 7px; }

.guide-overview,
.guide-more { margin: var(--space-4); padding: var(--space-5); }
.guide-overview__eyebrow,
.onboarding-eyebrow {
  color: var(--color-primary-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.guide-overview h2,
.guide-more h2 { font-size: 1.15rem; line-height: 1.35; margin: 0 0 var(--space-4); }
.guide-steps { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.guide-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-soft);
}
.guide-step-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-light);
  font-weight: 700;
  grid-row: span 2;
}
.guide-steps strong { font-size: 0.9rem; }
.guide-steps span,
.guide-overview__status { color: var(--color-text-secondary); font-size: 0.82rem; }
.guide-overview__status { margin: 0 0 var(--space-3); }
.guide-more details { border-top: 1px solid var(--color-border-soft); padding: var(--space-3) 0; }
.guide-more summary { cursor: pointer; font-weight: 600; }
.guide-more details p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: 0.85rem; }

.guide-growth { margin: var(--space-4); }
.guide-growth > h2 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.guide-growth > p { color: var(--color-text-secondary); font-size: .85rem; line-height: 1.6; margin-bottom: var(--space-4); }
.guide-chapters { display: grid; gap: var(--space-3); }
.guide-chapter { padding: var(--space-5); margin: 0; min-width: 0; }
.guide-chapter__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: .75rem; color: var(--color-primary-light); }
.guide-chapter__status { color: var(--color-text-secondary); }
.guide-chapter__status[data-status='practiced'] { color: var(--color-success); }
.guide-chapter h3 { font-size: 1.05rem; margin: var(--space-3) 0 var(--space-2); }
.guide-chapter p { color: var(--color-text-secondary); line-height: 1.6; font-size: .85rem; }
.guide-chapter__condition { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-card-soft); }
.guide-chapter__resume { color: var(--color-primary-light) !important; }
.guide-chapter .btn { min-height: 44px; width: 100%; }
.guide-growth :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.guide-quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.guide-more details .btn { margin-top: var(--space-3); min-height: 44px; }
.onboarding-dock__top button { min-height: 32px; }
.onboarding-dock .onboarding-practice-note { color: var(--color-text-muted); font-size: .75rem; }
.onboarding-dock__skip:disabled { opacity: .5; cursor: default; }
.onboarding-target { scroll-margin-top: 90px; }
@media (min-width: 720px) { .guide-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.onboarding-scrim {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: max(16px, var(--safe-top)) 16px max(16px, var(--safe-bottom));
  background: rgba(5, 8, 20, 0.82);
  backdrop-filter: blur(8px);
}
.onboarding-dialog {
  width: min(100%, 430px);
  max-height: 92dvh;
  overflow-y: auto;
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--color-bg-card-soft), var(--color-bg-surface));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
  padding: clamp(20px, 6vw, 30px);
}
.onboarding-dialog__logo { display: block; border-radius: 16px; margin-bottom: var(--space-5); }
.onboarding-dialog h2 { font-size: clamp(1.3rem, 5vw, 1.6rem); line-height: 1.3; margin: 0 0 var(--space-3); }
.onboarding-dialog p { color: var(--color-text-secondary); margin: 0 0 var(--space-4); }
.onboarding-dialog .onboarding-eyebrow { color: var(--color-primary-light); }
.onboarding-dialog__hint { font-size: 0.82rem; }
.onboarding-dialog__actions { display: grid; gap: var(--space-2); }
.onboarding-dialog__actions .btn { width: 100%; min-height: 44px; }

.onboarding-dock {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 10px);
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 418px);
  max-height: min(45dvh, 300px);
  overflow-y: auto;
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--color-bg-elevated), var(--color-bg-card));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
  padding: var(--space-4);
}
.onboarding-dock[data-step='task'],
.onboarding-dock[data-step='expedition'] {
  top: calc(var(--safe-top) + 76px);
  bottom: auto;
}
.onboarding-dock__top { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-primary-light); font-size: 0.75rem; font-weight: 700; }
.onboarding-dock__top button,
.onboarding-dock__skip { border: 0; background: none; color: var(--color-text-secondary); cursor: pointer; text-decoration: underline; }
.onboarding-dock h2 { font-size: 1rem; line-height: 1.35; margin: var(--space-2) 0 var(--space-1); }
.onboarding-dock p { color: var(--color-text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0 0 var(--space-3); }
.onboarding-dock__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.onboarding-dock__actions .btn { flex: 1 1 125px; min-height: 40px; }
.onboarding-dock__skip { display: block; margin: var(--space-2) 0 0 auto; font-size: 0.75rem; }
.onboarding-target { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.onboarding-dock :focus-visible,
.onboarding-dialog :focus-visible,
.guide-overview :focus-visible,
.guide-more :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
body.modal-open .onboarding-dock,
body.global-mailbox-open .onboarding-dock,
body.expedition-dispatch-open .onboarding-dock,
body.is-pet-image-viewer-open .onboarding-dock { visibility: hidden; }

@media (max-width: 360px) {
  .onboarding-dock { padding: var(--space-3); max-height: 46dvh; }
  .onboarding-dock__actions .btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-dock,
  .onboarding-dialog,
  .onboarding-target { animation: none !important; transition: none !important; }
}

/* Private feedback */
.feedback-form { display: grid; gap: 10px; }
.feedback-card { display: grid; gap: 16px; }
.feedback-card[hidden] { display: none; }
.feedback-card input:not([type="checkbox"]), .feedback-card select, .feedback-card textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-main);
  background: var(--color-bg-surface);
  font: inherit;
}
.feedback-card textarea { resize: vertical; }
.feedback-card :is(input, select, textarea, a, button):focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 3px;
}
.feedback-note { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.7; }
.feedback-note a { color: var(--color-primary-light); }
.feedback-check { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; }
.feedback-check input { margin-top: 6px; flex-shrink: 0; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feedback-diagnostics { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--font-size-sm); }
#feedback-report-title { overflow-wrap: anywhere; }
#feedback-send:disabled { opacity: 0.5; cursor: not-allowed; }
.feedback-receipt { background: var(--color-success-soft); padding: 14px; border-radius: var(--radius-sm); overflow-wrap: anywhere; line-height: 1.7; }
.expedition-camp, .expedition-archive { margin: 1rem 0; }
.camp-card, .journey-archive { padding: 1.2rem; }
.camp-card p, .journey-archive p { line-height: 1.6; }
.camp-unlocks, .camp-costs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.camp-unlock, .camp-cost { padding: .35rem .65rem; border-radius: 999px; background: rgba(128,128,128,.14); font-size: .85rem; }
.camp-unlock.is-open { background: rgba(90,170,120,.2); }
.camp-cost.is-missing { color: #b84646; }
.journey-list { display: grid; gap: .5rem; }
.journey-list button { width: 100%; display: flex; justify-content: space-between; gap: .5rem; text-align: left; padding: .75rem; border: 1px solid currentColor; border-radius: .7rem; background: transparent; color: inherit; cursor: pointer; }
.journey-list span { opacity: .75; }
.expedition-objectives { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: 1rem 0; }
.expedition-objective { display: grid; gap: .2rem; padding: .6rem; border: 1px solid currentColor; border-radius: .7rem; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.expedition-objective span { font-size: .78rem; opacity: .75; }
.expedition-objective.is-selected { outline: 2px solid #8d78cf; }
.expedition-pet-option__specialty { font-size: .78rem; }
.expedition-report-event { line-height: 1.6; }
@media (max-width: 520px) { .expedition-objectives { grid-template-columns: 1fr; } .journey-list button { display: grid; } }

/* Compact expedition overview: region artwork carries the choice, details stay in dispatch. */
#view-expedition .expedition-energy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}
#view-expedition .expedition-energy__header { margin: 0; align-items: center; }
#view-expedition .expedition-energy__header > div { display: flex; align-items: baseline; gap: 7px; }
#view-expedition .expedition-energy__icon { font-size: 1.2rem; }
#view-expedition .expedition-energy__value { font-size: 1.25rem; line-height: 1; }
#view-expedition .expedition-energy__hint { margin: 0; max-width: 135px; text-align: right; font-size: .7rem; line-height: 1.3; }
#view-expedition .expedition-energy__warning { margin: 0; max-width: 150px; font-size: .7rem; line-height: 1.3; }

#view-expedition .expedition-area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
#view-expedition .expedition-area-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}
#view-expedition .expedition-area-card--locked { opacity: 1; }
#view-expedition .expedition-area-card--locked .expedition-area-card__art img { filter: saturate(.45) brightness(.75); }
#view-expedition .expedition-area-card__art {
  position: relative;
  height: 116px;
  overflow: hidden;
  background: var(--bg-card);
}
#view-expedition .expedition-area-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#view-expedition .expedition-area-card__status {
  position: absolute;
  z-index: 1;
  top: 7px;
  right: 7px;
  padding: 2px 7px;
  color: #fff;
  background: rgba(8, 14, 29, .84);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .64rem;
}
#view-expedition .expedition-area-card__content {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 104px;
  grid-template-areas:
    'header action'
    'meta action'
    'material action'
    'progress progress';
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  padding: 10px 12px;
}
#view-expedition .expedition-area-card__header {
  grid-area: header;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  margin: 0;
}
#view-expedition .expedition-area-card__title {
  flex: 1;
  font-size: .94rem;
  line-height: 1.25;
  min-width: 0;
}
#view-expedition .expedition-explore-badge { padding: 2px 6px; font-size: .66rem; }
#view-expedition .expedition-area-card__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
  font-size: .7rem;
  line-height: 1.25;
}
#view-expedition .expedition-area-card__progress {
  grid-area: progress;
  height: 5px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(145, 158, 191, .2);
}
#view-expedition .expedition-area-card__progress .expedition-area-progress-fill { display: block; min-width: 0; }
#view-expedition .expedition-area-card__material {
  grid-area: material;
  overflow: hidden;
  margin: 0;
  color: var(--text-muted);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-expedition .expedition-dispatch-button {
  grid-area: action;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 5px 8px;
  font-size: .75rem;
}

#view-expedition .camp-card,
#view-expedition .journey-archive { padding: 0; }
#view-expedition .camp-card__summary,
#view-expedition .journey-archive__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
#view-expedition .camp-card__summary::-webkit-details-marker,
#view-expedition .journey-archive__summary::-webkit-details-marker { display: none; }
#view-expedition .camp-card__summary > span:first-child { display: grid; gap: 3px; }
#view-expedition .camp-card__summary small { color: var(--text-muted); font-size: .73rem; }
#view-expedition .camp-card__summary-action,
#view-expedition .journey-archive__summary span { flex: none; color: var(--primary); font-size: .75rem; font-weight: 700; }
#view-expedition .camp-card__content,
#view-expedition .journey-archive__content { padding: 0 14px 14px; }
#view-expedition .camp-card__content p:first-child,
#view-expedition .journey-archive__content p:first-child { margin-top: 0; }

.expedition-dispatch-area__image {
  display: block;
  width: 100%;
  height: 118px;
  margin-bottom: 10px;
  border-radius: 9px;
  object-fit: cover;
}
.expedition-dispatch-area__unlock { margin: 8px 0 0; color: var(--accent); font-size: .78rem; line-height: 1.4; }
.expedition-specialty-help {
  margin: 7px 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(145, 158, 191, .25);
  border-radius: 10px;
  font-size: .78rem;
  line-height: 1.45;
}
.expedition-specialty-help summary { cursor: pointer; font-weight: 700; }
.expedition-specialty-help p { margin: 8px 0; color: var(--text-muted); }
.expedition-specialty-help ul { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 1.2rem; }
.expedition-specialty-help li strong { margin-right: 5px; }

/* Shared notification stack: rewards and achievements reserve their own height. */
.toast-container > .reward-toast,
.toast-container > .bond-unlock-toast {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  white-space: normal;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  transform: translateY(-12px);
}
.toast-container > .reward-toast.show,
.toast-container > .bond-unlock-toast.show {
  transform: translateY(0);
}
.toast-container > .toast {
  box-sizing: border-box;
  width: 100%;
  flex: 0 0 auto;
  overflow-wrap: anywhere;
}
/* Daily reminder controls share the app's form and theme tokens. */
.reminder-options { display: grid; gap: 12px; margin: 16px 0; }
.reminder-options label, .reminder-consent { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; }
.reminder-options input, .reminder-consent input { flex-shrink: 0; margin-top: 5px; }
.reminder-actions { flex-wrap: wrap; }
.settings-reminders .form-hint { overflow-wrap: anywhere; }

/* Workshop: one readable type scale across materials, recipes and gifting.
   Scoped after theme rules so a theme cannot shrink individual text roles. */
body[data-theme] #app #view-workshop {
  --workshop-type-title: 1.5rem;
  --workshop-type-heading: 1.0625rem;
  --workshop-type-body: 0.9375rem;
  --workshop-type-meta: 0.8125rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-size: var(--workshop-type-body);
  line-height: 1.6;
}

body[data-theme] #app #view-workshop :is(h1, h2, h3, button, summary) {
  font-family: inherit;
  letter-spacing: normal;
}

body[data-theme] #app #view-workshop .page-title {
  font-size: var(--workshop-type-title);
  line-height: 1.35;
  font-weight: 700;
}

body[data-theme] #app #view-workshop .page-subtitle { font-weight: 400; max-width: none; }

body[data-theme] #app #view-workshop :is(.page-subtitle, .workshop-material-card__desc, .workshop-material-card__qty,
  .workshop-craft-card__desc, .workshop-craft-card__effect, .workshop-recipe-list li,
  .workshop-gift-item__effect, .workshop-gift-item__stock, .workshop-gift-pet__reason,
  .workshop-gift-preview__list, .workshop-gift-preview > p, .workshop-gift-section > p,
  .workshop-gift-hint, .workshop-gift-status, .workshop-gift-others summary, .btn, .segmented-control__btn) {
  font-size: var(--workshop-type-body);
  line-height: 1.6;
}

body[data-theme] #app #view-workshop :is(.workshop-material-card__header h3, .workshop-craft-card__header h3,
  .section-title, .workshop-gift-item__name, .workshop-gift-pet__name) {
  font-size: var(--workshop-type-heading);
  line-height: 1.45;
  font-weight: 650;
  color: var(--color-text-main);
}

body[data-theme] #app #view-workshop :is(.workshop-summary__label, .workshop-material-card__source,
  .workshop-craft-card__source, .workshop-craft-card__theme, .workshop-craft-card__affinity,
  .workshop-gift-pet__meta, .workshop-gift-pet__companion, .pet-original-name,
  .workshop-gift-preview__limit, .workshop-tag, .rarity-badge) {
  font-size: var(--workshop-type-meta);
  line-height: 1.5;
  font-weight: 400;
}

body[data-theme] #app #view-workshop :is(.page-subtitle, .workshop-material-card__desc, .workshop-material-card__source,
  .workshop-summary__label, .workshop-craft-card__desc, .workshop-craft-card__source,
  .workshop-craft-card__theme, .workshop-craft-card__affinity, .workshop-gift-pet__meta,
  .workshop-gift-item__effect, .workshop-gift-hint, .pet-original-name) {
  color: var(--color-text-secondary);
}

body[data-theme] #app #view-workshop :is(.workshop-summary__value, .workshop-gift-item__stock,
  .workshop-recipe-list span, .workshop-material-card__qty strong, .workshop-gift-pet__meta,
  .workshop-gift-preview__list) {
  font-variant-numeric: tabular-nums;
}

body[data-theme] #app #view-workshop .workshop-summary__value {
  font-size: var(--workshop-type-title);
  line-height: 1.35;
  font-weight: 700;
}

body[data-theme] #app #view-workshop .workshop-summary__grid { margin-bottom: 0; }
body[data-theme] #app #view-workshop :is(.workshop-material-card, .workshop-craft-card) { padding: var(--space-4); }
body[data-theme] #app #view-workshop :is(.workshop-craft-card, .workshop-material-card) > p { margin: 0 0 var(--space-2); }
body[data-theme] #app #view-workshop .workshop-craft-card__effect { color: var(--color-text-main); font-weight: 600; }
body[data-theme] #app #view-workshop .workshop-recipe-list { gap: var(--space-2); margin-top: var(--space-3); }
body[data-theme] #app #view-workshop .workshop-recipe-list li { gap: var(--space-3); }
body[data-theme] #app #view-workshop .workshop-recipe-list span { flex-shrink: 0; }
body[data-theme] #app #view-workshop .workshop-tag { padding: 3px 8px; }
body[data-theme] #app #view-workshop :is(.btn, .segmented-control__btn, .workshop-gift-others summary) { min-height: 44px; font-weight: 600; }
body[data-theme] #app #view-workshop .workshop-gift-section { padding: var(--space-4); }
body[data-theme] #app #view-workshop .section-title { margin: 0 0 var(--space-3); }
body[data-theme] #app #view-workshop :is(.workshop-gift-item, .workshop-gift-pet) { padding: var(--space-3); gap: var(--space-3); }
body[data-theme] #app #view-workshop .workshop-gift-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
body[data-theme] #app #view-workshop .workshop-gift-item__effect { grid-column: 1 / -1; }
body[data-theme] #app #view-workshop .workshop-gift-item__stock { font-weight: 600; white-space: nowrap; }
body[data-theme] #app #view-workshop .workshop-gift-pet__info { gap: var(--space-1); }
body[data-theme] #app #view-workshop :is(.workshop-gift-item__name, .workshop-gift-item__effect, .workshop-gift-preview > p) { overflow-wrap: anywhere; }
body[data-theme] #app #view-workshop .workshop-gift-preview > p { margin: 0 0 var(--space-3); font-weight: 600; }
body[data-theme] #app #view-workshop .workshop-gift-preview__levelup { color: var(--color-accent); font-weight: 600; }
/* Keep horizontal filter gestures within their own scroll row. */
.filter-bar { overscroll-behavior-x: contain; user-select: none; cursor: grab; }
.filter-bar.is-dragging, .filter-bar.is-dragging .filter-btn { cursor: grabbing; }