/* ═══════════════════════════════════════════════════════════════
   餐饮 Banner 生成中心 — iOS 26 Liquid Glass UI Layer
   原绿色配色 × 苹果液态玻璃:折射高光 · 饱和模糊 · 浮层玻璃
   Layered on top of existing stylesheets. Visual-only refinement,
   no business-logic or layout-structure changes.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. Design Tokens(原绿色系 × iOS 26 液态玻璃) ─────────────── */
:root {
  /* 原配色:主绿 + 薄荷 + 暖橙点缀 */
  --apple-green: #0e9f76;
  --apple-green-2: #12b981;
  --apple-green-deep: #0a7a5b;
  --apple-mint-soft: rgba(18, 185, 129, 0.12);
  --apple-mint-softer: rgba(18, 185, 129, 0.07);
  --apple-orange: #f59e0b;
  --apple-orange-2: #f97316;
  --apple-red: #ef4444;
  /* 中性文本(保持可读) */
  --apple-bg: #eef5f2;
  --apple-surface: #ffffff;
  --apple-surface-2: rgba(255, 255, 255, 0.6);
  --apple-text: #10251d;
  --apple-text-2: #4f6159;
  --apple-text-3: #7b8b83;
  --apple-text-4: #a4b3ab;
  --apple-border: rgba(16, 60, 44, 0.08);
  --apple-border-2: rgba(16, 60, 44, 0.14);
  --apple-accent: #0e9f76;
  --apple-accent-hover: #12b981;
  --apple-accent-soft: rgba(18, 185, 129, 0.1);
  --apple-ink: #0e9f76;
  --apple-ink-hover: #0a7a5b;
  --apple-success: #10b981;
  --apple-danger: #ef4444;
  --apple-warning: #f59e0b;
  /* iOS 26 液态玻璃材质 */
  --apple-glass: rgba(255, 255, 255, 0.55);
  --apple-glass-strong: rgba(255, 255, 255, 0.72);
  --apple-glass-nav: rgba(255, 255, 255, 0.6);
  --apple-glass-border: rgba(255, 255, 255, 0.65);
  /* 玻璃高光(顶部镜面亮边 + 内描边) */
  --apple-spec: inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  --apple-spec-soft: inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  --apple-r-sm: 12px;
  --apple-r-md: 16px;
  --apple-r-lg: 20px;
  --apple-r-xl: 28px;
  --apple-r-pill: 980px;
  --apple-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --apple-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --apple-ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);
  /* 浮层阴影:带一点绿色环境色,玻璃更通透 */
  --apple-shadow-1: 0 1px 2px rgba(16, 60, 44, 0.05), 0 4px 14px rgba(16, 60, 44, 0.06);
  --apple-shadow-2: 0 6px 24px rgba(16, 60, 44, 0.08), 0 1px 4px rgba(16, 60, 44, 0.04);
  --apple-shadow-3: 0 16px 48px rgba(16, 60, 44, 0.12), 0 3px 10px rgba(16, 60, 44, 0.06);
  --apple-shadow-4: 0 28px 80px rgba(16, 60, 44, 0.16), 0 6px 20px rgba(16, 60, 44, 0.08);
  --apple-glow-green: 0 8px 24px rgba(14, 159, 118, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Segoe UI", Roboto, sans-serif;
}

/* Re-map legacy tokens so untouched rules also follow the new language. */
:root {
  --ui-page: var(--apple-bg);
  --ui-surface: var(--apple-surface);
  --ui-surface-subtle: var(--apple-surface-2);
  --ui-text: var(--apple-text);
  --ui-text-secondary: var(--apple-text-2);
  --ui-text-muted: var(--apple-text-3);
  --ui-border: var(--apple-border);
  --ui-border-strong: var(--apple-border-2);
  --ui-primary: var(--apple-ink);
  --ui-primary-hover: var(--apple-ink-hover);
  --ui-primary-soft: var(--apple-mint-soft);
  --ui-danger: var(--apple-danger);
  --ui-warning: var(--apple-warning);
  --ui-radius-sm: var(--apple-r-sm);
  --ui-radius-md: var(--apple-r-md);
  --ui-radius-lg: var(--apple-r-lg);
  --ui-shadow-sm: var(--apple-shadow-1);
  --ui-shadow-md: var(--apple-shadow-2);
  --v3-bg-page: var(--apple-bg);
  --v3-bg-page-soft: var(--apple-bg);
  --v3-bg-surface: var(--apple-surface);
  --v3-bg-glass: var(--apple-glass);
  --v3-bg-glass-strong: var(--apple-glass-strong);
  --v3-border-glass: var(--apple-glass-border);
  --v3-border-soft: var(--apple-border);
  --v3-text: var(--apple-text);
  --v3-text-secondary: var(--apple-text-2);
  --v3-text-muted: var(--apple-text-3);
  --v3-primary: var(--apple-green);
  --v3-primary-2: var(--apple-green-2);
  --v3-primary-soft: var(--apple-mint-soft);
  --v3-danger: var(--apple-danger);
  --v3-warning: var(--apple-warning);
  --v3-radius-xl: var(--apple-r-xl);
  --v3-radius-lg: var(--apple-r-lg);
  --v3-radius-md: var(--apple-r-md);
  --v3-shadow-soft: var(--apple-shadow-3);
  --v3-shadow-card: var(--apple-shadow-2);
  --v3-shadow-button: 0 8px 20px rgba(14, 159, 118, 0.28);
  --v3-ref-bg: var(--apple-bg);
  --v3-ref-mint: var(--apple-green);
  --v3-ref-mint-2: var(--apple-green-2);
  --v3-ref-mint-soft: var(--apple-mint-soft);
  --v3-ref-text: var(--apple-text);
  --v3-ref-muted: var(--apple-text-2);
  --v3-ref-card: var(--apple-glass-strong);
  --v3-ref-border: var(--apple-glass-border);
  --v3-ref-shadow: var(--apple-shadow-2);
  --primary: #0e9f76;
  --primary-light: #12b981;
  --primary-dark: #0a7a5b;
  --primary-glow: rgba(14, 159, 118, 0.3);
  --secondary: #4f6159;
  --secondary-light: #7b8b83;
  --secondary-glow: rgba(14, 159, 118, 0.12);
  --gen-primary: #0e9f76;
  --gen-primary-2: #12b981;
  --gen-mint: #65d8c5;
  --gen-mint-soft: var(--apple-mint-soft);
  --gen-text: var(--apple-text);
  --gen-sub: var(--apple-text-2);
  --gen-muted: var(--apple-text-3);
  --gen-success: var(--apple-success);
}

/* ── 1. Base ──────────────────────────────────────────────────── */
html {
  background: var(--apple-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  /* iOS 26 玻璃需要底色层次来折射:薄荷光晕 + 浅灰绿底 */
  background:
    radial-gradient(circle at 12% -6%, rgba(18, 185, 129, 0.14), transparent 34%),
    radial-gradient(circle at 92% 2%, rgba(101, 216, 197, 0.16), transparent 36%),
    radial-gradient(circle at 50% 110%, rgba(18, 185, 129, 0.08), transparent 42%),
    linear-gradient(180deg, #f4faf7 0%, var(--apple-bg) 46%, #e9f3ee 100%) !important;
  background-attachment: fixed;
  color: var(--apple-text) !important;
  font-family: var(--apple-font) !important;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 保留原站 body::before / .bg-pattern 的色彩,但收敛到不抢戏 */
body::before {
  opacity: 0.5 !important;
}
.bg-pattern {
  opacity: 0.35 !important;
}

body, input, textarea, select, button {
  font-family: var(--apple-font) !important;
}

::selection {
  background: rgba(18, 185, 129, 0.2);
  color: var(--apple-text);
}

/* Quiet, Apple-like scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

img { -webkit-user-drag: none; }

a { color: var(--apple-accent); text-decoration: none; transition: color 200ms var(--apple-ease), opacity 200ms var(--apple-ease); }
a:hover { color: var(--apple-accent-hover); }

/* ── 2. Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, .page-title, .v3-replica-head h2, .quickgen-showcase-title {
  color: var(--apple-text);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.18;
}

.v3-replica-hero h1 {
  font-size: clamp(30px, 5.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--apple-text);
}
.v3-replica-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--apple-green-deep) 0%, var(--apple-green) 45%, var(--apple-green-2) 80%, #65d8c5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-subtitle, .muted, .help-text, .v3-progress-steps, .card p {
  color: var(--apple-text-3);
}

/* ── 3. Surfaces & Cards — iOS 26 液态玻璃 ────────────────────── */
body.ui-system :where(
  .card, .home-card, .case-card, .template-card, .task-card, .work-card,
  .form-card, .quota-card, .stats-card, .result-card, .panel-card,
  .option-card, .select-card, .quick-card, .feature-card, .info-card,
  .page-section, .result-container, .workspace-card, .detail-card,
  .v3-replica-section, .v3-progress-card, .v3-recent-card, .v3-replica-hero,
  .modal-content, .detail-modal, .detail-content, .quickgen-showcase
) {
  /* 折射渐变玻璃:顶部受光、底部略暗 */
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.52) 52%, rgba(248, 253, 251, 0.44) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  border: 1px solid var(--apple-glass-border) !important;
  border-radius: var(--apple-r-lg) !important;
  box-shadow: var(--apple-spec), var(--apple-shadow-1) !important;
  transition: transform 320ms var(--apple-ease), box-shadow 320ms var(--apple-ease),
    border-color 320ms var(--apple-ease), background 320ms var(--apple-ease);
}

/* Gentle lift on interactive cards(悬停时玻璃更亮) */
body.ui-system :where(.case-card, .template-card, .work-card, .quick-card,
  .feature-card, .option-card, .select-card, .v3-recent-item):hover {
  transform: translateY(-3px);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.62) 52%, rgba(248, 253, 251, 0.54) 100%) !important;
  box-shadow: var(--apple-spec), var(--apple-shadow-3) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
}
body.ui-system :where(.case-card, .template-card, .work-card, .quick-card,
  .feature-card, .option-card, .select-card, .v3-recent-item):active {
  transform: translateY(-1px) scale(0.995);
}

/* Images inside cards get soft corners + graceful fade-in */
.case-card img, .template-card img, .work-card img, .v3-recent-item img,
.result-card img, .card img {
  border-radius: var(--apple-r-sm);
  transition: opacity 480ms var(--apple-ease), transform 560ms var(--apple-ease);
}
.case-card:hover img, .template-card:hover img, .work-card:hover img,
.v3-recent-item:hover img {
  transform: scale(1.025);
}

/* ── 4. Buttons ───────────────────────────────────────────────── */
body.ui-system :where(button, .btn, [role="button"], .action-btn,
  .generate-btn, .quota-btn, .primary-btn, .secondary-btn, .ghost-btn,
  .quickgen-case-btn, .v3-quota-recharge-btn, .store-modal-btn) {
  font-family: var(--apple-font) !important;
  font-weight: 600;
  letter-spacing: -0.008em;
  border-radius: var(--apple-r-pill) !important;
  transition: transform 240ms var(--apple-ease), box-shadow 240ms var(--apple-ease),
    background-color 240ms var(--apple-ease), color 240ms var(--apple-ease),
    border-color 240ms var(--apple-ease), opacity 240ms var(--apple-ease) !important;
  will-change: transform;
}

/* Primary = 绿色玻璃胶囊(iOS 26 光泽按钮) */
body.ui-system :where(.btn-primary, .primary-btn, .generate-btn, .quota-btn,
  .quickgen-case-btn:not(.secondary), .v3-quota-recharge-btn, button[type="submit"]) {
  background: linear-gradient(180deg, rgba(24, 196, 145, 0.96) 0%, rgba(14, 159, 118, 0.98) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(10, 122, 91, 0.5) !important;
  box-shadow: var(--apple-glow-green) !important;
  text-shadow: 0 1px 1px rgba(10, 90, 68, 0.25);
}
body.ui-system :where(.btn-primary, .primary-btn, .generate-btn, .quota-btn,
  .quickgen-case-btn:not(.secondary), .v3-quota-recharge-btn, button[type="submit"]):not(:disabled):hover {
  background: linear-gradient(180deg, rgba(30, 208, 156, 1) 0%, rgba(16, 172, 128, 1) 100%) !important;
  border-color: rgba(10, 122, 91, 0.6) !important;
  box-shadow: 0 12px 32px rgba(14, 159, 118, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-1px);
}
body.ui-system :where(.btn-primary, .primary-btn, .generate-btn, .quota-btn,
  .quickgen-case-btn:not(.secondary), button[type="submit"]):not(:disabled):active {
  transform: scale(0.97);
  box-shadow: 0 4px 14px rgba(14, 159, 118, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
body.ui-system :where(.btn-primary, .primary-btn, .generate-btn, .quota-btn,
  .quickgen-case-btn, button[type="submit"]):disabled {
  background: rgba(16, 60, 44, 0.1) !important;
  color: var(--apple-text-4) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none;
  cursor: not-allowed;
}

/* Secondary = 磨砂玻璃胶囊 */
body.ui-system :where(.btn-secondary, .secondary-btn, .ghost-btn,
  .quickgen-case-btn.secondary, .btn) {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  color: var(--apple-text) !important;
  border: 1px solid var(--apple-glass-border) !important;
  box-shadow: var(--apple-spec-soft), var(--apple-shadow-1) !important;
}
body.ui-system :where(.btn-secondary, .secondary-btn, .ghost-btn,
  .quickgen-case-btn.secondary, .btn):not(:disabled):hover {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: var(--apple-spec-soft), var(--apple-shadow-2) !important;
  transform: translateY(-1px);
}
body.ui-system :where(.btn-secondary, .secondary-btn, .ghost-btn, .btn):not(:disabled):active {
  transform: scale(0.97);
}

/* Danger */
body.ui-system :where(.btn-danger, .danger-btn, [data-danger]) {
  background: var(--apple-danger) !important;
  border-color: var(--apple-danger) !important;
  color: #fff !important;
}

/* Focus ring — consistent, accessible */
body.ui-system :where(button, .btn, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--apple-accent) !important;
  outline-offset: 2px !important;
  border-radius: var(--apple-r-sm);
}
body.ui-system :where(button, .btn):focus-visible { border-radius: var(--apple-r-pill); }

/* ── 5. Forms ─────────────────────────────────────────────────── */
body.ui-system :where(input, textarea, select, .input, .form-input,
  .form-select, .form-textarea, .search-input) {
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-border-2) !important;
  border-radius: var(--apple-r-sm) !important;
  color: var(--apple-text) !important;
  font-size: 15px;
  transition: border-color 220ms var(--apple-ease), box-shadow 220ms var(--apple-ease),
    background-color 220ms var(--apple-ease) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
body.ui-system :where(input, textarea, select):hover {
  border-color: rgba(0, 0, 0, 0.18) !important;
}
body.ui-system :where(input, textarea, select):focus {
  border-color: var(--apple-accent) !important;
  box-shadow: 0 0 0 4px var(--apple-accent-soft) !important;
  outline: none !important;
}
body.ui-system :where(input, textarea)::placeholder { color: var(--apple-text-4); }

label, .form-label, .form-group label {
  color: var(--apple-text-2);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.006em;
}

/* Chat input (quick-generate) */
.quickgen-workspace .chat-input-wrapper {
  border: 1px solid var(--apple-glass-border) !important;
  border-radius: var(--apple-r-xl) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  box-shadow: var(--apple-spec-soft), var(--apple-shadow-2) !important;
  transition: border-color 220ms var(--apple-ease), box-shadow 220ms var(--apple-ease) !important;
}
.quickgen-workspace .chat-input-wrapper:focus-within {
  border-color: var(--apple-accent) !important;
  box-shadow: 0 0 0 4px var(--apple-accent-soft), var(--apple-shadow-2) !important;
}
.quickgen-workspace .btn-send {
  border-radius: var(--apple-r-pill) !important;
  background: var(--apple-ink) !important;
  transition: transform 200ms var(--apple-ease), background 200ms var(--apple-ease) !important;
}
.quickgen-workspace .btn-send:not(:disabled):hover { background: var(--apple-ink-hover) !important; transform: scale(1.05); }
.quickgen-workspace .btn-send:not(:disabled):active { transform: scale(0.94); }
.quickgen-workspace .btn-send:disabled { background: rgba(0,0,0,0.08) !important; color: var(--apple-text-4) !important; }
.quickgen-workspace .btn-upload { border-radius: var(--apple-r-pill) !important; background: rgba(0,0,0,0.04) !important; transition: background 200ms var(--apple-ease), transform 200ms var(--apple-ease) !important; }
.quickgen-workspace .btn-upload:hover { background: rgba(0,0,0,0.07) !important; }

/* ── 6. Navigation — desktop sidebar ─────────────────────────── */
.sidebar, .v3-desktop-sidebar {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.7) 0%, rgba(240, 250, 246, 0.52) 100%) !important;
  -webkit-backdrop-filter: saturate(190%) blur(24px) !important;
  backdrop-filter: saturate(190%) blur(24px) !important;
  border-right: 1px solid var(--apple-glass-border) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .v3-desktop-sidebar { background: rgba(255, 255, 255, 0.97) !important; }
}

.sidebar-logo-text { color: var(--apple-text); font-weight: 800; letter-spacing: -0.02em; }
.sidebar-logo-text small { color: var(--apple-text-3); font-weight: 600; letter-spacing: 0; }
.sidebar-logo-icon, .v3-icon-mark {
  background: linear-gradient(150deg, var(--apple-green-2) 0%, var(--apple-green) 100%) !important;
  color: #fff !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 16px rgba(14, 159, 118, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.sidebar-item {
  color: var(--apple-text-2) !important;
  border-radius: var(--apple-r-sm) !important;
  font-weight: 500;
  transition: background 200ms var(--apple-ease), color 200ms var(--apple-ease),
    transform 200ms var(--apple-ease) !important;
}
.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: var(--apple-text) !important;
  transform: none !important;
}
.sidebar-item.active {
  background: linear-gradient(150deg, rgba(24, 196, 145, 0.95) 0%, rgba(14, 159, 118, 0.98) 100%) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(14, 159, 118, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sidebar-item.active span, .sidebar-item.active .v3-nav-svg,
.sidebar-item.active .icon, .sidebar-item.active svg {
  color: #fff !important;
  fill: none;
}
.sidebar-item.active .v3-nav-svg svg { stroke-width: 2; }

/* ── 7. Top headers / tabs — frosted glass ───────────────────── */
body.ui-system :where(.top-header, .main-nav, .mobile-header, .header,
  .quickgen-header, .topbar) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 253, 251, 0.55) 100%) !important;
  -webkit-backdrop-filter: saturate(190%) blur(22px) !important;
  backdrop-filter: saturate(190%) blur(22px) !important;
  border-bottom: 1px solid var(--apple-glass-border) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.ui-system :where(.top-header, .main-nav, .mobile-header, .header,
    .quickgen-header, .topbar) { background: rgba(255, 255, 255, 0.97) !important; }
}

.header-tab, .quickgen-header nav a, .topbar .btn {
  color: var(--apple-text-2) !important;
  border-radius: var(--apple-r-pill) !important;
  font-weight: 500;
  transition: background 200ms var(--apple-ease), color 200ms var(--apple-ease) !important;
}
.header-tab:hover, .quickgen-header nav a:hover { background: rgba(255, 255, 255, 0.55) !important; color: var(--apple-text) !important; }
.header-tab.active, .quickgen-header nav a.active {
  background: linear-gradient(150deg, rgba(24, 196, 145, 0.95) 0%, rgba(14, 159, 118, 0.98) 100%) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(14, 159, 118, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.header-tab.active span, .header-tab.active svg, .quickgen-header nav a.active span,
.quickgen-header nav a.active svg { color: #fff !important; }

.header-logo-mark, .brand-mark {
  background: linear-gradient(150deg, var(--apple-green-2) 0%, var(--apple-green) 100%) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(14, 159, 118, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* ── 8. Mobile bottom navigation — floating frosted bar ──────── */
.mobile-nav, .v3-mobile-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(250, 253, 252, 0.66) 100%) !important;
  -webkit-backdrop-filter: saturate(200%) blur(26px) !important;
  backdrop-filter: saturate(200%) blur(26px) !important;
  border-top: 1px solid var(--apple-glass-border) !important;
  box-shadow: 0 -6px 28px rgba(16, 60, 44, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-nav, .v3-mobile-nav { background: rgba(255, 255, 255, 0.98) !important; }
}
.mobile-nav-item {
  color: var(--apple-text-3) !important;
  border-radius: var(--apple-r-sm);
  transition: color 200ms var(--apple-ease), transform 200ms var(--apple-ease) !important;
}
.mobile-nav-item:active { transform: scale(0.92); }
.mobile-nav-item.active { color: var(--apple-green) !important; font-weight: 600; }
.mobile-nav-item.active span, .mobile-nav-item.active .v3-nav-svg { color: var(--apple-green) !important; }
.mobile-nav-item.active .v3-nav-svg { transform: translateY(-1px); }

/* 填充真实图标后,隐藏空心占位框 */
.mobile-nav-item .icon.apple-icon-filled::before { display: none !important; }
.mobile-nav-item .icon.apple-icon-filled { width: auto !important; height: auto !important; color: inherit !important; }
.mobile-nav-item .icon.apple-icon-filled svg { display: block; }
.mobile-nav-item .v3-nav-svg { transition: transform 240ms var(--apple-ease); }

/* Mobile header brand */
.v3-mobile-brand, .mobile-header-logo { color: var(--apple-text); font-weight: 800; letter-spacing: -0.02em; }

/* ── 9. Progress & generation feedback ───────────────────────── */
/* Thin, elegant track */
.v3-progress-line, .tcr-scheme-bar, .tcr-combo-bar, .progress-bar,
[class*="progress-track"], [class*="progress-line"] {
  background: rgba(0, 0, 0, 0.07) !important;
  border-radius: var(--apple-r-pill) !important;
  overflow: hidden;
}

/* Silky fill with soft motion + subtle sheen sweep */
.v3-progress-line > span, #home-progress-fill,
.tcr-scheme-fill, .tcr-combo-fill,
.progress-fill, [class*="progress-fill"] {
  background: linear-gradient(90deg, var(--apple-green-deep) 0%, var(--apple-green) 60%, var(--apple-green-2) 100%) !important;
  border-radius: var(--apple-r-pill) !important;
  box-shadow: 0 0 12px rgba(14, 159, 118, 0.3) !important;
  transition: width 600ms var(--apple-ease) !important;
  position: relative;
  overflow: hidden;
}
.v3-progress-line > span::after, #home-progress-fill::after,
.tcr-scheme-fill::after, .tcr-combo-fill::after, .progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
  transform: translateX(-120%);
  -webkit-animation: apple-sheen 2.2s var(--apple-ease) infinite;
  animation: apple-sheen 2.2s var(--apple-ease) infinite;
  opacity: 1 !important;
}
@-webkit-keyframes apple-sheen { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes apple-sheen { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }

/* Step pills — quiet by default, ink when active/done */
.v3-progress-steps span {
  color: var(--apple-text-4);
  font-weight: 500;
  transition: color 300ms var(--apple-ease), transform 300ms var(--apple-ease);
}
.v3-progress-steps span.active { color: var(--apple-text); font-weight: 700; }
.v3-progress-steps span.done { color: var(--apple-text-3); }

.v3-progress-percent, .tcr-scheme-pct, .tcr-combo-pct {
  color: var(--apple-text) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Progress cards = floating white panels */
.generation-stage, .generation-status-card, .progress-box.compact-progress,
.trio-compact-wrap, .v3-progress-card {
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-border) !important;
  border-radius: var(--apple-r-lg) !important;
  box-shadow: var(--apple-shadow-2) !important;
}

.tcr-head, .tcr-footer { background: rgba(255, 255, 255, 0.5) !important; border-color: var(--apple-border) !important; color: var(--apple-text-2) !important; }
.tcr-head-title { color: var(--apple-text) !important; font-weight: 700; }
.tcr-head-icon { background: linear-gradient(150deg, var(--apple-green-2), var(--apple-green)) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(14, 159, 118, 0.3) !important; }
.tcr-head-stats strong { color: var(--apple-green) !important; }
.tcr-scheme { border: 1px solid var(--apple-glass-border) !important; border-radius: var(--apple-r-md) !important; background: rgba(255, 255, 255, 0.5) !important; transition: border-color 300ms var(--apple-ease), background 300ms var(--apple-ease), box-shadow 300ms var(--apple-ease); }
.tcr-scheme[data-state="running"] { border-color: rgba(14, 159, 118, 0.4) !important; background: rgba(18, 185, 129, 0.08) !important; box-shadow: 0 0 0 4px rgba(18, 185, 129, 0.08); }
.tcr-scheme[data-state="done"] { border-color: rgba(16, 185, 129, 0.35) !important; background: rgba(16, 185, 129, 0.07) !important; }
.tcr-scheme[data-state="failed"] { border-color: rgba(239, 68, 68, 0.3) !important; background: rgba(239, 68, 68, 0.05) !important; }
.tcr-scheme-badge, .tcr-combo-tag { background: var(--apple-mint-soft) !important; border-color: transparent !important; color: var(--apple-green) !important; border-radius: var(--apple-r-pill) !important; }
.tcr-scheme-badge::before { background: var(--apple-green) !important; }
.tcr-step-node { background: rgba(16, 60, 44, 0.06) !important; border-color: var(--apple-border-2) !important; transition: background 300ms var(--apple-ease), border-color 300ms var(--apple-ease), transform 300ms var(--apple-ease) !important; }
.tcr-step-node.active, .tcr-combo .tcr-step-node.active { background: var(--apple-green) !important; border-color: var(--apple-green) !important; -webkit-animation: apple-pulse 1.6s var(--apple-ease) infinite; animation: apple-pulse 1.6s var(--apple-ease) infinite; }
.tcr-step-node.done, .tcr-combo .tcr-step-node.done { background: var(--apple-green) !important; border-color: var(--apple-green) !important; }
.tcr-step-line { background: rgba(16, 60, 44, 0.1) !important; }
.tcr-step-line.done, .tcr-combo .tcr-step-line.done { background: rgba(14, 159, 118, 0.4) !important; }
.tcr-step-label { color: var(--apple-text-3) !important; }
.tcr-footer-dot { background: var(--apple-green) !important; -webkit-animation: apple-pulse 1.4s var(--apple-ease) infinite; animation: apple-pulse 1.4s var(--apple-ease) infinite; }

@-webkit-keyframes apple-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 159, 118, 0.35); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(14, 159, 118, 0); }
}
@keyframes apple-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 159, 118, 0.35); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(14, 159, 118, 0); }
}

/* Active generation card gently breathes so the page feels alive */
.generation-stage.is-running, .generation-status-card.is-running,
.trio-compact-wrap.is-running {
  -webkit-animation: apple-breathe 2.6s var(--apple-ease) infinite;
  animation: apple-breathe 2.6s var(--apple-ease) infinite;
}
@-webkit-keyframes apple-breathe {
  0%, 100% { box-shadow: var(--apple-shadow-2); }
  50% { box-shadow: 0 10px 34px rgba(14, 159, 118, 0.16), 0 2px 8px rgba(16, 60, 44, 0.06); }
}
@keyframes apple-breathe {
  0%, 100% { box-shadow: var(--apple-shadow-2); }
  50% { box-shadow: 0 10px 34px rgba(14, 159, 118, 0.16), 0 2px 8px rgba(16, 60, 44, 0.06); }
}

/* Skeleton shimmer — premium gray sweep */
.is-loading, .skeleton, [class*="skeleton"] {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.045) !important;
  border-radius: var(--apple-r-sm);
}
.is-loading::after, .skeleton::after, [class*="skeleton"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.7) 50%, transparent 75%);
  transform: translateX(-100%);
  -webkit-animation: apple-sheen 1.6s var(--apple-ease) infinite;
  animation: apple-sheen 1.6s var(--apple-ease) infinite;
}

/* Spinners → refined ring */
.loading-spinner, .spinner, [class*="spinner"]:not([class*="spinner-border"]) {
  border-color: rgba(0, 0, 0, 0.1) !important;
  border-top-color: var(--apple-ink) !important;
  border-radius: 50%;
  -webkit-animation: apple-spin 0.8s linear infinite;
  animation: apple-spin 0.8s linear infinite;
}
@-webkit-keyframes apple-spin { to { transform: rotate(360deg); } }
@keyframes apple-spin { to { transform: rotate(360deg); } }

/* ── 10. Modals & dialogs ─────────────────────────────────────── */
.modal-overlay, .modal-mask, [class*="modal-overlay"], [class*="modal-mask"] {
  background: rgba(0, 0, 0, 0.36) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-animation: apple-fade 280ms var(--apple-ease);
  animation: apple-fade 280ms var(--apple-ease);
}
.modal-content, .modal .modal-body, .detail-modal, .detail-content {
  border-radius: var(--apple-r-xl) !important;
  border: 1px solid var(--apple-border) !important;
  box-shadow: var(--apple-shadow-4) !important;
  -webkit-animation: apple-pop 360ms var(--apple-ease-out);
  animation: apple-pop 360ms var(--apple-ease-out);
}
@-webkit-keyframes apple-fade { from { opacity: 0; } }
@keyframes apple-fade { from { opacity: 0; } }
@-webkit-keyframes apple-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes apple-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 11. Login page — calm, centered, premium ────────────────── */
/* 页面级背景保留绿色环境光,让玻璃材质有可折射的底色 */
body.v3-home-page, body.v3-standard-page, body.v3-onclick-page,
body.v3-cases-page, body.v3-pro-page, body.v3-tasks-page, body.v3-login-page {
  background:
    radial-gradient(circle at 12% -6%, rgba(18, 185, 129, 0.14), transparent 34%),
    radial-gradient(circle at 92% 2%, rgba(101, 216, 197, 0.16), transparent 36%),
    linear-gradient(180deg, #f4faf7 0%, var(--apple-bg) 52%, #e9f3ee 100%) !important;
}

.v3-login-page {
  background:
    radial-gradient(circle at 18% 12%, rgba(18, 185, 129, 0.16), transparent 36%),
    radial-gradient(circle at 88% 84%, rgba(101, 216, 197, 0.16), transparent 38%),
    linear-gradient(180deg, #f4faf7 0%, var(--apple-bg) 52%, #e9f3ee 100%) !important;
  min-height: 100dvh;
}
.v3-login-page .login-container,
.login-container {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.56) 58%, rgba(248, 253, 251, 0.46) 100%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid var(--apple-glass-border) !important;
  border-radius: var(--apple-r-xl) !important;
  box-shadow: var(--apple-spec), var(--apple-shadow-3) !important;
  -webkit-animation: apple-rise 560ms var(--apple-ease-out);
  animation: apple-rise 560ms var(--apple-ease-out);
}
.v3-login-page .bg-pattern { opacity: 0.2 !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v3-login-page .login-container,
  .login-container { background: rgba(255, 255, 255, 0.96) !important; }
}
@-webkit-keyframes apple-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes apple-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.v3-login-page .logo {
  color: var(--apple-text);
  font-weight: 800;
  letter-spacing: -0.024em;
}
.tab-bar {
  background: rgba(0, 0, 0, 0.045) !important;
  border-radius: var(--apple-r-pill) !important;
  padding: 3px !important;
  border: none !important;
}
.tab-btn {
  border-radius: var(--apple-r-pill) !important;
  color: var(--apple-text-2) !important;
  font-weight: 600 !important;
  transition: background 240ms var(--apple-ease), color 240ms var(--apple-ease),
    box-shadow 240ms var(--apple-ease) !important;
}
.tab-btn.active {
  background: var(--apple-surface) !important;
  color: var(--apple-text) !important;
  box-shadow: var(--apple-shadow-1) !important;
}
.message {
  border-radius: var(--apple-r-sm) !important;
  font-weight: 500;
}
.btn-admin-link { color: var(--apple-text-3) !important; transition: color 200ms var(--apple-ease); }
.btn-admin-link:hover { color: var(--apple-text) !important; }

/* ── 12. Home page specifics ─────────────────────────────────── */
.v3-replica-hero {
  overflow: hidden;
  position: relative;
}
.v3-replica-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -12%;
  width: 46%;
  height: 190%;
  background: radial-gradient(closest-side, rgba(18, 185, 129, 0.1), transparent);
  pointer-events: none;
}
.v3-start-section .quick-card,
.v3-replica-section .feature-card {
  border-radius: var(--apple-r-lg) !important;
}

/* Quota / stats emphasis */
.quota-card, .stats-card, .v3-quota-card {
  background: var(--apple-surface) !important;
}
.quota-label { color: var(--apple-text-3) !important; }
.quota-value, .stats-value { color: var(--apple-text); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ── 13. Announcement bar — slimmer, calmer ──────────────────── */
#announcementBar > div {
  border-radius: var(--apple-r-pill) !important;
  box-shadow: var(--apple-shadow-2);
  font-weight: 500;
  letter-spacing: -0.006em;
}

/* ── 14. Chat messages (quick-generate) ──────────────────────── */
.quickgen-workspace { background: var(--apple-bg) !important; }
.quickgen-workspace .chat-container {
  background: var(--apple-bg) !important;
  border-inline: none !important;
}
.quickgen-workspace .msg {
  border-radius: var(--apple-r-lg) !important;
  box-shadow: var(--apple-shadow-1) !important;
  -webkit-animation: apple-msg-in 340ms var(--apple-ease-out);
  animation: apple-msg-in 340ms var(--apple-ease-out);
}
@-webkit-keyframes apple-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes apple-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.quickgen-workspace .msg.ai { background: var(--apple-surface) !important; border: 1px solid var(--apple-border) !important; }
.quickgen-workspace .msg.user { background: var(--apple-ink) !important; color: #fff !important; }
.quickgen-workspace .msg.sys, .quickgen-workspace .msg.err { background: var(--apple-surface) !important; }
.quickgen-workspace .msg.err { border-color: rgba(239, 68, 68, 0.3) !important; color: var(--apple-danger) !important; }
.quickgen-workspace .chat-input-area { background: var(--apple-glass) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--apple-border) !important; }
.quickgen-workspace .quickgen-orbit { background: rgba(0, 0, 0, 0.03) !important; border-radius: var(--apple-r-md) !important; }
.quickgen-workspace .orbit-card { border-radius: var(--apple-r-sm) !important; box-shadow: var(--apple-shadow-2) !important; }

/* ── 15. Tables & lists ──────────────────────────────────────── */
body.ui-system table { border-collapse: separate; border-spacing: 0; }
body.ui-system th {
  color: var(--apple-text-3);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--apple-border-2) !important;
}
body.ui-system td { border-bottom: 1px solid var(--apple-border) !important; }
body.ui-system tr { transition: background 180ms var(--apple-ease); }
body.ui-system tbody tr:hover { background: rgba(0, 0, 0, 0.02); }

/* ── 16. Badges, tags, chips ─────────────────────────────────── */
[class*="badge"], [class*="tag"], .chip {
  border-radius: var(--apple-r-pill) !important;
  font-weight: 600;
  letter-spacing: -0.004em;
}

/* ── 17. Motion system — entrance & reveal ───────────────────── */
.apple-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms var(--apple-ease-out), transform 640ms var(--apple-ease-out);
  will-change: opacity, transform;
}
.apple-reveal.apple-in {
  opacity: 1;
  transform: translateY(0);
}

/* Page fade-in on load */
body.apple-boot .app-layout, body.apple-boot .quickgen-workspace,
body.apple-boot .login-container, body.apple-boot .layout {
  -webkit-animation: apple-page-in 480ms var(--apple-ease-out);
  animation: apple-page-in 480ms var(--apple-ease-out);
}
@-webkit-keyframes apple-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes apple-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Button ripple */
.apple-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.18;
  transform: scale(0);
  -webkit-animation: apple-ripple 560ms var(--apple-ease-out) forwards;
  animation: apple-ripple 560ms var(--apple-ease-out) forwards;
  pointer-events: none;
}
@-webkit-keyframes apple-ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes apple-ripple { to { transform: scale(2.6); opacity: 0; } }

/* Success check draw (used by apple-motion.js) */
.apple-check-svg { display: block; margin: 0 auto; }
.apple-check-circle {
  stroke: var(--apple-success);
  stroke-width: 2.4;
  fill: none;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  -webkit-animation: apple-draw 560ms var(--apple-ease-out) forwards;
  animation: apple-draw 560ms var(--apple-ease-out) forwards;
}
.apple-check-mark {
  stroke: var(--apple-success);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  -webkit-animation: apple-draw 380ms 420ms var(--apple-ease-out) forwards;
  animation: apple-draw 380ms 420ms var(--apple-ease-out) forwards;
}
@-webkit-keyframes apple-draw { to { stroke-dashoffset: 0; } }
@keyframes apple-draw { to { stroke-dashoffset: 0; } }

/* ── 18. Toast (apple-motion.js feedback) ────────────────────── */
.apple-toast-wrap {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.apple-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(88vw, 420px);
  padding: 10px 18px;
  border-radius: var(--apple-r-pill);
  background: rgba(29, 29, 31, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: var(--apple-shadow-3);
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
  transition: opacity 320ms var(--apple-ease), transform 320ms var(--apple-ease);
}
.apple-toast.apple-in { opacity: 1; transform: translateY(0) scale(1); }
.apple-toast.apple-success { background: rgba(38, 166, 91, 0.94); }
.apple-toast.apple-error { background: rgba(216, 54, 45, 0.94); }

/* ── 19. Mobile refinements ──────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --apple-r-lg: 18px;
    --apple-r-xl: 24px;
  }

  /* Full-bleed, airy sections */
  .content-area, .v3-home-shell, .page-content, .home-content {
    padding-inline: max(16px, env(safe-area-inset-left)) !important;
  }

  /* Larger touch targets */
  body.ui-system :where(button, .btn, [role="button"], .mobile-nav-item) {
    min-height: 44px;
  }

  /* Hero scales gracefully */
  .v3-replica-hero h1 { font-size: clamp(28px, 8.4vw, 38px); }

  /* Cards use softer shadows on small screens */
  body.ui-system :where(.card, .case-card, .template-card, .task-card,
    .work-card, .v3-replica-section, .v3-progress-card, .v3-recent-card) {
    box-shadow: var(--apple-shadow-1) !important;
  }

  /* Sticky bottom CTA bars float above home indicator */
  .action-bar, [class*="bottom-bar"], [class*="footer-actions"] {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Inputs stay 16px to prevent iOS zoom */
  body.ui-system :where(input, textarea, select) { font-size: 16px !important; }

  /* Modal becomes bottom sheet on phones */
  .modal-content, .detail-modal {
    border-radius: var(--apple-r-xl) var(--apple-r-xl) 0 0 !important;
  }
}

@media (max-width: 380px) {
  .v3-replica-hero h1 { font-size: 26px; }
}

/* ── 20. Reduced motion — respect user preference ────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .apple-reveal { opacity: 1 !important; transform: none !important; }
}

/* ── 21. Dark scroll container accents (gallery strips) ──────── */
.v3-recent-card ::-webkit-scrollbar,
.case-gallery ::-webkit-scrollbar { height: 6px; }

/* ── 22. Selection of key focus elements keeps pill shape ────── */
.sidebar-item:focus-visible, .mobile-nav-item:focus-visible,
.header-tab:focus-visible { border-radius: var(--apple-r-sm) !important; }

/* ── 23. Home hero polish ────────────────────────────────────── */
.v3-eyebrow {
  color: var(--apple-green) !important;
  background: rgba(18, 185, 129, 0.1) !important;
  border: 1px solid rgba(14, 159, 118, 0.16) !important;
  font-weight: 700;
  letter-spacing: -0.006em;
}
.v3-eyebrow span { background: var(--apple-green-2) !important; box-shadow: 0 0 0 5px rgba(18, 185, 129, 0.14) !important; }

/* Hero 作用域覆盖(与原 .v3-replica-hero 选择器同级,靠后取胜) */
.v3-replica-hero {
  background:
    radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.9), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(101, 216, 197, 0.3), transparent 44%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 252, 247, 0.72) 55%, rgba(221, 248, 239, 0.6) 100%) !important;
}
.v3-replica-hero::after {
  background:
    radial-gradient(circle at 60% 45%, rgba(255, 255, 255, 0.95), transparent 22%),
    conic-gradient(from 130deg, rgba(18, 185, 129, 0.06), rgba(18, 185, 129, 0.3), rgba(255, 255, 255, 0.72), rgba(18, 185, 129, 0.1)) !important;
}
.v3-replica-hero .v3-eyebrow {
  color: var(--apple-green) !important;
  background: rgba(18, 185, 129, 0.1) !important;
  border: 1px solid rgba(14, 159, 118, 0.16) !important;
}
.v3-replica-hero h1 { color: var(--apple-text) !important; }
.v3-replica-hero h1 em {
  color: transparent !important;
  background: linear-gradient(120deg, var(--apple-green-deep) 0%, var(--apple-green) 45%, var(--apple-green-2) 80%, #65d8c5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.v3-replica-hero p { color: var(--apple-text-2) !important; }

/* Platform badges:恢复原品牌色 + 玻璃光泽 */
.v3-platform-logo {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: var(--apple-shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 700;
  transition: transform 260ms var(--apple-ease), box-shadow 260ms var(--apple-ease);
}
.v3-platform-logo:hover { transform: translateY(-2px); box-shadow: var(--apple-shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; }
.v3-platform-meituan { background: linear-gradient(135deg, #ffd43b, #ff9f1c) !important; color: #3f2a00 !important; }
.v3-platform-shop { background: linear-gradient(135deg, #10b981, #047857) !important; color: #fff !important; }
.v3-platform-rednote { background: linear-gradient(135deg, #ff2442, #e11d48) !important; color: #fff !important; }
.v3-platform-douyin { background: linear-gradient(135deg, #1f2937, #0f172a) !important; color: #fff !important; }

/* Video entry → frosted floating card */
.v3-hero-video-entry {
  background: rgba(255, 255, 255, 0.68) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border: 1px solid var(--apple-glass-border) !important;
  border-radius: var(--apple-r-lg) !important;
  box-shadow: var(--apple-spec), var(--apple-shadow-2) !important;
  transition: transform 280ms var(--apple-ease), box-shadow 280ms var(--apple-ease) !important;
}
.v3-hero-video-entry:hover { transform: translateY(-2px); box-shadow: var(--apple-spec), var(--apple-shadow-3) !important; }
.v3-hero-play-icon {
  background: linear-gradient(150deg, var(--apple-green-2), var(--apple-green)) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 16px rgba(14, 159, 118, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.v3-hero-video-entry strong { color: var(--apple-text); }
.v3-hero-video-entry small { color: var(--apple-text-3); }

/* Hero capability tags → quiet checkmark rows */
.v3-hero-tags span { color: var(--apple-text-2) !important; font-weight: 500; }
.v3-hero-tags span::before, .v3-hero-tags span svg { color: var(--apple-green) !important; border-color: var(--apple-green) !important; background: none !important; }

/* 额度胶囊 → 薄荷软标签 */
.remaining-badge, .quota-pill, [class*="quota-pill"], [class*="remaining"] {
  background: rgba(18, 185, 129, 0.1) !important;
  color: var(--apple-text) !important;
  border: 1px solid rgba(14, 159, 118, 0.14) !important;
}
.remaining-badge .count, .remaining-badge span, #quota-count { color: var(--apple-green) !important; font-weight: 700; }

/* 联系管理员(头部小胶囊 + 侧栏链接)→ 薄荷 */
.v3-quota-help-mini {
  background: rgba(18, 185, 129, 0.1) !important;
  color: var(--apple-green) !important;
}
.v3-quota-help-mini:hover { background: rgba(18, 185, 129, 0.16) !important; color: var(--apple-green-deep) !important; }
.v3-quota-help-link { color: var(--apple-green) !important; }
.v3-quota-help-link:hover { color: var(--apple-green-deep) !important; background: none !important; }

/* 充值按钮(徽章内)→ 绿色玻璃 */
.v3-quota-recharge-btn {
  background: linear-gradient(150deg, var(--apple-green-2), var(--apple-green)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(14, 159, 118, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* “推荐优先使用”角标 → 恢复原橙色系 */
.v3-recommend-ribbon, [class*="corner-badge"], .v3-quick-badge {
  background: linear-gradient(135deg, var(--apple-orange) 0%, var(--apple-orange-2) 100%) !important;
  color: #fff !important;
  border-radius: var(--apple-r-pill) !important;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* 快速开始卡片 */
.v3-start-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.52) 55%, rgba(248, 253, 251, 0.46) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  border: 1px solid var(--apple-glass-border) !important;
  border-radius: var(--apple-r-lg) !important;
  box-shadow: var(--apple-spec), var(--apple-shadow-1) !important;
  transition: transform 320ms var(--apple-ease), box-shadow 320ms var(--apple-ease),
    border-color 320ms var(--apple-ease) !important;
}
.v3-start-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--apple-spec), var(--apple-shadow-3) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}
.v3-start-card:active { transform: translateY(-1px) scale(0.99); }
.v3-start-icon {
  background: linear-gradient(150deg, rgba(18, 185, 129, 0.14), rgba(18, 185, 129, 0.08)) !important;
  color: var(--apple-green) !important;
  border-radius: var(--apple-r-md) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.v3-start-card strong { color: var(--apple-text); letter-spacing: -0.02em !important; }
.v3-start-card small { color: var(--apple-text-3) !important; }
.v3-start-card b {
  background: linear-gradient(150deg, var(--apple-green-2), var(--apple-green)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(14, 159, 118, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform 280ms var(--apple-ease), box-shadow 280ms var(--apple-ease);
}
.v3-start-card:hover b { transform: translateX(3px); }

/* ── 24. Mobile hero: stop badge/title overlap ───────────────── */
@media (max-width: 768px) {
  .v3-platform-cloud {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin-bottom: 10px;
    transform: none !important;
  }
  .v3-platform-logo {
    position: static !important;
    transform: none !important;
    font-size: 12px;
    padding: 5px 12px !important;
  }
  .v3-hero-video-entry {
    position: static !important;
    margin-top: 14px;
    width: 100%;
    transform: none !important;
  }
  .v3-replica-hero { padding-bottom: 18px !important; }

  /* 快速开始卡片 → 横向滑动卡片列,不再挤压 */
  .v3-start-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .v3-start-grid::-webkit-scrollbar { display: none; }
  .v3-start-card {
    flex: 0 0 74% !important;
    min-width: 74% !important;
    scroll-snap-align: start;
  }
}

/* ── 25. Filter chips (案例广场) ─────────────────────────────── */
[class*="filter"] button, [class*="chip"], .filter-chip, .tag-chip {
  border-radius: var(--apple-r-pill) !important;
  border: 1px solid var(--apple-glass-border) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--apple-text-2) !important;
  font-weight: 500;
  transition: all 200ms var(--apple-ease) !important;
}
[class*="filter"] button.active, [class*="chip"].active, .filter-chip.active, .tag-chip.active,
[class*="filter"] button.selected, .filter-chip.selected {
  background: linear-gradient(150deg, rgba(24, 196, 145, 0.95), rgba(14, 159, 118, 0.98)) !important;
  color: #fff !important;
  border-color: rgba(10, 122, 91, 0.4) !important;
}

/* 页面级高优先级激活态覆盖(与原选择器同级,靠后加载取胜) */
.v3-onclick-page .page-tab.active,
.v3-cases-page .filter-btn.active,
.v3-tasks-page .tab.active,
.v3-pro-page .mode-btn.active,
.v3-pro-page .tag-select.active,
.v3-pro-page .tag-select.selected,
.tag-select.selected,
.tag-select.active,
.category-chip.active,
.style-chip.active,
.filter-chip.active {
  background: linear-gradient(150deg, rgba(24, 196, 145, 0.95), rgba(14, 159, 118, 0.98)) !important;
  color: #fff !important;
  border-color: rgba(10, 122, 91, 0.4) !important;
  box-shadow: 0 6px 18px rgba(14, 159, 118, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.v3-cases-page .filter-btn { background: rgba(255, 255, 255, 0.55) !important; color: var(--apple-text-2) !important; border-color: var(--apple-glass-border) !important; }

/* v2 页 mode-btn 激活态文字陷阱修正(0,4,0 同级,靠后取胜) */
.v3-pro-page .mode-switch .mode-btn.active { color: #fff !important; letter-spacing: -0.01em !important; }

/* 案例卡片优先角标:恢复原橙色系 */
.cases-section .case-priority-badge, .case-priority-badge {
  background: linear-gradient(135deg, var(--apple-orange) 0%, var(--apple-orange-2) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--apple-r-pill) !important;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 700 !important;
}

/* 案例页装饰点/图标 → 原绿 */
.v3-section-dot { background: var(--apple-green) !important; box-shadow: 0 0 0 5px rgba(18, 185, 129, 0.12) !important; }
.v3-case-mark { background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(18, 185, 129, 0.2)) !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; }
.v3-cases-page .case-card { background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)) !important; border-color: var(--apple-glass-border) !important; }
.v3-cases-page .page-header { background: rgba(255, 255, 255, 0.6) !important; border-color: var(--apple-glass-border) !important; }

/* 侧边栏额度条 → 原绿 */
.sidebar [class*="quota"] [class*="fill"], .sidebar [id*="quota-bar"], .quota-bar-fill, #quota-bar-fill {
  background: linear-gradient(90deg, var(--apple-green-deep), var(--apple-green), var(--apple-green-2)) !important;
}
.sidebar [class*="quota-num"], #quota-count, #quota-number-val { color: var(--apple-green) !important; }

/* ── 28. v2 专业设计生成页(紫色 → 苹果风) ───────────────────── */
.generating-container {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)) !important;
  border: 1px solid var(--apple-glass-border) !important;
  box-shadow: var(--apple-spec), var(--apple-shadow-3) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
}
.generating-icon {
  background: var(--apple-ink) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
  border-radius: var(--apple-r-md) !important;
  -webkit-animation: apple-breathe 2.4s var(--apple-ease) infinite;
  animation: apple-breathe 2.4s var(--apple-ease) infinite;
}
.generating-title { color: var(--apple-text) !important; letter-spacing: -0.02em; }
.generating-subtitle { color: var(--apple-text-3) !important; }
.circular-progress .progress-bg { stroke: rgba(0, 0, 0, 0.07) !important; }
.circular-progress .progress-bar {
  stroke: var(--apple-ink) !important;
  filter: none !important;
  transition: stroke-dashoffset 600ms var(--apple-ease) !important;
}
.circular-progress-value { color: var(--apple-text) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.circular-progress-label { color: var(--apple-text-3) !important; }
.progress-bar-track { background: rgba(0, 0, 0, 0.07) !important; }
.progress-bar-fill {
  background: var(--apple-ink) !important;
  transition: width 500ms var(--apple-ease) !important;
}
.timeline-line { background: rgba(0, 0, 0, 0.1) !important; }
.timeline-item { color: var(--apple-text-3); }
.timeline-item.active, .timeline-item.is-active { color: var(--apple-text); }
.timeline-item.active .timeline-dot, .timeline-item.is-active .timeline-dot {
  background: var(--apple-accent) !important;
  -webkit-animation: apple-pulse 1.6s var(--apple-ease) infinite;
  animation: apple-pulse 1.6s var(--apple-ease) infinite;
}

/* ── 29. 统一生成进度浮窗(深色 → 磨砂白 HUD) ────────────────── */
.unified-progress-panel {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.58)) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  border: 1px solid var(--apple-glass-border) !important;
  border-radius: var(--apple-r-lg) !important;
  box-shadow: var(--apple-shadow-4) !important;
  color: var(--apple-text);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .unified-progress-panel { background: rgba(255, 255, 255, 0.98) !important; }
}
.unified-progress-header {
  background: transparent !important;
  border-bottom: 1px solid var(--apple-border) !important;
}
.unified-progress-title { color: var(--apple-text) !important; font-weight: 700; letter-spacing: -0.01em; }
.unified-progress-badge { background: var(--apple-ink) !important; border-radius: var(--apple-r-pill) !important; }
.unified-progress-close {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--apple-text-2) !important;
  border-radius: var(--apple-r-pill) !important;
}
.unified-progress-close:hover { background: rgba(0, 0, 0, 0.09) !important; color: var(--apple-text) !important; }
.unified-progress-slot {
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-border) !important;
  border-radius: var(--apple-r-md) !important;
  box-shadow: var(--apple-shadow-1);
  transition: border-color 300ms var(--apple-ease), background 300ms var(--apple-ease),
    box-shadow 300ms var(--apple-ease) !important;
}
.unified-progress-slot.running {
  border-color: rgba(14, 159, 118, 0.4) !important;
  background: rgba(18, 185, 129, 0.08) !important;
  box-shadow: 0 0 0 4px rgba(18, 185, 129, 0.08);
}
.unified-progress-slot.completed {
  border-color: rgba(16, 185, 129, 0.35) !important;
  background: rgba(16, 185, 129, 0.07) !important;
}
.unified-progress-slot.failed {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}
.unified-progress-slot-label { color: var(--apple-text) !important; font-weight: 600; }
.unified-progress-slot-type {
  background: rgba(0, 0, 0, 0.055) !important;
  color: var(--apple-text-2) !important;
  border-radius: var(--apple-r-pill) !important;
  font-weight: 600;
}
.unified-progress-slot-type.combo, .unified-progress-slot-type.five {
  background: rgba(0, 0, 0, 0.055) !important;
  color: var(--apple-text-2) !important;
}
.unified-progress-slot-percent { color: var(--apple-text) !important; font-variant-numeric: tabular-nums; font-weight: 700; }
.unified-progress-slot-status { color: var(--apple-text-2) !important; }
.unified-progress-bar-container {
  background: rgba(0, 0, 0, 0.07) !important;
  border-radius: var(--apple-r-pill) !important;
  overflow: hidden;
}
.unified-progress-bar-fill {
  background: linear-gradient(90deg, #0a7a5b 0%, #0e9f76 60%, #12b981 100%) !important;
  border-radius: var(--apple-r-pill) !important;
  transition: width 600ms var(--apple-ease) !important;
}
.unified-progress-slot-error {
  background: rgba(239, 68, 68, 0.07) !important;
  color: var(--apple-danger) !important;
  border-radius: var(--apple-r-sm) !important;
}
.unified-progress-slot img, .unified-progress-slot .slot-thumb,
.unified-progress-slot .slot-image { border-radius: var(--apple-r-sm) !important; }

/* ── 27. 补齐 my-tasks 等页面缺失的 main-nav 样式 ───────────── */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--apple-glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--apple-border) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .main-nav { background: rgba(255, 255, 255, 0.97) !important; }
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--apple-text) !important;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px !important;
  border-radius: var(--apple-r-pill) !important;
  color: var(--apple-text-2) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 200ms var(--apple-ease), color 200ms var(--apple-ease),
    transform 200ms var(--apple-ease) !important;
}
.nav-link:hover { background: rgba(0, 0, 0, 0.045) !important; color: var(--apple-text) !important; }
.nav-link:active { transform: scale(0.97); }
.nav-link.active {
  background: var(--apple-ink) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
@media (max-width: 768px) {
  .main-nav { padding: 8px 14px; gap: 10px; }
  .nav-logo { font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
  .nav-links {
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { min-height: 40px; padding: 0 11px !important; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
}

/* 公告栏显示时,固定侧栏下移避让(由 apple-motion.js 写入 --apple-ann-h) */
#announcementBar { font-family: var(--apple-font) !important; }
.sidebar, .v3-desktop-sidebar { top: var(--apple-ann-h, 0px) !important; transition: top 240ms var(--apple-ease); }
.mobile-header { top: var(--apple-ann-h, 0px) !important; }