/**
 * Toket App Shell — Phase 1 (V1 / V2 / Workspace 视觉统一)
 * 仅外壳：背景、顶栏 CTA、玻璃卡、主按钮、Toast/Loading。
 * 不改业务逻辑；--primary bridge 仅在 .toket-app-shell 内覆盖为 Toket Login Purple。
 */
@import url("/assets/design-tokens.css");

/* —— 页面背景 & bridge（#f6f8fc / #0b1020 + glow）—— */
html.toket-app-shell[data-theme="light"],
html.toket-app-shell[data-theme="light"] {
  --dt-page-bg: #f6f8fc;
  --dark-bg: #f6f8fc;
  --bg: #f6f8fc;
  --bg-primary: #f6f8fc;
  --primary: var(--toket-brand);
  --primary-2: var(--toket-brand-2);
  --brand: var(--toket-brand);
  --brand-2: var(--toket-brand-2);
  --primary-hover: var(--toket-brand-hover);
  --focus-ring: var(--toket-focus-ring);
}

html.toket-app-shell:is([data-theme="dark"], .dark) {
  --dt-page-bg: #0b1020;
  --dark-bg: #0b1020;
  --bg: #0b1020;
  --bg-primary: #0b1020;
  --primary: var(--toket-brand);
  --primary-2: var(--toket-brand-2);
  --brand: var(--toket-brand);
  --brand-2: var(--toket-brand-2);
}

html.toket-app-shell.page-cost-v1 body,
html.toket-app-shell.page-cost-v2 body {
  background: var(--dt-page-bg);
  color: var(--text-main, var(--toket-text));
  font-family: var(--toket-font-sans, var(--dt-font-sans));
}

html.toket-app-shell:is([data-theme="dark"], .dark).page-cost-v1 body,
html.toket-app-shell:is([data-theme="dark"], .dark).page-cost-v2 body {
  background: var(--toket-bg-page);
}

html.toket-app-shell[data-theme="light"].page-cost-v1 body,
html.toket-app-shell[data-theme="light"].page-cost-v2 body {
  background: #f6f8fc;
}

/* Hero glow（替代旧紫灰 radial） */
html.toket-app-shell .bg-glow {
  width: min(640px, 90vw);
  height: min(640px, 70vh);
  top: -200px;
  right: -120px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--toket-brand) 14%, transparent) 0%,
    transparent 68%
  );
  opacity: 1;
}

html.toket-app-shell:is([data-theme="dark"], .dark) .bg-glow {
  background: radial-gradient(
    circle at 30% 20%,
    rgba(var(--toket-brand-rgb), 0.18) 0%,
    transparent 55%
  );
}

html.toket-app-shell[data-theme="light"] .bg-glow {
  background: radial-gradient(
    circle at 70% 0%,
    color-mix(in srgb, var(--toket-brand-2) 12%, transparent) 0%,
    transparent 62%
  );
}

/* —— 顶栏：Toket DS CTA & 导航强调 —— */
html.toket-app-shell.site-unified-chrome .site-header__cta-primary,
html.toket-app-shell.site-unified-chrome #siteHeaderRechargeCta,
html.toket-app-shell.site-unified-chrome .nav-recharge-btn.btn-gradient,
html.toket-app-shell.site-unified-chrome .mobile-drawer .btn-gradient {
  background: var(--toket-gradient-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--toket-btn-primary-shadow);
  transition:
    transform var(--toket-transition-ui),
    box-shadow var(--toket-transition-ui),
    filter var(--toket-transition-ui);
}

html.toket-app-shell.site-unified-chrome .site-header__cta-primary:hover,
html.toket-app-shell.site-unified-chrome #siteHeaderRechargeCta:hover,
html.toket-app-shell.site-unified-chrome .nav-recharge-btn.btn-gradient:hover {
  background: var(--toket-gradient-primary-hover) !important;
  transform: translateY(var(--toket-translate-hover-btn));
  box-shadow: var(--toket-btn-primary-shadow-hover);
  filter: none;
}

html.toket-app-shell.site-unified-chrome .nav-links a[aria-current="page"],
html.toket-app-shell.site-unified-chrome .nav-links a.is-active {
  box-shadow: inset 0 -2px 0 var(--toket-brand);
  color: var(--text-main);
}

html.toket-app-shell.site-unified-chrome .nav-links a:not([aria-current="page"]):hover {
  color: var(--toket-brand);
}

html.toket-app-shell.site-unified-chrome .logo {
  font-weight: var(--toket-weight-semibold, 600);
  letter-spacing: var(--toket-tracking-tight, -0.03em);
}

html.toket-app-shell.site-unified-chrome body > header,
html.toket-app-shell.site-unified-chrome header.pay-top {
  background: color-mix(in srgb, var(--dt-page-bg, #f6f8fc) 88%, var(--dt-card-bg) 12%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(var(--toket-blur-overlay, 12px));
  -webkit-backdrop-filter: blur(var(--toket-blur-overlay, 12px));
}

html.toket-app-shell:is([data-theme="dark"], .dark).site-unified-chrome body > header {
  background: color-mix(in srgb, #0b1020 90%, var(--dt-card-bg) 10%);
}

html.toket-app-shell[data-theme="light"].site-unified-chrome body > header {
  background: color-mix(in srgb, #f6f8fc 92%, #fff 8%);
}

/* 语言 / 主题开关（site-ui 注入） */
html.toket-app-shell .theme-switch button[data-theme].is-active,
html.toket-app-shell .lang-switch a.is-active {
  color: var(--toket-brand);
  border-color: color-mix(in srgb, var(--toket-brand) 35%, var(--line));
}

html.toket-app-shell .theme-switch button:hover,
html.toket-app-shell .lang-switch a:hover {
  border-color: color-mix(in srgb, var(--toket-brand) 28%, var(--line));
}

/* —— V1：玻璃卡 & 主按钮（不改 calculate 逻辑）—— */
html.toket-app-shell.page-cost-v1 .chat-shell,
html.toket-app-shell.page-cost-v1 .result-hero,
html.toket-app-shell.page-cost-v1 details.advanced {
  background: var(--toket-card-bg);
  border: var(--toket-card-border);
  box-shadow: var(--toket-card-shadow);
  border-radius: var(--toket-radius-panel, 16px);
  backdrop-filter: blur(var(--toket-blur-card-light));
  -webkit-backdrop-filter: blur(var(--toket-blur-card-light));
}

html.toket-app-shell:is([data-theme="dark"], .dark).page-cost-v1 .chat-shell,
html.toket-app-shell:is([data-theme="dark"], .dark).page-cost-v1 .result-hero,
html.toket-app-shell:is([data-theme="dark"], .dark).page-cost-v1 details.advanced {
  backdrop-filter: blur(var(--toket-blur-card-dark));
  -webkit-backdrop-filter: blur(var(--toket-blur-card-dark));
}

html.toket-app-shell.page-cost-v1 .btn-primary,
html.toket-app-shell.page-cost-v1 .btn.btn-primary,
html.toket-app-shell.page-cost-v1 #calcBtn.btn-primary {
  background: var(--toket-gradient-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--toket-btn-primary-shadow);
}

html.toket-app-shell.page-cost-v1 .btn-primary:hover:not(:disabled),
html.toket-app-shell.page-cost-v1 .btn.btn-primary:hover:not(:disabled) {
  background: var(--toket-gradient-primary-hover) !important;
  transform: translateY(var(--toket-translate-hover-btn));
  box-shadow: var(--toket-btn-primary-shadow-hover);
  opacity: 1;
}

html.toket-app-shell.page-cost-v1 .btn:not(.btn-primary) {
  background: color-mix(in srgb, var(--toket-btn-secondary-bg, var(--dt-card-bg)) 82%, transparent);
  border: 1px solid var(--toket-btn-secondary-border, var(--line));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.toket-app-shell.page-cost-v1 .btn:not(.btn-primary):hover:not(:disabled) {
  transform: translateY(var(--toket-translate-hover-secondary, -1px));
  border-color: color-mix(in srgb, var(--toket-brand) 30%, var(--line));
}

html.toket-app-shell.page-cost-v1 .hero h1 {
  font-weight: var(--toket-weight-bold, 700);
  letter-spacing: var(--toket-tracking-tight);
}

html.toket-app-shell.page-cost-v1 .hero-lead {
  color: var(--toket-text-muted, var(--text-sub));
  font-size: var(--toket-font-body-sm, 14px);
  line-height: var(--toket-leading-body);
}

/* —— V2：layout 别名对齐 toket —— */
html.toket-app-shell.page-cost-v2 {
  --v2-bg: var(--dt-page-bg);
  --v2-primary: var(--toket-brand);
  --v2-primary-hover: var(--toket-brand-hover);
}

html.toket-app-shell.page-cost-v2 .fold-block,
html.toket-app-shell.page-cost-v2 .v2-wf-card,
html.toket-app-shell.page-cost-v2 .pro-result-card,
html.toket-app-shell.page-cost-v2 .v2-adv-media-card,
html.toket-app-shell.page-cost-v2 .v2-pay-modal__card {
  background: var(--toket-card-bg);
  border: var(--toket-card-border);
  box-shadow: var(--toket-card-shadow);
  border-radius: var(--toket-radius-panel, 16px);
}

html.toket-app-shell.page-cost-v2 .btn.btn-accent.btn-main,
html.toket-app-shell.page-cost-v2 .btn-primary,
html.toket-app-shell.page-cost-v2 button.primary,
html.toket-app-shell.page-cost-v2 .v2-btn-primary,
html.toket-app-shell.page-cost-v2 .v2-profile-modal__btn--primary {
  background: var(--toket-gradient-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--toket-btn-primary-shadow);
}

html.toket-app-shell.page-cost-v2 .btn.btn-accent.btn-main:hover:not(:disabled),
html.toket-app-shell.page-cost-v2 .btn-primary:hover:not(:disabled),
html.toket-app-shell.page-cost-v2 button.primary:hover:not(:disabled),
html.toket-app-shell.page-cost-v2 .v2-btn-primary:hover:not(:disabled),
html.toket-app-shell.page-cost-v2 .v2-profile-modal__btn--primary:hover:not(:disabled) {
  background: var(--toket-gradient-primary-hover) !important;
  transform: translateY(var(--toket-translate-hover-btn));
  box-shadow: var(--toket-btn-primary-shadow-hover);
}

html.toket-app-shell.page-cost-v2 .btn-secondary,
html.toket-app-shell.page-cost-v2 .v2-btn-secondary {
  background: color-mix(in srgb, var(--toket-btn-secondary-bg) 78%, transparent);
  border: 1px solid var(--toket-btn-secondary-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* —— Toast / Loading（V2 等挂载 sy-* 的页面）—— */
[data-sy-toast-root] [role="alert"] {
  padding: 12px 16px;
  border-radius: var(--toket-radius-control, 14px);
  font-size: var(--toket-font-body-sm, 14px);
  line-height: var(--toket-leading-body);
  backdrop-filter: blur(var(--toket-blur-overlay, 12px));
  -webkit-backdrop-filter: blur(var(--toket-blur-overlay, 12px));
  box-shadow: var(--toket-card-shadow);
}

[data-sy-toast-root] [role="alert"].sy-toast--success {
  background: color-mix(in srgb, var(--dt-color-success) 12%, var(--toket-card-bg));
  border: 1px solid color-mix(in srgb, var(--dt-color-success) 45%, transparent);
  color: color-mix(in srgb, var(--dt-color-success) 75%, #fff);
}

[data-sy-toast-root] [role="alert"].sy-toast--info {
  background: color-mix(in srgb, var(--toket-brand) 14%, var(--toket-card-bg));
  border: 1px solid color-mix(in srgb, var(--toket-brand) 38%, transparent);
  color: var(--text-main, var(--toket-text));
}

[data-sy-toast-root] [role="alert"].sy-toast--error {
  background: color-mix(in srgb, var(--dt-color-danger) 12%, var(--toket-card-bg));
  border: 1px solid color-mix(in srgb, var(--dt-color-danger) 42%, transparent);
  color: color-mix(in srgb, var(--dt-color-danger) 80%, #fff);
}

[data-sy-loading] {
  background: var(--toket-overlay-bg) !important;
  backdrop-filter: blur(var(--toket-blur-overlay, 12px)) !important;
  -webkit-backdrop-filter: blur(var(--toket-blur-overlay, 12px)) !important;
}

[data-sy-loading] > div {
  background: var(--toket-card-bg) !important;
  border: var(--toket-card-border) !important;
  box-shadow: var(--toket-card-shadow) !important;
  border-radius: var(--toket-radius-control, 14px) !important;
}

[data-sy-loading] [aria-hidden="true"] {
  border-color: color-mix(in srgb, var(--toket-brand-2) 28%, transparent) !important;
  border-top-color: var(--toket-brand-2) !important;
}

[data-sy-loading] p {
  color: var(--toket-text-muted, var(--text-sub)) !important;
  font-size: var(--toket-font-body-sm, 14px) !important;
}

@media (min-width: 769px) {
  html.toket-app-shell.site-unified-chrome .nav-wrap {
    display: flex;
    align-items: center;
    width: 100%;
  }

  html.toket-app-shell.site-unified-chrome .nav-end {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    gap: 12px 16px;
  }

  html.toket-app-shell.site-unified-chrome .v2-nav-cluster,
  html.toket-app-shell.site-unified-chrome .site-header__cluster {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
  }

  html.toket-app-shell.site-unified-chrome .nav-links {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: center;
    margin-left: 0 !important;
    margin-right: auto !important;
    min-width: 0;
  }

  html.toket-app-shell.site-unified-chrome .site-header__actions,
  html.toket-app-shell.site-unified-chrome .site-header__guest {
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  html.toket-app-shell.site-unified-chrome .nav-wrap {
    padding-left: var(--toket-layout-shell-x-tight, 16px);
    padding-right: var(--toket-layout-shell-x-tight, 16px);
  }
}