/* ============================================================



   AIBUAIBU Design System v3 — International Standard



   oklch · Inter · Lucide · Dark Mode · Motion · Shimmer



   2026-05-02



   Full class compatibility layer for all frontend pages



   ============================================================ */







/* ── Import Fonts ── */



@import url('https://fonts.loli.net/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');







/* ── CSS Tokens (Light) ── */



:root {



  --bg: oklch(0.99 0.003 85);



  --bg-subtle: oklch(0.97 0.005 85);



  --bg-card: oklch(0.99 0.003 85 / 0.75);



  --bg-glass: oklch(0.99 0.003 85 / 0.6);



  --bg-nav: oklch(0.99 0.003 85 / 0.85);



  --bg-elevated: #fff;







  --brand: oklch(0.72 0.16 55);



  --brand-strong: oklch(0.62 0.18 48);



  --brand-subtle: oklch(0.72 0.16 55 / 0.10);



  --brand-glow: oklch(0.72 0.16 55 / 0.20);



  --brand-light: oklch(0.72 0.16 55 / 0.06);







  --ai-start: oklch(0.6 0.15 280);



  --ai-end: oklch(0.65 0.12 220);



  --ai-bg: linear-gradient(135deg, oklch(0.6 0.15 280 / 0.06), oklch(0.65 0.12 220 / 0.04));



  --ai-border: oklch(0.6 0.15 280 / 0.15);







  --text: oklch(0.15 0.005 85);



  --text-secondary: oklch(0.42 0.01 85);



  --text-muted: oklch(0.58 0.01 85);



  --text-inverse: oklch(0.98 0 0);







  --border: oklch(0.90 0.005 85);



  --border-strong: oklch(0.82 0.008 85);







  --success: oklch(0.65 0.18 145);



  --warning: oklch(0.72 0.16 75);



  --danger: oklch(0.6 0.2 25);



  --info: oklch(0.6 0.12 240);







  --success-bg: oklch(0.65 0.18 145 / 0.08);



  --danger-bg: oklch(0.6 0.2 25 / 0.08);



  --warning-bg: oklch(0.72 0.16 75 / 0.08);



  --info-bg: oklch(0.6 0.12 240 / 0.08);







  --radius-sm: 0.5rem;



  --radius-md: 0.75rem;



  --radius-lg: 1rem;



  --radius-xl: 1.25rem;



  --radius-full: 9999px;







  /* spacing scale (4px base) */



  --space-1: 0.25rem;



  --space-2: 0.5rem;



  --space-3: 0.75rem;



  --space-4: 1rem;



  --space-5: 1.25rem;



  --space-6: 1.5rem;



  --space-8: 2rem;



  --space-10: 2.5rem;



  --space-12: 3rem;







  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04);



  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.06);



  --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.08);



  --shadow-glow: 0 0 30px var(--brand-glow);







  --font-sans: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;



  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;







  --nav-height: 64px;



  --sidebar-width: 220px;







  /* backward compat */



  --bg-color: var(--bg);



  --surface-color: var(--bg-card);



  --text-main: var(--text);



  --line-color: var(--border);



  --surface-strong: var(--bg);



  --tech-orange: var(--brand);



  --tech-orange-strong: var(--brand-strong);
}

/* ═══════════════════════════════════════
   DARK MODE — 用户手动切换或跟随系统
   ═══════════════════════════════════════ */
html.dark-mode {
  --bg: oklch(0.13 0.008 85);
  --bg-subtle: oklch(0.17 0.008 85);
  --bg-card: oklch(0.17 0.008 85 / 0.75);
  --bg-glass: oklch(0.13 0.008 85 / 0.6);
  --bg-nav: oklch(0.10 0.005 85 / 0.92);
  --bg-elevated: oklch(0.20 0.01 85);
  --text: oklch(0.92 0.005 85);
  --text-secondary: oklch(0.72 0.008 85);
  --text-muted: oklch(0.55 0.008 85);
  --text-inverse: oklch(0.10 0 0);
  --border: oklch(0.28 0.008 85);
  --border-strong: oklch(0.35 0.008 85);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.4);
  --shadow-glow: 0 0 30px var(--brand-glow);
}
html.dark-mode img, html.dark-mode video {
  opacity: 0.9;
  transition: opacity 0.3s;
}
html.dark-mode img:hover, html.dark-mode video:hover {
  opacity: 1;
}

html.dark-mode .chat-input-bar {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html.dark-mode .create-page .chat-panel {
  background: var(--bg-card) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light-mode):not(.dark-mode) {
    --bg: oklch(0.13 0.008 85);
    --bg-subtle: oklch(0.17 0.008 85);
    --bg-card: oklch(0.17 0.008 85 / 0.75);
    --bg-glass: oklch(0.13 0.008 85 / 0.6);
    --bg-nav: oklch(0.10 0.005 85 / 0.92);
    --bg-elevated: oklch(0.20 0.01 85);
    --text: oklch(0.92 0.005 85);
    --text-secondary: oklch(0.72 0.008 85);
    --text-muted: oklch(0.55 0.008 85);
    --text-inverse: oklch(0.10 0 0);
    --border: oklch(0.28 0.008 85);
    --border-strong: oklch(0.35 0.008 85);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.4);
  }
  html:not(.light-mode):not(.dark-mode) img,
  html:not(.light-mode):not(.dark-mode) video {
    opacity: 0.9;
    transition: opacity 0.3s;
  }
  html:not(.light-mode):not(.dark-mode) img:hover,
  html:not(.light-mode):not(.dark-mode) video:hover {
    opacity: 1;
  }




  --tech-yellow: oklch(0.85 0.12 85);



  --shadow-card: var(--shadow-md);



  --shadow-soft: var(--shadow-sm);

  /* ── Motion (v3.0) ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.8, 0.15);
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-xl: 500ms;

}







/* ── Dark Mode ── */



[data-theme="dark"] {



  --bg: oklch(0.12 0.003 85);



  --bg-subtle: oklch(0.16 0.005 85);



  --bg-card: oklch(0.16 0.003 85 / 0.8);



  --bg-glass: oklch(0.16 0.003 85 / 0.5);



  --bg-nav: oklch(0.12 0 0 / 0.9);



  --bg-elevated: oklch(0.18 0 0);







  --text: oklch(0.92 0.005 85);



  --text-secondary: oklch(0.72 0.005 85);



  --text-muted: oklch(0.52 0.005 85);







  --border: oklch(0.24 0.003 85);



  --border-strong: oklch(0.32 0.005 85);







  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);



  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.4);



  --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.5);







  --brand-glow: oklch(0.72 0.16 55 / 0.12);



  --brand-light: oklch(0.72 0.16 55 / 0.10);



  --brand-subtle: oklch(0.72 0.16 55 / 0.12);







  --bg-color: var(--bg);



  --surface-color: var(--bg-card);



  --text-main: var(--text);



  --line-color: var(--border);



}







/* ── Reset ── */



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



html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }



body {



  margin: 0;



  font-family: var(--font-sans);



  background: var(--bg);



  color: var(--text);



  -webkit-font-smoothing: antialiased;



  -moz-osx-font-smoothing: grayscale;



  line-height: 1.6;



  min-height: 100vh;



}



img, video { max-width: 100%; height: auto; display: block; }



a { color: inherit; text-decoration: none; }



button { font-family: inherit; cursor: pointer; border: none; background: none; }



input, select, textarea { font-family: inherit; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; font-size: 14px; background: var(--bg); color: var(--text); outline: none; transition: border-color 0.15s; }



input:focus, select:focus, textarea:focus { border-color: var(--brand); }



ul, ol { list-style: none; }







/* ── Typography ── */



h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }



h1 { font-size: 36px; letter-spacing: -0.02em; }



h2 { font-size: 24px; letter-spacing: -0.01em; }



h3 { font-size: 18px; }



h4 { font-size: 16px; }







/* ═══════════════════════════════════════



   SITE SHELL



   ═══════════════════════════════════════ */



.site-shell {



  display: flex;



  flex-direction: column;



  min-height: 100vh;



  background: var(--bg);



}







/* ═══════════════════════════════════════



   TOP BANNER



   ═══════════════════════════════════════ */



.top-banner {



  display: none;



}







/* ═══════════════════════════════════════



   NAVIGATION (header.php)



   ═══════════════════════════════════════ */



.apple-nav, .site-shell__nav {



  position: sticky;



  top: 0;



  z-index: 100;



  height: var(--nav-height);



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 0 24px;



  background: var(--bg-nav);



  backdrop-filter: blur(16px);



  -webkit-backdrop-filter: blur(16px);



  border-bottom: 1px solid var(--border);



  gap: 16px;



}



.nav-logo {



  font-size: 20px;



  font-weight: 800;



  color: var(--text);



  letter-spacing: -0.03em;



  flex-shrink: 0;



}



.search-container {



  flex: 1;



  max-width: 420px;



}



.search-input {



  width: 100%;



  padding: 8px 14px;



  border-radius: var(--radius-full);



  border: 1px solid var(--border);



  background: var(--bg-subtle);



  font-size: 13px;



  color: var(--text);



  outline: none;



  transition: all 0.15s;



}



.search-input::placeholder { color: var(--text-muted); }



.search-input:focus { border-color: var(--brand); background: var(--bg); }



.nav-actions {



  display: flex;



  align-items: center;



  gap: 8px;



  flex-shrink: 0;



}



/* 确保登录按钮在登录后真正隐藏 */



[data-open-auth][hidden] { display: none !important; }



.points-badge {



  display: inline-flex;



  align-items: center;



  gap: 4px;



  padding: 6px 12px;



  border-radius: var(--radius-full);



  background: var(--brand-light);



  color: var(--brand-strong);



  font-size: 12px;



  font-weight: 600;



  white-space: nowrap;



}



.points-badge svg { width: 14px; height: 14px; }



.points-badge-label {



  font-weight: 600;



}



.points-badge.is-org-mode {



  background: oklch(0.62 0.14 250 / 0.12);



  color: #0071e3;



}



html.dark-mode .points-badge.is-org-mode {



  background: oklch(0.62 0.14 250 / 0.22);



  color: #64b5ff;



}



.vip-badge-nav {



  display: inline-flex;



  align-items: center;



  padding: 6px 14px;



  border-radius: var(--radius-full);



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  font-size: 12px;



  font-weight: 600;



  white-space: nowrap;



}



.vip-badge-nav.is-active-vip {



  background: linear-gradient(135deg, #ff9f0a, #ffd75e);



}







/* ── User Dropdown ── */



.user-dropdown-wrap { position: relative; }



.user-avatar-btn {



  width: 36px;



  height: 36px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  font-size: 12px;



  font-weight: 700;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  border: 2px solid var(--bg-nav);



  transition: transform 0.15s;



}



.user-avatar-btn:hover { transform: scale(1.05); }



.user-dropdown {



  position: absolute;



  top: calc(100% + 8px);



  right: 0;



  width: 240px;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  box-shadow: var(--shadow-lg);



  z-index: 200;



  overflow: hidden;



}



.user-dropdown[hidden] { display: none; }



.ud-header {



  display: flex;



  align-items: center;



  gap: 12px;



  padding: 16px;



  border-bottom: 1px solid var(--border);



}



.ud-avatar {



  width: 40px;



  height: 40px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 15px;



  font-weight: 700;



  flex-shrink: 0;



}



.ud-header strong { font-size: 14px; display: block; }



.ud-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }



.ud-member-bar {



  display: flex;



  justify-content: space-between;



  align-items: center;



  padding: 10px 16px;



  background: var(--brand-light);



  font-size: 12px;



  color: var(--brand-strong);



  border-bottom: 1px solid var(--border);



}



.ud-upgrade { font-weight: 600; color: var(--brand); }



.ud-points-bar {



  display: flex;



  justify-content: space-between;



  align-items: center;



  padding: 10px 16px;



  font-size: 12px;



  border-bottom: 1px solid var(--border);



}



.ud-recharge {



  padding: 4px 12px;



  border-radius: var(--radius-full);



  background: var(--brand);



  color: #fff;



  font-size: 11px;



  font-weight: 600;



}



.ud-menu { padding: 4px 0; }



.ud-menu-item {



  display: flex;



  align-items: center;



  width: 100%;



  padding: 10px 16px;



  font-size: 13px;



  color: var(--text);



  background: none;



  border: none;



  text-align: left;



  cursor: pointer;



  transition: background 0.1s;



}



.ud-menu-item:hover { background: var(--brand-light); }







/* ═══════════════════════════════════════



   LAYOUT (sidebar + main)



   ═══════════════════════════════════════ */



.layout {



  display: flex;



  gap: 24px;



  padding: 24px 32px;



  max-width: 1400px;



  margin: 0 auto;



  width: 100%;



  flex: 1;



}







/* ── Apple-style Sidebar ── */



.apple-sidebar {



  flex: 0 0 var(--sidebar-width);



  position: sticky;



  top: calc(var(--nav-height) + 24px);



  height: fit-content;



  max-height: calc(100vh - var(--nav-height) - 48px);



  overflow-y: auto;



  background: var(--sidebar-bg);



  border-right: 1px solid var(--border);



  padding: 16px 12px;



}



.menu-group { margin-bottom: 4px; }



.menu-title {



  font-size: 11px;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: 0.05em;



  color: var(--text-muted);



  padding: 8px 12px 6px;



}



.menu-item {



  display: flex;



  align-items: center;

  gap: 10px;

  padding: 8px 12px;



  border-radius: var(--radius-md);



  font-size: 14px;



  font-weight: 400;



  color: var(--text-secondary);



  transition: all 0.12s;



  text-decoration: none;



}



.menu-item:hover { background: var(--brand-light); color: var(--text); }



.menu-item.active, .menu-item.is-active { background: var(--brand-light); color: var(--brand); font-weight: 600; }



.menu-item svg { flex-shrink: 0; margin-right: 8px; }

.menu-item--ecom {
  justify-content: space-between;
  gap: 8px;
}

.menu-discount-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.22);
}







/* ── AI Creation Highlight (menu) ── */



.menu-item--ai {



  background: linear-gradient(135deg, var(--brand-subtle), oklch(0.72 0.16 55 / 0.18));



  border: 1px solid var(--brand-glow);



  font-weight: 600;



  color: var(--brand-strong) !important;



  position: relative;



  overflow: hidden;



  margin-top: 4px;



}



.menu-item--ai::before {



  content: '';



  position: absolute;



  inset: 0;



  background: radial-gradient(ellipse at 30% 50%, var(--brand-glow), transparent 70%);



  pointer-events: none;



}







/* ── Main Content Area ── */



main { flex: 1; min-width: 0; }







/* ═══════════════════════════════════════



   TABS



   ═══════════════════════════════════════ */



.main-tabs {



  display: flex;



  gap: 4px;



  margin-bottom: 20px;



  border-bottom: 1px solid var(--border);



  padding-bottom: 0;



}



.main-tab {



  padding: 10px 18px;



  border: none;



  background: none;



  font-size: 14px;



  font-weight: 500;



  color: var(--text-muted);



  cursor: pointer;



  border-bottom: 2px solid transparent;



  margin-bottom: -1px;



  transition: all 0.12s;



}



.main-tab:hover { color: var(--text); }



.main-tab.is-active, .main-tab.active { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }







/* ═══════════════════════════════════════



   FEED / SECTION HEADERS



   ═══════════════════════════════════════ */



.feed-toolbar {



  display: flex;



  justify-content: space-between;



  align-items: flex-end;



  margin-bottom: 16px;



}



.section-title { font-size: 22px; margin-bottom: 4px; }



.section-copy { font-size: 13px; color: var(--text-secondary); }



.filter-section { margin-bottom: 16px; }







/* ═══════════════════════════════════════



   MASONRY GRID — Professional Gallery



   7-column responsive grid · Pinterest-style cards



   ═══════════════════════════════════════ */



.masonry-grid {



  display: grid;



  grid-template-columns: repeat(7, 1fr);



  gap: 12px;



}







/* ── Creation Card (Pinterest/Behance style) ── */



.creation-card {



  background: var(--bg-elevated);



  border-radius: var(--radius-lg);



  overflow: hidden;



  transition: transform 0.2s ease, box-shadow 0.25s ease;



  box-shadow: 0 1px 3px oklch(0 0 0 / 0.04);



  break-inside: avoid;



}



.creation-card:hover {



  transform: translateY(-3px);



  box-shadow: 0 8px 25px oklch(0 0 0 / 0.10);



}







/* ── Card Image Area ── */



.card-img-wrapper {



  position: relative;



  width: 100%;



  padding-bottom: 85%;



  overflow: hidden;



  background: var(--bg-subtle);



  cursor: zoom-in;



}



.card-img-wrapper img:not(.author-avatar), .card-img-wrapper video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}



.creation-card:hover .card-img-wrapper img,



.creation-card:hover .card-img-wrapper video {



  transform: scale(1.03);



  filter: brightness(0.85);



}







/* ── Hover Overlay (dark gradient that fades in) ── */



.card-img-wrapper::after {



  content: '';



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, oklch(0 0 0 / 0.05) 0%, oklch(0 0 0 / 0.50) 100%);



  opacity: 0;



  transition: opacity 0.3s ease;



  z-index: 1;



  pointer-events: none;



}



.creation-card:hover .card-img-wrapper::after { opacity: 1; }







/* ── Pinterest-style "做同款" Save Button ── */



.card-remix-btn {



  position: absolute;



  right: 10px;



  bottom: 10px;



  display: inline-flex;



  align-items: center;



  gap: 5px;



  padding: 8px 16px;



  border-radius: var(--radius-full);



  background: var(--brand);



  color: #fff;



  font-size: 12px;



  font-weight: 700;



  border: none;



  cursor: pointer;



  z-index: 4;



  opacity: 0;



  transform: translateY(4px);



  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.15s;



  pointer-events: auto;



  white-space: nowrap;



  box-shadow: 0 2px 8px oklch(0 0 0 / 0.20);



}



.creation-card:hover .card-remix-btn {



  opacity: 1;



  transform: translateY(0);



}



.card-remix-btn:hover { background: var(--brand-strong); box-shadow: 0 4px 12px oklch(0.72 0.16 55 / 0.35); }







/* ── Hover Action Buttons (top-right: like/collect) ── */



.card-hover-actions {



  position: absolute;



  top: 10px;



  right: 10px;



  display: flex;



  flex-direction: column;



  gap: 8px;



  opacity: 0;



  transform: translateY(-6px);



  transition: opacity 0.2s ease, transform 0.2s ease;



  z-index: 3;



}



.creation-card:hover .card-hover-actions {



  opacity: 1;



  transform: translateY(0);



}



.card-hover-btn {



  width: 34px;



  height: 34px;



  border-radius: 50%;



  background: oklch(0 0 0 / 0.40);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



  border: 1px solid oklch(1 0 0 / 0.15);



  color: #fff;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  transition: all 0.15s;



}



.card-hover-btn:hover { background: oklch(0 0 0 / 0.65); transform: scale(1.12); }



.card-hover-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }



.card-hover-btn--like:hover { color: #ef4444; }



.card-hover-btn--collect:hover { color: #ff9f0a; }







/* ── Media Badge (template/video/image) ── */



.card-media-badge {



  position: absolute;



  top: 10px;



  left: 10px;



  padding: 3px 9px;



  border-radius: var(--radius-full);



  font-size: 10px;



  font-weight: 700;



  color: #fff;



  z-index: 3;



  letter-spacing: 0.03em;



  backdrop-filter: blur(4px);



  -webkit-backdrop-filter: blur(4px);



}



.card-media-badge--style { background: linear-gradient(135deg, var(--ai-start), var(--ai-end)); }



.card-media-badge--video { background: oklch(0 0 0 / 0.55); border: 1px solid oklch(1 0 0 / 0.12); }



.card-media-badge--image { background: oklch(0 0 0 / 0.40); border: 1px solid oklch(1 0 0 / 0.08); }







/* ── Stats Overlay (glassmorphism bottom bar) ── */



.card-stats-overlay {



  position: absolute;



  bottom: 0;



  left: 0;



  right: 0;



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 10px 12px;



  background: linear-gradient(180deg, transparent 0%, oklch(0 0 0 / 0.60) 100%);



  opacity: 0;



  transition: opacity 0.25s ease;



  z-index: 2;



  pointer-events: none;



}



.creation-card:hover .card-stats-overlay { opacity: 1; }



.card-stat-left {



  display: flex;



  align-items: center;



  gap: 6px;



  pointer-events: auto;



}



.card-stat-author {



  font-size: 11px;



  color: #fff;



  font-weight: 500;



  text-shadow: 0 1px 3px oklch(0 0 0 / 0.5);



  max-width: 80px;



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}



.card-stat-right {



  display: flex;



  align-items: center;



  gap: 10px;



  pointer-events: auto;



}



.card-stat {



  display: inline-flex;



  align-items: center;



  gap: 3px;



  font-size: 11px;



  color: #fff;



  font-weight: 600;



  text-shadow: 0 1px 3px oklch(0 0 0 / 0.5);



}



.card-stat svg { width: 12px; height: 12px; }







/* ── Card Content (title + tags) ── */



.card-content {



  padding: 10px 12px 12px;



}



.card-content .card-title {



  font-size: 13px;



  font-weight: 600;



  color: var(--text);



  line-height: 1.4;



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}



.card-content .card-footer {



  margin-top: 6px;



  display: flex;



  align-items: center;



  justify-content: space-between;



}



.card-tags-row {



  display: flex;



  flex-wrap: wrap;



  gap: 4px;



}



.card-content .card-tag {



  font-size: 10px;



  padding: 2px 8px;



}







/* ── Tag Color System ── */



.card-tag--0 { background: oklch(0.72 0.16 55 / 0.10); color: oklch(0.62 0.18 48); }



.card-tag--1 { background: oklch(0.65 0.18 145 / 0.10); color: oklch(0.5 0.18 145); }



.card-tag--2 { background: oklch(0.6 0.12 240 / 0.10); color: oklch(0.45 0.15 240); }



.card-tag--3 { background: oklch(0.72 0.16 75 / 0.10); color: oklch(0.6 0.16 75); }



.card-tag--4 { background: oklch(0.6 0.2 25 / 0.10); color: oklch(0.5 0.2 25); }



.card-tag--5 { background: oklch(0.6 0.15 280 / 0.10); color: oklch(0.5 0.15 280); }







/* ── Author Info ── */



.author-info {



  display: flex;



  align-items: center;



  gap: 6px;



  min-width: 0;



}



.author-avatar {



  width: 22px;



  height: 22px;



  border-radius: 50%;



  object-fit: cover;



  flex-shrink: 0;



  border: 1px solid var(--border);

  vertical-align: middle;

  display: inline-block;





}



.avatar-fallback {



  width: 22px;



  height: 22px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--brand-subtle), var(--brand-light));



  color: var(--brand-strong);



  font-size: 10px;



  font-weight: 700;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



}



.author-name {



  font-size: 12px;



  color: var(--text-secondary);



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







/* ── Video Wrapper ── */



.card-video-wrapper video { object-fit: cover; }







/* ── Motion · Shimmer Card ── */



.skeleton-card {

  background: linear-gradient(90deg,
    var(--bg-subtle) 25%,
    var(--bg-card) 50%,
    var(--bg-subtle) 75%
  );
  background-size: 200% 100%;

  border-radius: var(--radius-lg);

  height: 260px;

  animation: shimmer var(--duration-xl) var(--ease-out) infinite;

}







/* ── Empty State ── */



.empty-state {



  grid-column: 1 / -1;



  text-align: center;



  padding: 60px 20px;



  color: var(--text-muted);



  font-size: 14px;



  line-height: 1.8;



}



.empty-state a {



  display: inline-block;



  margin-top: 12px;



  padding: 10px 24px;



  border-radius: var(--radius-md);



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  font-weight: 600;



  font-size: 14px;



  text-decoration: none;



}







.footer-note { font-size: 12px; color: var(--text-muted); text-align: center; padding: 20px 0; }







/* ═══════════════════════════════════════



   MOBILE BOTTOM NAV



   ═══════════════════════════════════════ */



.mobile-nav {



  display: none;



  position: fixed;



  bottom: 0;



  left: 0;



  right: 0;



  z-index: 100;



  height: 64px;



  background: var(--bg-nav);



  backdrop-filter: blur(16px);



  -webkit-backdrop-filter: blur(16px);



  border-top: 1px solid var(--border);



  justify-content: space-around;



  align-items: center;



  padding: 0 4px;



}



.mobile-nav-item {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 2px;



  padding: 6px 12px;



  color: var(--text-muted);



  font-size: 10px;



  font-weight: 500;



  text-decoration: none;



  transition: color 0.12s;



}



.mobile-nav-item:hover, .mobile-nav-item.active { color: var(--brand); }



.mobile-nav-item svg { width: 22px; height: 22px; }







/* ═══════════════════════════════════════



   AUTH MODAL



   ═══════════════════════════════════════ */



.auth-modal {



  position: fixed;



  inset: 0;



  background: oklch(0 0 0 / 0.40);



  backdrop-filter: blur(4px);



  -webkit-backdrop-filter: blur(4px);



  z-index: 500;



  display: none;



  align-items: center;



  justify-content: center;



  padding: 16px;



}



.auth-modal.is-open { display: flex; }



.auth-panel {



  background: var(--bg-elevated);



  border-radius: var(--radius-xl);



  width: 100%;



  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;



  padding: 28px 24px;



  box-shadow: var(--shadow-lg);



  animation: modalSlideIn 0.25s ease-out;



}



.auth-header { margin-bottom: 16px; text-align: center; }



.auth-title { font-size: 20px; margin-bottom: 4px; }



.auth-copy { font-size: 13px; color: var(--text-secondary); }



.auth-tabs {



  display: flex;



  gap: 4px;



  margin-bottom: 16px;



  border-bottom: 1px solid var(--border);



}



.auth-tab {



  flex: 1;



  padding: 10px;



  border: none;



  background: none;



  font-size: 14px;



  font-weight: 500;



  color: var(--text-muted);



  cursor: pointer;



  border-bottom: 2px solid transparent;



  transition: all 0.12s;



}



.auth-tab:hover { color: var(--text); }



.auth-tab.is-active { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }







/* ── Forms ── */



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



.form-grid[hidden] { display: none; }



.field { display: flex; flex-direction: column; gap: 6px; }



.field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }



.field input, .field select { width: 100%; }



.close-button {



  position: absolute;



  top: 16px;



  right: 16px;



  width: 32px;



  height: 32px;



  border-radius: 50%;



  border: none;



  background: var(--bg-subtle);



  color: var(--text-muted);



  font-size: 20px;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  transition: all 0.12s;



}



.close-button:hover { background: var(--border); color: var(--text); }







/* ═══════════════════════════════════════



   BUTTONS



   ═══════════════════════════════════════ */



.primary-button {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 10px 20px;



  border-radius: var(--radius-md);



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  font-size: 13px;



  font-weight: 600;



  border: none;



  cursor: pointer;



  text-decoration: none;



  white-space: nowrap;



  transition: opacity 0.15s, transform 0.1s;



}



.primary-button:hover { opacity: 0.9; transform: translateY(-1px); }



.primary-button:active { transform: translateY(0); }







.ghost-button {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 8px 16px;



  border-radius: var(--radius-md);



  background: transparent;



  color: var(--text-secondary);



  font-size: 13px;



  font-weight: 500;



  border: 1px solid var(--border);



  cursor: pointer;



  text-decoration: none;



  white-space: nowrap;



  transition: all 0.12s;



}



.ghost-button:hover { background: var(--brand-light); color: var(--text); border-color: var(--border-strong); }







.submit-button {



  width: 100%;



  padding: 12px;



  border-radius: var(--radius-md);



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  font-size: 15px;



  font-weight: 600;



  border: none;



  cursor: pointer;



  transition: opacity 0.15s;



}



.submit-button:hover { opacity: 0.9; }







/* ═══════════════════════════════════════



   CHAT / CREATE PAGE — Professional AI Creation Studio



   visual only, JS untouched



   ═══════════════════════════════════════ */



.chat-shell {



  display: flex; flex-direction: column; height: 100vh; overflow: hidden;



  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-subtle) 100%);



}



.chat-layout { display: flex; flex: 1; overflow: hidden; }



.chat-sidebar {



  flex: 0 0 var(--sidebar-width);



  padding: 20px 16px;



  border-right: 1px solid var(--border);



  overflow-y: auto;



  background: var(--bg);



}



.chat-main {



  flex: 1;



  display: flex;



  flex-direction: column;



  min-width: 0;



  position: relative;



}







/* ── Messages Container ── */



.chat-messages {



  flex: 1;



  overflow-y: auto;



  padding: 24px 32px 20px;



  display: flex;



  flex-direction: column;



  gap: 16px;



  min-height: 0;



}







/* ── Welcome Screen ── */



.chat-welcome {



  text-align: center;



  padding: 100px 20px 60px;



  color: var(--text-muted);



}



.chat-welcome h2 {



  margin-bottom: 12px;



  font-size: 32px;



  font-weight: 800;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



  letter-spacing: -0.02em;



}



.chat-welcome p {



  font-size: 15px;



  max-width: 420px;



  margin: 0 auto;



  line-height: 1.7;



}







/* ── Message Bubbles (User & AI) ── */



.chat-msg {



  display: flex;



  gap: 12px;



  max-width: 80%;



  animation: msgFadeIn 0.3s ease-out;



}



.chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }



.chat-msg--ai {



  align-self: flex-start;



  max-width: 92%;



}



.chat-msg--ai.has-images {



  max-width: 100%;



  width: 100%;



}



.chat-msg--creation { max-width: 100%; width: 100%; }







.chat-msg-avatar {



  width: 34px;



  height: 34px;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 13px;



  font-weight: 700;



  flex-shrink: 0;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



}



.chat-msg-avatar--ai {



  background: linear-gradient(135deg, var(--ai-start), var(--ai-end));



}







.chat-msg-bubble {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: 18px 18px 4px 18px;



  padding: 12px 18px;



  font-size: 14px;



  line-height: 1.6;



  color: var(--text);



  box-shadow: var(--shadow-sm);



}



.chat-msg--ai .chat-msg-bubble {



  border-radius: 18px 18px 18px 4px;



  background: var(--bg-subtle);



}







.chat-msg-content {



  flex: 1;



  min-width: 0;



  max-width: 100%;



  overflow: hidden;



}







/* ── Image Result Grid ── */



.chat-img-grid {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  margin-bottom: 8px;



  min-width: 0;



  overflow: hidden;



}



.chat-img-item {



  flex: 0 0 340px;



  position: relative;



  border-radius: var(--radius-lg);



  overflow: hidden;



  cursor: zoom-in;



  background: var(--bg-subtle);



  aspect-ratio: auto;



  max-height: 70vh;



  box-shadow: 0 1px 3px oklch(0 0 0 / 0.06);



  transition: transform 0.2s ease, box-shadow 0.2s ease;



}



.chat-img-item:hover {



  transform: translateY(-2px);



  box-shadow: 0 6px 20px oklch(0 0 0 / 0.10);



}



.chat-img-item img {



  width: 100% !important;



  height: auto !important;



  max-width: 100% !important;



  max-height: 70vh;



  object-fit: contain;



  display: block;



}



.chat-img-expired {



  display: flex;



  align-items: center;



  justify-content: center;



  height: 100%;



  color: var(--text-muted);



  font-size: 13px;



  background: var(--bg-subtle);



}







/* ── Publish Overlay (hover on images) ── */



.img-publish-overlay {



  position: absolute;



  inset: 0;



  display: flex;



  align-items: flex-end;



  justify-content: center;



  gap: 8px;



  padding: 12px;



  background: linear-gradient(180deg, transparent 50%, oklch(0 0 0 / 0.45) 100%);



  opacity: 0;



  transition: opacity 0.2s ease;



}



.chat-img-item:hover .img-publish-overlay { opacity: 1; }



.img-publish-btn {



  width: 36px;



  height: 36px;



  border-radius: 50%;



  background: oklch(0 0 0 / 0.40);



  backdrop-filter: blur(6px);



  border: 1px solid oklch(1 0 0 / 0.15);



  color: #fff;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  transition: all 0.15s;



}



.img-publish-btn:hover { background: var(--brand); transform: scale(1.1); }



.img-publish-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }







/* ── AI Message Actions ── */



.chat-msg-actions {



  display: flex;



  align-items: center;



  gap: 8px;



  margin-top: 6px;



}



.chat-msg-model {



  font-size: 11px;



  color: var(--text-muted);



  background: var(--bg-subtle);



  padding: 3px 10px;



  border-radius: var(--radius-full);



}



.chat-action-btn {



  font-size: 12px !important;



  padding: 4px 12px !important;



  min-height: 32px !important;



}







/* ── Generation Progress ── */



.chat-gen-status {



  padding: 16px 20px;



  background: var(--bg-subtle);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  margin-bottom: 12px;



}



.chat-gen-bar {



  height: 4px;



  background: var(--border);



  border-radius: 2px;



  overflow: hidden;



  margin-bottom: 10px;



}



.chat-gen-fill {



  height: 100%;



  background: linear-gradient(90deg, var(--brand), var(--brand-strong));



  border-radius: 2px;



  width: 0%;



  transition: width 0.5s ease;



}



.chat-gen-text {



  font-size: 13px;



  color: var(--text-secondary);



}



.chat-skeleton-card {



  width: 100%;



  height: 180px;



  background: var(--bg-subtle);



  border-radius: var(--radius-lg);



  animation: skeletonPulse 1.8s ease-in-out infinite;



}







/* ── Error Message ── */



.chat-error {



  background: var(--danger-bg);



  border: 1px solid oklch(0.6 0.2 25 / 0.2);



  border-radius: var(--radius-lg);



  padding: 12px 18px;



  font-size: 13px;



  color: var(--danger);



  line-height: 1.5;



}







/* ── Video Result ── */



.chat-video-wrap {



  border-radius: var(--radius-lg);



  overflow: hidden;



  background: #000;



  margin-bottom: 8px;



}



.chat-video-player {



  width: 100%;



  display: block;



  max-height: 480px;



}







/* ── Scroll to Bottom Button ── */



.chat-scroll-btn {



  position: absolute;



  bottom: 200px;



  right: 24px;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  box-shadow: var(--shadow-md);



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  color: var(--text-muted);



  z-index: 10;



  transition: all 0.15s;



  opacity: 0;



  transform: translateY(10px);



  pointer-events: none;



}



.chat-scroll-btn.is-visible {



  opacity: 1;



  transform: translateY(0);



  pointer-events: auto;



}



.chat-scroll-btn:hover { color: var(--text); box-shadow: var(--shadow-lg); }







/* ── Input Bar — Floating Bottom ── */

.chat-input-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 12px 24px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  border-top: none;
  margin-top: 4px;
}



.chat-form { display: flex; flex-direction: column; gap: 10px; max-width: 92%; margin: 0 auto; }







.chat-input-wrap {



  display: flex;



  align-items: flex-end;



  gap: 10px;



  background: var(--bg-elevated);



  border: 1.5px solid var(--border);



  border-radius: 12px;



  padding: 6px 6px 6px 16px;



  transition: border-color 0.2s, box-shadow 0.2s;



  box-shadow: 0 2px 6px oklch(0 0 0 / 0.04);



  min-height: 80px;



}



.chat-input-wrap:focus-within {



  border-color: var(--brand);



  box-shadow: 0 0 0 4px var(--brand-subtle), 0 2px 8px oklch(0.72 0.16 55 / 0.08);



}







.chat-ref-upload {



  display: flex;



  align-items: center;



  padding: 8px;



  color: var(--text-muted);



  cursor: grab;



  border-radius: 10px;



  transition: all 0.12s;



  flex-shrink: 0;



  min-width: 40px;



  min-height: 40px;



  justify-content: center;



}



.chat-ref-upload:hover { color: var(--brand); background: var(--brand-light); }







/* ── 参考图预览栏（输入框上方）— 默认隐藏，有参考图才显示 ── */

.chat-ref-bar[hidden] {
  display: none !important;
}

.chat-ref-bar {



  display: flex;



  align-items: center;



  gap: 8px;



  padding: 0 0 10px 0;



  flex-wrap: wrap;



}



.chat-ref-bar .chat-ref-grid { display: flex; gap: 8px; flex-wrap: wrap; }



.chat-ref-bar .chat-ref-grid img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1.5px solid var(--border); }



.chat-ref-bar .chat-ref-item {



  position: relative;



  cursor: grab;



  user-select: none;



}



.chat-ref-bar .chat-ref-item:active { cursor: grabbing; }



.chat-ref-bar .chat-ref-item.dragging { opacity: 0.4; }



.chat-ref-bar .chat-ref-item.drag-over { outline: 2px dashed var(--brand); outline-offset: 2px; border-radius: 10px; }



.chat-ref-bar .chat-ref-item-remove {



  position: absolute;



  top: -6px; right: -6px;



  width: 20px; height: 20px;



  border-radius: 50%;



  background: var(--danger);



  color: #fff;



  border: none;



  font-size: 11px;



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  z-index: 2;



  box-shadow: 0 2px 4px rgba(0,0,0,0.2);



}



.chat-ref-grid { display: flex; gap: 6px; flex-wrap: wrap; }



.chat-ref-grid img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }



.chat-prompt {



  flex: 1;



  border: none;



  outline: none;



  resize: none;



  font-size: 15px !important;



  background: transparent;



  color: var(--text);



  min-height: 56px !important;



  max-height: 160px;



  line-height: 1.5;



  padding: 12px 4px;



  width: 100%;



}



.chat-prompt::placeholder { color: var(--text-muted); }







/* ── Send Button (Gradient Icon) ── */



.chat-send-btn {



  display: flex;



  align-items: center;



  gap: 6px;



  padding: 8px 20px;



  border-radius: 10px;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  font-size: 14px;



  font-weight: 600;



  border: none;



  cursor: pointer;



  flex-shrink: 0;



  transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;



  min-height: 48px;



  align-self: stretch;



  box-shadow: 0 3px 10px oklch(0.72 0.16 55 / 0.25);



}



.chat-send-btn:hover {



  opacity: 0.95;



  transform: translateY(-1px);



  box-shadow: 0 6px 16px oklch(0.72 0.16 55 / 0.35);



}



.chat-send-btn:active { transform: translateY(0); }



.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }



.chat-send-cost {



  font-size: 13px;



  font-weight: 700;



  opacity: 0.9;



}







/* ── Tip Banner — 有提示才显示，无提示完全隐藏 ── */

.chat-tip[hidden] {
  display: none !important;
}

.chat-tip {



  display: flex;



  align-items: center;



  gap: 8px;



  padding: 10px 16px;



  background: var(--warning-bg);



  border: 1px solid oklch(0.72 0.16 75 / 0.2);



  border-radius: 12px;



  font-size: 12px;



  color: var(--warning);



  line-height: 1.5;



}







/* ── Options Bar — Clean, Modern ── */



.chat-options {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  align-items: center;



}



.chat-model-btn {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 8px 16px;



  border-radius: 10px;



  border: 1px solid var(--border);



  background: var(--bg-elevated);



  color: var(--text);



  font-size: 13px;



  font-weight: 500;



  cursor: pointer;



  transition: all 0.15s;



  min-height: 38px;



  box-shadow: var(--shadow-sm);



}



.chat-model-btn:hover {



  border-color: var(--brand);



  color: var(--brand);



  background: var(--brand-light);



  box-shadow: 0 2px 8px var(--brand-subtle);



}



.chat-model-btn .model-indicator {



  width: 8px; height: 8px; border-radius: 50%;



  background: var(--brand); flex-shrink: 0;



}



.chat-select {



  padding: 8px 14px;



  border-radius: 10px;



  border: 1px solid var(--border);



  background: var(--bg-elevated);



  color: var(--text-secondary);



  font-size: 13px;



  cursor: pointer;



  transition: all 0.15s;



  min-height: 38px;



  box-shadow: var(--shadow-sm);



  appearance: auto;



}



.chat-select:hover { border-color: var(--border-strong); background: var(--bg); }



.chat-select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-subtle); }



.chat-cost {



  font-size: 13px;



  color: var(--text-secondary);



  font-weight: 500;



  padding: 5px 12px;



  background: var(--bg-subtle);



  border-radius: 8px;



  white-space: nowrap;



}



.chat-size-tip { font-size: 11px; color: var(--text-muted); }



.chat-resolution-display { font-size: 12px; color: var(--text-muted); margin-left: 4px; white-space: nowrap; }







/* ── Duration Slider ── */



.chat-duration-slider {



  display: inline-flex !important;



  align-items: center;



  gap: 8px;



  padding: 4px 12px 4px 8px;



  border-radius: 10px;



  border: 1px solid var(--border);



  background: var(--bg-elevated);



  box-shadow: var(--shadow-sm);



}



.chat-duration-slider input[type="range"] {



  width: 80px;



  height: 4px;



  accent-color: var(--brand);



  cursor: pointer;



}



.chat-duration-slider span {



  font-size: 12px;



  color: var(--text-secondary);



  min-width: 32px;



}







/* ── Model Picker Modal ── */



.model-picker-overlay {



  position: fixed;



  inset: 0;



  background: oklch(0 0 0 / 0.45);



  backdrop-filter: blur(6px);



  -webkit-backdrop-filter: blur(6px);



  z-index: 500;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 16px;



}



.model-picker-overlay[hidden] { display: none; }



.model-picker-panel {



  background: var(--bg-elevated);



  border-radius: 20px;



  width: 100%;



  max-width: 680px;



  max-height: 80vh;



  overflow: hidden;



  box-shadow: 0 20px 60px oklch(0 0 0 / 0.15);



  animation: modalSlideIn 0.25s ease-out;



}



.model-picker-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 20px 24px;



  border-bottom: 1px solid var(--border);



  position: relative;



}



.model-picker-header h3 { font-size: 18px; font-weight: 700; }



.model-picker-grid {



  padding: 20px;



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 12px;



  overflow-y: auto;



  max-height: calc(80vh - 70px);



}



.model-pick-card {



  padding: 16px;



  border: 1px solid var(--border);



  border-radius: 14px;



  cursor: pointer;



  transition: all 0.15s;



  background: var(--bg);



}



.model-pick-card:hover {



  border-color: var(--brand);



  background: var(--brand-light);



  transform: translateY(-2px);



  box-shadow: 0 4px 12px oklch(0 0 0 / 0.06);



}



.model-pick-card.is-selected {



  border-color: var(--brand);



  background: var(--brand-subtle);



  box-shadow: 0 0 0 2px var(--brand-subtle);



}



.model-pick-header {



  display: flex;



  align-items: center;



  gap: 12px;



  margin-bottom: 8px;



}



.model-pick-icon {



  width: 40px;



  height: 40px;



  border-radius: 10px;



  background: linear-gradient(135deg, var(--brand-light), var(--bg-subtle));



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 14px;



  font-weight: 700;



  color: var(--brand-strong);



  flex-shrink: 0;



}



.model-pick-name { font-size: 14px; font-weight: 600; color: var(--text); display: block; }



.model-pick-cost { font-size: 11px; color: var(--text-muted); }



.model-pick-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }



.model-pick-tags { display: flex; flex-wrap: wrap; gap: 4px; }



.model-pick-tag {



  padding: 2px 8px;



  border-radius: var(--radius-full);



  font-size: 10px;



  font-weight: 600;



  background: var(--bg-subtle);



  color: var(--text-muted);



}



.model-pick-type {



  display: inline-block;



  padding: 1px 6px;



  border-radius: 4px;



  font-size: 9px;



  font-weight: 700;



  background: var(--brand-light);



  color: var(--brand);



  margin-left: 4px;



}



.model-pick-type--video {



  background: oklch(0.6 0.12 240 / 0.08);



  color: oklch(0.45 0.15 240);



}







/* ── History Creation Card ── */



.creation-history-card {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  overflow: hidden;



  margin-bottom: 4px;



  transition: box-shadow 0.2s;



}



.creation-history-card:hover {



  box-shadow: 0 4px 16px oklch(0 0 0 / 0.06);



}



.creation-prompt-bar {



  display: flex;



  align-items: flex-start;



  gap: 10px;



  padding: 14px 16px;



  border-bottom: 1px solid var(--border);



}



.prompt-avatar {



  width: 28px;



  height: 28px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 12px;



  font-weight: 700;



  flex-shrink: 0;



}



.prompt-content { flex: 1; min-width: 0; }



.prompt-text {



  font-size: 12px;



  font-weight: 400;



  color: var(--text);



  white-space: normal;



  word-break: break-word;



  line-height: 1.5;



}



/* 提示词复制按钮行 */
.prompt-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.prompt-copy-btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.6;
}

.prompt-copy-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 参考图缩略图网格（提示词上方） */
.prompt-ref-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.prompt-ref-item {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-subtle);
}
.prompt-ref-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prompt-meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }



.meta-tag {



  font-size: 11px;



  color: var(--text-muted);



  background: var(--bg-subtle);



  padding: 2px 8px;



  border-radius: var(--radius-full);



  display: inline-flex;



  align-items: center;



  gap: 3px;



}



.meta-tag svg { width: 11px; height: 11px; }



.creation-media-grid { padding: 0; }



.creation-media {



  position: relative;



  aspect-ratio: 1;



  overflow: hidden;



  background: var(--bg-subtle);



}
/* 图片媒体：还原自然宽高比，限制最大高度防止竖图超出屏幕 */
.creation-media.image {



  aspect-ratio: auto;



  max-height: 70vh;



}
.creation-media.image img {



  height: auto;



  max-height: 70vh;



  object-fit: contain;



}
/* 失败任务卡片 */
.creation-media--failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 20px;
  background: var(--bg-subtle);
  border-radius: 12px;
  border: 1px dashed var(--border-color);
}
.creation-media--failed .failed-reason {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  word-break: break-all;
}
.meta-tag.failed {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}



/* 历史记录中的图片固定170px */



.creation-history-card .creation-media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

/* 图片+按钮单元：垂直排列 */
.creation-history-card .creation-media-unit {
  display: flex;
  flex-direction: column;
}

/* 历史记录图片：去掉强制正方形，按原始比例显示 */
.creation-history-card .creation-media { width: 100%; aspect-ratio: unset; }
.creation-history-card .creation-media img,
.creation-history-card .creation-media video {
  width: 100%;
  height: auto;
  object-fit: contain;
}



.creation-history-card .creation-media img,



.creation-history-card .creation-media video {



  width: 100%; height: 100%; object-fit: contain; display: block;



}



  position: relative;



  aspect-ratio: 1;



  overflow: hidden;



  background: var(--bg-subtle);



}



.creation-media img,



.creation-media video {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



}



.creation-media .img-publish-overlay {



  position: absolute;



  inset: 0;



  display: flex;



  align-items: flex-end;



  justify-content: center;



  gap: 8px;



  padding: 12px;



  background: linear-gradient(180deg, transparent 50%, oklch(0 0 0 / 0.40) 100%);



  opacity: 0;



  transition: opacity 0.2s;



}



.creation-media:hover .img-publish-overlay { opacity: 1; }



.video-badge {



  position: absolute;



  top: 10px;



  left: 10px;



  padding: 3px 8px;



  border-radius: var(--radius-full);



  background: oklch(0 0 0 / 0.55);



  backdrop-filter: blur(4px);



  color: #fff;



  font-size: 10px;



  font-weight: 700;



}



.creation-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
}



.creation-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s;
}



.creation-action:hover {



  border-color: var(--brand);



  color: var(--brand);



  background: var(--brand-light);



}



.creation-action svg { width: 12px; height: 12px; }







/* ── Publish Modal ── */



.publish-modal-overlay {



  position: fixed;



  inset: 0;



  background: oklch(0 0 0 / 0.45);



  backdrop-filter: blur(6px);



  z-index: 600;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 16px;



}



.publish-modal {



  background: var(--bg-elevated);



  border-radius: 20px;



  width: 100%;



  max-width: 480px;



  max-height: 90vh;



  overflow-y: auto;



  padding: 28px 24px;



  box-shadow: 0 20px 60px oklch(0 0 0 / 0.15);



  position: relative;



  animation: modalSlideIn 0.25s ease-out;



}



.publish-modal-close {



  position: absolute;



  top: 16px;



  right: 16px;



  width: 32px;



  height: 32px;



  border-radius: 50%;



  border: none;



  background: var(--bg-subtle);



  color: var(--text-muted);



  font-size: 18px;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  transition: all 0.12s;



}



.publish-modal-close:hover { background: var(--border); color: var(--text); }



.publish-modal-header { margin-bottom: 20px; }



.publish-modal-header h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }



.publish-modal-header p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }



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



.pub-field { display: flex; flex-direction: column; gap: 6px; }



.pub-field label { font-size: 13px; font-weight: 600; color: var(--text); }



.pub-field input,



.pub-field select,



.pub-field textarea {



  width: 100%;



  padding: 10px 14px;



  border-radius: 10px;



  border: 1px solid var(--border);



  font-size: 14px;



  background: var(--bg);



  color: var(--text);



  outline: none;



  transition: border-color 0.15s;



}



.pub-field input:focus,



.pub-field select:focus,



.pub-field textarea:focus { border-color: var(--brand); }



.pub-submit-btn {



  width: 100%;



  padding: 12px;



  border-radius: 12px;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  font-size: 15px;



  font-weight: 600;



  border: none;



  cursor: pointer;



  transition: opacity 0.15s, transform 0.1s;



}



.pub-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }



.pub-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }







/* ═══════════════════════════════════════



   HERO BANNER (from feed.js renderHero)



   ═══════════════════════════════════════ */



.hero-card {



  position: relative;



  overflow: hidden;



  border-radius: var(--radius-lg);



  padding: 28px 24px;



  min-height: 200px;



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  background: linear-gradient(135deg, var(--brand-subtle), var(--bg-card));



  border: 1px solid var(--border);



  text-decoration: none;



  color: inherit;



  transition: transform 0.2s, box-shadow 0.2s;



}



.hero-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }



.hero-card.large { grid-column: 1 / -1; min-height: 280px; }



.hero-card.normal { min-height: 180px; }



.hero-tag {



  display: inline-block;



  padding: 4px 10px;



  border-radius: var(--radius-full);



  background: var(--brand);



  color: #fff;



  font-size: 11px;



  font-weight: 600;



  margin-bottom: 8px;



  align-self: flex-start;



}



.hero-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; color: var(--text); }



.hero-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }



.hero-btn {



  display: inline-flex;



  align-items: center;



  gap: 4px;



  padding: 6px 16px;



  border-radius: var(--radius-full);



  background: var(--bg-elevated);



  color: var(--text);



  font-size: 12px;



  font-weight: 600;



  border: 1px solid var(--border);



  align-self: flex-start;



}







/* ═══════════════════════════════════════



   FILTER PILLS / TAG (from feed.js renderFilters)



   ═══════════════════════════════════════ */



.filter-pill {



  display: inline-flex;



  align-items: center;



  padding: 6px 14px;



  border-radius: var(--radius-full);



  border: 1px solid var(--border);



  background: transparent;



  color: var(--text-secondary);



  font-size: 12px;



  font-weight: 500;



  cursor: pointer;



  transition: all 0.12s;



  white-space: nowrap;



}



.filter-pill:hover { border-color: var(--brand); color: var(--text); }



.filter-pill.active {



  background: var(--brand);



  color: #fff;



  border-color: var(--brand);



}



.tag-expand-btn {



  display: inline-flex;



  align-items: center;



  gap: 4px;



  padding: 6px 12px;



  border: none;



  background: transparent;



  color: var(--text-muted);



  font-size: 12px;



  cursor: pointer;



  transition: color 0.12s;



}



.tag-expand-btn:hover { color: var(--brand); }



.tag-expand-text { font-weight: 500; }



.tag-expand-icon { transition: transform 0.2s ease; }







/* ── Profile Menu Toggle (mobile hamburger) ── */



.profile-menu-toggle {



  display: none;



  position: fixed;



  bottom: 72px;



  right: 16px;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: var(--brand);



  color: #fff;



  font-size: 20px;



  border: none;



  cursor: pointer;



  z-index: 90;



  box-shadow: var(--shadow-md);



  align-items: center;



  justify-content: center;



}



@media (max-width: 900px) {



  .profile-menu-toggle { display: flex; }



}







/* ═══════════════════════════════════════



   PROFILE PAGE — COMPACT CARD DESIGN



   ═══════════════════════════════════════ */







/* ── User Card (top area) ── */



.pc-user-card {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-xl);



  padding: 24px;



  margin-bottom: 16px;



}



.pc-user-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }



.pc-avatar { width: 56px !important; height: 56px !important; font-size: 22px !important; margin: 0 !important; flex-shrink: 0; }



.pc-user-info { flex: 1; min-width: 0; }



.pc-user-name { font-size: 20px; font-weight: 700; margin: 0 0 2px; color: var(--text); }



.pc-user-meta { font-size: 12px; color: var(--text-muted); margin: 0; }



.pc-dot { margin: 0 4px; color: var(--border); }







/* ── Points Row ── */



.pc-points-row {



  display: flex;



  gap: 8px;



  background: var(--bg);



  border-radius: var(--radius-lg);



  padding: 12px 16px;



}



.pc-points-item {



  flex: 1;



  display: flex;



  align-items: center;



  gap: 4px;



  font-size: 13px;



  color: var(--text-secondary);



}



.pc-points-icon { font-size: 16px; line-height: 1; }



.pc-points-label { font-size: 11px; color: var(--text-muted); }



.pc-points-item strong { font-size: 15px; font-weight: 700; color: var(--text); margin-left: auto; }



.pc-points-item small { font-size: 10px; color: var(--text-muted); display: none; }







/* ── Feature Card Grid ── */



.pc-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 10px;



  margin-bottom: 16px;



}



.pc-card {



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  gap: 6px;



  padding: 18px 8px;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  cursor: pointer;



  font-size: 13px;



  font-weight: 500;



  color: var(--text);



  text-decoration: none;



  transition: all 0.12s;



  text-align: center;



  min-height: 80px;



}



.pc-card:hover {



  transform: translateY(-2px);



  box-shadow: var(--shadow-sm);



  border-color: var(--brand);



}



.pc-card-icon { font-size: 26px; line-height: 1; }



.pc-card-label { font-size: 13px; font-weight: 500; }







/* ── Panel Container (opens when card clicked) ── */



.pc-panel {



  background: var(--bg-elevated);



  border: 1px solid var(--brand-light);



  border-radius: var(--radius-xl);



  padding: 20px;



  margin-bottom: 16px;



  animation: pcFadeIn 0.2s ease;



}



@keyframes pcFadeIn {



  from { opacity: 0; transform: translateY(-6px); }



  to { opacity: 1; transform: translateY(0); }



}



.pc-panel[hidden] { display: none; }



.pc-pane[hidden] { display: none; }



.pc-pane-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 16px;



  padding-bottom: 12px;



  border-bottom: 1px solid var(--border);



}



.pc-pane-header strong { font-size: 16px; color: var(--text); }



.pc-pane-close {



  background: none; border: none;



  font-size: 18px; cursor: pointer;



  color: var(--text-muted); padding: 2px 6px;



  border-radius: 6px;



}



.pc-pane-close:hover { background: var(--bg-secondary); color: var(--text); }



.pc-pane-desc { font-size: 13px; color: var(--text-muted); margin: -8px 0 16px; }







/* ── Form (inside panel) ── */



.pc-form { max-width: 100%; }



.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }



.pf-field { margin-bottom: 12px; }



.pf-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }



.pf-field input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; background: var(--bg); color: var(--text); outline: none; box-sizing: border-box; }



.pf-field input:focus { border-color: var(--brand); }



.pf-field input:disabled { background: var(--bg-secondary); color: var(--text-muted); }



.pf-avatar-row { display: flex; gap: 12px; align-items: center; }



.pf-avatar-preview { width: 48px !important; height: 48px !important; font-size: 18px !important; margin-bottom: 0 !important; }



.pf-upload-btn { cursor: pointer; font-size: 12px; padding: 8px 14px; }



.pf-avatar-status { font-size: 12px; color: var(--text-muted); }



.pf-submit { margin-top: 4px; }



.pf-status { font-size: 13px; margin-top: 10px; }







/* ── Redeem / Password (kept from old design) ── */



.redeem-input-row { display: flex; gap: 10px; max-width: 440px; }



.redeem-input-row input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; letter-spacing: 2px; font-family: var(--font-mono); background: var(--bg); color: var(--text); outline: none; }



.redeem-input-row input:focus { border-color: var(--brand); }



.redeem-btn { padding: 10px 24px; background: #22c55e; color: #fff; border: none; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; }



.redeem-btn:hover { opacity: 0.85; }



.redeem-btn:disabled { opacity: 0.5; cursor: not-allowed; }



.redeem-status, .pw-status { font-size: 13px; margin-top: 10px; }



.pw-form { max-width: 440px; }



.pw-field { margin-bottom: 14px; }



.pw-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }



.pw-field input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; background: var(--bg); color: var(--text); outline: none; box-sizing: border-box; }



.pw-field input:focus { border-color: var(--brand); }



.pw-submit { margin-top: 4px; }







/* ── Dash Grid (inside 积分资产 panel) ── */



.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }



.dash-card { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 12px; display: flex; align-items: flex-start; gap: 10px; }



.dash-card-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }



.dash-card-body { flex: 1; min-width: 0; }



.dash-card-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }



.dash-card-value { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1.2; }



.dash-card-value--sm { font-size: 18px; }



.dash-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }



.dash-card--member { background: linear-gradient(135deg, var(--bg), oklch(0.95 0.05 85 / 0.3)); border-color: oklch(0.9 0.08 85 / 0.5); }



.dash-card-cta { font-size: 11px; font-weight: 600; color: var(--brand); text-decoration: none; margin-top: 4px; display: inline-block; }







/* ── Monthly Stats ── */



.month-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }



.month-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; text-align: center; }



.month-stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }



.month-stat-value { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }



.month-stat-value--income { color: #22c55e; }



.month-stat-value--expense { color: #ef4444; }



.month-stat-sub { font-size: 11px; color: var(--text-muted); display: block; margin-top: 2px; }







/* ── Filter Tabs & Logs ── */



.point-filter-tabs { display: flex; gap: 8px; margin: 12px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); }



.logs-container { min-height: 120px; }



.logs-list { display: flex; flex-direction: column; gap: 8px; }



.logs-empty { text-align: center; padding: 30px; color: var(--text-muted); font-size: 13px; }



.logs-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }



.logs-page-btn { padding: 6px 14px; border: 1px solid var(--border); background: var(--bg-elevated); border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text); }



.logs-page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }



.logs-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }



.logs-page-info { font-size: 12px; color: var(--text-muted); }







/* Logs */



.point-filter-tabs { display:flex; gap:8px; margin:16px 0; padding-bottom:12px; border-bottom:1px solid var(--border); }



.logs-container { min-height:200px; }



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



.logs-empty { text-align:center; padding:40px; color:var(--text-muted); }



.logs-pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:24px; padding-top:16px; border-top:1px solid var(--border); }



.logs-page-btn { padding:8px 16px; border:1px solid var(--border); background:var(--bg-elevated); border-radius:8px; cursor:pointer; font-size:13px; color:var(--text); }



.logs-page-btn:hover:not(:disabled) { border-color:var(--brand); color:var(--brand); }



.logs-page-btn:disabled { opacity:0.4; cursor:not-allowed; }



.logs-page-info { font-size:13px; color:var(--text-muted); }







/* ── Point Log Filter Tabs (profile.php) ── */



.filter-tab {



  padding: 8px 16px;



  border: none;



  background: transparent;



  border-radius: 8px;



  cursor: pointer;



  font-size: 14px;



  transition: all 0.12s;



  color: var(--text-muted);



}



.filter-tab:hover { color: var(--text); }



.filter-tab.active {



  background: var(--brand-light) !important;



  color: var(--brand) !important;



  font-weight: 600;



}







/* ═══════════════════════════════════════



   PROFILE PAGE



   ═══════════════════════════════════════ */



.profile-layout-wrapper {



  display: flex;



  gap: 24px;



  padding: 24px 32px;



  max-width: 1400px;



  margin: 0 auto;



  width: 100%;



}



.profile-sidebar-wrapper { flex: 0 0 var(--sidebar-width); }



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







.profile-card {



  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));



  border: 1px solid var(--border);



  border-radius: var(--radius-xl);



  padding: 28px;



  text-align: center;



  margin-bottom: 20px;



}



.profile-avatar {



  width: 72px;



  height: 72px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  font-size: 28px;



  font-weight: 700;



  margin-bottom: 12px;



}



.profile-name { font-size: 22px; margin-bottom: 4px; }



.profile-meta { font-size: 13px; color: var(--text-muted); }







.profile-stats {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));



  gap: 12px;



  margin-bottom: 20px;



}



.stat-card {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 16px;



  transition: transform 0.15s, box-shadow 0.15s;



}



.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }



.stat-card--action { cursor: pointer; display: block; text-decoration: none; color: inherit; }



.stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }



.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }



.stat-sub { font-size: 11px; color: var(--text-muted); display: block; margin-top: 2px; }







.profile-section {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-xl);



  padding: 24px;



  margin-bottom: 20px;



}



.detail-section-title { font-size: 17px; margin-bottom: 16px; color: var(--text); }







/* ═══════════════════════════════════════



   FOOTER



   ═══════════════════════════════════════ */



.site-footer {



  margin-top: auto;



  border-top: 1px solid var(--border);



  background: var(--bg);



}



.footer-main {



  max-width: 1280px;



  margin: 0 auto;



  padding: 48px 32px 32px;



}



.footer-main-inner {



  display: grid;



  grid-template-columns: 1.8fr 1fr 1fr 1fr;



  gap: 32px;



}



.footer-brand { max-width: 360px; }



.footer-logo {



  display: flex;



  align-items: center;



  gap: 10px;



  margin-bottom: 12px;



}



.footer-logo-text { font-size: 20px; font-weight: 800; }



.footer-brand-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }



.footer-contact-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }



.footer-contact-item { display: flex; gap: 8px; font-size: 13px; }



.footer-contact-label { color: var(--text-muted); flex-shrink: 0; }



.footer-contact-value { color: var(--text-secondary); }



.footer-social-row { display: flex; gap: 10px; }



.footer-social-btn {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 8px 14px;



  border-radius: var(--radius-full);



  border: 1px solid var(--border);



  color: var(--text-secondary);



  font-size: 12px;



  text-decoration: none;



  transition: all 0.12s;



}



.footer-social-btn:hover { border-color: var(--brand); color: var(--brand); }



.footer-column-title {



  font-size: 13px;



  font-weight: 600;



  margin-bottom: 16px;



  color: var(--text);



}



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



.footer-column-list li a { font-size: 13px; color: var(--text-secondary); transition: color 0.12s; }



.footer-column-list li a:hover { color: var(--brand); }







.footer-bottom {



  border-top: 1px solid var(--border);



  padding: 16px 32px;



}



.footer-bottom-inner {



  max-width: 1280px;



  margin: 0 auto;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 16px;



}



.footer-bottom-logo {



  display: flex;



  align-items: center;



  gap: 6px;



  font-size: 13px;



  font-weight: 600;



  color: var(--text-muted);



}



.footer-copyright { font-size: 12px; color: var(--text-muted); }



.footer-legal { display: flex; align-items: center; gap: 12px; }



.footer-legal a { font-size: 12px; color: var(--text-muted); transition: color 0.12s; }



.footer-legal a:hover { color: var(--brand); }



.footer-legal-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }







/* ═══════════════════════════════════════



   SKELETON (placeholder while loading)



   ═══════════════════════════════════════ */



@keyframes skeletonPulse {



  0% { opacity: 0.6; }



  50% { opacity: 1; }



  100% { opacity: 0.6; }



}



.skeleton {



  background: var(--bg-subtle);



  border-radius: var(--radius-sm);



  animation: skeletonPulse 1.8s ease-in-out infinite;



}



.skeleton--text { height: 14px; width: 100%; margin-bottom: 8px; }



.skeleton--title { height: 24px; width: 60%; margin-bottom: 12px; }



.skeleton--avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px; }



.skeleton--card { height: 280px; width: 100%; border-radius: var(--radius-lg); }







/* ═══════════════════════════════════════



   ANIMATIONS



   ═══════════════════════════════════════ */



@keyframes modalSlideIn {



  from { opacity: 0; transform: translateY(20px) scale(0.97); }



  to { opacity: 1; transform: translateY(0) scale(1); }



}



@keyframes msgFadeIn {



  from { opacity: 0; transform: translateY(8px); }



  to { opacity: 1; transform: translateY(0); }



}



@keyframes fadeIn {



  from { opacity: 0; }



  to { opacity: 1; }



}



@keyframes slideDown {



  from { opacity: 0; transform: translateY(-20px); }



  to { opacity: 1; transform: translateY(0); }



}







/* ═══════════════════════════════════════



   MISC UTILITIES



   ═══════════════════════════════════════ */



.is-hidden { display: none !important; }







/* ═══════════════════════════════════════



   ACCESSIBILITY



   ═══════════════════════════════════════ */



:focus-visible {



  outline: 2px solid var(--brand);



  outline-offset: 2px;



}



button:focus:not(:focus-visible),



a:focus:not(:focus-visible) { outline: none; }



.sr-only {



  position: absolute;



  width: 1px; height: 1px;



  padding: 0; margin: -1px;



  overflow: hidden;



  clip: rect(0,0,0,0);



  border: 0;



}







/* ═══════════════════════════════════════



   COMPONENT LIBRARY



   ═══════════════════════════════════════ */







/* ── Button States ── */



.primary-button:disabled,



.primary-button.is-loading,



.submit-button:disabled,



.submit-button.is-loading {



  opacity: 0.5;



  cursor: not-allowed;



  pointer-events: none;



}



.primary-button.is-loading,



.submit-button.is-loading {



  position: relative;



  color: transparent !important;



}



.primary-button.is-loading::after,



.submit-button.is-loading::after {



  content: '';



  position: absolute;



  width: 18px; height: 18px;



  border: 2px solid rgba(255,255,255,0.3);



  border-top-color: #fff;



  border-radius: 50%;



  animation: spin 0.6s linear infinite;



  top: 50%; left: 50%;



  margin: -9px 0 0 -9px;



}



.ghost-button:disabled { opacity: 0.4; cursor: not-allowed; }



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








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

/* min touch targets */



.primary-button,



.ghost-button,



.submit-button,



.filter-pill,



.mobile-nav-item,



.nav-actions button,



.nav-actions a {



  min-height: 44px;



  min-width: 44px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



}



.close-button { min-width: 32px; min-height: 32px; }







/* ── Form Validation ── */



.field.has-error input,



.field.has-error select,



.field.has-error textarea {



  border-color: var(--danger);



  box-shadow: 0 0 0 3px oklch(0.6 0.2 25 / 0.15);



}



.field .error-message {



  font-size: 12px;



  color: var(--danger);



  margin-top: 2px;



  display: none;



}



.field.has-error .error-message { display: block; }



.field .helper-text {



  font-size: 11px;



  color: var(--text-muted);



  margin-top: 2px;



}







/* ── Toast Notification ── */



.toast-container {



  position: fixed;



  top: 16px;



  left: 50%;



  transform: translateX(-50%);



  z-index: 9999;



  display: flex;



  flex-direction: column;



  gap: 8px;



  pointer-events: none;



}



.toast {



  pointer-events: auto;



  background: var(--bg-elevated);



  border-radius: var(--radius-lg);



  box-shadow: var(--shadow-lg);



  padding: 14px 20px;



  min-width: 280px;



  max-width: 420px;



  display: flex;



  align-items: center;



  gap: 10px;



  border-left: 4px solid var(--border);



  animation: slideDown 0.3s ease-out;



  font-size: 14px;



  color: var(--text);



}



.toast--success { border-left-color: var(--success); }



.toast--error { border-left-color: var(--danger); }



.toast--warning { border-left-color: var(--warning); }



.toast--info { border-left-color: var(--info); }



.toast-leaving { opacity: 0; transition: opacity 0.3s ease-out; }







/* ── Badge Component ── */



.badge {



  display: inline-flex;



  align-items: center;



  padding: 2px 8px;



  border-radius: var(--radius-full);



  font-size: 11px;



  font-weight: 600;



  letter-spacing: 0.02em;



}



.badge--brand { background: var(--brand); color: #fff; }



.badge--success { background: var(--success-bg); color: var(--success); }



.badge--danger { background: var(--danger-bg); color: var(--danger); }



.badge--warning { background: var(--warning-bg); color: var(--warning); }



.badge--info { background: var(--info-bg); color: var(--info); }



.badge--outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }







/* ── Card Component ── */



.component-card {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  overflow: hidden;



  transition: transform 0.2s ease, box-shadow 0.2s ease;



}



.component-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }



.component-card--bordered { border-color: var(--border-strong); }



.component-card--highlight {



  border-color: var(--brand-subtle);



  background: linear-gradient(135deg, var(--brand-light), var(--bg-elevated));



}



.component-card__body { padding: var(--space-4); }



.component-card__header {



  padding: var(--space-4);



  border-bottom: 1px solid var(--border);



  font-weight: 600;



}



.component-card__footer {



  padding: var(--space-3) var(--space-4);



  border-top: 1px solid var(--border);



  font-size: 13px;



  color: var(--text-muted);



}







/* ── Tabs Component ── */



.component-tabs {



  display: flex;



  gap: 4px;



  border-bottom: 1px solid var(--border);



  margin-bottom: var(--space-4);



}



.component-tab {



  padding: 10px 18px;



  border: none;



  background: none;



  font-size: 14px;



  font-weight: 500;



  color: var(--text-muted);



  cursor: pointer;



  border-bottom: 2px solid transparent;



  margin-bottom: -1px;



  transition: all 0.12s;



  min-height: 44px;



}



.component-tab:hover { color: var(--text); }



.component-tab.is-active,



.component-tab.active { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }







/* ── Table Component ── */



.component-table-wrap {



  overflow-x: auto;



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



}



.component-table {



  width: 100%;



  border-collapse: collapse;



  font-size: 14px;



}



.component-table th {



  background: var(--bg-subtle);



  padding: 12px 16px;



  text-align: left;



  font-weight: 600;



  color: var(--text);



  border-bottom: 2px solid var(--border);



  white-space: nowrap;



}



.component-table td {



  padding: 12px 16px;



  color: var(--text-secondary);



  border-bottom: 1px solid var(--border);



}



.component-table tr:last-child td { border-bottom: none; }



.component-table tr:hover td { background: var(--brand-light); }



.component-table--striped tr:nth-child(even) td { background: var(--bg-subtle); }







/* ── Pagination Component ── */



.component-pagination {



  display: flex;



  justify-content: center;



  align-items: center;



  gap: var(--space-4);



  margin-top: var(--space-6);



  padding-top: var(--space-4);



  border-top: 1px solid var(--border);



}



.component-pagination button {



  padding: 10px 20px;



  border: 1px solid var(--border);



  background: var(--bg-elevated);



  border-radius: var(--radius-md);



  cursor: pointer;



  font-size: 14px;



  color: var(--text-secondary);



  min-height: 44px;



  transition: all 0.12s;



}



.component-pagination button:hover:not(:disabled) {



  background: var(--bg-subtle);



  border-color: var(--border-strong);



}



.component-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }



.component-pagination .page-info {



  font-size: 14px;



  color: var(--text-muted);



}







/* ── Empty State Component ── */



.component-empty {



  grid-column: 1 / -1;



  text-align: center;



  padding: var(--space-12) var(--space-5);



  color: var(--text-muted);



  font-size: 14px;



  line-height: 1.8;



}



.component-empty a {



  display: inline-block;



  margin-top: var(--space-3);



  padding: 10px 24px;



  border-radius: var(--radius-md);



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  color: #fff;



  font-weight: 600;



  text-decoration: none;



  min-height: 44px;



}







/* ═══════════════════════════════════════



   INLINE STYLE MIGRATIONS (from PHP files)



   ═══════════════════════════════════════ */







/* ── help.php — 帮助中心 ── */



.help-page {



  max-width: 860px; margin: 0 auto; padding: 40px 20px;



  background: linear-gradient(180deg, #fbf7ef 0%, #f3ede2 100%);



  min-height: calc(100vh - 200px);



}



.help-page h1 { font-size: 32px; font-weight: 600; color: #1d1a16; margin-bottom: 8px; text-align: center; }



.help-page .page-desc { text-align: center; color: #8a8175; font-size: 15px; margin-bottom: 40px; }



.help-search { max-width: 480px; margin: 0 auto 48px; position: relative; }



.help-search input {



  width: 100%; padding: 14px 20px 14px 48px; border-radius: 12px;



  border: 1px solid #e5e0d5; background: rgba(255,250,241,0.95);



  font-size: 15px; color: #1d1a16; outline: none;



  transition: border-color 0.2s, box-shadow 0.2s;



}



.help-search input::placeholder { color: #b5ad9e; }



.help-search input:focus { border-color: #ff9f0a; box-shadow: 0 0 0 3px rgba(255,159,10,0.15); }



.help-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #b5ad9e; }



.help-shortcuts { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 48px; }



.help-shortcut {



  background: rgba(255,250,241,0.95); border-radius: 16px; padding: 24px 12px;



  text-align: center; border: 1px solid rgba(255,159,10,0.1);



  transition: all 0.2s; text-decoration: none; display: block;



}



.help-shortcut:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,159,10,0.1); border-color: rgba(255,159,10,0.3); }



.help-shortcut-icon {



  width: 48px; height: 48px; margin: 0 auto 12px;



  background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%);



  border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;



}



.help-shortcut-title { font-size: 14px; font-weight: 600; color: #1d1a16; margin-bottom: 4px; }



.help-shortcut-desc { font-size: 12px; color: #8a8175; }



.help-section { margin-bottom: 48px; }



.help-section-title {



  font-size: 20px; font-weight: 600; color: #1d1a16;



  margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid #ff9f0a;



}



.faq-item { background: rgba(255,250,241,0.95); border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(255,159,10,0.08); overflow: hidden; transition: all 0.2s; }



.faq-item:hover { border-color: rgba(255,159,10,0.2); }



.faq-question { padding: 18px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; }



.faq-question-text { font-size: 15px; font-weight: 600; color: #1d1a16; flex: 1; }



.faq-question-icon { color: #ff9f0a; font-size: 18px; transition: transform 0.3s; flex-shrink: 0; }



.faq-item.active .faq-question-icon { transform: rotate(45deg); }



.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }



.faq-item.active .faq-answer { max-height: 500px; }



.faq-answer-inner { padding: 0 20px 18px; font-size: 14px; line-height: 1.8; color: #555; }



.faq-answer-inner ul { margin: 8px 0; padding-left: 20px; }



.faq-answer-inner li { margin-bottom: 4px; }



.faq-answer-inner strong { color: #1d1a16; }



.faq-answer-inner a { color: #ff9f0a; text-decoration: none; }



.faq-answer-inner a:hover { text-decoration: underline; }



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



.guide-step { background: rgba(255,250,241,0.95); border-radius: 16px; padding: 24px 20px; border: 1px solid rgba(255,159,10,0.08); text-align: center; }



.guide-step-number { width: 36px; height: 36px; margin: 0 auto 14px; background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: white; }



.guide-step-title { font-size: 15px; font-weight: 600; color: #1d1a16; margin-bottom: 8px; }



.guide-step-desc { font-size: 13px; line-height: 1.6; color: #8a8175; }



.contact-section { background: rgba(255,159,10,0.06); border-radius: 16px; padding: 32px; border: 1px solid rgba(255,159,10,0.15); }



.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 24px; }



.contact-card { background: rgba(255,250,241,0.95); border-radius: 12px; padding: 20px; text-align: center; border: 1px solid rgba(255,159,10,0.1); }



.contact-card-icon { font-size: 28px; margin-bottom: 10px; }



.contact-card-title { font-size: 14px; font-weight: 600; color: #1d1a16; margin-bottom: 6px; }



.contact-card-value { font-size: 13px; color: #8a8175; word-break: break-all; }



.contact-card-value a { color: #ff9f0a; text-decoration: none; }



.contact-card-value a:hover { text-decoration: underline; }



.faq-item[data-hidden="true"] { display: none; }



@media (max-width: 768px) {



  .help-shortcuts { grid-template-columns: repeat(2,1fr); }



  .guide-steps { grid-template-columns: 1fr; }



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



  .help-page h1 { font-size: 24px; }



}







/* ── referral.php — 推广中心 ── */



.referral-page { max-width: 900px; margin: 0 auto; padding: 24px 16px 100px; }



.referral-header { background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); border-radius: 20px; padding: 28px 24px; color: white; margin-bottom: 24px; }



.referral-header-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }



.referral-header-subtitle { font-size: 14px; opacity: 0.9; }



.earnings-card { background: rgba(255,250,241,0.95); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(29,26,22,0.06); }



.earnings-title { font-size: 14px; color: #8a8175; margin-bottom: 8px; }



.earnings-amount { font-size: 36px; font-weight: 700; color: #1d1a16; margin-bottom: 16px; }



.earnings-amount span { font-size: 16px; font-weight: 500; color: #8a8175; }



.earnings-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }



.earnings-stat { text-align: center; padding: 12px; background: white; border-radius: 12px; }



.earnings-stat-value { font-size: 18px; font-weight: 700; color: #1d1a16; margin-bottom: 4px; }



.earnings-stat-value.pending { color: #ff9f0a; }



.earnings-stat-value.available { color: #34c759; }



.earnings-stat-value.withdrawn { color: #8a8175; }



.earnings-stat-label { font-size: 12px; color: #8a8175; }



.withdraw-btn { width: 100%; padding: 14px; background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); color: white; font-size: 15px; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; margin-top: 16px; transition: all 0.2s; }



.withdraw-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,159,10,0.3); }



.withdraw-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }



.link-card { background: rgba(255,250,241,0.95); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(29,26,22,0.06); }



.link-card-title { font-size: 16px; font-weight: 600; color: #1d1a16; margin-bottom: 16px; }



.link-box { display: flex; gap: 10px; margin-bottom: 16px; }



.link-input { flex: 1; padding: 12px 16px; border: 1px solid #e5e0d5; border-radius: 10px; font-size: 14px; background: white; color: #1d1a16; }



.link-copy-btn { padding: 12px 20px; background: #1d1a16; color: white; font-size: 14px; font-weight: 500; border: none; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }



.link-copy-btn:hover { background: #333; }



.link-copy-btn.copied { background: #34c759; }



.link-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }



.link-stat { text-align: center; padding: 12px 8px; background: white; border-radius: 10px; }



.link-stat-value { font-size: 18px; font-weight: 700; color: #1d1a16; margin-bottom: 4px; }



.link-stat-label { font-size: 11px; color: #8a8175; }



.share-btns { display: flex; gap: 10px; margin-top: 16px; }



.share-btn { flex: 1; padding: 12px; background: white; border: 1px solid #e5e0d5; border-radius: 10px; font-size: 14px; color: #1d1a16; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; }



.share-btn:hover { background: #f5f0e8; border-color: #ff9f0a; }



.rules-card { background: rgba(255,250,241,0.95); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(29,26,22,0.06); }



.rules-title { font-size: 16px; font-weight: 600; color: #1d1a16; margin-bottom: 16px; }



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



.rules-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0ebe0; }



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



.rules-icon { width: 36px; height: 36px; background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }



.rules-content { flex: 1; }



.rules-item-title { font-size: 14px; font-weight: 600; color: #1d1a16; margin-bottom: 2px; }



.rules-item-desc { font-size: 13px; color: #8a8175; }



.section-card { background: rgba(255,250,241,0.95); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(29,26,22,0.06); }



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



.section-more { font-size: 13px; color: #ff9f0a; text-decoration: none; }



.section-more:hover { text-decoration: underline; }



.invitee-list, .commission-list { display: flex; flex-direction: column; gap: 12px; }



.invitee-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: white; border-radius: 12px; }



.invitee-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f0f0f0; }



.invitee-avatar-placeholder { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: white; }



.invitee-info { flex: 1; }



.invitee-name { font-size: 14px; font-weight: 500; color: #1d1a16; margin-bottom: 2px; }



.invitee-time { font-size: 12px; color: #8a8175; }



.invitee-reward { text-align: right; }



.invitee-reward-value { font-size: 14px; font-weight: 600; color: #34c759; }



.invitee-reward-label { font-size: 11px; color: #8a8175; }



.commission-item { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: white; border-radius: 12px; }



.commission-info { display: flex; align-items: center; gap: 12px; }



.commission-icon { width: 40px; height: 40px; background: #f5f0e8; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }



.commission-detail { flex: 1; }



.commission-type { font-size: 14px; font-weight: 500; color: #1d1a16; margin-bottom: 2px; }



.commission-from { font-size: 12px; color: #8a8175; }



.commission-amount { text-align: right; }



.commission-value { font-size: 16px; font-weight: 600; color: #34c759; }



.commission-value.pending { color: #ff9f0a; }



.commission-value.paid { color: #8a8175; }



.commission-status { font-size: 11px; color: #8a8175; }



@media (max-width: 480px) {



  .referral-page { padding: 16px 12px 100px; }



  .earnings-stats { grid-template-columns: 1fr; }



  .link-stats { grid-template-columns: repeat(2,1fr); }



  .share-btns { flex-direction: column; }



}







/* ── api-docs.php — API文档 ── */



.api-docs-container { display: flex; min-height: calc(100vh - 76px); background: #fafafa; margin-top: 76px; }



.api-sidebar { width: 260px; background: #fff; border-right: 1px solid #e5e5e5; position: fixed; top: 76px; left: 0; bottom: 0; overflow-y: auto; padding: 24px 0; z-index: 10; }



.api-sidebar-header { padding: 0 20px 20px; border-bottom: 1px solid #f0f0f0; margin-bottom: 16px; }



.api-sidebar-title { font-size: 18px; font-weight: 600; color: #1d1d1f; margin-bottom: 4px; }



.api-sidebar-version { font-size: 12px; color: #86868b; }



.api-nav-group { margin-bottom: 8px; }



.api-nav-title { padding: 8px 20px; font-size: 11px; font-weight: 600; color: #86868b; text-transform: uppercase; letter-spacing: 0.5px; }



.api-nav-list { list-style: none; padding: 0; margin: 0; }



.api-nav-item a { display: block; padding: 8px 20px 8px 28px; font-size: 13px; color: #424245; text-decoration: none; border-left: 3px solid transparent; transition: all 0.2s; }



.api-nav-item a:hover { color: #ff9f0a; background: rgba(255,159,10,0.05); }



.api-nav-item.active a { color: #ff9f0a; border-left-color: #ff9f0a; background: rgba(255,159,10,0.08); font-weight: 500; }



.api-content { flex: 1; margin-left: 260px; padding: 24px 48px 40px; max-width: 900px; }



.api-section { margin-bottom: 48px; }



.api-section-title { font-size: 28px; font-weight: 700; color: #1d1d1f; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #ff9f0a; display: inline-block; }



.api-section-desc { font-size: 15px; color: #515154; line-height: 1.7; margin-bottom: 24px; }



.api-endpoint { background: #fff; border-radius: 12px; border: 1px solid #e5e5e5; margin-bottom: 24px; overflow: hidden; }



.api-endpoint-header { padding: 16px 20px; background: #f5f5f7; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 12px; }



.api-method { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }



.api-method.get { background: #e3f2fd; color: #1976d2; }



.api-method.post { background: #e8f5e9; color: #388e3c; }



.api-method.put { background: #fff3e0; color: #f57c00; }



.api-method.delete { background: #ffebee; color: #d32f2f; }



.api-path { font-family: 'SF Mono', Monaco, monospace; font-size: 14px; color: #1d1d1f; font-weight: 500; }



.api-endpoint-body { padding: 20px; }



.api-endpoint-desc { font-size: 14px; color: #515154; margin-bottom: 16px; line-height: 1.6; }



.api-code-block { background: #1e1e1e; border-radius: 8px; overflow: hidden; margin: 16px 0; }



.api-code-header { background: #2d2d2d; padding: 8px 16px; font-size: 12px; color: #858585; display: flex; justify-content: space-between; align-items: center; }



.api-code-copy { background: transparent; border: 1px solid #858585; color: #858585; padding: 4px 12px; border-radius: 4px; font-size: 11px; cursor: pointer; transition: all 0.2s; }



.api-code-copy:hover { border-color: #ff9f0a; color: #ff9f0a; }



.api-code-content { padding: 16px; overflow-x: auto; }



.api-code-content pre { margin: 0; font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 13px; line-height: 1.6; color: #d4d4d4; }



.code-keyword { color: #569cd6; } .code-string { color: #ce9178; } .code-number { color: #b5cea8; }



.code-comment { color: #6a9955; } .code-key { color: #9cdcfe; }



.api-params-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }



.api-params-table th { background: #f5f5f7; padding: 12px 16px; text-align: left; font-weight: 600; color: #1d1d1f; border-bottom: 2px solid #e5e5e5; }



.api-params-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; color: #424245; }



.api-params-table tr:hover td { background: #fafafa; }



.param-required { color: #d32f2f; font-weight: 600; }



.param-optional { color: #86868b; }



.param-type { font-family: monospace; font-size: 12px; color: #ff9f0a; background: rgba(255,159,10,0.1); padding: 2px 6px; border-radius: 3px; }



.api-status-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; margin: 16px 0; }



.api-status-item { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px 16px; }



.api-status-code { font-family: monospace; font-size: 14px; font-weight: 700; margin-bottom: 4px; }



.api-status-code.success { color: #388e3c; } .api-status-code.error { color: #d32f2f; } .api-status-code.warning { color: #f57c00; }



.api-status-desc { font-size: 12px; color: #86868b; }



.api-info-box { border-radius: 8px; padding: 16px 20px; margin: 16px 0; display: flex; gap: 12px; align-items: flex-start; }



.api-info-box.info { background: #e3f2fd; border-left: 4px solid #1976d2; }



.api-info-box.warning { background: #fff3e0; border-left: 4px solid #f57c00; }



.api-info-box.tip { background: #e8f5e9; border-left: 4px solid #388e3c; }



.api-info-icon { font-size: 18px; flex-shrink: 0; }



.api-info-content { font-size: 14px; color: #424245; line-height: 1.6; }



.api-base-url { background: #1d1d1f; color: #fff; padding: 12px 20px; border-radius: 8px; font-family: monospace; font-size: 14px; margin: 16px 0; display: flex; align-items: center; gap: 12px; }



.api-base-url-label { color: #86868b; font-size: 12px; }



.api-menu-toggle { display: none; }



@media (max-width: 1024px) {



  .api-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }



  .api-sidebar.open { transform: translateX(0); }



  .api-content { margin-left: 0; padding: 24px; }



  .api-menu-toggle { display: block; position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: #ff9f0a; border: none; border-radius: 50%; color: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(255,159,10,0.4); z-index: 200; }



}



@media (min-width: 1025px) { .api-menu-toggle { display: none; } }







/* ── invite.php — 邀请页 ── */



.invite-page { min-height: 100vh; background: linear-gradient(180deg,#fbf7ef 0%,#f3ede2 100%); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }



.invite-card { background: rgba(255,250,241,0.95); border-radius: 24px; padding: 40px 32px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(29,26,22,0.08); text-align: center; }



.invite-header { margin-bottom: 32px; }



.invite-title { font-size: 28px; font-weight: 700; color: #1d1a16; margin-bottom: 8px; }



.invite-subtitle { font-size: 15px; color: #8a8175; }



.inviter-info { background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); border-radius: 16px; padding: 24px; margin-bottom: 32px; color: white; }



.inviter-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid white; margin: 0 auto 12px; object-fit: cover; background: #f0f0f0; }



.inviter-avatar-placeholder { width: 64px; height: 64px; border-radius: 50%; border: 3px solid white; margin: 0 auto 12px; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; }



.inviter-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }



.inviter-text { font-size: 14px; opacity: 0.9; }



.rewards-section { margin-bottom: 32px; }



.rewards-title { font-size: 16px; font-weight: 600; color: #1d1a16; margin-bottom: 20px; }



.rewards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }



.reward-item { background: white; border-radius: 12px; padding: 16px 12px; border: 1px solid rgba(255,159,10,0.2); }



.reward-icon { width: 40px; height: 40px; background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 20px; }



.reward-value { font-size: 20px; font-weight: 700; color: #ff9f0a; margin-bottom: 4px; }



.reward-label { font-size: 12px; color: #8a8175; }



.rebate-info { background: rgba(255,159,10,0.08); border-radius: 12px; padding: 16px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }



.rebate-icon { width: 44px; height: 44px; background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }



.rebate-content { text-align: left; flex: 1; }



.rebate-title { font-size: 14px; font-weight: 600; color: #1d1a16; margin-bottom: 2px; }



.rebate-desc { font-size: 12px; color: #8a8175; }



.invite-btn { display: block; width: 100%; padding: 16px 24px; background: linear-gradient(135deg,#ff9f0a 0%,#ffd75e 100%); color: white; font-size: 16px; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }



.invite-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,159,10,0.3); }



.invite-btn-secondary { display: block; width: 100%; padding: 14px 24px; background: transparent; color: #8a8175; font-size: 14px; border: 1px solid #e5e0d5; border-radius: 12px; cursor: pointer; text-decoration: none; margin-top: 12px; transition: all 0.2s; }



.invite-btn-secondary:hover { background: #f5f0e8; color: #1d1a16; }



.error-card { text-align: center; padding: 40px 20px; }



.error-icon { width: 80px; height: 80px; background: #fee; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 40px; }



.error-title { font-size: 20px; font-weight: 600; color: #1d1a16; margin-bottom: 8px; }



.error-message { font-size: 14px; color: #8a8175; margin-bottom: 24px; }



.brand-logo { font-size: 24px; font-weight: 700; color: #ff9f0a; margin-bottom: 32px; }



@media (max-width: 480px) {



  .invite-page { padding: 16px; }



  .invite-card { padding: 28px 20px; }



  .invite-title { font-size: 24px; }



}







/* ── Layout A: about.php — 关于我们 ── */



.about-page { max-width: 900px; margin: 0 auto; padding: 48px 32px 64px; }



.about-hero { text-align: center; margin-bottom: 56px; }



.about-hero h1 { font-size: 36px; font-weight: 800; color: var(--text-main); margin: 0 0 12px; letter-spacing: -0.02em; }



.about-hero .about-tagline { font-size: 18px; color: var(--tech-orange-strong); font-weight: 600; margin-bottom: 16px; }



.about-hero .about-desc { font-size: 15px; color: var(--text-muted); line-height: 1.75; max-width: 640px; margin: 0 auto; }



.about-hero .about-desc strong { color: var(--text-main); font-weight: 600; }



.about-section { margin-top: 56px; }



.about-section:first-of-type { margin-top: 0; }



.about-section-title { font-size: 24px; font-weight: 800; color: var(--text-main); margin: 0 0 8px; letter-spacing: -0.01em; }



.about-section-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 28px; }



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



.capability-item { padding: 28px 24px; border-radius: var(--radius-md); background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }



.capability-item:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(24, 13, 3, 0.12); }



.capability-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }



.capability-icon--image { background: linear-gradient(135deg, rgba(255,159,10,0.12), rgba(255,215,94,0.12)); color: var(--tech-orange-strong); }



.capability-icon--video { background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(99,102,241,0.1)); color: #2563eb; }



.capability-icon--human { background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(52,199,89,0.1)); color: #059669; }



.capability-item h3 { font-size: 18px; font-weight: 700; color: var(--text-main); margin: 0 0 8px; }



.capability-item p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; }



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



.advantage-item { position: relative; padding: 28px 24px; border-radius: var(--radius-md); background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }



.advantage-item:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(24, 13, 3, 0.1); }



.advantage-item--exclusive { border-color: rgba(255,159,10,0.25); background: linear-gradient(135deg, rgba(255,250,241,0.9), rgba(255,243,224,0.6)); }



.advantage-icon { font-size: 28px; margin-bottom: 12px; display: block; }



.advantage-item h3 { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 0 0 8px; }



.advantage-item p { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); margin: 0; padding-right: 80px; }



.advantage-tag { position: absolute; top: 20px; right: 20px; padding: 4px 12px; border-radius: 999px; background: rgba(255,159,10,0.08); color: var(--tech-orange-strong); font-size: 11px; font-weight: 600; }



.advantage-tag--exclusive { background: linear-gradient(135deg, var(--tech-orange), var(--tech-yellow)); color: #1c1205; font-weight: 700; }



.comparison-table-wrap { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line-color); box-shadow: var(--shadow-card); }



.comparison-table { width: 100%; border-collapse: collapse; background: var(--surface-strong); }



.comparison-table thead { background: linear-gradient(135deg, rgba(255,159,10,0.06), rgba(255,215,94,0.06)); }



.comparison-table th { padding: 16px 24px; font-size: 14px; font-weight: 700; color: var(--text-main); text-align: left; border-bottom: 2px solid var(--line-color); }



.comparison-table td { padding: 14px 24px; font-size: 14px; color: var(--text-muted); border-bottom: 1px solid var(--line-color); }



.comparison-table td.comparison-us { color: var(--tech-orange-strong); font-weight: 600; }



.comparison-table tbody tr:last-child td { border-bottom: none; }



.comparison-table tbody tr:hover { background: rgba(255,159,10,0.03); }



.comparison-competitor { color: var(--text-muted) !important; }



.comparison-us { color: var(--tech-orange-strong) !important; }



.scenario-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }



.scenario-item { padding: 24px 20px; border-radius: var(--radius-md); background: var(--surface-color); border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--shadow-card); text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; }



.scenario-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24,13,3,0.1); }



.scenario-item--exclusive { border-color: rgba(255,159,10,0.2); background: linear-gradient(180deg, rgba(255,250,241,0.9), rgba(255,243,224,0.5)); }



.scenario-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,159,10,0.08); color: var(--tech-orange-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }



.scenario-item h3 { font-size: 16px; font-weight: 700; color: var(--text-main); margin: 0 0 10px; }



.scenario-flow { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }



.scenario-highlight { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255,159,10,0.08); color: var(--tech-orange-strong); font-size: 11px; font-weight: 600; }



.scenario-highlight--exclusive { background: linear-gradient(135deg, var(--tech-orange), var(--tech-yellow)); color: #1c1205; font-weight: 700; }



.cta-card { text-align: center; padding: 48px 32px; border-radius: var(--radius-lg); background: linear-gradient(160deg, #1e1a15, #0d0b09); color: #fff7ea; box-shadow: 0 24px 60px rgba(24,13,3,0.28); position: relative; overflow: hidden; }



.cta-card h2 { font-size: 28px; font-weight: 800; margin: 0 0 12px; position: relative; z-index: 1; }



.cta-card p { font-size: 15px; color: rgba(255,247,234,0.65); line-height: 1.6; margin: 0 0 28px; max-width: 56ch; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }



.cta-actions { display: flex; justify-content: center; gap: 14px; position: relative; z-index: 1; }



.cta-btn { display: inline-flex; align-items: center; padding: 12px 32px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }



.cta-btn--primary { background: linear-gradient(135deg, var(--tech-orange), var(--tech-yellow)); color: #1c1205; border: none; box-shadow: 0 4px 16px rgba(255,159,10,0.35); }



.cta-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,159,10,0.45); }



.cta-btn--ghost { background: rgba(255,255,255,0.08); color: #fff7ea; border: 1px solid rgba(255,255,255,0.15); }



.cta-btn--ghost:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }



@media (max-width: 768px) {



  .about-page { padding: 32px 20px 48px; }



  .about-hero h1 { font-size: 28px; }



  .about-hero .about-tagline { font-size: 16px; }



  .about-hero .about-desc { font-size: 14px; }



  .about-section { margin-top: 40px; }



  .about-section-title { font-size: 20px; }



  .capability-grid { grid-template-columns: 1fr; gap: 14px; }



  .capability-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }



  .capability-icon { margin-bottom: 0; flex-shrink: 0; }



  .capability-item h3 { font-size: 16px; margin-bottom: 4px; }



  .advantage-grid { grid-template-columns: 1fr; gap: 14px; }



  .advantage-item { padding: 20px 18px; }



  .advantage-item p { padding-right: 0; margin-top: 8px; }



  .advantage-tag { position: static; display: inline-block; margin-top: 10px; }



  .comparison-table th, .comparison-table td { padding: 10px 14px; font-size: 13px; }



  .scenario-grid { grid-template-columns: 1fr 1fr; gap: 12px; }



  .scenario-item { padding: 18px 14px; }



  .cta-card { padding: 32px 20px; }



  .cta-card h2 { font-size: 22px; }



  .cta-card p { font-size: 14px; }



  .cta-actions { flex-direction: column; }



  .cta-btn { justify-content: center; width: 100%; }



}



@media (max-width: 520px) {



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



  .comparison-table th, .comparison-table td { padding: 8px 10px; font-size: 12px; }



}







/* ── Layout A: leaderboard.php — 排行榜 ── */



.leaderboard-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }



.leaderboard-tab { padding: 8px 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-elevated); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: all 0.2s; }



.leaderboard-tab:hover { border-color: var(--brand); color: var(--brand); }



.leaderboard-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }



.lb-list { display: flex; flex-direction: column; gap: 8px; }



.lb-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-elevated); border-radius: 14px; transition: transform 0.15s, box-shadow 0.15s; border: 1px solid var(--border); }



.lb-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }



.lb-rank { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; background: var(--bg-subtle); color: var(--text-muted); }



.lb-rank--1 { background: linear-gradient(135deg,#FFD700,#FFA500); color: #fff; }



.lb-rank--2 { background: linear-gradient(135deg,#C0C0C0,#A0A0A0); color: #fff; }



.lb-rank--3 { background: linear-gradient(135deg,#CD7F32,#A0522D); color: #fff; }



.lb-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-subtle); flex-shrink: 0; }



.lb-info { flex: 1; min-width: 0; }



.lb-name { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



.lb-stats { display: flex; gap: 16px; margin-top: 4px; }



.lb-stat { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 3px; }



.lb-stat strong { color: var(--text-secondary); font-size: 13px; }



.lb-stat svg { width: 13px; height: 13px; flex-shrink: 0; }



.lb-highlight { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }



.lb-highlight-card { flex: 1; min-width: 140px; padding: 16px; border-radius: 14px; background: var(--bg-elevated); text-align: center; border: 1px solid var(--border); }



.lb-highlight-card .val { font-size: 24px; font-weight: 800; color: var(--brand); }



.lb-highlight-card .label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }



.lb-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }



.lb-load-more { text-align: center; margin-top: 16px; }







/* ── Layout A: activity.php — 活动页（carousel） ── */



.hero-carousel { display: none; }



@media (max-width: 768px) {



  .hero-carousel { display: block; overflow: hidden; margin-bottom: 16px; position: relative; border-radius: var(--radius-lg); }



  .carousel-track { display: flex; transition: transform 0.4s ease; }



  .carousel-slide { flex: 0 0 100%; min-width: 0; }



  .carousel-card { padding: 32px 24px; min-height: 200px; background: linear-gradient(135deg,#ff9f0a,#ffd75e); border-radius: var(--radius-lg); display: flex; flex-direction: column; justify-content: center; }



  .carousel-tag { display: inline-block; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(255,255,255,0.2); color: #fff; font-size: 11px; font-weight: 600; margin-bottom: 8px; align-self: flex-start; }



  .carousel-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 6px; }



  .carousel-desc { font-size: 13px; color: rgba(255,255,255,0.8); margin-bottom: 16px; }



  .carousel-btn { display: inline-flex; padding: 8px 20px; background: rgba(255,255,255,0.95); color: #1d1a16; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; text-decoration: none; align-self: flex-start; }



  .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }



  .carousel-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all 0.2s; }



  .carousel-dots .dot.active { width: 24px; border-radius: 4px; background: var(--brand); }



}







/* ═══════════════════════════════════════



   DETAIL PAGE — Professional Gallery Detail



   ═══════════════════════════════════════ */



.dt-page {



  display: flex;



  gap: 32px;



  padding: 24px 32px;



  max-width: 1400px;



  margin: 0 auto;



  width: 100%;



  flex: 1;



}



.dt-main {



  flex: 1;



  min-width: 0;



}



.dt-sidebar {



  flex: 0 0 300px;



  position: sticky;



  top: calc(var(--nav-height) + 24px);



  height: fit-content;



  max-height: calc(100vh - var(--nav-height) - 48px);



  overflow-y: auto;



}







/* ── Gallery — Carousel ── */



.dt-gallery {



  position: relative;



  border-radius: var(--radius-xl);



  overflow: hidden;



  background: var(--bg-subtle);



  margin-bottom: 20px;



  box-shadow: 0 2px 8px oklch(0 0 0 / 0.04);



}







/* ── Viewport ── */



.dt-gallery-viewport {



  position: relative;



  overflow: hidden;



  width: 100%;



  /* 高度随图片内容撑开，避免裁切 */



  min-height: 120px;



}







/* ── Track (slides container) ── */



.dt-gallery-track {



  display: flex;



  transition: transform 0.4s ease;



  will-change: transform;



}







/* ── Individual Slide ── */



.dt-gallery-slide {



  flex: 0 0 100%;



  min-width: 0;



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 4px;



  background: var(--bg);



}







/* ── Portrait: 2 columns ── */



.dt-gallery-slide--portrait {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 4px;



}



.dt-gallery-slide--portrait .dt-gallery-item {



  display: flex;



  align-items: center;



  justify-content: center;



  min-height: 0;



  overflow: visible;



}



.dt-gallery-slide--portrait .dt-gallery-item img {



  width: auto;



  max-width: 100%;



  height: auto;



  max-height: 70vh;



  object-fit: contain;



}







/* ── Single Image ── */



.dt-gallery-item {



  position: relative;



  width: 100%;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: zoom-in;



  transition: filter 0.2s ease;



  overflow: visible;



  background: var(--bg-subtle);



}



.dt-gallery-item img {



  display: block;



  width: auto;



  max-width: 100%;



  height: auto;



  max-height: min(70vh, 900px);



  object-fit: contain;



  object-position: center;



  background: var(--bg-subtle);



}



.dt-gallery-item:hover { filter: brightness(0.97); }







/* ── Navigation Arrows ── */



.dt-gallery-arrow {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  width: 40px;



  height: 40px;



  border-radius: 50%;



  background: oklch(0 0 0 / 0.35);



  backdrop-filter: blur(8px);



  border: 1px solid oklch(1 0 0 / 0.15);



  color: #fff;



  font-size: 24px;



  line-height: 1;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  z-index: 5;



  transition: all 0.15s;



  opacity: 0;



}



.dt-gallery:hover .dt-gallery-arrow { opacity: 1; }



.dt-gallery-arrow:hover {



  background: oklch(0 0 0 / 0.55);



  transform: translateY(-50%) scale(1.1);



}



.dt-gallery-arrow--prev { left: 12px; }



.dt-gallery-arrow--next { right: 12px; }







/* ── Dot Indicators ── */



.dt-gallery-dots {



  display: flex;



  justify-content: center;



  gap: 8px;



  padding: 12px 0;



  background: var(--bg);



}



.dt-gallery-dot {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  border: none;



  background: var(--border);



  cursor: pointer;



  padding: 0;



  transition: all 0.2s;



}



.dt-gallery-dot.is-active {



  width: 24px;



  border-radius: 4px;



  background: var(--brand);



}







/* ── Title ── */



.dt-title {



  font-size: 24px;



  font-weight: 700;



  color: var(--text);



  margin-bottom: 8px;



  line-height: 1.3;



}







/* ── Tags ── */



.dt-tags {



  display: flex;



  flex-wrap: wrap;



  gap: 6px;



  margin-bottom: 20px;



}



.dt-tag {



  display: inline-flex;



  align-items: center;



  padding: 4px 12px;



  border-radius: var(--radius-full);



  font-size: 12px;



  font-weight: 500;



  background: var(--bg-subtle);



  color: var(--text-secondary);



  border: 1px solid var(--border);



}



.dt-tag--model {



  background: var(--brand-light);



  color: var(--brand-strong);



  border-color: var(--brand-glow);



}







/* ── Section headers ── */



.dt-section-title {



  font-size: 16px;



  font-weight: 600;



  color: var(--text);



  margin-bottom: 12px;



}







/* ── Description ── */



.dt-desc-section {



  margin-bottom: 24px;



}



.dt-desc-text {



  font-size: 14px;



  line-height: 1.8;



  color: var(--text-secondary);



}







/* ── Prompt ── */



.dt-prompt-section {



  margin-bottom: 24px;



}



.dt-prompt-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 8px;



}



.dt-prompt-header .dt-section-title { margin-bottom: 0; }



.dt-prompt-block {



  background: var(--bg-subtle);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 16px 20px;



  font-size: 13px;



  line-height: 1.7;



  color: var(--text-secondary);



  font-family: var(--font-mono);



  overflow-x: auto;



  white-space: pre-wrap;



  word-break: break-word;



}







/* ── Related ── */



.dt-related {



  margin-bottom: 24px;



}



.dt-related-grid {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 10px;



}



.dt-related-item {



  border-radius: var(--radius-lg);



  overflow: hidden;



  cursor: pointer;



  position: relative;



  aspect-ratio: 1;



  background: var(--bg-subtle);



  transition: transform 0.2s ease, box-shadow 0.2s ease;



}



.dt-related-item:hover {



  transform: translateY(-2px);



  box-shadow: 0 4px 16px oklch(0 0 0 / 0.10);



}



.dt-related-item img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



}



.dt-related-title {



  position: absolute;



  bottom: 0;



  left: 0;



  right: 0;



  padding: 8px 10px;



  font-size: 11px;



  font-weight: 600;



  color: #fff;



  background: linear-gradient(transparent, oklch(0 0 0 / 0.60));



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;
}

/* 同款作品 */
.dt-remixes {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-color);
}
.dt-remixes-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.dt-remixes-count {
  font-size: 13px;
  color: var(--text-secondary);
}
.dt-remixes .masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dt-remixes .creation-card {
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: transform 0.2s, box-shadow 0.2s;
}
.dt-remixes .creation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.dt-remixes .creation-card .card-img-wrapper {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
.dt-remixes .creation-card .card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dt-remixes .creation-card .card-content {
  padding: 10px 12px 12px;
}
@media (max-width: 768px) {
  .dt-remixes .masonry-grid { grid-template-columns: repeat(2, 1fr); }
}



/* ── Author ── */



.dt-author {



  display: flex;



  align-items: center;



  gap: 12px;



  padding: 16px;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  margin-bottom: 16px;



}



.dt-author-avatar {



  width: 40px !important;



  height: 40px !important;



  font-size: 16px !important;



  flex-shrink: 0;



}



.dt-author-name { font-size: 15px; font-weight: 600; color: var(--text); display: block; }



.dt-author-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }







/* ── Actions ── */



.dt-actions {



  display: flex;



  flex-direction: column;



  gap: 10px;



  margin-bottom: 20px;



}



.dt-action-btn {



  width: 100%;



  justify-content: center;



  padding: 12px 20px;



  font-size: 14px;



}







/* ── Info List ── */



.dt-info-list {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  overflow: hidden;



  margin-bottom: 16px;



}



.dt-info-item {



  display: flex;



  justify-content: space-between;



  align-items: center;



  padding: 12px 16px;



  border-bottom: 1px solid var(--border);



  font-size: 13px;



}



.dt-info-item:last-child { border-bottom: none; }



.dt-info-label {



  color: var(--text-muted);



  font-weight: 500;



}







/* ── Model Card ── */



.dt-model-card {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 16px;



  margin-bottom: 16px;



}



.dt-model-card .dt-section-title { margin-bottom: 12px; }



.dt-model-inner {



  display: flex;



  gap: 12px;



  margin-bottom: 12px;



}



.dt-model-cover {



  width: 80px;



  height: 80px;



  border-radius: var(--radius-md);



  object-fit: cover;



  flex-shrink: 0;



  border: 1px solid var(--border);



}



.dt-model-display { font-size: 14px; font-weight: 600; color: var(--text); display: block; margin-bottom: 4px; }



.dt-model-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }



.dt-model-tags { display: flex; flex-wrap: wrap; gap: 4px; }







/* ── Detail Page Responsive ── */



@media (max-width: 1024px) {



  .dt-page { padding: 16px; gap: 24px; }



  .dt-sidebar { flex-basis: 260px; }



  .dt-related-grid { grid-template-columns: repeat(3, 1fr); }



}



@media (max-width: 900px) {



  .dt-page { flex-direction: column; }



  .dt-sidebar { position: static; flex-basis: auto; max-height: none; }



  .dt-main { max-width: 100%; }



  .dt-gallery-item img, .dt-gallery-slide--portrait .dt-gallery-item img { max-height: min(80vh, 900px); }



  .dt-gallery-arrow { opacity: 1; width: 36px; height: 36px; font-size: 20px; }



}



@media (max-width: 768px) {



  .dt-page { padding: 12px 16px; }



  .dt-title { font-size: 20px; }



  .dt-related-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }



  .dt-actions { flex-direction: row; }



  .dt-action-btn { padding: 10px 16px; font-size: 13px; }



  .dt-model-inner { flex-direction: column; }



  .dt-model-cover { width: 100%; height: auto; aspect-ratio: 16/9; }



}



@media (max-width: 480px) {



  .dt-title { font-size: 18px; }



  .dt-related-grid { grid-template-columns: repeat(2, 1fr); }



  .dt-actions { flex-direction: column; }



}







/* ═══════════════════════════════════════



   VIP PAGE



   ═══════════════════════════════════════ */



.vip-page { max-width: 1200px; margin: 0 auto; padding: 32px; }



.vip-hero { text-align: center; padding: 40px 20px 32px; }



.vip-hero-title { font-size: 32px; font-weight: 800; color: var(--text); margin: 0 0 8px; }



.vip-hero-copy { font-size: 15px; color: var(--text-muted); margin: 0; }







.vip-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 32px; background: var(--bg-secondary); padding: 4px; border-radius: 12px; max-width: 320px; margin-left: auto; margin-right: auto; }



.vip-tab { flex: 1; padding: 10px 20px; border: none; background: transparent; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-muted); transition: all 0.15s; }



.vip-tab.is-active { background: var(--bg-elevated); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }







.vip-panel { margin-bottom: 32px; }



.vip-section-title { font-size: 18px; font-weight: 700; margin: 0 0 20px; color: var(--text); }



.vip-section-title small { font-size: 13px; font-weight: 400; color: var(--text-muted); }







.vip-card-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }



.vip-pricing-card {



  position: relative;



  background: var(--bg-elevated); border: 1px solid var(--border);



  border-radius: var(--radius-xl); padding: 28px 24px;



  display: flex; flex-direction: column; gap: 8px;



  transition: transform 0.15s, box-shadow 0.15s;



}



.vip-pricing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }



.vip-pricing-card--plan {



  border-color: oklch(0.9 0.08 85 / 0.5);



  background: linear-gradient(135deg, var(--bg-elevated), oklch(0.97 0.03 85 / 0.2));



}



.vip-pricing-badge {



  position: absolute; top: 12px; right: 12px;



  font-size: 10px; font-weight: 700; text-transform: uppercase;



  padding: 3px 8px; border-radius: 6px;



  background: var(--brand-light); color: var(--brand);



}



.vip-pricing-name { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }



.vip-pricing-price { font-size: 14px; color: var(--text-muted); }



.vip-pricing-price strong { font-size: 32px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }



.vip-pricing-price small { font-size: 14px; font-weight: 400; }



.vip-pricing-points { font-size: 14px; color: var(--text-secondary); }



.vip-pricing-unit { font-size: 12px; color: var(--text-muted); }



.vip-pricing-features { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }



.vip-pricing-features li { font-size: 13px; color: var(--text-secondary); padding-left: 18px; position: relative; }



.vip-pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }



.vip-pricing-yearly-hint { font-size: 12px; color: var(--brand); cursor: pointer; }



.vip-pricing-btn {



  margin-top: auto; padding: 12px; border: none; border-radius: 10px;



  background: var(--brand); color: #fff; font-size: 14px; font-weight: 600;



  cursor: pointer; transition: opacity 0.15s; text-align: center;



}



.vip-pricing-btn:hover { opacity: 0.85; }







.vip-notice-section {



  background: var(--bg-elevated); border: 1px solid var(--border);



  border-radius: var(--radius-xl); padding: 28px 32px; margin-top: 24px;



}



.vip-notice-section h3 { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--text); }



.vip-notice-section ul { padding: 0 0 0 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }



.vip-notice-section li { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }







/* Plan Toggle Modal */



.plan-toggle-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); padding: 16px; }



.plan-toggle-modal[hidden] { display: none; }



.plan-toggle-panel { background: var(--bg-elevated); border-radius: 20px; padding: 28px; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); }



.plan-toggle-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--text); }



.plan-toggle-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }



.plan-toggle-options { display: flex; gap: 12px; }



.plan-toggle-option { flex: 1; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; text-align: center; transition: all 0.15s; }



.plan-toggle-option:hover { border-color: var(--brand); }



.plan-toggle-option--yearly { border-color: var(--brand-light); }



.plan-toggle-option-header { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }



.plan-toggle-label { font-size: 15px; font-weight: 600; color: var(--text); }



.plan-toggle-save { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--brand-light); color: var(--brand); }



.plan-toggle-price { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }



.plan-toggle-price small { font-size: 12px; font-weight: 400; color: var(--text-muted); }



.plan-toggle-period { font-size: 12px; color: var(--text-muted); margin-top: 4px; }



.plan-toggle-save-detail { font-size: 12px; color: var(--success); margin-top: 4px; }







/* QR Code */



.qrcode-wrap { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }



.qrcode-tip { font-size: 13px; color: var(--text-muted); margin-top: 12px; }



.payment-status { text-align: center; font-size: 14px; font-weight: 500; color: var(--text-muted); padding: 8px; }



.payment-status.success { color: var(--success); }







.close-button { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-muted); padding: 4px; line-height: 1; position: absolute; top: 16px; right: 16px; }







/* VIP page mobile responsive */



@media (max-width: 768px) {



  .vip-page { padding: 20px 16px; }



  .vip-hero { padding: 24px 0 20px; }



  .vip-hero-title { font-size: 24px; }



  .vip-card-row { grid-template-columns: 1fr; }



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



  .vip-notice-section { padding: 20px; }



  .plan-toggle-options { flex-direction: column; }



}







/* ── Detail Publish Modal ── */



.payment-modal {



  position: fixed;



  inset: 0;



  background: oklch(0 0 0 / 0.45);



  backdrop-filter: blur(6px);



  z-index: 600;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 16px;



}



.payment-modal[hidden] { display: none; }



.payment-panel {



  background: var(--bg-elevated);



  border-radius: 20px;



  width: 100%;



  max-width: 460px;



  padding: 28px 24px;



  box-shadow: 0 20px 60px oklch(0 0 0 / 0.15);



  position: relative;



  animation: modalSlideIn 0.25s ease-out;



}



.payment-title {



  font-size: 20px;



  font-weight: 700;



  margin-bottom: 8px;



  color: var(--text);



}



.payment-product {



  font-size: 13px;



  color: var(--text-muted);



  margin-bottom: 16px;



  line-height: 1.5;



}



.pub-field-wrap { margin-bottom: 14px; }



.pub-field-wrap:last-of-type { margin-bottom: 18px; }



.pub-label {



  display: block;



  font-size: 13px;



  font-weight: 600;



  margin-bottom: 4px;



  color: var(--text);



}



.pub-input, .pub-select, .pub-textarea {



  width: 100%;



  padding: 10px 14px;



  border: 1px solid var(--border);



  border-radius: 10px;



  font-size: 14px;



  background: var(--bg);



  color: var(--text);



  outline: none;



  transition: border-color 0.15s;



  box-sizing: border-box;



}



.pub-input:focus, .pub-select:focus, .pub-textarea:focus {



  border-color: var(--brand);



}



.pub-select { background: var(--bg-elevated); }



.pub-textarea { resize: vertical; }



.pub-right { text-align: left; }



.pub-status {



  margin-top: 10px;



  font-size: 12px;



  color: var(--text-muted);



  text-align: center;



}







/* ── profile.php — 个人中心 ── */



.profile-layout-wrapper { display: flex; gap: 24px; padding: 24px 32px; max-width: 1400px; margin: 0 auto; width: 100%; }



.profile-sidebar-wrapper { flex: 0 0 var(--sidebar-width); }



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



@media (max-width: 1024px) {



  .profile-layout-wrapper { padding: 16px; }



  .profile-sidebar-wrapper { display: none; }



}



@keyframes slideDownCenter {



  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }



  to { opacity: 1; transform: translateX(-50%) translateY(0); }



}







/* ── points-log.php — 积分记录 ── */



.points-log-layout { display: flex; gap: 24px; padding: 24px 32px; max-width: 1400px; margin: 0 auto; }



.points-log-sidebar { flex: 0 0 220px; }



.points-log-main { flex: 1; min-width: 0; }



.points-log-container { max-width: 100%; padding: 0; }



.points-log-header { margin-bottom: 24px; }



.points-log-header h1 { font-size: 24px; font-weight: 600; margin-bottom: 8px; color: var(--text); }



.points-log-header p { color: var(--text-muted); font-size: 14px; }



.points-stats-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }



.points-stat-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 20px; text-align: center; }



.points-stat-card .stat-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }



.points-stat-card .stat-value { font-size: 28px; font-weight: 700; }



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



.points-stat-card.expense .stat-value { color: var(--danger); }



.points-stat-card.balance .stat-value { color: var(--brand); }



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



.log-item { display: flex; align-items: center; padding: 16px; background: var(--bg-elevated); border-radius: 12px; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; }



.log-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }



.log-item.income { border-left: 4px solid var(--success); }



.log-item.expense { border-left: 4px solid var(--danger); }



.log-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 16px; flex-shrink: 0; }



.log-item.income .log-icon { background: var(--success-bg); color: var(--success); }



.log-item.expense .log-icon { background: var(--danger-bg); color: var(--danger); }



.log-content { flex: 1; min-width: 0; }



.log-title { font-weight: 600; color: var(--text); font-size: 15px; margin-bottom: 4px; }



.log-desc { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



.log-meta { text-align: right; flex-shrink: 0; }



.log-amount { font-weight: 700; font-size: 18px; margin-bottom: 4px; }



.log-item.income .log-amount { color: var(--success); }



.log-item.expense .log-amount { color: var(--danger); }



.log-time { font-size: 12px; color: var(--text-muted); }



@media (max-width: 640px) { .points-stats-cards { grid-template-columns: 1fr; } }



@media (max-width: 1024px) { .points-log-layout { padding: 16px; } .points-log-sidebar { display: none; } }







/* ── terms.php / privacy.php — 法律条款 ── */



.legal-page { max-width: 800px; margin: 0 auto; padding: 40px 20px; background: linear-gradient(180deg, #fbf7ef 0%, #f3ede2 100%); min-height: calc(100vh - 200px); }



.legal-page h1 { font-size: 32px; font-weight: 600; color: #1d1a16; margin-bottom: 8px; text-align: center; }



.legal-page .effective-date { text-align: center; color: #666; font-size: 14px; margin-bottom: 40px; }



.legal-page h2 { font-size: 20px; font-weight: 600; color: #1d1a16; margin-top: 32px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #ff9f0a; }



.legal-page h3 { font-size: 16px; font-weight: 600; color: #333; margin-top: 24px; margin-bottom: 12px; }



.legal-page p { font-size: 15px; line-height: 1.8; color: #444; margin-bottom: 12px; }



.legal-page ul { margin: 12px 0; padding-left: 24px; }



.legal-page li { font-size: 15px; line-height: 1.8; color: #444; margin-bottom: 8px; }



.legal-page strong { color: #1d1a16; font-weight: 600; }



.legal-page .contact-box { background: rgba(255,159,10,0.08); border-radius: 12px; padding: 24px; margin-top: 32px; border-left: 4px solid #ff9f0a; }



.legal-page .contact-box h3 { margin-top: 0; color: #ff9f0a; }



.legal-page .notice { background: rgba(255,215,94,0.15); border-radius: 8px; padding: 16px 20px; margin: 24px 0; font-size: 14px; color: #666; }



.legal-page .divider { height: 1px; background: linear-gradient(90deg, transparent, #ddd, transparent); margin: 40px 0; }



.legal-page .highlight-box { background: rgba(255,159,10,0.05); border: 1px solid rgba(255,159,10,0.2); border-radius: 8px; padding: 16px 20px; margin: 16px 0; }







/* ── publish_model.php — 发布模型 ── */



.post-select-card { cursor: pointer; border-radius: 10px; padding: 4px; border: 2px solid transparent; transition: all 0.15s; text-align: center; }



.post-select-card:hover { border-color: #ccc; }



.post-select-card:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }



.post-select-card:has(input:checked) .post-thumb-img { border-color: var(--brand); }



.panel-card { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }







/* ═══════════════════════════════════════



   RESPONSIVE (aggregated)



   ═══════════════════════════════════════ */



@media (max-width: 1100px) {



  .masonry-grid { grid-template-columns: repeat(3, 1fr); }



  .footer-main-inner { grid-template-columns: 1fr 1fr; }



  .chat-sidebar { display: none; }



}



@media (max-width: 900px) {



  .profile-sidebar-wrapper { display: none; }



  .apple-sidebar { display: none; }



  .profile-layout-wrapper { padding: 16px; }



  .layout { padding: 16px; flex-direction: column; }



  .main-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }



}



@media (max-width: 768px) {



  :root { --nav-height: 56px; }



  .apple-nav, .site-shell__nav { padding: 0 16px; }



  .search-container { display: none; }



  .mobile-nav { display: flex; }



  body { padding-bottom: 64px; }



  h1 { font-size: 28px; }



  h2 { font-size: 20px; }



  .masonry-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }



  .layout { padding: 12px 16px; }



  .chat-messages { padding: 16px; }



  .chat-input-bar { padding: 10px 12px 14px; }



  .footer-main { padding: 32px 16px 24px; }



  .footer-main-inner { grid-template-columns: 1fr; gap: 24px; }



  .footer-bottom-inner { flex-direction: column; text-align: center; }



  .feed-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }



  .profile-layout-wrapper { padding: 12px 16px; }



  .profile-stats { grid-template-columns: 1fr 1fr; }



  .chat-layout { flex-direction: column; }



  .chat-sidebar { display: none; }



}



@media (max-width: 480px) {



  .masonry-grid { gap: 8px; }



  .stat-value { font-size: 20px; }



  .profile-card { padding: 20px; }



  .profile-section { padding: 16px; }



}





/* ═══════════════════════════════════════════════
   THREE-PLATFORM FUSION LAYER (2026-05-02)
   Mobile navigation · Touch feedback · Android adaptation
   ═══════════════════════════════════════════════ */

/* ── 1. Touch Optimization ── */
* { touch-action: manipulation; }
body { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

/* 44px Minimum Touch Targets */
.btn, .menu-item, .bottom-nav-item, .hamburger-btn,
.ud-menu-item, .chat-send-btn, .chat-model-btn,
.chat-select, .chat-ref-upload, .icon-button,
.user-avatar-btn, .auth-tab, .filter-tab,
.pc-card, .vip-tab, .redeem-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Touch feedback (native app feel) */
.btn:active, .menu-item:active, .bottom-nav-item:active,
.ud-menu-item:active, .auth-tab:active, .filter-tab:active,
.vip-tab:active {
  transform: scale(0.97);
  opacity: 0.85;
  transition-duration: var(--duration-instant);
}

.card:active, .pc-card:active, .creation-card:active {
  transform: scale(0.98);
  transition-duration: var(--duration-instant);
}

/* Disable hover on touch devices */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .creation-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .creation-card:hover .card-img-wrapper img,
  .creation-card:hover .card-img-wrapper video { transform: none; filter: none; }
  .card-hover-actions { display: none !important; }
  .btn-primary:hover { transform: none; box-shadow: none; }
  .btn-secondary:hover { border-color: var(--border); }
}

/* ── 2. Mobile Bottom Navigation ── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: 900;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  height: 100%;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  min-height: 44px;
  transition: color var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.bottom-nav-item span {
  line-height: 1;
  margin-top: 1px;
}

.bottom-nav-item.active,
.bottom-nav-item:active {
  color: var(--brand);
}

.bottom-nav-item:active {
  transform: scale(0.92);
  transition-duration: var(--duration-instant);
}

@media (max-width: 1023px) {
  .mobile-bottom-nav { display: flex; }
}

/* ── 3. Hamburger Button ── */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text);
  flex-shrink: 0;
}

.hamburger-btn svg {
  width: 22px;
  height: 22px;
}

.hamburger-btn:active {
  transform: scale(0.9);
  opacity: 0.7;
}

@media (max-width: 1023px) {
  .hamburger-btn { display: flex; }
}

/* ── 4. Sidebar Drawer ── */
.sidebar-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
}

.sidebar-drawer[hidden] {
  display: none;
}

.drawer-overlay {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fadeIn var(--duration-slow) var(--ease-out);
}

.drawer-content {
  position: relative;
  width: 75vw;
  max-width: 320px;
  height: 100%;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  overflow-y: auto;
  animation: drawerSlideIn var(--duration-slow) var(--ease-out);
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
}

@keyframes drawerSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* ── 5. Android Safe Area ── */
.site-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Prevent overscroll on Android */
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* ── 6. Mobile Page Enter Animation ── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.site-shell {
  animation: pageFadeIn var(--duration-slow) var(--ease-out);
}

/* ── 7. Responsive Masonry Grid ── */
/* Mobile (default): 2 columns */
.masonry-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Tablet: 3 columns */
@media (min-width: 768px) {
  .masonry-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
  .masonry-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Large desktop: 5 columns */
@media (min-width: 1440px) {
  .masonry-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── 8. Mobile Layout Padding ── */
@media (max-width: 767px) {
  .layout { padding: 12px 16px; }
  .main-content { flex: 1; min-width: 0; padding: 0; }
.create-page {
  height: 100vh;
  overflow: hidden;
}
.create-page .site-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.create-page .site-shell__nav {
  flex-shrink: 0;
}
.create-page .layout { padding: 0; }
.create-page .layout {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.create-page .main-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px !important;
  background: #f5f7fa !important;
  box-sizing: border-box;
}
.create-page .chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* ===== AI 卡片布局 — ChatGPT固定浮窗 v45 ===== */
/* ══════════════════════════════════════════════════════════
   ai-card — 浮窗锚点容器
   chat-messages: 绝对定位撑满，可滚动
   ai-tabs + ai-footer: 绝对定位贴底（固定浮窗）
   ══════════════════════════════════════════════════════════ */
.ai-card {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important, 0 1px 4px rgba(0,0,0,0.03) !important;
  padding: 0 !important;                    /* 内部元素自己管理padding */
  margin: 0 !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  position: relative !important;             /* ★ 绝对定位的锚点 */
}

/* ══ chat-messages — 填满卡片，可滚动，底部留白给浮窗 ══ */
.ai-card .chat-messages {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px 320px 24px;          /* ★ 底部留白给固定浮窗 */
}
/* 欢迎信息 */
.ai-card .chat-welcome { text-align: center; padding: 80px 20px; }
.ai-card .chat-welcome h2 { font-size: 24px; color: #1e293b; font-weight: 700; margin-bottom: 10px; }
.ai-card .chat-welcome p { font-size: 14px; color: #94a3b8; margin: 0; }

/* 回到底部按钮 — 在浮窗上方 */
.ai-card .chat-scroll-btn {
  position: absolute;
  bottom: 310px;
  right: 32px;
  z-index: 15;
}

/* ══ 切换按钮栏 — 分段控制器（彩色主题，无轨道背景）══ */
.ai-tabs {
  position: absolute;
  bottom: 284px;                           /* PC端：在输入浮窗上方 */
  left: 32px;
  right: 32px;
  z-index: 10;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;                 /* 无轨道背景 */
  border: none;
  padding: 0;
  border-radius: 0;
  gap: 8px;
}
.ai-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1.5px solid transparent;         /* 默认透明边框 */
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.28s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* ── 各Tab独立主题色（非激活态：浅色底 + 主题色文字）── */

/* 图片生成 — 紫罗兰 */
.ai-tab[data-type="image"] {
  background: rgba(139,92,246,0.10) !important;
  color: #7c3aed !important;
  border: 1px solid rgba(139,92,246,0.18) !important;
}
.ai-tab[data-type="image"] svg { stroke: #8b5cf6 !important; }
.ai-tab[data-type="image"]:hover {
  background: rgba(139,92,246,0.20) !important;
  color: #6d28d9 !important;
}

/* 视频生成 — 橙红 */
.ai-tab[data-type="video"] {
  background: rgba(249,115,22,0.10) !important;
  color: #ea580c !important;
  border: 1px solid rgba(249,115,22,0.18) !important;
}
.ai-tab[data-type="video"] svg { stroke: #f97316 !important; }
.ai-tab[data-type="video"]:hover {
  background: rgba(249,115,22,0.20) !important;
  color: #c2410c !important;
}

/* 创意空间3D — 翠绿 */
.ai-tab[data-type="3d"] {
  background: rgba(16,185,129,0.10) !important;
  color: #059669 !important;
  border: 1px solid rgba(16,185,129,0.18) !important;
}
.ai-tab[data-type="3d"] svg { stroke: #10b981 !important; }
.ai-tab[data-type="3d"]:hover {
  background: rgba(16,185,129,0.20) !important;
  color: #047857 !important;
}

/* 动作模仿 — 青蓝 */
.ai-tab[data-type="voice"] {
  background: rgba(6,182,212,0.10) !important;
  color: #0891b2 !important;
  border: 1px solid rgba(6,182,212,0.18) !important;
}
.ai-tab[data-type="voice"] svg { stroke: #06b6d4 !important; }
.ai-tab[data-type="voice"]:hover {
  background: rgba(6,182,212,0.20) !important;
  color: #0e7490 !important;
}

/* ── 激活态：主题色渐变底 + 白字 + 浮起阴影 ── */
.ai-tab.is-active[data-type="image"] {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(139,92,246,0.35), 0 1px 3px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px);
  border-color: transparent !important;
}
.ai-tab.is-active[data-type="image"] svg { stroke: #ffffff !important; }

.ai-tab.is-active[data-type="video"] {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(249,115,22,0.35), 0 1px 3px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px);
  border-color: transparent !important;
}
.ai-tab.is-active[data-type="video"] svg { stroke: #ffffff !important; }

.ai-tab.is-active[data-type="3d"] {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(16,185,129,0.35), 0 1px 3px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px);
  border-color: transparent !important;
}
.ai-tab.is-active[data-type="3d"] svg { stroke: #ffffff !important; }

.ai-tab.is-active[data-type="voice"] {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(6,182,212,0.35), 0 1px 3px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px);
  border-color: transparent !important;
}
.ai-tab.is-active[data-type="voice"] svg { stroke: #ffffff !important; }
.ai-tab-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: stroke 0.25s ease;
}

/* ══ 选项栏：比例/尺寸/张数 — 强制显示（覆盖HTML内联display:none）══ */
body.create-page .chat-options,
.chat-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
/* 选项select美化 */
.chat-options .chat-select {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #475569;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-options .chat-select:hover {
  border-color: #3b82f6;
  background: #ffffff;
}
/* 几张图选择器也强制显示 */
.chat-options #chat-num {
  display: inline-block !important;
}

/* 移动端适配 — 标签栏可横向滚动 */
@media (max-width: 600px) {
  .ai-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
    padding: 4px 4px 4px 4px;
    margin-bottom: 0;
    /* 隐藏滚动条 Chrome/Safari */
    &::-webkit-scrollbar { display: none; }
  }
  .ai-tab {
    padding: 9px 16px;
    font-size: 13px;
    border-radius: 10px;
  }
  .ai-tab-icon { width: 16px; height: 16px; }
}

/* 提示文字 — 紧跟在标签栏下方（参考图位置）*/
.ai-hint {
  color: #999;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 0 2px;
}

/* ══ 聊天/历史消息区 — 核心展示区，必须撑满所有剩余空间 ══ */
.ai-card .chat-messages {
  flex: 1 1 auto !important;         /* 撑满所有剩余空间 */
  min-height: 0 !important;          /* 允许收缩到小于内容高度 */
  max-height: none;
  overflow-y: auto;                  /* 内容多时滚动 */
  padding: 4px 2px;                  /* 内部留白 */
}
/* 欢迎信息 — 居中显示在历史区 */
.ai-card .chat-welcome {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
}
.ai-card .chat-welcome h2 {
  font-size: 22px;
  color: #334155;
  margin-bottom: 8px;
  font-weight: 700;
}
.ai-card .chat-welcome p {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
}

/* 回到底部按钮 — 浮动定位 */
.ai-card .chat-scroll-btn {
  position: absolute;                 /* 相对ai-card绝对定位 */
  bottom: 180px;                     /* 在浮窗上方 */
  right: 32px;
}
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px;
}

/* 欢迎区 — 参考图无大标题，但消息区需要有存在感 */
.ai-card .chat-welcome {
  text-align: center;
  padding: 40px 16px 24px;
  flex-shrink: 0;
}
.ai-card .chat-welcome h2 {
  display: none; /* 参考图没有大标题 */
}
.ai-card .chat-welcome p {
  font-size: 14px;
  color: #bbb;
  line-height: 1.6;
  max-width: 100%;
  margin: 0 auto;
}

/* 历史记录卡片 - 强制固定宽度360px（白框本身） */
.creation-history-card {
  max-width: 360px !important;
  width: 360px !important;
}
/* 外层容器也收紧 */
.chat-msg--creation {
  display: inline-block !important;
  width: auto !important;
  max-width: 360px !important;
}
.ai-card .creation-history-card {
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.2s ease;
}

/* 回到底部按钮 */
.ai-card .chat-scroll-btn {
  position: absolute;
  bottom: 160px;
  right: 36px;
}

/* ══════════════════════════════════════════════════════════
   ★★★ 底部固定浮窗 — 绝对定位贴底 ★★★
   切换按钮 + 提示 + 功能按钮 + 输入框 + 生成按钮 整体固定
   ══════════════════════════════════════════════════════════ */
.ai-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  background: linear-gradient(to top, rgba(255,255,255,0.99) 75%, rgba(255,255,255,0.92) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 24px 14px;
  border-top: 1px solid #eef2f6;
  border-radius: 0 0 20px 20px;
}

/* 提示文字 */
.ai-hint {
  color: #8b95a5;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 10px;
  padding: 0 2px;
}

/* 中间功能按钮行 */
.ai-action {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ai-style-btn {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.ai-style-btn:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,130,246,0.3); }
.ai-style-btn svg { width: 24px; height: 24px; }
.ai-upload-btn {
  width: 68px;
  height: 68px;
  border: 2px dashed #d0d5dd;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fafbfc;
  flex-shrink: 0;
}
.ai-upload-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #f0f5ff; }
.ai-upload-icon { font-size: 22px; font-weight: 300; line-height: 1; }

/* 底部控制栏 — 核心输入区 [模型选择] [大输入框] [设置] [生成按钮]
   输入框必须占据最大剩余空间，是视觉焦点 */
.ai-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.ai-select {
  padding: 10px 14px;
  border: 1px solid #e0e4ea;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s;
  color: #334155;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-select:hover { border-color:#3b82f6; background: #fff; }
.ai-select svg:first-child { width: 18px; height: 18px; flex-shrink: 0; }

/* ══ 输入框 — 视觉焦点，要宽、要舒适 ══ */
.ai-prompt-input {
  flex: 1 !important;           /* 撑满所有剩余空间 */
  min-width: 200px;            /* 最小保证 */
  max-width: none !important;  /* ❌ 移除220px限制！*/
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: none;
  background: #ffffff;
  transition: all 0.2s ease;
  color: #1e293b;
  line-height: 1.5;
  height: auto;
  min-height: 44px;             /* 舒适触控高度 */
}
.ai-prompt-input:focus { 
  border-color: #3b82f6; 
  box-shadow: 0 0 0 3px rgba(59,130,246,0.10); 
  background: #fff;
}

/* 设置按钮 */
.ai-settings-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #f8fafc;
  color: #64748b;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ai-settings-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }
.ai-settings-btn svg { width: 20px; height: 20px; }

/* ══ 生成按钮 — 简洁品牌风 v50 ══ */
.ai-generate-btn {
  padding: 10px 24px;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 0;
  box-shadow: 0 2px 6px rgba(59,130,246,0.2);
}
.ai-generate-btn:hover { 
  background: #2563eb; 
  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
  transform: translateY(-1px);
}

/* 兼容旧选择器 */
.create-tab svg { flex-shrink: 0; }

.create-page .apple-sidebar { display: block; }
.create-page .result-panel {
  width: 380px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
}
.result-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.result-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.result-panel-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}
.result-panel-clear:hover {
  color: var(--danger);
}
.result-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.result-panel-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px 16px;
}
.result-panel-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.result-panel-item img {
  width: 100%;
  display: block;
}
.result-panel-item-info {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.result-panel-item-actions {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.result-panel-item-actions .btn-sm {
  font-size: 11px;
  padding: 4px 10px;
}
.create-page .chat-messages {
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  height: 0;
}
.create-page .chat-input-wrap {
  flex-shrink: 0;
}

  .apple-sidebar { display: none; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  .card { padding: var(--space-4); }
}


/* Bottom sheet animation (APP style modal) */
@keyframes bottomSheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (max-width: 767px) {
  .modal-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin: 0;
    animation: bottomSheetIn var(--duration-slow) var(--ease-out);
  }
}


/* ===== \u53d1\u5e03\u4e3a\u6a21\u677f\u5f39\u7a97 ===== */
.publish-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: oklch(0 0 0 / 0.4);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.publish-panel {
  background: var(--bg-elevated, #fff);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-6, 24px);
  width: 90%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.publish-close {
  float: right; background: none; border: none;
  font-size: 24px; cursor: pointer;
  color: var(--text-muted); line-height: 1;
}
.publish-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.publish-desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 16px; }
.publish-preview {
  width: 100%; border-radius: var(--radius-sm, 8px);
  overflow: hidden; margin-bottom: 16px; background: var(--bg-subtle);
}
.publish-preview img { width: 100%; display: block; }
.publish-field { margin-bottom: 12px; }
.publish-field label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 4px; color: var(--text);
}
.publish-field input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  font-size: 14px; background: var(--bg); color: var(--text);
  box-sizing: border-box;
}
.publish-field input:focus {
  border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px var(--brand-subtle);
}
.publish-submit { width: 100%; justify-content: center; }
.publish-status { text-align: center; font-size: 13px; margin-top: 8px; }

/* ===== CREATE PAGE LAYOUT - MUST OVERRIDE ALL ===== */
.create-page .site-shell {
  height: 100vh;
  display: flex !important;
  flex-direction: column !important;
}

.create-page .layout {
  flex: 1;
  display: flex !important;
  flex-direction: row !important;
  min-height: 0;
  overflow: hidden;
}

.create-page .apple-sidebar {
  display: block !important;
  flex-shrink: 0;
}

.create-page .main-content {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  overflow: hidden;
}

.create-page .chat-panel {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.create-page .result-panel {
  width: 380px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-left: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
}

.create-page .chat-messages {
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* ── 右侧邀请按钮（全站通用）── */
#chatInviteBtn {
  position: fixed;
  top: calc(50% + 62px);
  right: 16px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  color: #fff;
}
#chatInviteBtn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(255,107,53,0.4);
}
#chatInviteBtn svg {
  width: 22px;
  height: 22px;
}

/* ── 水印设置弹窗 ── */
.watermark-overlay[hidden] { display: none !important; }
.watermark-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.watermark-panel {
  background: #fff;
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: watermarkFadeIn 0.25s ease;
}
@keyframes watermarkFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.watermark-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: background 0.2s;
}
.watermark-close:hover { background: #e5e5e5; }
.watermark-body {
  padding: 32px 28px 20px;
}
.watermark-icon {
  text-align: center;
  color: var(--brand, #e84310);
  margin-bottom: 8px;
}
.watermark-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #222;
}
.watermark-notice {
  background: #fff8f0;
  border: 1px solid #ffe0b2;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
}
.watermark-notice p { margin: 0 0 8px; }
.watermark-notice p:last-child { margin-bottom: 0; }
.watermark-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f9fafb;
  border-radius: 12px;
  margin-bottom: 12px;
}
.watermark-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.watermark-option-text strong {
  font-size: 14px;
  color: #222;
}
.watermark-option-text span {
  font-size: 12px;
  color: #888;
}
/* Toggle switch */
.watermark-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.watermark-switch input { opacity: 0; width: 0; height: 0; }
.watermark-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: 0.25s;
}
.watermark-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s;
}
.watermark-switch input:checked + .watermark-slider {
  background: var(--brand, #e84310);
}
.watermark-switch input:checked + .watermark-slider::before {
  transform: translateX(20px);
}
.watermark-today {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  padding: 4px 0 12px;
}
.watermark-today input { width: 16px; height: 16px; accent-color: var(--brand, #e84310); }
.watermark-hint {
  font-size: 12px;
  color: #e84310;
  margin: 4px 0 0;
}
.watermark-actions {
  display: flex;
  gap: 10px;
  padding: 0 28px 28px;
}
.watermark-btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}
.watermark-btn:hover { opacity: 0.85; }
.watermark-btn--cancel {
  background: #f0f0f0;
  color: #555;
}
.watermark-btn--confirm {
  background: var(--brand, #e84310);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   4K / 大屏适配 (Large Screen & 4K Adaptation)
   ══════════════════════════════════════════════════════════ */

/* ── 1920px+：2K / WQHD / 150%缩放的4K ── */
@media (min-width: 1920px) {
  .chat-prompt { font-size: 17px !important; }
  .chat-model-btn { font-size: 14px; padding: 9px 18px; min-height: 42px; }
  .chat-select { font-size: 14px; padding: 9px 16px; min-height: 42px; }
  .chat-send-btn { padding: 9px 22px; }
  .chat-send-cost { font-size: 14px; }
  .chat-cost { font-size: 14px; padding: 6px 14px; }
  .chat-size-tip { font-size: 12px; }
  .chat-resolution-display { font-size: 13px; }
  .chat-input-wrap { min-height: 88px; }
  .chat-input-bar { padding: 14px 28px 18px; }
  .chat-welcome h2 { font-size: 26px; }
  .chat-welcome p { font-size: 15px; }
  .chat-ref-upload { width: 44px; height: 44px; }
  .chat-ref-upload svg { width: 22px; height: 22px; }
  .chat-msg-avatar { width: 40px; height: 40px; }
  .chat-msg-bubble { font-size: 14px; }
  /* ai-card 浮窗布局 */
  .ai-card .chat-messages { padding: 18px 28px 340px 28px; }
  .ai-card .chat-welcome { padding: 90px 24px; }
  .ai-card .chat-welcome h2 { font-size: 28px; }
  .ai-card .chat-welcome p { font-size: 16px; }
  .ai-card .chat-scroll-btn { bottom: 330px; right: 36px; }
  .ai-tabs { bottom: 300px; left: 36px; right: 36px; }
  .ai-tab { font-size: 14px; padding: 10px 20px; }
}

/* ── 2560px+：原生 4K / 100%缩放 ── */
@media (min-width: 2560px) {
  .chat-prompt { font-size: 19px !important; }
  .chat-model-btn { font-size: 16px; padding: 11px 22px; min-height: 48px; }
  .chat-select { font-size: 16px; padding: 11px 18px; min-height: 48px; }
  .chat-send-btn { padding: 11px 26px; }
  .chat-send-cost { font-size: 16px; }
  .chat-cost { font-size: 16px; padding: 7px 16px; }
  .chat-size-tip { font-size: 13px; }
  .chat-resolution-display { font-size: 14px; }
  .chat-input-wrap { min-height: 96px; }
  .chat-input-bar { padding: 16px 32px 20px; }
  .chat-welcome h2 { font-size: 30px; }
  .chat-welcome p { font-size: 17px; }
  .chat-ref-upload { width: 50px; height: 50px; }
  .chat-ref-upload svg { width: 26px; height: 26px; }
  .chat-msg-avatar { width: 46px; height: 46px; }
  .chat-msg-bubble { font-size: 16px; }
  /* ai-card 浮窗布局 */
  .ai-card .chat-messages { padding: 20px 32px 370px 32px; }
  .ai-card .chat-welcome { padding: 100px 28px; }
  .ai-card .chat-welcome h2 { font-size: 34px; }
  .ai-card .chat-welcome p { font-size: 18px; }
  .ai-card .chat-scroll-btn { bottom: 360px; right: 40px; }
  .ai-tabs { bottom: 324px; left: 40px; right: 40px; }
  .ai-tab { font-size: 16px; padding: 12px 22px; }
}