/* AIMOO AI Agent Marketplace - Nebula Core Design System */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  /* Primary Colors */
  --color-primary: #6C4CFF;
  --color-primary-dark: #532AE6;
  --color-primary-light: #8E6BFF;
  --color-primary-bg: #F0EFFF;

  /* Gradient */
  --gradient-purple: linear-gradient(135deg, #5A35FF 0%, #8E6BFF 100%);

  /* Surfaces */
  --color-surface: #F8F9FC;
  --color-surface-dim: #D3DAEF;
  --color-surface-card: #FFFFFF;
  --color-surface-container: #E9EDFF;
  --color-surface-container-low: #F1F3FF;
  --color-surface-container-high: #E1E8FD;
  --color-surface-glass: rgba(255, 255, 255, 0.7);

  /* Text */
  --color-text-primary: #1A1C1E;
  --color-text-secondary: #44474E;
  --color-text-muted: #74777F;
  --color-text-on-primary: #FFFFFF;
  --color-on-surface: #1A1C1E;
  --color-on-surface-variant: #44474E;
  --color-outline: #74777F;

  /* Typography scale (mobile) */
  --type-display-lg-size: 32px;
  --type-display-lg-weight: 800;
  --type-display-lg-leading: 1.1;
  --type-display-lg-tracking: -0.025em;
  --type-headline-lg-size: 24px;
  --type-headline-lg-weight: 800;
  --type-headline-lg-leading: 1.2;
  --type-headline-lg-tracking: -0.025em;
  --type-headline-md-size: 20px;
  --type-headline-md-weight: 800;
  --type-headline-md-leading: 1.3;
  --type-body-lg-size: 16px;
  --type-body-lg-weight: 300;
  --type-body-lg-leading: 1.5;
  --type-body-md-size: 14px;
  --type-body-md-weight: 300;
  --type-body-md-leading: 1.5;
  --type-label-lg-size: 13px;
  --type-label-lg-weight: 600;
  --type-label-lg-leading: 1.2;
  --type-label-lg-tracking: 0.02em;
  --type-label-sm-size: 11px;
  --type-label-sm-weight: 400;
  --type-label-sm-leading: 1.4;
  --type-caption-size: 10px;
  --type-caption-weight: 400;
  --type-caption-leading: 1.2;

  /* Accent Colors */
  --color-accent-orange: #FFB84D;
  --color-accent-red: #FF5B7A;
  --color-accent-green: #22C55E;
  --color-accent-blue: #3B82F6;

  /* Icon BGs */
  --bg-icon-purple: #F0EFFF;
  --bg-icon-red: #FFF0F0;
  --bg-icon-green: #EFFFF6;
  --bg-icon-orange: #FFF6E5;
  --bg-icon-gray: #F3F4F6;

  /* Tool BGs */
  --bg-tool-purple: #F8F7FF;
  --bg-tool-red: #FFF7F8;
  --bg-tool-green: #F7FFF9;
  --bg-tool-orange: #FFFAEF;

  /* Tags */
  --tag-blue-bg: #F0F4FF;
  --tag-blue-text: #3B82F6;
  --tag-purple-bg: #F5F3FF;
  --tag-purple-text: #8B5CF6;

  /* Shadows */
  --shadow-card: none;
  --shadow-hover-ambient: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-btn: 0 4px 20px rgba(108, 76, 255, 0.3);

  /* Radius */
  --radius-card: 12px;
  --radius-btn: 12px;
  --radius-pill: 9999px;
  --radius-sm: 8px;

  /* Spacing */
  --page-margin: 20px;
  --stack-sm: 8px;
  --stack-md: 16px;
  --stack-lg: 24px;
  --stack-xl: 32px;
}

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

body {
  font-family: Inter, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-size: var(--type-body-md-size);
  font-weight: 300;
  line-height: var(--type-body-md-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.home-page-header,
.orders-header,
.profile-header {
  position: fixed !important;
  top: 0;
  left: 50%;
  right: auto;
  width: min(100%, 28rem);
  transform: translateX(-50%);
  box-shadow: 0 1px 0 rgba(226, 232, 240, 0.75);
}

.home-page-header {
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
}

.home-page-main {
  padding-top: 8.5rem;
}

html[lang="zh-CN"] body {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Nebula Core typography utilities */
.font-display,
.type-display-lg {
  font-family: "Outfit", "Space Grotesk", Inter, "PingFang SC", sans-serif;
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-leading);
  letter-spacing: var(--type-display-lg-tracking);
}
.font-headline,
.type-headline-lg {
  font-family: "Outfit", "Space Grotesk", Inter, "PingFang SC", sans-serif;
  font-size: var(--type-headline-lg-size);
  font-weight: var(--type-headline-lg-weight);
  line-height: var(--type-headline-lg-leading);
  letter-spacing: var(--type-headline-lg-tracking);
}
.type-headline-md {
  font-family: "Outfit", "Space Grotesk", Inter, "PingFang SC", sans-serif;
  font-size: var(--type-headline-md-size);
  font-weight: var(--type-headline-md-weight);
  line-height: var(--type-headline-md-leading);
}
.font-body,
.type-body-md {
  font-family: Inter, "PingFang SC", sans-serif;
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-leading);
}
.type-body-lg {
  font-family: Inter, "PingFang SC", sans-serif;
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
}
.type-label-lg {
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
}
.type-label-sm {
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  line-height: var(--type-label-sm-leading);
}
.type-caption,
.text-xs-meta {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
}
.text-emphasis-high { color: var(--color-on-surface); }
.text-emphasis-medium { color: var(--color-on-surface-variant); }
.text-emphasis-low { color: var(--color-outline); }
.text-label-bold {
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
}
html[lang="zh-CN"] .type-display-lg { font-size: 31px; }
html[lang="zh-CN"] .type-headline-lg { font-size: 23px; }
html[lang="zh-CN"] .type-headline-md { font-size: 19px; }

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  width: 58px;
  height: 28px;
  align-items: center;
  justify-content: space-between;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.lang-toggle button {
  width: 26px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.lang-toggle button.active {
  background: #111827;
  color: white;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
/* Lang toggle on dark/colored hero backgrounds */
.lang-toggle--on-dark {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
.lang-toggle--on-dark button {
  color: rgba(255, 255, 255, 0.85);
}
.lang-toggle--on-dark button.active {
  background: white;
  color: #111827;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

/* Mobile app container */
.app-container {
  max-width: 430px;
  margin: 0 auto;
  background: white;
  min-height: 100vh;
  position: relative;
  box-shadow: var(--shadow-elevated);
}

@media (min-width: 768px) {
  .app-container {
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
  }
  body {
    background: white;
  }
}

/* Cards */
.card {
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: none;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}
.card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-hover-ambient);
  border-color: rgba(148, 163, 184, 0.32);
}

/* Buttons */
.btn-primary {
  background: var(--gradient-purple);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(108, 76, 255, 0.4);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover {
  background: var(--color-primary-bg);
}

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
}
.tag-blue { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
.tag-purple { background: var(--tag-purple-bg); color: var(--tag-purple-text); }

/* Scrollbar hidden */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Section titles */
.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--stack-md);
}

/* Fade in animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* Page transitions */
.page-enter {
  animation: fadeInUp 0.3s ease-out;
}

/* Bottom nav safe area */
.pb-nav { padding-bottom: 80px; }

/* Home page utilities */
.bg-gradient-purple {
  background: var(--gradient-purple);
}
.card-shadow {
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: none;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.card-shadow:hover {
  box-shadow: var(--shadow-hover-ambient);
  border-color: rgba(148, 163, 184, 0.3);
}
.bg-icon-purple { background-color: var(--bg-icon-purple); color: var(--color-primary); }
.bg-icon-red { background-color: var(--bg-icon-red); color: var(--color-accent-red); }
.bg-icon-green { background-color: var(--bg-icon-green); color: var(--color-accent-green); }
.bg-icon-orange { background-color: var(--bg-icon-orange); color: var(--color-accent-orange); }
.bg-icon-gray { background-color: var(--bg-icon-gray); color: #6B7280; }
.bg-tool-purple { background-color: var(--bg-tool-purple); }
.bg-tool-red { background-color: var(--bg-tool-red); }
.bg-tool-green { background-color: var(--bg-tool-green); }
.bg-tool-orange { background-color: var(--bg-tool-orange); }
.hero-text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-subtext-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tailwind color utilities fallback */
.text-primary { color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }

/* Home page interactive cards */
.agent-card {
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.15);
  transition: box-shadow 0.25s, transform 0.2s, border-color 0.25s;
}
.agent-card:hover {
  box-shadow: var(--shadow-hover-ambient);
  border-color: rgba(148, 163, 184, 0.3);
}
.agent-card:active {
  transform: scale(0.995);
}
.agent-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.category-link {
  color: inherit;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.category-link:hover,
.category-link:visited,
.category-link:active {
  color: inherit;
  text-decoration: none;
}

.category-filter {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.category-filter:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 1rem;
}
.category-filter.is-active .category-filter-icon {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
}
.category-filter.is-active span {
  color: var(--color-primary);
  font-weight: 600;
}

/* Agent detail page */
.bg-hero-gradient {
  background: linear-gradient(180deg, #1A1042 0%, #2A1B6B 50%, #462B9C 100%);
}
.bg-skill-blue { background: linear-gradient(135deg, #E3E6FF 0%, #F5F7FF 100%); }
.bg-skill-green { background: linear-gradient(135deg, #E0F4E8 0%, #F2FBF5 100%); }
.bg-skill-pink { background: linear-gradient(135deg, #FFE8F1 0%, #FFF5F8 100%); }
.bg-skill-purple { background: linear-gradient(135deg, #F3E8FF 0%, #FAF5FF 100%); }
.agent-detail-tab {
  color: #64748b;
  font-weight: 500;
  transition: color 0.2s;
}
.agent-detail-tab.active {
  color: var(--color-primary);
  font-weight: 600;
}
.agent-detail-tab .tab-indicator {
  display: none;
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 0.25rem;
  background: var(--color-primary);
  border-radius: 9999px;
}
.agent-detail-tab.active .tab-indicator {
  display: block;
}
.agent-section-anchor {
  color: #64748b;
}
.agent-section-anchor.active {
  color: var(--color-primary);
  background: rgba(108, 76, 255, 0.06);
}
.agent-section-anchor.active span:first-child {
  background: #f7f1ff;
  color: var(--color-primary);
}
.section-anchor-bar {
  position: relative;
  z-index: 35;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.section-anchor-bar.is-pinned {
  position: fixed;
  top: var(--anchor-bar-top, 4.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 28rem;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  z-index: 39;
  background: rgba(253, 248, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(26, 11, 59, 0.08);
}
.section-anchor-bar-spacer {
  height: 0;
  pointer-events: none;
}
.section-anchor-bar.is-pinned .section-anchor-bar__inner {
  border-color: rgba(226, 232, 240, 0.6);
}
body.agent-detail-anchors-pinned .agent-detail-header {
  background: rgba(253, 248, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(226, 232, 240, 0.9);
}
body.agent-detail-anchors-pinned .agent-detail-header a {
  color: #334155;
  background: #f1f5f9;
}
body.agent-detail-anchors-pinned .agent-detail-header .lang-toggle--on-dark {
  background: #f1f5f9;
}
body.agent-detail-anchors-pinned .agent-detail-header .lang-toggle--on-dark button {
  color: #64748b;
}
body.agent-detail-anchors-pinned .agent-detail-header .lang-toggle--on-dark button.active {
  background: #111827;
  color: #ffffff;
}
[data-agent-section] {
  scroll-margin-top: var(--anchor-scroll-margin, 9rem);
}
.hero-gradient-visual {
  background:
    linear-gradient(180deg, rgba(26, 11, 59, 0.35) 0%, rgba(26, 11, 59, 0.78) 100%),
    url('../assets/images/visual_hero_bg.png') center top / cover no-repeat;
}
.hero-gradient-companion {
  background:
    linear-gradient(180deg, rgba(38, 19, 30, 0.45) 0%, rgba(38, 19, 30, 0.82) 100%),
    url('../assets/images/companion_hero_bg.png') center top / cover no-repeat;
}
.hero-gradient-shopmate {
  background: linear-gradient(180deg, #4b2c99 0%, #2a1563 100%);
}
.agent-detail-shopmate .section-anchor-bar.is-pinned {
  background: rgba(253, 248, 255, 0.96);
}
.section-anchor-bar--four .section-anchor-bar__inner,
.section-anchor-bar--five .section-anchor-bar__inner {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 0.125rem;
}
.section-anchor-bar--four .agent-section-anchor {
  flex: 1 1 0;
  min-width: 0;
}
.section-anchor-bar--five .agent-section-anchor {
  flex: 1 0 4.25rem;
  min-width: 4.25rem;
}
.section-anchor-bar--hero-overlap {
  margin-top: -2.5rem;
  z-index: 20;
}
.section-anchor-bar--hero-overlap .section-anchor-bar__inner {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.pb-safe {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
}

/* Profile / My Center */
.profile-page {
  background: #F8F9FB;
}
.profile-page .max-w-md {
  background: #F8F9FB;
}
.profile-header {
  background: #F8F9FB;
}
.profile-header__title {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
}
.profile-page-main {
  padding-top: 6.25rem;
}
.bg-gradient-profile {
  background: linear-gradient(135deg, #7A3BFF 0%, #4D33F5 100%);
}
.bg-card-dark {
  background: rgba(30, 20, 80, 0.4);
}
.profile-menu-item:last-child {
  border-bottom: 0;
}

/* Home mobile slide-out menu */
.home-menu-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
}
.home-menu-root.is-open {
  pointer-events: auto;
  visibility: visible;
}
.home-menu-frame {
  position: relative;
  width: 100%;
  max-width: 28rem;
  height: 100%;
  margin: 0 auto;
}
.home-menu-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.28s ease;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.home-menu-root.is-open .home-menu-backdrop {
  opacity: 1;
}
.home-menu-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82%, 19.5rem);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
}
.home-menu-root.is-open .home-menu-drawer {
  transform: translateX(0);
}
.home-menu-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(3rem, calc(env(safe-area-inset-top, 0px) + 2.75rem)) 1.25rem 1rem;
  border-bottom: 1px solid #f3f4f6;
}
.home-menu-drawer__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
}
.home-menu-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: #6b7280;
  background: #f3f4f6;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-menu-drawer__close:active {
  background: #e5e7eb;
}
.home-menu-nav {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0;
}
.home-menu-drawer__footer {
  border-top: 1px solid #f3f4f6;
  padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom, 0.5rem));
}
.home-menu-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: #1f2937;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s;
}
.home-menu-item:active {
  background: #f3f4f6;
}
.home-menu-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}
.home-menu-item__icon--primary { background: #f0efff; color: var(--color-primary); }
.home-menu-item__icon--blue { background: #eff6ff; color: #3b82f6; }
.home-menu-item__icon--green { background: #ecfdf5; color: #10b981; }
.home-menu-item__icon--red { background: #fef2f2; color: #ef4444; }
.home-menu-item__label {
  flex: 1;
}
.home-menu-item__chevron {
  color: #d1d5db;
  flex-shrink: 0;
}
.home-menu-item--logout {
  color: #ef4444;
}
.home-menu-item--logout:active {
  background: #fef2f2;
}
body.home-menu-open {
  overflow: hidden;
  touch-action: none;
}

/* Orders list page */
.orders-page {
  background: #f8fafc;
}
.orders-page .max-w-md {
  background: #f8fafc;
}
.orders-header {
  background: #f8fafc;
}
.orders-header__title {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
}
.orders-page-main {
  padding-top: 6.25rem;
}
.orders-tabs {
  top: var(--orders-tabs-top, 5.75rem);
  background: #f8fafc;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.orders-tab {
  padding-bottom: 0.5rem;
  font-size: 12px;
  font-weight: 500;
  color: #484556;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.orders-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.order-card {
  border: 1px solid rgba(201, 196, 217, 0.25);
}
.order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}
.order-btn--outline {
  border: 1px solid #c9c4d9;
  color: #484556;
  background: transparent;
}
.order-btn--outline:active {
  background: #f1ebfa;
}
.order-btn--primary {
  border: none;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(108, 76, 255, 0.25);
}
.order-btn--primary:active {
  background: var(--color-primary-dark);
}
.order-btn--ghost {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.order-btn--ghost:active {
  background: rgba(108, 76, 255, 0.08);
}
.order-btn--warning {
  border: none;
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.3);
}
.order-btn--warning:active {
  opacity: 0.9;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.order-detail-visual-header,
.order-detail-companion-header,
.order-detail-shopmate-header {
  position: fixed !important;
  top: 0;
  left: 50%;
  right: auto;
  width: min(100%, 28rem);
  transform: translateX(-50%);
  box-shadow: 0 1px 0 rgba(226, 232, 240, 0.75);
}

.order-detail-visual-page main,
.order-detail-companion-page main,
.order-detail-shopmate-page main {
  padding-top: 5rem;
}

/* ShopMate fulfillment detail */
.order-detail-shopmate-page {
  background: #f8fafc;
}
.order-detail-shopmate-bar {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
}
.fulfillment-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #f9fafb;
}
.fulfillment-card--summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  position: relative;
}
.fulfillment-tag {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 10px;
  background: #f7f4ff;
  color: var(--color-primary);
}
.fulfillment-h-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding: 0 0.5rem;
}
.fulfillment-h-timeline__line {
  position: absolute;
  top: 0.625rem;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: var(--color-primary);
  z-index: 0;
}
.fulfillment-h-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 1;
}
.fulfillment-h-step__dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.375rem;
  box-shadow: 0 0 0 3px #fff;
}
.fulfillment-h-step__label {
  font-size: var(--type-label-sm-size);
  font-weight: 500;
  line-height: var(--type-label-sm-leading);
  color: var(--color-on-surface);
  text-align: center;
}
.fulfillment-h-step__time {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--color-outline);
  margin-top: 0.125rem;
}
.fulfillment-kv {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
}
.fulfillment-kv > span:first-child {
  width: 5rem;
  flex-shrink: 0;
  color: var(--color-on-surface-variant);
}
.fulfillment-kv > span:last-child {
  color: var(--color-on-surface);
  font-weight: 500;
}
.fulfillment-v-timeline {
  position: relative;
  padding-left: 6rem;
}
.fulfillment-v-timeline::before {
  content: '';
  position: absolute;
  left: 5.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: #e5e7eb;
}
.fulfillment-v-step {
  position: relative;
  margin-bottom: 1rem;
}
.fulfillment-v-step:last-child {
  margin-bottom: 0;
}
.fulfillment-v-step__time {
  position: absolute;
  left: -6rem;
  top: 0;
  width: 5.5rem;
  font-size: 10px;
  color: #9ca3af;
  text-align: right;
  padding-right: 0.5rem;
}
.fulfillment-v-step__body {
  position: relative;
  padding-left: 1rem;
}
.fulfillment-v-step__body::before {
  content: '';
  position: absolute;
  left: -0.375rem;
  top: 0.375rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  border: 2px solid var(--color-primary);
  background: #fff;
  z-index: 1;
}
.fulfillment-v-step__title {
  font-size: 12px;
  font-weight: 500;
  color: #111827;
}
.fulfillment-v-step__desc {
  font-size: 11px;
  color: #6b7280;
  margin-top: 0.125rem;
}
.fulfillment-route-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5.625rem;
  height: 4rem;
  border-radius: 0.75rem;
  border: 1px solid #f3f4f6;
  background: #f9fafb;
  text-align: center;
  padding: 0.25rem;
}
.fulfillment-route-node__badge {
  position: absolute;
  bottom: -0.625rem;
  font-size: 8px;
  color: #9ca3af;
  background: #fff;
  padding: 0 0.25rem;
  white-space: nowrap;
}
.fulfillment-log {
  position: relative;
  padding-left: 0.5rem;
  border-left: 0.5px solid #e5e7eb;
}
.fulfillment-log__item {
  display: flex;
  gap: 0.25rem;
  font-size: 9px;
  margin-bottom: 0.375rem;
  position: relative;
  padding-left: 0.25rem;
}
.fulfillment-log__item::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0.25rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--color-primary);
}
.fulfillment-log__item > span:first-child {
  color: #9ca3af;
  width: 2rem;
  flex-shrink: 0;
}
.fulfillment-log__item > span:last-child {
  color: #374151;
}
.fulfillment-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  font-size: 10px;
}
.fulfillment-rating-row > span:first-child {
  color: #6b7280;
  width: 3rem;
  flex-shrink: 0;
}
.fulfillment-stars-sm {
  color: #f5a623;
  font-size: 10px;
  letter-spacing: -1px;
}
.fulfillment-rating-row > span:nth-child(3) {
  color: #374151;
  font-weight: 500;
  width: 1.5rem;
  text-align: right;
}
.fulfillment-chat {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.fulfillment-chat__bubble {
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  line-height: var(--type-label-sm-leading);
  color: #374151;
  background: #f9fafb;
  border-radius: 0.75rem;
  border-top-left-radius: 0;
  padding: 0.5rem;
  display: inline-block;
}

/* Luna Companion fulfillment detail */
.order-detail-companion-page {
  background: #f7f1ff;
}
.order-detail-companion-bar {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
}
.companion-routing-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.companion-routing-node-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.companion-routing-node-card--router {
  background: #f1ebff;
  border-color: rgba(108, 76, 255, 0.2);
}
.companion-routing-log {
  position: relative;
  padding-left: 1rem;
}
.companion-routing-log__item {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 0.25rem;
}
.companion-routing-log__item::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 0.375rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  border: 2px solid var(--color-primary);
  background: #fff;
  z-index: 1;
}
.companion-routing-log__item:not(.companion-routing-log__item--last)::after {
  content: '';
  position: absolute;
  left: -0.8125rem;
  top: 0.875rem;
  bottom: -1rem;
  width: 1px;
  background: #ddd8e6;
  z-index: 0;
}
.companion-routing-log__item--last {
  margin-bottom: 0;
}
.companion-info-row {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: 0.5rem;
  align-items: start;
  font-size: 12px;
}
.companion-info-row > span:nth-child(2) {
  color: #6b7280;
}
.companion-info-row > span:nth-child(3) {
  color: #111827;
  max-width: 55%;
}
.companion-photo-scroll {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.companion-photo-scroll::-webkit-scrollbar {
  display: none;
}
.companion-photo-scroll__img {
  width: 6rem;
  height: 4rem;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
}

/* Luna Visual fulfillment detail */
.order-detail-visual-page {
  background: #fcfcfc;
}
.order-detail-visual-bar {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
}
.fulfillment-tag--muted {
  background: #f5f6f8;
  color: #4b5563;
}
.fulfillment-kv--wide > span:first-child {
  width: 6rem;
}
.visual-routing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}
.visual-routing-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #f0ebff;
  border-radius: 1rem;
  padding: 0.75rem;
  width: 7rem;
  box-shadow: 0 2px 8px rgba(83, 42, 230, 0.06);
  text-align: center;
}
.visual-routing-node--router {
  border-color: #e0f2fe;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06);
}
.visual-routing-node--studio {
  border-color: #dcfce7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.06);
}
.visual-routing-node__badge {
  position: absolute;
  top: -0.75rem;
  font-size: 10px;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  white-space: nowrap;
  z-index: 1;
}
.visual-routing-node__badge--primary {
  color: #fff;
  background: var(--color-primary);
}
.visual-routing-node__badge--success {
  color: #10b981;
  background: #dcfce7;
}
.visual-routing-log__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
  margin-bottom: 0.75rem;
  position: relative;
  padding-left: 0.25rem;
}
.visual-routing-log__item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  border: 1px solid var(--color-primary);
  flex-shrink: 0;
  margin-left: -0.25rem;
}
.visual-routing-log__item--last::before {
  background: var(--color-primary);
}
.visual-routing-log__item > span:first-child {
  color: #6b7280;
  width: 2.5rem;
  flex-shrink: 0;
}
.visual-routing-log__item > span:last-child {
  color: #111827;
}
.visual-gen-progress__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 12px;
  margin-bottom: 0.5rem;
  position: relative;
}
.visual-gen-progress__item:not(.visual-gen-progress__item--last) {
  padding-bottom: 0.25rem;
}
.visual-gen-progress__time {
  color: #6b7280;
  width: 2.5rem;
  flex-shrink: 0;
  line-height: 1.25;
  text-align: right;
}
.visual-gen-progress__item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  border: 1px solid var(--color-primary);
  margin-top: 0.375rem;
  flex-shrink: 0;
}
.visual-gen-progress__item--last::before {
  background: var(--color-primary);
}
.visual-gen-progress__text {
  color: #111827;
  line-height: 1.35;
  padding-top: 0.125rem;
}
.visual-result-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.visual-result-scroll::-webkit-scrollbar {
  display: none;
}
.visual-result-thumb {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #000;
  border: 1px solid #f3f4f6;
}
.visual-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.visual-result-thumb__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visual-result-thumb__lock > span {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.visual-result-thumb__label {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.visual-result-thumb__label--video {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* Homepage featured cases */
.featured-case-card {
  width: 8.75rem;
  display: block;
  color: inherit;
  text-decoration: none;
}
.featured-case-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f3f4f6;
  margin-bottom: 0.5rem;
}
.featured-case-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-case-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-case-card__play::before {
  content: '';
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
  position: absolute;
}
.featured-case-card__play svg {
  position: relative;
  z-index: 1;
}
.featured-case-card__title {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  margin-bottom: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-case-card__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.featured-case-card__avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}
.featured-case-card__author {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.featured-case-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 10px;
  color: #9ca3af;
  flex-shrink: 0;
}
.featured-case-card__stat svg {
  color: #d1d5db;
}

/* Forum compose */
.forum-compose-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.forum-compose-root[hidden] {
  display: none;
}
.forum-compose-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.forum-compose-sheet {
  position: relative;
  width: 100%;
  max-width: 28rem;
  max-height: 85vh;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: forum-sheet-up 0.28s ease;
}
@keyframes forum-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.forum-compose-sheet__handle {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 0.625rem auto 0;
}
.forum-compose-sheet__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}
.forum-compose-sheet__title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
}
.forum-compose-sheet__cancel {
  justify-self: start;
  font-size: 0.875rem;
  color: #64748b;
  padding: 0.25rem 0;
}
.forum-compose-sheet__publish {
  justify-self: end;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 0.25rem 0;
}
.forum-compose-sheet__publish:disabled {
  opacity: 0.4;
}
.forum-compose-sheet__body {
  padding: 1rem;
  overflow-y: auto;
}
.forum-compose-textarea {
  width: 100%;
  min-height: 8rem;
  border: none;
  resize: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #1e293b;
  outline: none;
}
.forum-compose-textarea::placeholder {
  color: #94a3b8;
}
.forum-compose-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.forum-compose-preview {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
}
.forum-compose-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.625rem;
  background: #f1f5f9;
}
.forum-compose-preview__remove {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.forum-compose-add-images {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
body.forum-compose-open {
  overflow: hidden;
}
.forum-toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%) translateY(1rem);
  z-index: 300;
  padding: 0.625rem 1rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.forum-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Centered toast for Coming Soon and similar messages */
.forum-toast--center {
  bottom: 50%;
  transform: translateX(-50%) translateY(50%);
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  font-family: "Outfit", "Space Grotesk", Inter, "PingFang SC", sans-serif;
  letter-spacing: 0.02em;
}
.forum-toast--center.is-visible {
  transform: translateX(-50%) translateY(50%);
}

.forum-actor-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.forum-actor-icon--human {
  color: #94a3b8;
}
.forum-actor-icon--ai {
  color: var(--color-primary);
}

/* Order review compose */
.order-review-compose-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.order-review-compose-root[hidden] {
  display: none;
}
.order-review-compose-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.order-review-compose-sheet {
  position: relative;
  width: 100%;
  max-width: 28rem;
  max-height: 85vh;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: forum-sheet-up 0.28s ease;
}
.order-review-compose-sheet__handle {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 0.625rem auto 0;
}
.order-review-compose-sheet__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}
.order-review-compose-sheet__title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
}
.order-review-compose-sheet__cancel {
  justify-self: start;
  font-size: 0.875rem;
  color: #64748b;
  padding: 0.25rem 0;
}
.order-review-compose-sheet__submit {
  justify-self: end;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 0.25rem 0;
}
.order-review-compose-sheet__body {
  padding: 1.25rem 1rem 1.5rem;
  overflow-y: auto;
}
.order-review-star-picker {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.order-review-star-btn {
  padding: 0.25rem;
  color: #d1d5db;
  transition: color 0.15s ease, transform 0.15s ease;
}
.order-review-star-btn.is-active,
.order-review-star-btn:hover {
  color: #f59e0b;
}
.order-review-star-btn:active {
  transform: scale(1.1);
}
.order-review-star-btn .material-symbols-outlined {
  font-size: 2rem;
}
.order-review-star-label {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #f59e0b;
  min-height: 1.25rem;
  margin-bottom: 0.5rem;
}
.order-review-textarea {
  width: 100%;
  min-height: 6.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #1e293b;
  resize: none;
  outline: none;
}
.order-review-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(108, 76, 255, 0.12);
}
.order-review-textarea::placeholder {
  color: #94a3b8;
}
.order-review-view-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
  white-space: pre-wrap;
}
.order-review-view-stars {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.75rem 0;
  color: #f59e0b;
}
body.order-review-compose-open {
  overflow: hidden;
}
.order-review-stars-display .material-symbols-outlined {
  font-size: 14px;
}
.order-review-stars-display--lg .material-symbols-outlined {
  font-size: 18px;
}


/* Outfit / Space Grotesk heading utilities */
.font-heading {
  font-family: "Outfit", "Space Grotesk", Inter, "PingFang SC", sans-serif;
  letter-spacing: -0.025em;
}
.font-extrabold { font-weight: 800; }
.tracking-tight { letter-spacing: -0.025em; }

/* Micro uppercase label (e.g., VIEW DETAILS / ????) */
.micro-label {
  font-family: Inter, "PingFang SC", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.micro-label--primary {
  color: var(--color-primary);
}

/* Low-opacity dark minimalist frame */
.frame-dark-subtle {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
}

/* Soft ambient shadow on hover only */
.shadow-ambient-hover {
  box-shadow: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.shadow-ambient-hover:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Description text style: font-light + slate-400 */
.desc-text {
  font-weight: 300;
  color: #94a3b8;
}

.chat-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(10px);
  padding: 16px;
}
.chat-popup-overlay.is-open {
  display: flex;
}
.chat-popup-panel {
  width: min(100%, 420px);
  height: min(84vh, 720px);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.34);
}
.chat-popup-grabber {
  width: 44px;
  height: 4px;
  margin: 10px auto 2px;
  border-radius: 999px;
  background: #cbd5e1;
}
.chat-popup-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 12px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.chat-popup-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-popup-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
.chat-popup-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
}
.chat-popup-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.chat-popup-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.chat-popup-close:hover {
  color: #0f172a;
  background: #f1f5f9;
}
.chat-popup-frame {
  width: 100%;
  flex: 1;
  border: 0;
  background: #f8fafc;
}
body.chat-popup-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .chat-popup-overlay {
    align-items: flex-end;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .chat-popup-panel {
    width: 100%;
    height: min(92vh, 760px);
    max-height: calc(100vh - 16px - env(safe-area-inset-bottom));
    border-radius: 22px 22px 18px 18px;
  }
}