:root {
  --spacing-0: 0px;
  --spacing-px: 1px;
  --spacing-0_5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1_5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-2_5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-3_5: 0.875rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;
  --radius-none: 0;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-full: calc(infinity * 1px);
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-none: 0 0 #0000;
  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
  --inset-shadow-none: inset 0 0 #0000;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --container-narrow: 48rem;
  --container-default: 75rem;
  --container-wide: 87.5rem;
  /* === Core Semantic Tokens === */
  --background: #FFFFFF;
  --foreground: #1A1A2E;
  --primary: #1A3A7E;
  --primary-foreground: #FFFFFF;
  --secondary: #16316B;
  --secondary-foreground: #1A1A2E;
  --accent: #F5B82E;
  --accent-foreground: #FFFFFF;
  --muted: #9CA3AF;
  --muted-foreground: #6B7280;
  --primary-rgb: 26,58,126;
  --accent-rgb: 245,184,46;
  --background-rgb: 255,255,255;
  --foreground-rgb: 26,26,46;
  --card: #FFFFFF;
  --card-foreground: #1A1A2E;
  --surface: #F8F9FA;
  --surface-foreground: #374151;
  --border: #E5E7EB;
  --input: #FFFFFF;
  --ring: rgba(26,58,126,0.4);
  --radius: 0.75rem;
  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;
  --success: #10B981;
  --warning: #F59E0B;
  --header-bg: #FFFFFF;
  --header-foreground: #1A1A2E;
  --hero-bg: linear-gradient(135deg, #1A3A7E 0%, #214BA3 100%);
  --hero-foreground: #FFFFFF;
  --footer-bg: #1F2937;
  --footer-foreground: #94A3B8;
  --cta-bg: linear-gradient(135deg, #1A3A7E 0%, #F5B82E 100%);
  --cta-foreground: #FFFFFF;
  --overlay: rgba(0,0,0,0.2);
  --shadow-color: rgba(0,0,0,0.1);

  /* === Module Alias Tokens === */
  --nav-bg: var(--header-bg);
  --nav-foreground: var(--header-foreground);
  --testimonial-bg: var(--card);
  --testimonial-foreground: var(--card-foreground);
  --testimonial-border: var(--border);
  --star-color: var(--accent);
  --counter-number-color: var(--primary);
  --counter-label-color: var(--muted-foreground);
  --counter-divider: var(--border);
  --popup-overlay: var(--overlay);
  --popup-bg: var(--card);
  --popup-foreground: var(--card-foreground);
  --popup-close: var(--muted);
  --marquee-bg: var(--primary);
  --marquee-foreground: var(--primary-foreground);
  --countdown-bg: var(--surface);
  --countdown-foreground: var(--foreground);
  --countdown-number-bg: var(--card);
  --tab-active-border: var(--primary);
  --tab-active-fg: var(--primary);
  --tab-inactive-fg: var(--muted-foreground);
  --tab-content-bg: var(--surface);
  --partner-bg: var(--surface);
  --partner-border: var(--border);
  --article-bg: var(--card);
  --article-foreground: var(--card-foreground);
  --article-meta: var(--muted-foreground);
  --sidebar-bg: var(--surface);
  --badge-bg: var(--accent);
  --badge-foreground: var(--accent-foreground);

  /* === State Tokens === */
  --primary-hover: #16316B;
  --primary-active: #122858;
  --accent-hover: #D09C27;
  --secondary-hover: #12295A;
  --link-color: #1A3A7E;
  --link-hover: #142E64;
  --input-focus-border: #1A3A7E;
  --input-focus-ring: rgba(26,58,126,0.2);
  --button-disabled-bg: #E5E7EB;
  --button-disabled-fg: #6B7280;
  --card-hover-shadow: 0 8px 25px rgba(26,58,126,0.15);
  --focus-ring: rgba(26,58,126,0.4);

  /* === Extended === */
  --highlight: rgba(26,58,126,0.1);
  --selection-bg: rgba(26,58,126,0.2);
  --code-bg: #F1F5F9;
  --font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  --content-width: 75rem;
  --section-padding: 4rem;
  --image-radius: 0.75rem;

  /* === Theme Dimensions === */
  --type-scale: 1.25;
  --heading-1: 3.052rem;
  --heading-2: 2.441rem;
  --heading-3: 1.953rem;
  --heading-4: 1.562rem;
  --heading-5: 1.25rem;
  --density-multiplier: 1.0;
  --section-padding: 4rem;
  --decoration-level: 1;
  --motion-speed: 250ms;
  --motion-distance: 20px;
  --motion-duration: 0.6s;
  --surface-finish: gradient;
  --border-width-token: 1px;
  --border-color-token: var(--border);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
font-family: var(--font-family, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif);
font-size: var(--font-size-base, 16px);
color: var(--foreground);
background: var(--background);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }
:root {
--shadow-1: 0 1px 2px -1px rgba(0,0,0,0.15);
--shadow-2: 0 3px 5px -2px rgba(0,0,0,0.12), 0 7px 14px -5px rgba(0,0,0,0.1);
--shadow-3: 0 -1px 3px 0 rgba(0,0,0,0.04), 0 2px 5px -1px rgba(0,0,0,0.06), 0 4px 12px -2px rgba(0,0,0,0.08), 0 12px 15px -3px rgba(0,0,0,0.1);
--shadow-4: 0 -2px 5px 0 rgba(0,0,0,0.04), 0 1px 1px -2px rgba(0,0,0,0.06), 0 5px 5px -2px rgba(0,0,0,0.08), 0 9px 9px -2px rgba(0,0,0,0.1), 0 16px 16px -2px rgba(0,0,0,0.12);
--shadow-5: 0 -1px 2px 0 rgba(0,0,0,0.04), 0 2px 1px -2px rgba(0,0,0,0.06), 0 5px 5px -2px rgba(0,0,0,0.06), 0 10px 10px -2px rgba(0,0,0,0.08), 0 20px 20px -2px rgba(0,0,0,0.1), 0 40px 40px -2px rgba(0,0,0,0.12);
--shadow-6: 0 -1px 2px 0 rgba(0,0,0,0.04), 0 3px 2px -2px rgba(0,0,0,0.06), 0 7px 5px -2px rgba(0,0,0,0.06), 0 12px 10px -2px rgba(0,0,0,0.08), 0 22px 18px -2px rgba(0,0,0,0.1), 0 41px 33px -2px rgba(0,0,0,0.12), 0 100px 80px -2px rgba(0,0,0,0.14);
--shadow-sm: var(--shadow-1);
--shadow-md: var(--shadow-2);
--shadow-lg: var(--shadow-3);
--shadow-xl: var(--shadow-5);
--shadow-glow: 0 0 20px rgba(var(--primary-rgb), 0.3);
--inner-shadow-0: inset 0 0 0 1px rgba(0,0,0,0.1);
--inner-shadow-1: inset 0 1px 2px 0 rgba(0,0,0,0.1);
--inner-shadow-2: inset 0 1px 4px 0 rgba(0,0,0,0.1);
--inner-shadow-3: inset 0 2px 8px 0 rgba(0,0,0,0.1);
--inner-shadow-4: inset 0 2px 14px 0 rgba(0,0,0,0.1);
--ease-1: cubic-bezier(.25, 0, .5, 1);
--ease-2: cubic-bezier(.25, 0, .4, 1);
--ease-3: cubic-bezier(.25, 0, .3, 1);
--ease-4: cubic-bezier(.25, 0, .2, 1);
--ease-5: cubic-bezier(.25, 0, .1, 1);
--ease-in-1: cubic-bezier(.25, 0, 1, 1);
--ease-in-2: cubic-bezier(.50, 0, 1, 1);
--ease-in-3: cubic-bezier(.70, 0, 1, 1);
--ease-in-4: cubic-bezier(.90, 0, 1, 1);
--ease-in-5: cubic-bezier(1, 0, 1, 1);
--ease-out-1: cubic-bezier(0, 0, .75, 1);
--ease-out-2: cubic-bezier(0, 0, .50, 1);
--ease-out-3: cubic-bezier(0, 0, .3, 1);
--ease-out-4: cubic-bezier(0, 0, .1, 1);
--ease-out-5: cubic-bezier(0, 0, 0, 1);
--ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
--ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
--ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
--ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
--ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
--ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
--ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
--ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
--ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
--ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
--ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
--ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
--ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
--ease-circ-in: cubic-bezier(.6,.04,.98,.335);
--ease-circ-out: cubic-bezier(.075,.82,.165,1);
--ease-cubic-in: cubic-bezier(.55,.055,.675,.19);
--ease-cubic-out: cubic-bezier(.215,.61,.355,1);
--ease-expo-in: cubic-bezier(.95,.05,.795,.035);
--ease-expo-out: cubic-bezier(.19,1,.22,1);
--ease-quad-in: cubic-bezier(.55,.085,.68,.53);
--ease-quad-out: cubic-bezier(.25,.46,.45,.94);
--ease-sine-in: cubic-bezier(.47,0,.745,.715);
--ease-sine-out: cubic-bezier(.39,.575,.565,1);
--ease-step-1: steps(2);
--ease-step-2: steps(3);
--ease-step-3: steps(4);
--ease-step-4: steps(7);
--ease-step-5: steps(10);
--ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
--ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
--ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
--ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
--ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
--ease-out: var(--ease-out-3);
--ease-in-out: var(--ease-in-out-3);
--ease-elastic: var(--ease-elastic-out-2);
--ease-bounce: var(--ease-elastic-out-3);
--ease-squish-1: var(--ease-elastic-in-out-1);
--ease-squish-2: var(--ease-elastic-in-out-2);
--ease-squish-3: var(--ease-elastic-in-out-3);
--transition-fast: 150ms var(--ease-out);
--transition-normal: 250ms var(--ease-out);
--transition-slow: 400ms var(--ease-out);
--accordion-content-height: auto;
--size-xs: 240px;
--size-sm: 380px;
--size-md: 640px;
--size-lg: 1024px;
--size-xl: 1280px;
--size-xxl: 1536px;
--size-content-1: 20ch;
--size-content-2: 45ch;
--size-content-3: 60ch;
--radius-1: 2px;
--radius-2: 5px;
--radius-3: 1rem;
--radius-4: 2rem;
--radius-5: 4rem;
--radius-6: 8rem;
--radius-round: 1e5px;
--radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
--radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
--radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
--radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
--radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
--image-radius: 12px;
--ratio-square: 1;
--ratio-landscape: 4/3;
--ratio-portrait: 3/4;
--ratio-widescreen: 16/9;
--ratio-ultrawide: 18/5;
--ratio-golden: 1.618/1;
--space-block: 1rem;
--space-block-sm: 0.75rem;
--space-block-lg: 1.5rem;
--space-inline: 1rem;
--space-inline-sm: 0.5rem;
--space-nav-v: 1rem;
--space-nav-h: 0.5rem;
--space-form-v: 0.75rem;
--space-form-h: 1rem;
--z-dropdown: 50;
--z-sticky: 80;
--z-nav: 100;
--z-overlay: 150;
--z-modal: 200;
--z-toast: 300;
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--primary); color: var(--primary-foreground); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-bloom { 0% { opacity: 0; filter: brightness(1) blur(20px); } 10% { opacity: 1; filter: brightness(2) blur(10px); } 100% { opacity: 1; filter: brightness(1) blur(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes scale-up { to { transform: scale(1.25); } }
@keyframes scale-down { to { transform: scale(0.75); } }
@keyframes slide-in-up { from { transform: translateY(100%); } }
@keyframes slide-in-down { from { transform: translateY(-100%); } }
@keyframes slide-in-left { from { transform: translateX(-100%); } }
@keyframes slide-in-right { from { transform: translateX(100%); } }
@keyframes slide-out-up { to { transform: translateY(-100%); } }
@keyframes slide-out-down { to { transform: translateY(100%); } }
@keyframes slide-out-left { to { transform: translateX(-100%); } }
@keyframes slide-out-right { to { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes pulse { 50% { transform: scale(1.05); } }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes bounce { 25% { transform: translateY(-20%); } 40% { transform: translateY(-3%); } 0%, 60%, 100% { transform: translateY(0); } }
@keyframes shake-x { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5%); } 40% { transform: translateX(5%); } 60% { transform: translateX(-5%); } 80% { transform: translateX(5%); } }
@keyframes shake-y { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-5%); } 40% { transform: translateY(5%); } 60% { transform: translateY(-5%); } 80% { transform: translateY(5%); } }
@keyframes shake-z { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(3deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes count-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-out-bloom { 0% { opacity: 1; filter: brightness(1) blur(0); } 100% { opacity: 0; filter: brightness(1) blur(20px); } }
@keyframes ken-burns-in { from { transform: scale(1); } to { transform: scale(1.15); } }
@keyframes ken-burns-out { from { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes accordion-down { from { height: 0; opacity: 0; } to { height: var(--accordion-content-height); opacity: 1; } }
@keyframes accordion-up { from { height: var(--accordion-content-height); opacity: 1; } to { height: 0; opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
.animate-fade-in { animation: fade-in 0.5s var(--ease-out-3) both; }
.animate-fade-in-up { animation: fade-in-up 0.6s var(--ease-out-3) both; }
.animate-fade-in-bloom { animation: fade-in-bloom 2s var(--ease-3) both; }
.animate-scale-in { animation: scale-in 0.4s var(--ease-out-3) both; }
.animate-slide-in-up { animation: slide-in-up 0.5s var(--ease-out-3) both; }
.animate-bounce { animation: bounce 2s var(--ease-elastic-in-out-2) infinite; }
.animate-pulse { animation: pulse 2s var(--ease-out-3) infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-float { animation: float 3s var(--ease-in-out-3) infinite; }
.animate-ken-burns { animation: ken-burns-in 20s linear both; }
.animate-ping { animation: ping 1s var(--ease-out-3) infinite; }
.animate-blink { animation: blink 1s var(--ease-step-5) infinite; }
.animate-shake-x { animation: shake-x 0.5s var(--ease-out-3); }
.animate-shake-y { animation: shake-y 0.5s var(--ease-out-3); }
.animate-slide-in-left { animation: slide-in-left 0.5s var(--ease-out-3) both; }
.animate-slide-in-right { animation: slide-in-right 0.5s var(--ease-out-3) both; }
.animate-fade-out { animation: fade-out 0.3s var(--ease-out-3) both; }
.motion-fast { animation-duration: 0.75s; }
.motion-normal { animation-duration: 1.25s; }
.motion-slow { animation-duration: 2s; }
@media (min-width: 576px)  { :root { font-size: 106.25%; } }
@media (min-width: 768px)  { :root { font-size: 112.5%; } }
@media (min-width: 1024px) { :root { font-size: 118.75%; } }
@media (min-width: 1280px) { :root { font-size: 125%; } }
.surface--subtle { background: var(--surface); }
.surface--elevated { background: var(--card); box-shadow: var(--shadow-sm); }
.surface--gradient-down { background: linear-gradient(180deg, var(--background) 0%, var(--surface) 100%); }
.surface--gradient-up { background: linear-gradient(0deg, var(--background) 0%, var(--surface) 100%); }
.surface--primary { background: var(--primary); color: var(--primary-foreground); }
.surface--accent { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; }
.input, input[type="text"], input[type="email"], input[type="password"], textarea, select {
padding: var(--space-form-v, 0.75rem) var(--space-form-h, 1rem);
border: 1px solid var(--border);
border-radius: var(--image-radius, 0.25rem);
background: var(--input, var(--background));
color: var(--foreground);
font-size: 1rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, input:focus, textarea:focus, select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
outline: none;
}
progress {
width: 100%;
height: 8px;
border: none;
border-radius: 4px;
background: var(--surface);
overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--surface); border-radius: 4px; }
progress::-webkit-progress-value { background: var(--primary); border-radius: 4px; transition: width var(--transition-normal); }
progress::-moz-progress-bar { background: var(--primary); border-radius: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-block-sm, 0.75rem) var(--space-inline, 1rem); text-align: left; border-bottom: 1px solid var(--border); }
th { font-weight: 600; color: var(--foreground); }
td { color: var(--muted-foreground); }
table.striped tbody tr:nth-child(odd) { background: var(--surface); }
@keyframes ripple {
0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.3),
0 0 0 10px rgba(var(--primary-rgb), 0.2),
0 0 0 20px rgba(var(--primary-rgb), 0.1); }
100% { box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0.2),
0 0 0 20px rgba(var(--primary-rgb), 0.1),
0 0 0 30px rgba(var(--primary-rgb), 0); }
}
@keyframes float-bubble {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.container { max-width: var(--content-width, 1200px); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 24px; }
.section--alt { background: var(--surface, rgba(0, 0, 0, 0.02)); }
.section--gradient { background: linear-gradient(180deg, var(--background) 0%, var(--surface) 100%); }
.section .heading {
position: relative;
}
.section .divider {
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
margin: 16px auto 32px;
border-radius: 2px;
}
.surface--gradient-down {
background: linear-gradient(180deg, var(--background) 0%, var(--surface, rgba(0,0,0,0.03)) 100%);
}
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 40px; }
@media (max-width: 1024px) {
.container { max-width: 100%; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.hide-tablet { display: none !important; }
}
@media (max-width: 768px) {
.container { padding: 0 16px; }
.section { padding: 56px 16px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.heading--xl { font-size: 28px; }
.heading--lg { font-size: 24px; }
.heading--md { font-size: 22px; }
.btn--lg { font-size: 16px; padding: 14px 32px; }
.hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
.grid--4 { grid-template-columns: 1fr; }
.heading--xl { font-size: 24px; }
.btn { padding: 10px 24px; font-size: 14px; }
}
.ratio-square { aspect-ratio: var(--ratio-square); }
.ratio-landscape { aspect-ratio: var(--ratio-landscape); }
.ratio-portrait { aspect-ratio: var(--ratio-portrait); }
.ratio-widescreen { aspect-ratio: var(--ratio-widescreen); }
.ratio-ultrawide { aspect-ratio: var(--ratio-ultrawide); }
.ratio-golden { aspect-ratio: var(--ratio-golden); }
.section + .section { border-top: 1px solid var(--border); }
.section--alt + .section--alt { border-top: none; }
.section--wave {
position: relative;
padding-bottom: 120px;
}
.section--wave::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 80px;
background: var(--background);
clip-path: ellipse(55% 100% at 50% 100%);
}
.pattern-grid::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 1;
}
@keyframes float-glow {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -20px) scale(1.1); }
66% { transform: translate(-20px, 15px) scale(0.95); }
}
.section--parallax {
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: var(--space-form-v, 0.75rem) var(--space-form-h, 1.5rem);
border: none;
border-radius: var(--image-radius);
font-size: 16px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { pointer-events: none; opacity: 0.5; }
.btn-primary { background: var(--primary); color: var(--primary-foreground, #fff); }
.btn-primary:hover { box-shadow: var(--shadow-glow); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground, #fff); }
.btn-secondary:hover { opacity: 0.85; }
.btn-accent { background: var(--accent); color: var(--accent-foreground, #fff); }
.btn-destructive { background: var(--destructive); color: var(--destructive-foreground, #fff); }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--primary-foreground); }
.btn-ghost { background: rgba(255,255,255,0.1); color: #fff; backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,0.2); }
.btn-link { background: transparent; color: var(--primary); text-decoration: underline; padding: 0; }
.btn-link:hover { text-decoration: none; }
.btn--lg { font-size: 18px; padding: 16px 48px; border-radius: calc(var(--image-radius) + 4px); }
.btn--sm { font-size: 14px; padding: 8px 20px; }
.btn--xs { font-size: 12px; padding: 4px 12px; }
.btn--pill { border-radius: var(--radius-round, 9999px); }
.btn--icon { padding: 10px; border-radius: 50%; }
.btn--block { width: 100%; }
.heading { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.heading--xl { font-size: 48px; }
.heading--lg { font-size: 32px; }
.heading--md { font-size: 26px; }
.heading--sm { font-size: 20px; }
.heading--xs { font-size: 16px; }
.text-muted { color: var(--muted-foreground); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-gradient {
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-balance { text-wrap: balance; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.card {
background: var(--card);
border-radius: var(--image-radius);
border: 1px solid var(--border);
overflow: hidden;
transition: transform var(--transition-normal),
box-shadow var(--transition-normal),
border-color var(--transition-normal);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
.card--flat { border: none; box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: var(--shadow-sm); }
.card__header { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.375rem; }
.card__body { padding: 28px 24px; }
.card__footer { padding: 1.5rem; padding-top: 0; }
.card__image { width: 100%; height: 200px; object-fit: cover; }
.card__icon {
width: 56px; height: 56px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 24px; font-weight: 700;
margin-bottom: 16px;
}
.card__title { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.025em; }
.card__desc { font-size: 14px; line-height: 1.7; color: var(--muted-foreground); }
.badge {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.625rem;
border-radius: var(--radius-round, 9999px);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25rem;
}
.badge--default { background: var(--primary); color: var(--primary-foreground); }
.badge--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge--accent { background: var(--accent); color: var(--accent-foreground, #fff); }
.badge--destructive { background: var(--destructive); color: var(--destructive-foreground); }
.badge--outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.divider {
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 2px;
margin: 16px auto;
}
.separator { height: 1px; background: var(--border); width: 100%; }
.separator--vertical { width: 1px; height: 100%; }
.avatar {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border);
}
.avatar--xs { width: 24px; height: 24px; }
.avatar--sm { width: 36px; height: 36px; }
.avatar--lg { width: 64px; height: 64px; }
.avatar--xl { width: 80px; height: 80px; }
.avatar-fallback {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--primary);
display: flex; align-items: center; justify-content: center;
color: var(--primary-foreground); font-weight: 700; font-size: 18px;
}
.avatar-group { display: flex; }
.avatar-group .avatar { margin-left: -8px; border: 2px solid var(--background); }
.avatar-group .avatar:first-child { margin-left: 0; }
.carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
padding-top: 16px;
}
.carousel-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border);
border: none;
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.carousel-dot:hover { background: var(--muted-foreground); }
.carousel-dot--active { background: var(--primary); transform: scale(1.3); }
.tabs__list {
display: flex;
justify-content: center;
gap: 4px;
margin-bottom: 32px;
flex-wrap: wrap;
background: var(--surface);
border-radius: var(--image-radius);
padding: 4px;
}
.tabs__trigger {
padding: 0.625rem 1.5rem;
border: none;
background: transparent;
color: var(--muted-foreground);
cursor: pointer;
font-size: 15px;
font-weight: 600;
border-radius: calc(var(--image-radius) - 2px);
transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.tabs__trigger:hover { color: var(--foreground); }
.tabs__trigger--active {
background: var(--background);
color: var(--foreground);
box-shadow: var(--shadow-sm);
}
.tabs__content { display: none; }
.tabs__content--active { display: block; }
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__content {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
background: var(--foreground);
color: var(--background);
border-radius: var(--radius-2, 5px);
font-size: 12px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition-fast);
z-index: var(--z-toast);
}
.tooltip:hover .tooltip__content { opacity: 1; }
.popover {
position: absolute;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--image-radius);
box-shadow: var(--shadow-lg);
padding: 16px;
z-index: var(--z-modal);
animation: zoom-in 0.15s var(--ease-out-3);
}
.dialog-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
z-index: var(--z-overlay);
animation: fade-in 0.2s var(--ease-out-3);
}
.dialog {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: var(--card);
border: 1px solid var(--border);
border-radius: calc(var(--image-radius) + 4px);
box-shadow: var(--shadow-xl);
padding: 24px;
z-index: var(--z-modal);
width: 90%;
max-width: 520px;
max-height: 85vh;
overflow-y: auto;
animation: dialog-in 0.2s var(--ease-out-3);
}
.dialog__header { margin-bottom: 16px; }
.dialog__title { font-size: 18px; font-weight: 600; }
.dialog__description { font-size: 14px; color: var(--muted-foreground); margin-top: 4px; }
.dialog__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.dialog__close {
position: absolute;
top: 16px; right: 16px;
background: none; border: none;
color: var(--muted-foreground);
cursor: pointer;
font-size: 18px;
transition: color var(--transition-fast);
}
.dialog__close:hover { color: var(--foreground); }
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-overlay); }
.sheet {
position: fixed;
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow-xl);
z-index: var(--z-modal);
overflow-y: auto;
}
.sheet--right { top: 0; right: 0; bottom: 0; width: 80%; max-width: 400px; animation: slide-in-right 0.3s var(--ease-out-3); }
.sheet--left { top: 0; left: 0; bottom: 0; width: 80%; max-width: 400px; animation: slide-in-left 0.3s var(--ease-out-3); }
.sheet--bottom { bottom: 0; left: 0; right: 0; max-height: 80vh; border-radius: var(--image-radius) var(--image-radius) 0 0; animation: slide-in-up 0.3s var(--ease-out-3); }
.sheet__header { padding: 24px; border-bottom: 1px solid var(--border); }
.sheet__body { padding: 24px; }
.sheet__footer { padding: 24px; border-top: 1px solid var(--border); }
.select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-form-v) var(--space-form-h);
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--image-radius);
cursor: pointer;
font-size: 14px;
transition: border-color var(--transition-fast);
}
.select-trigger:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); }
.select-content {
position: absolute;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--image-radius);
box-shadow: var(--shadow-lg);
padding: 4px 0;
z-index: var(--z-dropdown);
min-width: 180px;
animation: zoom-in 0.15s var(--ease-out-3);
}
.select-item {
padding: 8px 12px;
cursor: pointer;
font-size: 14px;
transition: background var(--transition-fast);
}
.select-item:hover { background: var(--surface); }
.select-item--active { background: var(--primary); color: var(--primary-foreground); }
.alert {
padding: 16px;
border: 1px solid var(--border);
border-radius: var(--image-radius);
display: flex;
gap: 12px;
align-items: flex-start;
}
.alert--default { background: var(--card); }
.alert--destructive { border-color: var(--destructive); color: var(--destructive); }
.alert--success { border-color: var(--success); }
.alert--warning { border-color: var(--warning); }
.alert__title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.alert__description { font-size: 14px; color: var(--muted-foreground); }
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--muted-foreground);
}
.breadcrumb__separator { opacity: 0.5; }
.breadcrumb__item { color: var(--muted-foreground); }
.breadcrumb__item:hover { color: var(--primary); }
.breadcrumb__current { color: var(--foreground); font-weight: 500; }
.skeleton {
background: var(--surface);
border-radius: var(--radius-2, 5px);
animation: shimmer 2s linear infinite;
background-size: 200% 100%;
background-image: linear-gradient(90deg, var(--surface) 0%, var(--card) 50%, var(--surface) 100%);
}
.skeleton--text { height: 1em; width: 80%; }
.skeleton--title { height: 1.5em; width: 60%; }
.skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton--image { width: 100%; height: 200px; }
.ken-burns { overflow: hidden; }
.ken-burns img, .ken-burns__img { transition: transform 10s linear; }
.ken-burns:hover img, .ken-burns:hover .ken-burns__img { transform: scale(1.15); }
.spinner {
width: 24px; height: 24px;
border: 3px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
.spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.spinner--lg { width: 40px; height: 40px; border-width: 4px; }
.star-rating { color: var(--accent); font-size: 16px; letter-spacing: 2px; }
.star-rating--lg { font-size: 24px; }
.social-icons { display: flex; gap: 12px; }
.social-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--surface);
display: flex; align-items: center; justify-content: center;
color: var(--muted-foreground);
transition: background var(--transition-fast), color var(--transition-fast);
}
.social-icon:hover { background: var(--primary); color: var(--primary-foreground); }
.social-icon--sm { width: 32px; height: 32px; font-size: 14px; }
.btn-gradient {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff;
border: none;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.btn-gradient:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
filter: brightness(1.1);
}
.btn-glow {
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}
.btn-glow:hover {
box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.5);
}
@keyframes btn-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4); }
50% { box-shadow: 0 0 0 12px rgba(var(--primary-rgb), 0); }
}
.btn--pulse { animation: btn-pulse 2s ease-in-out infinite; }
.card--glass {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.card--glass:hover {
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.card--glow:hover {
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.15);
}
.heading-decorated::after {
content: '';
display: block;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 3px;
margin: 12px auto 0;
}
:root {
--layout-page-bg: var(--background);
--layout-panel-bg: var(--card);
--layout-panel-border: var(--border);
--layout-panel-radius: var(--radius-2xl, 14px);
--layout-panel-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
--layout-title: var(--card-foreground, var(--foreground));
--layout-text: var(--card-foreground, var(--foreground));
--layout-muted: var(--muted-foreground);
--layout-link: var(--primary);
--layout-link-hover: var(--primary-hover, var(--accent));
--layout-accent: var(--primary);
--layout-accent-soft: rgba(var(--primary-rgb), 0.12);
--layout-accent-soft-border: rgba(var(--primary-rgb), 0.3);
--layout-accent-soft-bg: rgba(var(--primary-rgb), 0.08);
--layout-shell-max: var(--container-default, 1200px);
--layout-shell-narrow: var(--container-narrow, 820px);
--layout-block-gap: var(--spacing-6, 24px);
--layout-section-padding-y: var(--section-padding, 50px);
--layout-divider: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.4), transparent);
}
.sf-skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.sf-skip-link:focus {
position: static;
width: auto;
height: auto;
padding: 8px 16px;
background: var(--layout-panel-bg);
color: var(--layout-link);
z-index: 9999;
}
.sf-breadcrumb {
padding: 12px 24px;
font-size: 13px;
color: var(--layout-muted);
background: var(--layout-panel-bg);
border-bottom: 1px solid var(--layout-panel-border);
}
.sf-breadcrumb__inner {
max-width: var(--layout-shell-max, 1200px);
margin: 0 auto;
}
.sf-breadcrumb a {
color: var(--layout-link);
text-decoration: none;
transition: color 0.2s;
}
.sf-breadcrumb a:hover {
color: var(--layout-link-hover);
}
.sf-breadcrumb__sep {
margin: 0 6px;
color: var(--layout-panel-border);
}
.sf-breadcrumb__current {
color: var(--layout-muted);
}
.sf-article--single {
padding: var(--layout-section-padding-y, 50px) 0 70px;
background: var(--layout-page-bg);
min-height: 60vh;
}
.sf-article--single .sf-article__container {
max-width: var(--layout-shell-narrow, 820px);
margin: 0 auto;
padding: 0 24px;
}
.sf-article--single .sf-article__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--layout-muted);
margin-bottom: 26px;
flex-wrap: wrap;
}
.sf-article--single .sf-article__crumbs a {
color: var(--layout-link);
text-decoration: none;
transition: color 0.2s;
}
.sf-article--single .sf-article__crumbs a:hover { color: var(--layout-link-hover); }
.sf-article--single .sf-article__crumb-sep { color: var(--layout-panel-border); }
.sf-article--single .sf-article__crumb-current { color: var(--layout-muted); }
.sf-article--single .sf-article__header {
background: var(--layout-panel-bg);
border: 1px solid var(--layout-panel-border);
border-radius: var(--layout-panel-radius, 14px);
padding: 36px 36px 28px;
margin-bottom: 18px;
}
.sf-article--single .sf-article__eyebrow {
display: inline-block;
padding: 4px 14px;
background: var(--layout-accent-soft);
color: var(--layout-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
border-radius: 4px;
margin-bottom: 14px;
border: 1px solid var(--layout-accent-soft-border);
}
.sf-article--single .sf-article__title {
font-size: 32px;
font-weight: 800;
line-height: 1.3;
color: var(--layout-title);
margin: 0 0 16px;
}
.sf-article--single .sf-article__summary {
font-size: 16px;
color: var(--layout-muted);
line-height: 1.7;
margin: 0 0 18px;
}
.sf-article--single .sf-article__meta {
display: flex;
gap: 14px;
align-items: center;
color: var(--layout-muted);
font-size: 13px;
padding-top: 14px;
border-top: 1px solid var(--layout-panel-border);
}
.sf-article--single .sf-article__meta time {
color: var(--layout-muted);
font-weight: 500;
}
.sf-article--single .sf-article__body {
background: var(--layout-panel-bg);
border: 1px solid var(--layout-panel-border);
border-radius: var(--layout-panel-radius, 14px);
padding: 40px 44px;
font-size: 16px;
line-height: 1.85;
color: var(--layout-text);
}
.sf-article--single .sf-article__body h1,
.sf-article--single .sf-article__body h2,
.sf-article--single .sf-article__body h3 {
color: var(--layout-accent);
margin-top: 1.6em;
margin-bottom: 0.6em;
font-weight: 700;
}
.sf-article--single .sf-article__body h1 { font-size: 26px; }
.sf-article--single .sf-article__body h2 { font-size: 22px; }
.sf-article--single .sf-article__body h3 { font-size: 18px; }
.sf-article--single .sf-article__body p { margin: 1em 0; }
.sf-article--single .sf-article__body strong {
color: var(--layout-accent);
font-weight: 700;
}
.sf-article--single .sf-article__body ul,
.sf-article--single .sf-article__body ol {
margin: 1em 0;
padding-left: 1.6em;
}
.sf-article--single .sf-article__body li { margin: 0.5em 0; }
.sf-article--single .sf-article__body img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 1em 0;
}
.sf-article--single .sf-article__body code {
background: var(--layout-accent-soft);
color: var(--layout-accent);
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
}
.sf-article--single .sf-article__body pre {
background: var(--layout-accent-soft-bg);
padding: 14px;
border-radius: 6px;
overflow-x: auto;
border-left: 3px solid var(--layout-accent);
}
.sf-article--single .sf-article__body pre code {
background: none;
padding: 0;
color: var(--layout-text);
}
.sf-article--single .sf-article__body table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: 14px;
}
.sf-article--single .sf-article__body th {
background: var(--layout-accent);
color: var(--primary-foreground, #fff);
padding: 10px 12px;
text-align: left;
}
.sf-article--single .sf-article__body td {
padding: 9px 12px;
border-bottom: 1px solid var(--layout-panel-border);
}
.sf-article--single .sf-article__body blockquote {
border-left: 3px solid var(--layout-accent);
padding: 8px 18px;
margin: 1.2em 0;
background: var(--layout-accent-soft-bg);
color: var(--layout-muted);
}
.sf-article--single .sf-article__nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 24px;
}
.sf-article--single .sf-article__nav-prev,
.sf-article--single .sf-article__nav-next {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 22px;
background: var(--layout-panel-bg);
border: 1px solid var(--layout-panel-border);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: all 0.25s;
}
.sf-article--single .sf-article__nav-prev:hover,
.sf-article--single .sf-article__nav-next:hover {
border-color: var(--layout-accent);
transform: translateY(-2px);
box-shadow: var(--layout-panel-shadow);
}
.sf-article--single .sf-article__nav-next {
text-align: right;
align-items: flex-end;
}
.sf-article--single .sf-article__nav-label {
font-size: 12px;
color: var(--layout-muted);
letter-spacing: 0.5px;
}
.sf-article--single .sf-article__nav-title {
font-size: 15px;
font-weight: 600;
color: var(--layout-title);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sf-article--single .sf-article__nav-empty { display: block; }
.sf-article--single .sf-article__related {
margin-top: 30px;
padding: 26px 28px;
background: var(--layout-panel-bg);
border: 1px solid var(--layout-panel-border);
border-radius: 12px;
}
.sf-article--single .sf-article__related-title {
font-size: 16px;
font-weight: 700;
color: var(--layout-accent);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--layout-panel-border);
letter-spacing: 0.5px;
}
.sf-article--single .sf-article__related-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.sf-article--single .sf-article__related-item { display: flex; }
.sf-article--single .sf-article__related-link {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
width: 100%;
background: var(--layout-page-bg);
border: 1px solid var(--layout-panel-border);
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: all 0.25s;
}
.sf-article--single .sf-article__related-link:hover {
background: var(--layout-panel-bg);
border-color: var(--layout-accent);
transform: translateY(-2px);
box-shadow: var(--layout-panel-shadow);
}
.sf-article--single .sf-article__related-eyebrow {
font-size: 11px;
color: var(--layout-muted);
letter-spacing: 0.5px;
}
.sf-article--single .sf-article__related-name {
font-size: 14px;
font-weight: 600;
color: var(--layout-title);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sf-article--single .sf-article__related-time {
font-size: 12px;
color: var(--layout-muted);
margin-top: auto;
}
.sf-article--single .sf-article__footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 36px;
padding: 26px 30px;
background: var(--layout-panel-bg);
border: 1px solid var(--layout-accent-soft-border);
border-radius: 12px;
}
.sf-article--single .sf-article__back {
color: var(--layout-muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.sf-article--single .sf-article__back:hover { color: var(--layout-accent); }
.sf-article--single .sf-article__cta {
padding: 11px 24px;
background: var(--layout-accent);
color: var(--primary-foreground, #fff);
border-radius: 6px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
}
.sf-article--single .sf-article__cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px var(--layout-accent-soft);
}
@media (max-width: 768px) {
.sf-article--single .sf-article__title { font-size: 24px; }
.sf-article--single .sf-article__header { padding: 24px 22px 20px; }
.sf-article--single .sf-article__body { padding: 24px 22px; font-size: 15px; }
.sf-article--single .sf-article__nav { grid-template-columns: 1fr; }
.sf-article--single .sf-article__related { padding: 20px 18px; }
.sf-article--single .sf-article__related-list { grid-template-columns: 1fr; gap: 10px; }
}
.sf-articles-index {
padding: var(--layout-section-padding-y, 50px) 0 70px;
background: var(--layout-page-bg);
min-height: 60vh;
}
.sf-articles-index .sf-articles-index__container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.sf-articles-index .sf-articles-index__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--layout-muted);
margin-bottom: 26px;
}
.sf-articles-index .sf-articles-index__crumbs a {
color: var(--layout-link);
text-decoration: none;
}
.sf-articles-index .sf-articles-index__crumbs a:hover { color: var(--layout-link-hover); }
.sf-articles-index .sf-articles-index__crumb-sep { color: var(--layout-panel-border); }
.sf-articles-index .sf-articles-index__crumb-current { color: var(--layout-muted); }
.sf-articles-index .sf-articles-index__header {
text-align: center;
margin-bottom: 44px;
padding: 28px 24px;
background: linear-gradient(135deg, var(--surface, var(--card)) 0%, var(--card) 100%);
border-radius: var(--layout-panel-radius, 14px);
color: var(--layout-title);
border: 1px solid var(--layout-accent-soft-border);
}
.sf-articles-index .sf-articles-index__eyebrow {
display: inline-block;
padding: 4px 14px;
background: var(--layout-accent-soft);
color: var(--layout-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
border-radius: 4px;
margin-bottom: 12px;
border: 1px solid var(--layout-accent-soft-border);
}
.sf-articles-index .sf-articles-index__title {
font-size: 32px;
font-weight: 800;
margin: 0 0 10px;
}
.sf-articles-index .sf-articles-index__subtitle {
font-size: 15px;
opacity: 0.85;
margin: 0;
}
.sf-articles-index .sf-articles-index__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.sf-articles-index .sf-articles-index__card {
position: relative;
padding: 28px 26px 22px;
background: var(--layout-panel-bg);
border: 1px solid var(--layout-panel-border);
border-radius: 12px;
transition: all 0.3s;
}
.sf-articles-index .sf-articles-index__card:hover {
transform: translateY(-4px);
border-color: var(--layout-accent);
box-shadow: 0 12px 30px var(--layout-accent-soft);
}
.sf-articles-index .sf-articles-index__tag {
position: absolute;
top: 16px;
right: 16px;
padding: 3px 10px;
background: var(--layout-accent);
color: var(--primary-foreground, #fff);
font-size: 11px;
font-weight: 700;
border-radius: 3px;
letter-spacing: 0.5px;
}
.sf-articles-index .sf-articles-index__card-title {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
margin: 0 0 12px;
padding-right: 60px;
}
.sf-articles-index .sf-articles-index__card-title a {
color: var(--layout-title);
text-decoration: none;
transition: color 0.2s;
}
.sf-articles-index .sf-articles-index__card-title a:hover { color: var(--layout-link-hover); }
.sf-articles-index .sf-articles-index__card-summary {
color: var(--layout-muted);
font-size: 14px;
line-height: 1.65;
margin: 0 0 18px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sf-articles-index .sf-articles-index__card-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
border-top: 1px solid var(--layout-panel-border);
font-size: 13px;
}
.sf-articles-index .sf-articles-index__card-meta time { color: var(--layout-muted); }
.sf-articles-index .sf-articles-index__card-link {
color: var(--layout-link);
text-decoration: none;
font-weight: 600;
}
.sf-articles-index .sf-articles-index__card-link:hover { color: var(--layout-link-hover); }
.sf-articles-index .sf-articles-index__empty {
text-align: center;
padding: 60px 0;
color: var(--layout-muted);
font-size: 15px;
background: var(--layout-panel-bg);
border-radius: 12px;
border: 1px dashed var(--layout-panel-border);
}
.sf-articles-index .sf-articles-index__footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 40px;
padding: 22px 28px;
background: var(--layout-panel-bg);
border-radius: 12px;
border: 1px solid var(--layout-panel-border);
}
.sf-articles-index .sf-articles-index__back {
color: var(--layout-link);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: color 0.2s;
}
.sf-articles-index .sf-articles-index__back:hover { color: var(--layout-link-hover); }
.sf-articles-index .sf-articles-index__cta {
padding: 11px 24px;
background: var(--layout-accent);
color: var(--primary-foreground, #fff);
border-radius: 6px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
}
.sf-articles-index .sf-articles-index__cta:hover {
background: var(--layout-link-hover);
transform: translateY(-1px);
}
@media (max-width: 1024px) {
.sf-articles-index .sf-articles-index__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.sf-articles-index .sf-articles-index__grid { grid-template-columns: 1fr; }
}