/* ============================================
   Tailbase Official Website Theme
   Tailwind CSS v4 + TraeWork design tokens
   Light / Dark mode + desktop logo + mobile bottom nav
   ============================================ */

:root {
  /* Tailbase Brand Colors */
  --color-tailbase-white: #F5FAFF;
  --color-tailbase-glacier: #E6F1FF;
  --color-tailbase-ice: #C2DDFF;
  --color-tailbase-sky: #4DA3FF;
  --color-tailbase-electric: #0070D8;
  --color-tailbase-navy: #002C5D;
  --color-tailbase-deep: #001A38;
  --color-tailbase-coolgrey: #6C727F;
  --color-tailbase-dark: #202124;

  /* Light mode semantic colors */
  --color-bg-default: #FFFFFF;
  --color-bg-secondary: #F4F7FB;
  --color-bg-tertiary: #E6EBF2;
  --color-surface-elevated: #FFFFFF;
  --color-surface-glass: rgba(255, 255, 255, 0.72);
  --color-overlay-1: rgba(0, 26, 56, 0.05);
  --color-overlay-2: rgba(0, 26, 56, 0.09);
  --color-overlay-3: rgba(0, 26, 56, 0.15);

  --color-text-default: #202124;
  --color-text-secondary: #4B5059;
  --color-text-tertiary: #6C727F;
  --color-text-muted: #9399A3;

  --color-border-1: rgba(0, 26, 56, 0.08);
  --color-border-2: rgba(0, 26, 56, 0.14);
  --color-border-3: rgba(0, 26, 56, 0.24);

  /* Brand accent */
  --color-brand: #005FB8;
  --color-brand-hover: #2E8FFF;
  --color-brand-active: #002C5D;
  --color-brand-soft: rgba(0, 95, 184, 0.12);
  --color-brand-soft-2: rgba(0, 95, 184, 0.18);

  /* Nav tokens — light mode */
  --nav-bg: #FFFFFF;
  --nav-bg-glass: rgba(255, 255, 255, 0.88);
  --nav-border: rgba(0, 26, 56, 0.10);
  --nav-icon: rgba(0, 26, 56, 0.65);
  --nav-icon-active: var(--color-tailbase-navy);
  --nav-active-bg: rgba(0, 95, 184, 0.10);
  --nav-active-border: rgba(0, 95, 184, 0.20);
  --nav-active-glow: rgba(0, 95, 184, 0.22);
  --nav-hover-bg: rgba(0, 26, 56, 0.06);
  --nav-shadow: 0 4px 24px rgba(0, 26, 56, 0.08);

  /* Typography */
  --font-sans: "SF Pro Text", "PingFang SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "SF Pro", "PingFang SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-metric: "Inter", "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --text-display: 3.25rem;
  --text-display-sm: 2.5rem;
  --text-h1: 1.75rem;
  --text-h2: 1.375rem;
  --text-h3: 1.125rem;
  --text-h4: 1rem;
  --text-body-lg: 1.125rem;
  --text-body: 0.875rem;
  --text-body-sm: 0.8125rem;
  --text-caption: 0.75rem;

  --leading-display: 1.15;
  --leading-display-sm: 1.2;
  --leading-h1: 1.25;
  --leading-h2: 1.3;
  --leading-h3: 1.35;
  --leading-h4: 1.4;
  --leading-body-lg: 1.55;
  --leading-body: 1.5;
  --leading-caption: 1.4;

  /* Spacing */
  --spacing-2: 0.125rem;
  --spacing-3: 0.1875rem;
  --spacing-4: 0.25rem;
  --spacing-6: 0.375rem;
  --spacing-8: 0.5rem;
  --spacing-10: 0.625rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-20: 1.25rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-64: 4rem;
  --spacing-80: 5rem;
  --spacing-96: 6rem;
  --spacing-120: 7.5rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.625rem;
  --radius-2xl: 0.75rem;
  --radius-3xl: 1rem;
  --radius-4xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 26, 56, 0.04), 0 1px 2px rgba(0, 26, 56, 0.02);
  --shadow-card-hover: 0 12px 32px rgba(0, 26, 56, 0.11), 0 4px 12px rgba(0, 26, 56, 0.05);
  --shadow-soft: 0 4px 24px rgba(0, 26, 56, 0.07);

  /* Semantic token aliases for head-contract / Tailwind v4 bridge */
  --color-background: var(--color-bg-default);
  --color-foreground: var(--color-text-default);
  --color-card: var(--color-surface-elevated);
  --color-primary: var(--color-brand);
  --color-border: var(--color-border-1);
  --color-muted: var(--color-text-muted);
  --color-radius-sm: var(--radius-sm);
  --color-radius-md: var(--radius-md);
  --color-radius-lg: var(--radius-lg);
}

/* Dark mode overrides */
[data-theme="dark"] {
  --color-bg-default: #0B1018;
  --color-bg-secondary: #111A25;
  --color-bg-tertiary: #1A2535;
  --color-surface-elevated: #111A25;
  --color-surface-glass: rgba(17, 26, 37, 0.72);
  --color-overlay-1: rgba(255, 255, 255, 0.05);
  --color-overlay-2: rgba(255, 255, 255, 0.09);
  --color-overlay-3: rgba(255, 255, 255, 0.15);

  --color-text-default: #F5FAFF;
  --color-text-secondary: #B8D4FF;
  --color-text-tertiary: #8AA3C2;
  --color-text-muted: #6C7A8C;

  --color-border-1: rgba(255, 255, 255, 0.10);
  --color-border-2: rgba(255, 255, 255, 0.18);
  --color-border-3: rgba(255, 255, 255, 0.30);

  /* Nav tokens — dark mode (original style) */
  --nav-bg: var(--color-tailbase-deep);
  --nav-bg-glass: rgba(0, 26, 56, 0.85);
  --nav-border: rgba(255, 255, 255, 0.10);
  --nav-icon: rgba(255, 255, 255, 0.72);
  --nav-icon-active: rgba(255, 255, 255, 1);
  --nav-active-bg: rgba(255, 255, 255, 0.10);
  --nav-active-border: rgba(255, 255, 255, 0.10);
  --nav-active-glow: rgba(46, 143, 255, 0.18);
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.22);
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.25);

  /* Dark mode brand tints — brighter against dark backgrounds */
  --color-brand: #0078E7;
  --color-brand-hover: #4DA3FF;
  --color-brand-active: #005FB8;
  --color-brand-soft: rgba(0, 120, 231, 0.18);
  --color-brand-soft-2: rgba(0, 120, 231, 0.26);
}

/* ============================================
   Base
   ============================================ */
html {
  scroll-behavior: smooth;
  background-color: var(--color-bg-default);
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-default);
  background-color: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

@media (min-width: 640px) {
  body {
    padding-bottom: 0;
  }
}

::selection {
  background-color: rgba(46, 143, 255, 0.18);
  color: var(--color-tailbase-deep);
}

[data-theme="dark"] ::selection {
  background-color: rgba(46, 143, 255, 0.28);
  color: var(--color-tailbase-white);
}

/* ============================================
   Typography utilities
   ============================================ */
.font-display {
  font-family: var(--font-display);
}

.text-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -0.03em;
}

.text-display-sm {
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  letter-spacing: -0.02em;
}

.text-h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: -0.02em;
}

.text-h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: -0.02em;
}

.text-h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: -0.01em;
}

.text-h4 {
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: -0.01em;
}

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: -0.01em;
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: -0.01em;
}

.text-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 500;
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-brand);
  color: white;
  box-shadow: 0 4px 14px rgba(0, 95, 184, 0.28);
}

.btn-primary:hover {
  background-color: var(--color-brand-hover);
  box-shadow: 0 6px 20px rgba(0, 95, 184, 0.36);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--color-brand-active);
  transform: translateY(0);
}

[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-tailbase-electric) 100%);
  box-shadow: 0 4px 16px rgba(46, 143, 255, 0.35);
}

[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, var(--color-brand-hover) 0%, var(--color-brand) 100%);
  box-shadow: 0 6px 24px rgba(46, 143, 255, 0.45);
}

[data-theme="dark"] .btn-primary:active {
  background: linear-gradient(135deg, var(--color-tailbase-electric) 0%, var(--color-brand-active) 100%);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-tailbase-navy);
  border-color: var(--color-border-2);
}

[data-theme="dark"] .btn-secondary {
  color: var(--color-text-default);
  border-color: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: rgba(46, 143, 255, 0.12);
  border-color: rgba(46, 143, 255, 0.38);
}

.btn-secondary:hover {
  background-color: var(--color-overlay-1);
  border-color: var(--color-border-3);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-tailbase-navy);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
}

[data-theme="dark"] .btn-ghost {
  color: var(--color-text-default);
}

[data-theme="dark"] .btn-ghost:hover {
  background-color: rgba(46, 143, 255, 0.12);
}

.btn-ghost:hover {
  background-color: var(--color-overlay-1);
}

.btn-white {
  background-color: var(--color-surface-elevated);
  color: var(--color-tailbase-deep);
  box-shadow: var(--shadow-soft);
}

.btn-white:hover {
  background-color: var(--color-tailbase-white);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-white {
  background-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text-default);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
}

[data-theme="dark"] .btn-white:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ============================================
   Cards
   ============================================ */
.card {
  background-color: var(--color-bg-default);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-3xl);
  transition: all 0.25s ease;
}

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

.card-filled {
  background-color: var(--color-bg-secondary);
  border-color: transparent;
}

[data-theme="dark"] .card {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border-2);
}

[data-theme="dark"] .card-hover:hover {
  border-color: rgba(46, 143, 255, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(46, 143, 255, 0.12);
}

/* ============================================
   Navigation
   ============================================ */
.nav-link {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.nav-link:hover {
  color: var(--color-tailbase-navy);
  background-color: var(--color-overlay-1);
}

[data-theme="dark"] .nav-link:hover {
  color: var(--color-tailbase-white);
}

/* Site logo — 48px circle below the nav capsule */
.site-logo {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  background: #6366f1;
  color: white;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
}

.site-logo .logo-mark {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1;
}

.site-logo .logo-mark-image,
.site-logo .logo-mark-image img,
.site-logo .logo-mark-image svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-logo .logo-mark-image img,
.site-logo .logo-mark-image svg {
  object-fit: contain;
}

/* Nav capsule */
.nav-capsule {
  position: relative;
  display: none;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-full);
  border: 1px solid var(--nav-border);
  background: transparent;
  box-shadow: var(--nav-shadow);
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.nav-capsule:hover {
  box-shadow: var(--shadow-card-hover);
}

.nav-capsule-bg {
  position: absolute;
  inset: 2px;
  background: var(--nav-bg);
  border-radius: var(--radius-full);
}

@media (min-width: 640px) {
  .nav-capsule-bg {
    background: var(--nav-bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
}

.nav-capsule-nav {
  position: relative;
  z-index: 10;
  display: flex;
  height: 42px;
  justify-content: space-around;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  transition: gap 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-capsule-nav:has(.nav-pill:hover) {
  gap: 0.75rem;
}

/* Pill navigation (icon-only, theme-aware) */
.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  color: var(--nav-icon);
  text-decoration: none;
  background: transparent;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-pill:hover {
  color: var(--nav-icon-active);
  background-color: var(--nav-hover-bg);
  border-color: var(--nav-border);
  backdrop-filter: blur(24px);
}

.nav-pill-active {
  color: var(--nav-icon-active);
  background-color: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  box-shadow: 0 0 20px var(--nav-active-glow), inset 0 1px 0 var(--nav-active-border);
  backdrop-filter: blur(24px);
}

.nav-pill svg,
.theme-toggle svg,
[data-tailbase-theme-toggle] svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}

/* 主题切换按钮（旧版：右上角悬浮，新版：胶囊 header 内右缘滑动） */
[data-tailbase-theme-toggle] {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 1px solid var(--nav-border);
  background: var(--nav-bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--nav-icon);
  box-shadow: var(--nav-shadow);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-tailbase-theme-toggle]:hover {
  color: var(--nav-icon-active);
  background: var(--nav-hover-bg);
  border-color: var(--nav-border);
}

/* Theme toggle icon visibility */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  color: var(--nav-icon);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover {
  color: var(--nav-icon-active);
  background-color: var(--nav-hover-bg);
  border-color: var(--nav-border);
  backdrop-filter: blur(24px);
}

/* Theme toggle icon visibility */
[data-theme="light"] .theme-icon-light,
[data-theme="dark"] .theme-icon-dark {
  display: block;
}

[data-theme="light"] .theme-icon-dark,
[data-theme="dark"] .theme-icon-light {
  display: none;
}

/* Mobile bottom navigation — floating capsule */
.mobile-nav {
  position: fixed;
  bottom: 0.75rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 50;
  width: 85%;
  max-width: 420px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
  background: var(--nav-bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-full);
  box-shadow:
    0 4px 24px rgba(0, 26, 56, 0.12),
    0 8px 32px rgba(0, 26, 56, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
  .nav-capsule,
  .site-logo {
    display: inline-flex;
  }

  .mobile-nav {
    display: none;
  }
}

.mobile-nav-item {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-full);
  color: var(--nav-icon);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-nav-item svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  flex-shrink: 0;
}

.mobile-nav-item.active {
  color: var(--nav-icon-active);
  background-color: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  box-shadow: 0 0 16px var(--nav-active-glow), inset 0 1px 0 var(--nav-active-border);
}

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

.mobile-nav-item:active {
  transform: scale(0.96);
}

/* ============================================
   Decorative elements
   ============================================ */
.gradient-mesh {
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0, 95, 184, 0.10), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(77, 163, 255, 0.09), transparent),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(194, 221, 255, 0.14), transparent);
}

[data-theme="dark"] .gradient-mesh {
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0, 95, 184, 0.18), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(77, 163, 255, 0.14), transparent),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(0, 44, 93, 0.30), transparent);
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.glow-orb-blue {
  background: rgba(0, 95, 184, 0.16);
}

.glow-orb-sky {
  background: rgba(77, 163, 255, 0.14);
}

.glow-orb-white {
  background: rgba(255, 255, 255, 0.22);
}

/* Connection nodes pattern */
.node-line {
  stroke: rgba(0, 95, 184, 0.20);
  stroke-width: 1.5;
  fill: none;
}

.node-dot {
  fill: var(--color-brand);
}

/* ============================================
   Forms
   ============================================ */
.form-input {
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-default);
  background-color: var(--color-bg-default);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-xl);
  transition: all 0.15s ease;
}

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

.form-input:hover {
  border-color: var(--color-border-3);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

[data-theme="dark"] .form-input {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border-2);
}

[data-theme="dark"] .form-input:hover {
  border-color: var(--color-border-3);
}

.form-label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-8);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C727F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: var(--spacing-40);
}

[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238AA3C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ============================================
   Section patterns
   ============================================ */
.section-padding {
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-80);
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: var(--spacing-96);
    padding-bottom: var(--spacing-96);
  }
}

.container-tailbase {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
}

@media (min-width: 1024px) {
  .container-tailbase {
    padding-left: var(--spacing-32);
    padding-right: var(--spacing-32);
  }
}

/* ============================================
   Animations
   ============================================ */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-node-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-soft {
  animation: pulse-soft 4s ease-in-out infinite;
}

.animate-hero-node {
  animation: hero-node-float 3s ease-in-out infinite;
  will-change: transform;
}

.animate-slide-up {
  animation: slide-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fade-in 0.8s ease forwards;
}

.stagger-1 { animation-delay: 0.08s; }
.stagger-2 { animation-delay: 0.16s; }
.stagger-3 { animation-delay: 0.24s; }
.stagger-4 { animation-delay: 0.32s; }
.stagger-5 { animation-delay: 0.40s; }

/* ============================================
   Utilities
   ============================================ */
.text-balance {
  text-wrap: balance;
}

.bg-surface {
  background-color: var(--color-bg-default);
}

.bg-surface-elevated {
  background-color: var(--color-surface-elevated);
}

.bg-surface-glass {
  background-color: var(--color-surface-glass);
}

.bg-tailbase-gradient {
  background: linear-gradient(180deg, var(--color-tailbase-white) 0%, var(--color-tailbase-glacier) 100%);
}

[data-theme="dark"] .bg-tailbase-gradient {
  background: linear-gradient(180deg, var(--color-tailbase-deep) 0%, #0B1018 100%);
}

.bg-hero-gradient {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 95, 184, 0.09) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-tailbase-white) 0%, #FFFFFF 100%);
}

[data-theme="dark"] .bg-hero-gradient {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(46, 143, 255, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-tailbase-deep) 0%, #0B1018 100%);
}

[data-theme="dark"] .bg-hero-gradient h1,
[data-theme="dark"] .bg-hero-gradient h2,
[data-theme="dark"] .bg-hero-gradient h3,
[data-theme="dark"] .bg-tailbase-gradient h1,
[data-theme="dark"] .bg-tailbase-gradient h2,
[data-theme="dark"] .bg-tailbase-gradient h3 {
  color: var(--color-text-default);
}

[data-theme="dark"] .bg-hero-gradient .text-\[var\(--color-tailbase-navy\)\],
[data-theme="dark"] .bg-tailbase-gradient .text-\[var\(--color-tailbase-navy\)\] {
  color: var(--color-text-default);
}

[data-theme="dark"] .bg-hero-gradient .text-\[var\(--color-tailbase-coolgrey\)\],
[data-theme="dark"] .bg-tailbase-gradient .text-\[var\(--color-tailbase-coolgrey\)\] {
  color: var(--color-text-secondary);
}

/* Dark mode: all navy headings should use readable light text */
[data-theme="dark"] .text-\[var\(--color-tailbase-navy\)\] {
  color: var(--color-text-default);
}

/* Dark mode: cool grey text should use secondary text color */
[data-theme="dark"] .text-\[var\(--color-tailbase-coolgrey\)\] {
  color: var(--color-text-secondary);
}

.bg-deep-gradient {
  background: linear-gradient(135deg, var(--color-tailbase-deep) 0%, var(--color-tailbase-navy) 100%);
}

/* Section / footer brand backgrounds — swap in light mode for visual rhythm */
[data-theme="light"] .bg-section-brand {
  background-color: var(--color-tailbase-navy);
}

[data-theme="light"] .bg-footer-brand {
  background-color: var(--color-tailbase-deep);
}

[data-theme="dark"] .bg-section-brand {
  background-color: var(--color-tailbase-deep);
}

[data-theme="dark"] .bg-footer-brand {
  background-color: var(--color-tailbase-deep);
}

.divider {
  height: 1px;
  background-color: var(--color-border-1);
}

/* ============================================
   Dark mode refinements
   ============================================ */

/* Glacier/ice tinted surfaces — swap to deep blue glow in dark */
[data-theme="dark"] .bg-\[var\(--color-tailbase-glacier\)\] {
  background-color: rgba(0, 95, 184, 0.22) !important;
}

/* Gradient from glacier to white — swap to deep blue gradient in dark */
[data-theme="dark"] .from-\[var\(--color-tailbase-glacier\)\] {
  --tw-gradient-from: rgba(0, 95, 184, 0.22) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(0, 95, 184, 0) var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

[data-theme="dark"] .to-white {
  --tw-gradient-to: var(--color-bg-secondary) var(--tw-gradient-to-position);
}

[data-theme="dark"] .bg-gradient-to-br.from-\[var\(--color-tailbase-glacier\)\].to-white {
  background-image: linear-gradient(135deg, rgba(0, 95, 184, 0.22) 0%, var(--color-bg-secondary) 100%) !important;
}

/* Glass card overrides used on brand page */
[data-theme="dark"] .bg-white\/80 {
  background-color: rgba(17, 26, 37, 0.72) !important;
}

[data-theme="dark"] .border-white\/60 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Brand badges / labels — better contrast in dark */
[data-theme="dark"] .bg-\[var\(--color-brand-soft\)\].rounded-full {
  background-color: rgba(0, 120, 231, 0.22);
}

[data-theme="dark"] .bg-\[var\(--color-brand-soft\)\].rounded-full.text-\[var\(--color-brand\)\] {
  color: #A3D0FF;
}

[data-theme="dark"] .bg-\[var\(--color-brand-soft\)\].rounded-full .bg-\[var\(--color-brand\)\] {
  background-color: #4DA3FF;
}

/* Brand text — brighter against dark surfaces */
[data-theme="dark"] .text-\[var\(--color-brand\)\] {
  color: #4DA3FF;
}

/* Decorative glow orbs in dark */
[data-theme="dark"] .glow-orb-blue {
  background: rgba(46, 143, 255, 0.22);
}

[data-theme="dark"] .glow-orb-sky {
  background: rgba(77, 163, 255, 0.18);
}

/* Connection node pattern in dark */
[data-theme="dark"] .node-line {
  stroke: rgba(46, 143, 255, 0.28);
}

[data-theme="dark"] .node-dot {
  fill: var(--color-tailbase-sky);
}

/* Logo — brighter gradient in dark */
[data-theme="dark"] .site-logo {
  background: #6366f1;
  box-shadow: 0 4px 24px rgba(46, 143, 255, 0.25);
}

/* ============================================
   Brand story section additions
   ============================================ */

/* Brand story section — independent cool blue-grey palette, distinct from hero */
.bg-brand-story-gradient {
  background:
    radial-gradient(ellipse 70% 50% at 15% 25%, rgba(0, 95, 184, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(77, 163, 255, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #F8FAFC 0%, #F0F7FF 100%);
}

[data-theme="dark"] .bg-brand-story-gradient {
  background:
    radial-gradient(ellipse 70% 50% at 15% 25%, rgba(46, 143, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(0, 95, 184, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0B1420 0%, #0B1018 100%);
}

/* Dot-grid decoration unique to brand story, no overlap with hero node lines */
.brand-story-decoration {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 95, 184, 0.10) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
}

[data-theme="dark"] .brand-story-decoration {
  background-image: radial-gradient(circle, rgba(46, 143, 255, 0.12) 1px, transparent 1px);
  opacity: 0.35;
}

/* Large brand watermark — giant faint "W" */
.brand-watermark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  font-size: clamp(12rem, 45vw, 32rem);
  color: var(--color-tailbase-navy);
  opacity: 0.05;
  z-index: 0;
}

[data-theme="dark"] .brand-watermark {
  color: white;
  opacity: 0.04;
}

/* Consistent section badge / label utility */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-full);
  background-color: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 500;
  margin-bottom: var(--spacing-24);
}

.section-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-brand);
  flex-shrink: 0;
}

/* Light variant for dark / brand backgrounds */
.section-badge-light {
  background-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
}

.section-badge-light::before {
  background-color: var(--color-tailbase-sky);
}

/* Logo meaning cards with subtle top accent */
.logo-meaning-card {
  position: relative;
  overflow: hidden;
}

.logo-meaning-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-tailbase-sky) 100%);
  opacity: 0.6;
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Theme transition — radial expansion from click point
   ============================================ */
:root {
  --vt-origin-x: 50%;
  --vt-origin-y: 50%;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-new(root) {
  clip-path: circle(0% at var(--vt-origin-x) var(--vt-origin-y));
  animation: vt-radial-reveal 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  z-index: 9999;
}

::view-transition-old(root) {
  z-index: 1;
}

@keyframes vt-radial-reveal {
  to {
    clip-path: circle(150% at var(--vt-origin-x) var(--vt-origin-y));
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}

/* ============================================
   Sticky capsule header (jojocode-style)
   默认无边框悬浮在页面顶部，滚动超过 header
   高度后收缩为居中的毛玻璃胶囊。
   ============================================ */
.site-header {
  pointer-events: none;
}

.admin-bar .site-header {
  top: 32px;
}

.site-header__inner {
  pointer-events: auto;
  box-sizing: border-box;
  max-width: 80rem; /* max-w-7xl = 1280px */
  margin-inline: auto;
  padding-inline: 1rem;
  transition: max-width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4rem; /* 64px */
  padding-inline: 0.5rem;
  border-radius: 0;
  border: 0.5px solid transparent;
  background: transparent;
  box-shadow: none;
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 滚动后的胶囊形态 */
.site-header.is-scrolled .site-header__inner {
  max-width: 52rem; /* 832px */
  padding-inline: 0.75rem;
  padding-top: 0.75rem;
}

.site-header.is-scrolled .site-header__pill {
  height: 3rem; /* 48px */
  border-radius: 1.8rem;
  border-color: var(--color-border-1);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 16px -6px rgba(0, 0, 0, 0.08),
    0 0 0 0.5px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

[data-theme="dark"] .site-header.is-scrolled .site-header__pill {
  border-color: var(--color-border-1);
  background: rgba(17, 26, 37, 0.62);
  box-shadow: 0 2px 16px -6px rgba(0, 0, 0, 0.4);
}

/* 左侧品牌区：logo + 站点标题 + 站点描述 */
.site-header__brand {
  flex-shrink: 0;
  min-width: 0;
}

.site-header__logo {
  width: auto;
}

.site-header__logo img {
  display: block;
  width: auto;
  height: 2rem;
  object-fit: contain;
}

.site-header__titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.site-header__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.site-header__title a {
  color: var(--color-text-default);
  text-decoration: none;
}

.site-header__title a:hover {
  color: var(--color-brand);
}

.site-header__tagline {
  margin: 0;
  max-width: 18rem;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧核心导航 */
.site-header__nav {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.site-header__nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.site-header__nav .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--color-text-default);
  background-color: var(--color-overlay-1);
}

/* 最右侧：CTA 按钮 + 主题切换 */
.site-header__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  margin: 0;
  /* 给右侧滑动的主题切换按钮预留空间，避免重叠 */
  padding-right: 2.75rem;
}

.site-header .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 2rem;
  padding: 0 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}

.site-header [data-tailbase-theme-toggle] {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-secondary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* 随胶囊宽度变化平滑左右滑动（顶部贴右缘 → 滚动后滑入胶囊内） */
  transition: right 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease,
    color 0.2s ease;
}

.site-header [data-tailbase-theme-toggle]:hover {
  background-color: var(--color-overlay-1);
  border-color: transparent;
  color: var(--color-text-default);
}

.site-header.is-scrolled [data-tailbase-theme-toggle] {
  right: 0.375rem;
}

/* 极简页眉：主题切换按钮定位在页眉右缘，与其他模板视觉一致 */
.tailbase-framework-header--minimal {
  position: relative;
}

.tailbase-framework-header--minimal [data-tailbase-theme-toggle] {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-secondary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tailbase-framework-header--minimal [data-tailbase-theme-toggle]:hover {
  background-color: var(--color-overlay-1);
  color: var(--color-text-default);
}

/* 移动端收缩 */
@media (max-width: 639.98px) {
  .admin-bar .site-header {
    top: 46px;
  }

  .site-header__inner {
    padding-inline: 0.75rem;
  }

	.site-header__pill,
	.site-header.is-scrolled .site-header__pill {
		gap: 0.75rem;
		/* backdrop-filter 会创建 fixed 定位的包含块，
		   移动端全屏菜单打开时会导致覆盖层定位错误，这里关闭。 */
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

  .site-header__tagline {
    display: none;
  }

	.site-header .wp-block-button__link {
		padding-inline: 0.625rem;
		font-size: 0.75rem;
	}

	.site-header__actions {
		padding-right: 2.5rem;
	}
}

/* 无障碍：关闭过渡动画 */
@media (prefers-reduced-motion: reduce) {
	.site-header__inner,
	.site-header__pill,
	.site-header [data-tailbase-theme-toggle] {
		transition: none;
	}
}

/* ============================================
   Tailbase 独立按钮（下拉菜单 / 弹框）
   ============================================ */
button.btn {
  font-family: inherit;
}

.tailbase-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tailbase-btn-icon svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.75;
}

.tailbase-btn-icon img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}

/* 裸样式按钮：移除按钮底色/边框/内边距，用于纯图标或纯图片 */
.tailbase-btn-bare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.tailbase-btn-bare:hover {
  opacity: 0.8;
}

/* ============================================
   Comments 评论
   ============================================ */
.tailbase-comments {
  margin-top: var(--spacing-16);
}

.tailbase-comments__title {
  margin-bottom: var(--spacing-8);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.wp-block-comment-template {
  display: grid;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
}

.wp-block-post-comments-form .comment-form label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-size: var(--text-sm);
  font-weight: 500;
}

.wp-block-post-comments-form .comment-form input[type="text"],
.wp-block-post-comments-form .comment-form input[type="email"],
.wp-block-post-comments-form .comment-form input[type="url"],
.wp-block-post-comments-form .comment-form input[type="tel"],
.wp-block-post-comments-form .comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  color: var(--color-text-default);
  font: inherit;
}

.wp-block-post-comments-form .comment-form input:focus,
.wp-block-post-comments-form .comment-form textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0, 95, 184, 0.15);
}

.wp-block-post-comments-form .comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-24);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wp-block-post-comments-form .comment-form .submit:hover {
  background: var(--color-brand-hover);
  transform: translateY(-1px);
}

/* 下拉菜单 */
.tailbase-action-wrap {
  position: relative;
  display: inline-flex;
}

.tailbase-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 60;
  box-sizing: border-box;
  min-width: 12rem;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  border: 1px solid var(--color-border-2);
  border-radius: 0.75rem;
  background: var(--color-surface-elevated);
  box-shadow: 0 12px 32px rgba(0, 26, 56, 0.14), 0 2px 8px rgba(0, 26, 56, 0.08);
}

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

.tailbase-dropdown li {
  margin: 0;
}

.tailbase-dropdown li a {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--color-text-default);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tailbase-dropdown li a:hover {
  background-color: var(--color-overlay-1);
  color: var(--color-brand);
}

[data-theme="dark"] .tailbase-dropdown {
  border-color: var(--color-border-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* 弹框 */
.tailbase-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1rem;
  background: rgba(0, 26, 56, 0.45);
}

.tailbase-modal[hidden] {
  display: none;
}

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

.tailbase-modal__dialog {
  position: relative;
  box-sizing: border-box;
  width: min(28rem, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--color-bg-default);
  color: var(--color-text-default);
  box-shadow: 0 24px 64px rgba(0, 26, 56, 0.28);
}

.tailbase-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tailbase-modal__close:hover {
  background-color: var(--color-overlay-1);
  color: var(--color-text-default);
}

.tailbase-modal__title {
  margin: 0 2rem 0.75rem 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.tailbase-modal__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

body.tailbase-modal-open {
  overflow: hidden;
}

/* 管理员登录（admin bar 32px）时，右上角明暗切换按钮整体下移 32px，
   避免被管理工具栏遮挡。 */
body.admin-bar.wp-child-theme-tailbase-wayle [data-tailbase-theme-toggle] {
  top: calc(1rem + 32px);
}

/* site-logo 与上方导航胶囊保持 1rem 间距。 */
.wp-child-theme-tailbase-wayle #site-header .site-logo {
  margin-top: 1rem;
}

/* 备案段：改为 flex，图标与文字同一行垂直居中 */
footer p:has(a[href*="beian.mps.gov.cn"]),
footer p:has(img[alt="备案"]) {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1;
}

/* 备案小图标：固定宽高，不再高度为 0，垂直居中 */
footer p:has(a[href*="beian.mps.gov.cn"]) img,
footer p img[alt="备案"] {
  width: 12px;
  height: 12px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0 !important;
  flex-shrink: 0;
}

/* 备案链接：行内 flex，保证图标与链接文字对齐 */
footer p:has(a[href*="beian.mps.gov.cn"]) a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* 页脚透明度工具类兜底：子主题 dist 未编译 text-white/40、/60、border-white/10，
   这里补上与 Tailwind v4 一致的 rgba 输出。 */
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}