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

/* 系统主题偏好支持 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --canvas:#fafafa;
    --surface-1:#f0f0f0;
    --surface-2:#e8e8e8;
    --hairline:#c8c8c8;
    --hairline-soft:#d8d8d8;
    --ink:#1a1a2e;
    --ink-secondary:#444458;
    --ink-muted:#5a5a70;
    --noise-opacity:0.01;
    --orb-opacity:0.05;
    --shadow-2:0.5px 0 0 rgba(0,0,0,0.08),0px 10px 30px rgba(0,0,0,0.10);
    --shadow-card-hover:0.5px 0 0 rgba(0,0,0,0.07),0 12px 36px rgba(0,0,0,0.12),0 4px 14px rgba(0,0,0,0.07);
    --shadow-card:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
  }
}

/* 声明支持的色板方案 */
:root {
  color-scheme: dark light;
}

:root {
  --canvas: #090909;
  --surface-1: #141414;
  --surface-2: #1c1c1c;
  --hairline: #262626;
  --hairline-soft: #1a1a1a;
  --ink: #ffffff;
  --ink-secondary: #c8c8d8;
  --ink-muted: #999999;
  --accent-blue: #0099ff;
  --gradient-magenta: #d44df0;
  --gradient-violet: #6a4cf5;
  --gradient-orange: #ff7a3d;
  --gradient-coral: #ff5577;
  --semantic-success: #22c55e;
  
  /* Typography scale */
  --display-xxl: 110px;
  --display-xl: 85px;
  --display-lg: 62px;
  --display-md: 32px;
  --headline: 22px;
  --subhead: 24px;
  --body-lg: 18px;
  --body: 15px;
  --body-sm: 14px;
  --caption: 13px;
  --micro: 12px;
  --button: 14px;
  
  /* Letter spacing (aggressive negative for display) */
  --ls-display-xxl: -5.5px;
  --ls-display-xl: -4.25px;
  --ls-display-lg: -3.1px;
  --ls-display-md: -1.0px;
  --ls-headline: -0.8px;
  --ls-subhead: -0.01px;
  --ls-body-lg: -0.18px;
  --ls-body: -0.15px;
  --ls-body-sm: -0.14px;
  --ls-caption: -0.13px;
  --ls-micro: -0.12px;
  --ls-button: -0.14px;
  
  /* Line heights */
  --lh-display-xxl: 0.85;
  --lh-display-xl: 0.95;
  --lh-display-lg: 1.00;
  --lh-display-md: 1.13;
  --lh-headline: 1.20;
  --lh-subhead: 1.30;
  --lh-body-lg: 1.30;
  --lh-body: 1.30;
  --lh-body-sm: 1.40;
  --lh-caption: 1.20;
  --lh-micro: 1.20;
  --lh-button: 1.0;

  /* Font weights */
  --fw-display-xxl: 500;
  --fw-display-xl: 500;
  --fw-display-lg: 500;
  --fw-display-md: 500;
  --fw-headline: 700;
  --fw-subhead: 400;
  --fw-body-lg: 400;
  --fw-body: 400;
  --fw-body-sm: 500;
  --fw-caption: 500;
  --fw-micro: 400;
  --fw-button: 500;
  
  /* Spacing system (5px base unit) */
  --space-hair: 1px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;
  --space-xxl: 40px;
  --space-section: 96px;
  
  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-xxl: 30px;
  --radius-pill: 100px;
  --radius-full: 9999px;
  
  /* Component tokens */
  --shadow-elevated: 0 4px 20px rgba(0,0,0,0.15);
  --backdrop-blur: blur(12px);
  --shadow-4: 0 10px 40px rgba(0,0,0,0.2);
  --shadow-2: 0.5px 0 0 rgba(255,255,255,0.10), 0px 10px 30px rgba(0,0,0,0.25);
  --shadow-card-hover: 0.5px 0 0 rgba(255,255,255,0.11), 0 12px 40px rgba(0,0,0,0.38), 0 4px 14px rgba(0,0,0,0.22);
  --shadow-focus: 0 0 0 1px rgba(0,153,255,0.15);
  --ease-card: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1);
  --transition-smooth: 0.3s cubic-bezier(0.4,0,0.2,1);
  
  /* Legacy mappings */
  --bg-primary: var(--canvas);
  --bg-secondary: var(--surface-1);
  --bg-tertiary: var(--surface-2);
  --bg-card: var(--surface-1);
  --bg-card-hover: var(--surface-2);
  --bg-glass: var(--surface-1);
  --border-subtle: var(--hairline-soft);
  --border-hover: var(--hairline);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-secondary);
  --text-muted: var(--ink-muted);
  
  --font-display: 'GT Walsheim Medium', 'Inter', sans-serif;
  --font-body: 'Inter Variable', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --header-bg: transparent;
  --sidebar-bg: transparent;
  --card-arrow-opacity: 0;
  --header-height: 56px;
  --sidebar-sticky-top: calc(var(--header-height) + 12px);
  --sidebar-track-width: 156px;
  --main-max-width: 1140px;
}

[data-theme="light"] {
  --canvas:#fafafa;--surface-1:#f0f0f0;--surface-2:#e8e8e8;
  --hairline:#c8c8c8;--hairline-soft:#d8d8d8;
  --ink:#1a1a2e;--ink-secondary:#3a3a4e;--ink-muted:#606075;
  --noise-opacity:0.015;--orb-opacity:0.06;
  --shadow-2:0.5px 0 0 rgba(0,0,0,0.08),0px 10px 30px rgba(0,0,0,0.10);
  --shadow-card-hover:0.5px 0 0 rgba(0,0,0,0.07),0 12px 36px rgba(0,0,0,0.12),0 4px 14px rgba(0,0,0,0.07);
  --shadow-card:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
  --shadow-focus:0 0 0 2px rgba(0,153,255,0.3);
}

html {scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--surface-2) var(--canvas);}
body {font-family:var(--font-body);font-size:15px;font-weight:400;line-height:1.30;letter-spacing:-0.15px;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"cv01" 1,"cv05" 1,"cv09" 1,"cv11" 1,"ss03" 1,"ss07" 1,"dlig" 1;}
::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:var(--canvas);}::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--hairline);}

/* Light 模式滚动条适配 */
[data-theme="light"] ::-webkit-scrollbar-track{background:var(--surface-1);}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--hairline);}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:var(--ink-muted);}
a{color:inherit;text-decoration:none;}

body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--noise-opacity);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.ambient-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(140px);opacity:var(--orb-opacity);animation:orbFloat 25s ease-in-out infinite;}
.ambient-orb:nth-child(1){width:500px;height:500px;background:var(--gradient-violet);top:-200px;left:-100px;}
.ambient-orb:nth-child(2){width:400px;height:400px;background:var(--gradient-magenta);bottom:-100px;right:-80px;animation-delay:-8s;animation-duration:30s;}
.ambient-orb:nth-child(3){width:350px;height:350px;background:var(--gradient-orange);top:40%;left:60%;animation-delay:-16s;animation-duration:35s;opacity:calc(var(--orb-opacity)*0.5);}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(50px,-30px) scale(1.08);}66%{transform:translate(-40px,50px) scale(0.94);}}

/* ========== HEADER ========== */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;min-height:var(--header-height);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-sm) var(--space-md);padding:var(--space-xs) var(--space-lg);background:transparent;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:var(--transition-smooth);}
.header-start{display:flex;align-items:center;gap:var(--space-sm);min-width:0;justify-self:start;}
.header-center{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-md);min-width:0;justify-self:center;flex-shrink:0;}
.header-end{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-sm);flex-shrink:0;min-width:0;justify-self:end;}

.header-hub-nav{display:flex;align-items:center;gap:2px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0;}
.header-hub-nav::-webkit-scrollbar{display:none;}
.header-hub-tabs{display:flex;align-items:center;gap:2px;flex-shrink:0;}

.hub-nav-link{font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:var(--ls-caption);color:var(--ink-muted);background:transparent;border:none;border-radius:var(--radius-md);padding:6px 10px;cursor:pointer;white-space:nowrap;transition:var(--transition-fast);}
.hub-nav-link:hover{color:var(--ink);background:var(--surface-1);}
.hub-nav-link:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.hub-nav-link.active{color:var(--ink);background:transparent;}
.hub-nav-link--cta{color:var(--accent-blue);}
.hub-nav-link--cta:hover{color:var(--ink);}

.header-search-cluster{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--space-xs);flex-shrink:0;max-width:min(320px,46vw);}

.header.scrolled{background:var(--canvas);border-bottom:1px solid var(--hairline-soft);box-shadow:var(--shadow-elevated);backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur);}
.logo{display:flex;align-items:center;gap:var(--space-sm);}
.logo-mark{width:32px;height:32px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--gradient-violet),var(--gradient-magenta),var(--accent-blue));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:16px;color:white;}
.logo-text{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:-0.8px;color:var(--ink);}

.search-container{position:relative;width:260px;max-width:0;opacity:0;overflow:hidden;margin:0;padding:0;border:none;visibility:hidden;pointer-events:none;transition:max-width 0.35s cubic-bezier(0.4,0,0.2,1),opacity 0.22s ease,visibility 0.22s ease;}
.search-container.visible{max-width:260px;opacity:1;visibility:visible;pointer-events:auto;}
.search-icon-btn{width:36px;height:36px;border-radius:var(--radius-full);background:var(--surface-1);border:1px solid var(--hairline-soft);color:var(--ink-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast);flex-shrink:0;}
.search-icon-btn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--hairline);}
.search-icon-btn.hidden{opacity:0;visibility:hidden;width:0;min-width:0;margin:0;padding:0;border:none;pointer-events:none;overflow:hidden;}
.search-box{width:100%;padding:10px 14px 10px 36px;background:var(--surface-1);border:1px solid var(--hairline-soft);border-radius:var(--radius-md);color:var(--ink);font-family:var(--font-body);font-size:14px;outline:none;transition:var(--transition-fast);}
.search-box::placeholder{color:var(--ink-muted);}
.search-box:focus{border-color:transparent;box-shadow:var(--shadow-focus);}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-muted);pointer-events:none;}

.header-actions{display:flex;align-items:center;gap:var(--space-sm);}
.stat-pill{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);letter-spacing:-0.12px;}

.lang-toggle{display:flex;align-items:center;background:var(--surface-1);border-radius:var(--radius-pill);padding:2px;border:1px solid var(--hairline-soft);overflow:hidden;}
.lang-btn{padding:4px 10px;border:none;border-radius:var(--radius-pill);background:transparent;color:var(--ink-muted);font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;transition:var(--transition-fast);white-space:nowrap;}
.lang-btn.active{background:var(--surface-2);color:var(--ink);}

.theme-toggle,.mobile-toggle{width:36px;height:36px;border-radius:var(--radius-full);background:var(--surface-1);border:none;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast);position:relative;overflow:hidden;}
.theme-toggle:hover,.mobile-toggle:hover{background:var(--surface-2);}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute;transition:var(--transition-smooth);}
.theme-toggle .icon-sun{opacity:0;transform:rotate(-90deg) scale(0.5);}
.theme-toggle .icon-moon{opacity:1;transform:rotate(0deg) scale(1);}
[data-theme="light"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0deg) scale(1);}
[data-theme="light"] .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(0.5);}
.mobile-toggle{display:none;}

/* ========== LAYOUT CONTAINER ========== */
.content-wrapper{display:flex;flex-direction:column;align-items:center;max-width:1480px;margin:0 auto;padding:0 var(--space-lg);position:relative;width:100%;box-sizing:border-box;}

/* ========== SIDEBAR ========== */
.tools-row{--sidebar-section-header-offset:0px;display:flex;flex-direction:row;align-items:flex-start;gap:var(--space-lg);width:100%;}
.tools-stream{flex:1;min-width:0;}

.sidebar{position:sticky;top:var(--sidebar-sticky-top);align-self:flex-start;width:var(--sidebar-track-width);max-height:calc(100vh - var(--sidebar-sticky-top) - 12px);z-index:900;padding:0 var(--space-xs) var(--space-md);overflow-y:auto;background:transparent;border:none;scrollbar-width:none;transition:width var(--transition-smooth);flex-shrink:0;text-align:left;}
.sidebar::-webkit-scrollbar{display:none;}

#categories{scroll-margin-top:var(--sidebar-sticky-top);}

.hub-panel{display:none;}
.hub-panel.hub-panel--active{display:block;}

.hub-stub-panel{padding:calc(var(--header-height) + var(--space-xxl)) var(--space-lg) var(--space-xxl);}
.hub-stub-inner{max-width:520px;margin:0 auto;text-align:center;padding:var(--space-xxl) var(--space-md);}
.hub-stub-title{font-family:var(--font-display);font-size:var(--display-md);font-weight:var(--fw-display-md);line-height:var(--lh-display-md);letter-spacing:var(--ls-display-md);color:var(--ink);}
.hub-stub-sub{font-size:var(--body);color:var(--ink-muted);margin-top:var(--space-md);line-height:var(--lh-body);}

.feedback-dialog{border:none;border-radius:var(--radius-lg);padding:0;background:var(--surface-1);color:var(--ink);max-width:calc(100vw - 32px);width:400px;box-shadow:var(--shadow-2);}
.feedback-dialog::backdrop{background:rgba(0,0,0,0.55);}
.feedback-dialog-inner{padding:var(--space-xl);}
.feedback-dialog-title{font-family:var(--font-display);font-size:var(--headline);font-weight:600;margin-bottom:var(--space-sm);}
.feedback-dialog-body{font-size:var(--body-sm);color:var(--ink-muted);line-height:var(--lh-body-sm);}
.feedback-dialog-email{margin-top:var(--space-lg);font-size:var(--body-sm);}
.feedback-dialog-email a{color:var(--accent-blue);text-decoration:underline;}
.feedback-dialog-close{margin-top:var(--space-xl);width:100%;}

.nav-pill{display:flex;align-items:center;justify-content:flex-start;gap:4px;padding:7px 10px;margin-bottom:2px;border-radius:var(--radius-md);font-size:13px;font-weight:500;letter-spacing:-0.13px;color:var(--ink-muted);transition:color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),background 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);}
.nav-pill:hover{color:var(--ink);background:var(--surface-1);transform:scale(1.08);box-shadow:0 4px 20px rgba(0,0,0,0.15);}
.nav-pill.active{color:var(--ink);background:var(--surface-2);transform:scale(1.05);}
.nav-label{flex:0 1 auto;max-width:calc(100% - 42px);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--transition-smooth),width var(--transition-smooth);}
.nav-count{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);flex-shrink:0;transition:opacity var(--transition-smooth),width var(--transition-smooth);}

/* ========== MAIN ========== */
.main{margin-left:0;margin-top:var(--header-height);padding:var(--space-xl) 0 72px;position:relative;z-index:1;max-width:var(--main-max-width);width:100%;min-width:0;transition:var(--transition-smooth);}
/* ========== HERO ========== */
.hero{text-align:center;padding-top:var(--space-lg);padding-bottom:var(--space-xl);padding-left:var(--space-lg);padding-right:var(--space-lg);scroll-margin-top:var(--sidebar-sticky-top);box-sizing:border-box;width:100%;max-width:100%;}
.hero-title{font-family:var(--font-display);font-size:var(--display-xxl);font-weight:var(--fw-display-xxl);line-height:var(--lh-display-xxl);letter-spacing:var(--ls-display-xxl);margin-bottom:var(--space-lg);color:var(--ink);}
.hero-title .accent{background:linear-gradient(135deg,var(--gradient-violet),var(--gradient-magenta),var(--gradient-orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradientShift 6s ease-in-out infinite;}
@keyframes gradientShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.hero-actions{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-lg);}
.hero-tags{display:flex;justify-content:center;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-lg);}
.hero-tag{padding:6px 14px;border-radius:var(--radius-pill);font-size:var(--body-sm);font-weight:500;background:var(--surface-1);color:var(--ink-muted);border:1px solid var(--hairline-soft);transition:var(--transition-fast);cursor:default;letter-spacing:var(--ls-body-sm);}
.hero-tag:hover{background:var(--surface-2);color:var(--ink);border-color:var(--hairline);}

/* ========== SECTIONS ========== */
.category-section{margin-bottom:var(--space-xxl);scroll-margin-top:calc(var(--header-height) + var(--space-md));animation:fadeUp 0.5s ease-out both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.section-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);}
.section-title{font-family:var(--font-body);font-size:var(--headline);font-weight:var(--fw-headline);line-height:var(--lh-headline);letter-spacing:var(--ls-headline);color:var(--ink);white-space:nowrap;}
.section-count{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);letter-spacing:-0.12px;white-space:nowrap;}
.section-line{flex:1;height:1px;background:var(--hairline-soft);}

/* ========== BUTTONS ========== */
.btn-primary{background:var(--ink);color:var(--canvas);font-family:var(--font-body);font-size:var(--button);font-weight:var(--fw-button);letter-spacing:var(--ls-button);line-height:var(--lh-button);padding:10px 15px;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.btn-primary:hover{background:var(--ink);color:var(--canvas);transform:scale(0.98);}
.btn-primary:active{background:var(--ink);color:var(--canvas);transform:scale(0.95);}

.btn-secondary{background:transparent;color:var(--ink-muted);font-family:var(--font-body);font-size:var(--button);font-weight:var(--fw-button);letter-spacing:var(--ls-button);line-height:var(--lh-button);padding:6px 10px;border-radius:var(--radius-md);border:none;cursor:pointer;transition:var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.btn-secondary:hover{background:var(--surface-1);color:var(--ink);}
.btn-secondary:active{background:var(--surface-2);}
a#feedbackOpenBtn.btn-secondary{background-color:transparent !important;}

.btn-translucent{background:var(--surface-2);color:var(--ink);font-family:var(--font-body);font-size:var(--button);font-weight:var(--fw-button);letter-spacing:var(--ls-button);line-height:var(--lh-button);padding:8px 14px;border-radius:var(--radius-xxl);border:none;cursor:pointer;transition:var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.btn-translucent:hover{background:var(--surface-1);transform:scale(0.98);}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ========== CARDS ========== */
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);}

.card{background:var(--surface-1);color:var(--ink);font-family:var(--font-body);font-size:var(--body-sm);font-weight:400;line-height:var(--lh-body-sm);letter-spacing:var(--ls-body-sm);padding:16px;border-radius:var(--radius-lg);border:none;cursor:default;position:relative;z-index:0;animation:card-fade-in 0.5s ease-out backwards;text-decoration:none;display:flex;flex-direction:column;min-height:100%;transition:background-color 0.22s var(--ease-card),transform 0.42s var(--ease-card),box-shadow 0.42s var(--ease-card);}
@keyframes card-fade-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.card:hover{background:var(--surface-2);z-index:1;transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.card-open{flex:1 1 auto;display:flex;flex-direction:column;color:inherit;text-decoration:none;cursor:pointer;min-height:0;border-radius:inherit;-webkit-tap-highlight-color:transparent;transition:transform 0.3s var(--ease-card);}
.card-open:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px;}
.card:hover .card-icon{transform:scale(1.08) rotate(2deg);}
.card:hover .card-open .card-title{transform:translateX(4px);color:var(--accent-blue);}
.card:hover .card-desc{color:var(--ink-secondary);}
.card:hover .card-tag{background:var(--surface-1);border-color:var(--hairline);color:var(--ink);}
.card:hover .card-rating-interactive{color:var(--ink-secondary);}

/* 焦点状态 */
.card-focused{box-shadow:0 0 0 2px var(--accent-blue);z-index:2;}
.card-open:focus{outline:none;box-shadow:0 0 0 2px var(--accent-blue);transform:translateY(-2px);}
.card-tag:focus{outline:2px solid var(--accent-blue);outline-offset:2px;background:var(--surface-1);color:var(--ink);}

.card-header{display:flex;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-sm);}
.card-icon{width:46px;height:46px;border-radius:var(--radius-md);background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;transition:transform 0.42s var(--ease-card);position:relative;}
.card-icon img{width:28px;height:28px;object-fit:contain;border-radius:4px;opacity:0;transition:opacity 0.3s ease;}
.card-icon img.loaded{opacity:1;}
.card-icon.loaded::before,.card-icon img.loaded::before{display:none;}
.card-icon-fallback{display:none;width:100%;height:100%;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink);background:linear-gradient(135deg,var(--surface-2),var(--surface-1));border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:0.5px;}
.card-icon--fallback{background:linear-gradient(135deg,var(--surface-2),var(--surface-1));}
.card-icon-fallback.fallback-active{display:flex !important;animation:fadeInFallback 0.3s ease-in-out;}
@keyframes fadeInFallback{from{opacity:0;transform:scale(0.9);}to{opacity:1;transform:scale(1);}}

.card-body{margin-bottom:var(--space-xs);}
.card-title{font-family:var(--font-display);font-size:var(--headline);font-weight:var(--fw-headline);line-height:var(--lh-headline);letter-spacing:var(--ls-headline);color:var(--ink);margin:0 0 var(--space-xs);transition:transform 0.42s var(--ease-card),color 0.2s var(--ease-card);}
.card-desc{font-size:var(--micro);font-weight:400;line-height:var(--lh-micro);letter-spacing:var(--ls-micro);color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2;margin:0;}

.card-footer{display:flex;flex-direction:column;gap:2px;flex-shrink:0;position:relative;z-index:2;margin-top:auto;padding-top:2px;cursor:default;}
.card-footer .card-tags{cursor:default;}
.card-meta{display:flex;flex-direction:column;gap:var(--space-xs);}
.card-rating-interactive{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-muted);}
.card-star-hits{display:flex;flex-direction:row;align-items:center;gap:2px;}
.card-star-btn{padding:0;margin:0;line-height:0;background:transparent;border:none;cursor:pointer;color:var(--hairline-soft);transition:color 0.12s ease,transform 0.12s ease;border-radius:4px;}
.card-star-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px;}
.card-star-svg{width:14px;height:14px;display:block;}
.card-star-path{fill:currentColor;transition:fill 0.15s ease,transform 0.2s var(--ease-card);}
.card-star-btn.is-lit,.card-star-btn.is-preview{color:#fbbf24;}
/* Hover preview: dim stars outside preview range (is-lit alone stays gold otherwise). */
.card-star-hits.is-hover-preview .card-star-btn:not(.is-preview){color:var(--hairline-soft);}
.card-star-hits--pop .card-star-btn.is-lit .card-star-path{animation:nexus-star-pop 0.55s var(--ease-card);}
@keyframes nexus-star-pop{0%{transform:scale(1);}35%{transform:scale(1.22) rotate(-6deg);}70%{transform:scale(1.08) rotate(4deg);}100%{transform:scale(1) rotate(0);}}
@media (prefers-reduced-motion: reduce){
  .card-star-hits--pop .card-star-btn.is-lit .card-star-path{animation:none;}
}
.card-rating-score{font-family:var(--font-mono);font-weight:500;color:var(--ink-muted);font-size:11px;}
.card-rating-count{font-family:var(--font-mono);font-weight:400;color:var(--ink-muted);font-size:11px;opacity:0.92;white-space:nowrap;}
.card-tags{display:flex;flex-wrap:wrap;gap:3px;}
.card-tag{padding:3px 8px;border-radius:6px;font-size:12px;line-height:1.4;font-weight:500;background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--hairline-soft);transition:var(--transition-fast);}
.card-tag:hover{background:var(--surface-1);color:var(--ink);border-color:var(--hairline);}
button.card-tag{margin:0;font-size:12px;letter-spacing:inherit;line-height:1.4;text-align:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;display:inline-block;}
button.card-tag:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px;}

.tools-stream.tag-filter-active .hidden-cards{display:contents;}
.tools-stream.tag-filter-active .show-more-btn{display:none;}

.tag-filter-banner{margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);border:1px solid var(--hairline-soft);background:var(--surface-2);}
.tag-filter-banner[hidden]{display:none!important;}
.tag-filter-banner-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm);}
.tag-filter-banner-text{flex:1;min-width:0;margin:0;font-size:var(--body-sm);font-weight:500;line-height:var(--lh-body-sm);color:var(--ink);}
.tag-filter-clear{flex-shrink:0;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--hairline-soft);background:var(--surface-1);color:var(--ink-muted);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition-fast);}
.tag-filter-clear:hover{background:var(--bg-card-hover);color:var(--ink);border-color:var(--hairline);}
.tag-filter-clear:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.card-latest-update{font-size:9px;color:var(--ink-muted);font-style:italic;line-height:1.30;display:flex;align-items:center;gap:2px;margin-top:2px;}

/* AD Badge Tag Style */
.ad-badge{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:3px 6px;border-radius:3px;font-size:8px;font-weight:600;background:linear-gradient(135deg,var(--gradient-magenta),var(--gradient-violet));color:var(--ink);border:none;animation:adPulse 2s ease-in-out infinite;}
@keyframes adPulse{0%,100%{opacity:0.9;transform:scale(1);}50%{opacity:1;transform:scale(1.05);}}

/* Promo card */
.card.card-promo{border:1px solid transparent;background-image:linear-gradient(var(--bg-card),var(--bg-card)),linear-gradient(135deg,var(--gradient-violet),var(--accent-blue));background-origin:border-box;background-clip:padding-box,border-box;position:relative;}
.card.card-promo:hover{box-shadow:var(--shadow-card-hover),0 0 40px rgba(106,76,245,0.16);}
.card.card-promo .card-title{background:linear-gradient(135deg,var(--gradient-violet),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600;}
.card.card-promo:hover .card-title{text-decoration:none;-webkit-text-fill-color:transparent;}
.card.card-promo .card-desc{color:var(--ink-muted);-webkit-line-clamp:3;line-clamp:3;line-height:1.45;}
.card-promo .ad-badge{position:absolute;top:8px;right:8px;padding:2px 8px;background:linear-gradient(135deg,var(--gradient-violet),var(--accent-blue));border-radius:10px;font-size:10px;font-weight:600;color:white;letter-spacing:0.5px;text-transform:uppercase;animation:pulse-badge 2s ease-in-out infinite;}
@keyframes pulse-badge{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.05);opacity:0.9;}}

.card-content{flex:1;min-width:0;}
.card-title{font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:-0.14px;line-height:1.40;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);transition:transform 0.42s var(--ease-card),color 0.2s var(--ease-card);}
.card-desc{font-size:13px;font-weight:400;letter-spacing:-0.10px;line-height:1.45;color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2;margin-bottom:4px;}
.card-meta{display:flex;flex-direction:column;gap:3px;}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;}
.card-tag{padding:0.2px 1px;border-radius:0.5px;font-size:4px;line-height:1.2;font-weight:500;background:var(--surface-1);color:var(--ink-muted);border:1px solid var(--hairline-soft);transition:var(--transition-fast);}
.card-tag:hover{background:var(--surface-2);color:var(--ink);border-color:var(--hairline);}
.card-arrow{flex-shrink:0;opacity:var(--card-arrow-opacity);transform:translateX(-6px);transition:var(--transition-smooth);color:var(--ink-muted);}

/* Hidden cards */
.hidden-cards{display:none;}
.hidden-cards.expanded{display:contents;animation:fadeUp 0.4s ease-out;}

/* Show more button - styled as a card in the grid */
.show-more-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:var(--space-lg);min-height:180px;border:2px dashed var(--hairline);border-radius:var(--radius-lg);background:var(--surface-1);color:var(--ink-muted);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition-fast);text-align:center;line-height:1.4;}
.show-more-btn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--accent-blue);transform:translateY(-2px);box-shadow:var(--shadow-card-hover);}
.show-more-btn .show-less-text{display:none;}
.show-more-btn[data-expanded="true"] .show-more-text{display:none;}
.show-more-btn[data-expanded="true"] .show-less-text{display:inline;}
.show-more-btn[data-expanded="true"] .show-more-arrow{transform:rotate(180deg);}
.show-more-arrow{transition:transform var(--transition-smooth);width:20px;height:20px;}
.show-more-arrow{transition:transform var(--transition-smooth);}

/* ========== NO RESULTS ========== */
.no-results{display:none;text-align:center;padding:80px 20px;color:var(--ink-muted);}
.no-results.visible{display:block;}
.no-results-text{font-size:18px;font-weight:500;color:var(--ink);margin-bottom:var(--space-xs);}
.no-results-hint{font-size:14px;}

/* ========== TOAST (ratings) ========== */
.nexus-toast{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 88px);left:50%;transform:translateX(-50%) translateY(12px);z-index:10100;max-width:min(92vw,360px);padding:12px 18px;border-radius:var(--radius-lg);background:var(--surface-2);color:var(--ink);font-family:var(--font-body);font-size:var(--body-sm);font-weight:500;line-height:var(--lh-body-sm);border:1px solid var(--hairline-soft);box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:opacity 0.25s ease,transform 0.35s var(--ease-card);}
.nexus-toast.nexus-toast--show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
@media (prefers-reduced-motion: reduce){
  .nexus-toast{transition:opacity 0.2s ease;}
}

/* ========== BACK TO TOP ========== */
/* Must stay above body::before noise overlay (z-index:9999) or the button paints underneath and looks “gone”. */
.back-to-top{position:fixed;bottom:max(var(--space-xl),env(safe-area-inset-bottom,0px));right:max(var(--space-xl),env(safe-area-inset-right,0px));width:40px;height:40px;border-radius:var(--radius-full);background:var(--surface-1);border:1px solid var(--hairline-soft);color:var(--ink);box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(12px);transition:var(--transition-smooth);z-index:10050;pointer-events:auto;}
.back-to-top.visible{opacity:1;transform:translateY(0);}
.back-to-top:hover{background:var(--surface-2);border-color:var(--hairline);color:var(--ink);}
.back-to-top:focus-visible{outline:none;box-shadow:var(--shadow-focus),var(--shadow-2);}
.back-to-top-icon{display:block;flex-shrink:0;color:inherit;}
.back-to-top-icon use{color:inherit;}

/* ========== AI NEWS PANEL ========== */
.ai-news-container{max-width:800px;margin:0 auto;padding:var(--space-xl) 0;}
.ai-news-header{text-align:center;margin-bottom:var(--space-xxl);}
.ai-news-title{font-family:var(--font-display);font-size:var(--display-xl);font-weight:var(--fw-display-xl);letter-spacing:var(--ls-display-xl);color:var(--ink);margin-bottom:var(--space-sm);}
.ai-news-subtitle{font-size:var(--body-lg);color:var(--ink-muted);margin-bottom:0;}
.ai-news-content{display:flex;flex-direction:column;gap:var(--space-xxl);}
.ai-news-section{background:var(--surface-1);border-radius:var(--radius-lg);padding:var(--space-xl);border:1px solid var(--hairline-soft);}
.ai-news-section h3{font-family:var(--font-display);font-size:var(--headline);font-weight:700;color:var(--ink);margin-bottom:var(--space-md);}
.ai-news-section p{font-size:var(--body);color:var(--ink-secondary);line-height:var(--lh-body);margin-bottom:var(--space-lg);}
.ai-news-features{list-style:none;padding:0;}
.ai-news-features li{font-size:var(--body-sm);color:var(--ink);padding:var(--space-sm) 0;margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);}
.ai-news-features li::before{content:'✨';font-size:var(--body);margin-right:var(--space-sm);}
.ai-news-actions{display:flex;gap:var(--space-md);margin-top:var(--space-lg);flex-wrap:wrap;}
.ai-news-links{list-style:none;padding:0;}
.ai-news-links li{margin-bottom:var(--space-sm);}
.ai-news-links a{font-size:var(--body);color:var(--accent-blue);text-decoration:none;font-weight:500;transition:var(--transition-smooth);}
.ai-news-links a:hover{color:var(--ink);text-decoration:underline;}

/* ========== RESPONSIVE AI NEWS ========== */
@media(max-width:768px){
  .ai-news-container{padding:var(--space-lg) 0;}
  .ai-news-title{font-size:var(--display-lg);letter-spacing:var(--ls-display-lg);}
  .ai-news-subtitle{font-size:var(--body);}
  .ai-news-section{padding:var(--space-lg);}
  .ai-news-section h3{font-size:var(--headline);}
  .ai-news-section p{font-size:var(--body-sm);}
  .ai-news-actions{flex-direction:column;gap:var(--space-sm);}
}
@media(max-width:480px){
  .ai-news-container{padding:var(--space-md) 0;}
  .ai-news-title{font-size:var(--display-md);letter-spacing:var(--ls-display-md);}
  .ai-news-subtitle{font-size:var(--body-sm);}
  .ai-news-section{padding:var(--space-md);}
  .ai-news-section h3{font-size:var(--subhead);}
  .ai-news-section p{font-size:var(--micro);}
}

/* ========== ADVERTISING MODULE ========== */
.advertising-module{padding:var(--space-section) 0;background:var(--canvas);border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);}
.advertising-container{max-width:min(1080px,100%);margin:0 auto;padding:0 var(--space-md);box-sizing:border-box;}
.advertising-header{text-align:center;margin-bottom:var(--space-xxl);max-width:640px;margin-left:auto;margin-right:auto;}
.advertising-eyebrow{font-family:var(--font-body);font-size:var(--micro);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-blue);margin:0 0 var(--space-sm);}
.advertising-title{font-family:var(--font-display);font-size:var(--display-xl);font-weight:var(--fw-display-xl);letter-spacing:var(--ls-display-xl);color:var(--ink);margin:0 0 var(--space-sm);line-height:var(--lh-display-xl);}
.advertising-subtitle{font-size:var(--body-lg);color:var(--ink-muted);margin:0;line-height:var(--lh-body-lg);}

.advertising-body{display:flex;flex-direction:column;gap:var(--space-xxl);margin-bottom:var(--space-lg);}
.ad-block{border-radius:var(--radius-xl);box-sizing:border-box;}
.ad-block-title{font-family:var(--font-display);font-size:var(--headline);font-weight:var(--fw-headline);line-height:var(--lh-headline);letter-spacing:var(--ls-headline);color:var(--ink);margin:0 0 var(--space-sm);}
.ad-block-lede{font-size:var(--body);line-height:var(--lh-body);color:var(--ink-secondary);margin:0;}
.ad-block-lede--muted{color:var(--ink-muted);}

.ad-block--intro{padding:var(--space-xl);background:var(--surface-1);border:1px solid var(--hairline-soft);}
.ad-intro-grid{display:grid;gap:var(--space-lg);margin-top:var(--space-lg);}
@media(min-width:720px){.ad-intro-grid{grid-template-columns:1fr 1fr;gap:var(--space-xl);}}
.ad-intro-heading{font-family:var(--font-body);font-size:var(--body-sm);font-weight:600;color:var(--ink);margin:0 0 var(--space-xs);letter-spacing:var(--ls-body-sm);}
.ad-intro-text{font-size:var(--body-sm);line-height:var(--lh-body-sm);color:var(--ink-muted);margin:0;}
.ad-intro-list{margin:0;padding-left:1.15rem;color:var(--ink-muted);font-size:var(--body-sm);line-height:1.55;}
.ad-intro-list li{margin-bottom:var(--space-xs);}
.ad-intro-list li:last-child{margin-bottom:0;}

.ad-block--pricing{padding:0;}
.ad-pricing-panel{background:linear-gradient(155deg,var(--gradient-orange) 0%,#e45120 55%,#c73d18 100%);border-radius:var(--radius-xl);padding:var(--space-xl);color:var(--ink);box-shadow:0 16px 48px rgba(0,0,0,0.2);}
[data-theme="light"] .ad-pricing-panel{box-shadow:0 12px 36px rgba(0,0,0,0.12);}
.ad-pricing-panel-head{margin-bottom:var(--space-lg);}
.ad-pricing-panel-title{font-family:var(--font-display);font-size:var(--display-md);font-weight:var(--fw-display-md);line-height:var(--lh-display-md);letter-spacing:var(--ls-display-md);margin:0 0 var(--space-sm);color:var(--ink);}
.ad-pricing-panel-lede{font-size:var(--body);line-height:var(--lh-body);margin:0;color:var(--ink);opacity:0.94;}

.ad-pricing-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md);}
@media(min-width:560px){.ad-pricing-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.ad-pricing-grid--four{grid-template-columns:repeat(4,minmax(0,1fr));}}
.ad-price-line{margin:0;font-family:var(--font-display);font-size:var(--headline);font-weight:var(--fw-headline);line-height:var(--lh-headline);letter-spacing:var(--ls-headline);color:var(--ink);}
.ad-pricing-footnote{margin:var(--space-lg) 0 0;font-size:var(--micro);line-height:var(--lh-micro);color:var(--ink);opacity:0.85;}
.ad-price-card{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg);border-radius:var(--radius-lg);background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;min-height:100%;}
[data-theme="light"] .ad-price-card{background:rgba(255,255,255,0.88);border-color:rgba(0,0,0,0.08);}
.ad-price-card--featured{background:rgba(0,0,0,0.34);border-color:rgba(255,255,255,0.28);}
[data-theme="light"] .ad-price-card--featured{background:var(--surface-2);border-color:var(--hairline);box-shadow:0 8px 28px rgba(0,0,0,0.08);}
.ad-price-badge{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:4px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;letter-spacing:0.02em;background:rgba(255,255,255,0.2);color:var(--ink);}
[data-theme="light"] .ad-price-badge{background:var(--accent-blue);color:#fff;}
.ad-price-card-title{font-family:var(--font-display);font-size:var(--headline);font-weight:var(--fw-headline);line-height:var(--lh-headline);letter-spacing:var(--ls-headline);margin:0;padding-right:4.5rem;color:var(--ink);}
.ad-price-card--featured .ad-price-card-title{padding-right:5rem;}
.ad-price-copy{font-size:var(--body-sm);line-height:var(--lh-body-sm);color:var(--ink);opacity:0.92;margin:0;}
[data-theme="light"] .ad-price-copy{color:var(--ink-secondary);}
[data-theme="light"] .ad-price-card--featured .ad-price-copy{color:var(--ink-muted);}
.ad-price-cta{align-self:stretch;margin-top:auto;}
@media(min-width:560px){.ad-price-cta{align-self:flex-start;}}

.ad-split{display:grid;gap:var(--space-lg);}
@media(min-width:880px){.ad-split{grid-template-columns:1fr 1fr;align-items:stretch;gap:var(--space-xl);}}

.ad-block--clients{padding:var(--space-xl);background:var(--surface-1);border:1px solid var(--hairline-soft);}
.ad-client-list{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm);}
.ad-client-item{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--hairline-soft);background:var(--surface-2);}
.ad-client-item-icon{flex-shrink:0;width:1.25rem;text-align:center;color:var(--accent-blue);font-size:var(--body-sm);line-height:var(--lh-body-sm);}
.ad-client-item-label{font-size:var(--body-sm);line-height:var(--lh-body-sm);color:var(--ink);font-weight:500;}

.ad-block--contact{padding:var(--space-xl);background:var(--surface-1);border:1px solid var(--hairline-soft);}
.ad-contact-dl{margin:var(--space-lg) 0;padding:0;}
.ad-contact-dl-row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-sm) var(--space-md);padding:var(--space-md) 0;border-bottom:1px solid var(--hairline-soft);}
.ad-contact-dl-row:last-child{border-bottom:none;}
.ad-contact-dl dt{margin:0;font-size:var(--body-sm);font-weight:600;color:var(--ink-muted);}
.ad-contact-dl dd{margin:0;font-size:var(--body);}
.ad-contact-value{font-family:var(--font-mono);font-size:var(--body-sm);color:var(--accent-blue);font-weight:600;word-break:break-all;}
.ad-contact-hint{font-size:var(--micro);line-height:var(--lh-micro);color:var(--ink-muted);margin:var(--space-md) 0 var(--space-lg);}
.ad-contact-cta{margin-top:0;}
.ad-contact-cta--full{width:100%;}

@media(max-width:899px){
  .advertising-title{font-size:var(--display-lg);letter-spacing:var(--ls-display-lg);}
  .advertising-subtitle{font-size:var(--body);}
  .ad-block--intro,.ad-block--clients,.ad-block--contact{padding:var(--space-lg);}
  .ad-pricing-panel{padding:var(--space-lg);}
  .ad-pricing-panel-title{font-size:var(--headline);letter-spacing:var(--ls-headline);}
  .ad-pricing-panel-lede{font-size:var(--body-sm);}
  .ad-price-line{font-size:var(--body-lg);}
}
@media(max-width:599px){
  .advertising-module{padding:var(--space-xxl) 0;}
  .advertising-container{padding:0 var(--space-sm);}
  .advertising-title{font-size:var(--display-md);letter-spacing:var(--ls-display-md);}
  .advertising-subtitle{font-size:var(--body-sm);}
  .advertising-body{gap:var(--space-xl);}
  .ad-block-title{font-size:var(--subhead);}
  .ad-block-lede{font-size:var(--body-sm);}
  .ad-pricing-grid{grid-template-columns:1fr;}
  .ad-price-line{font-size:var(--headline);}
  .ad-contact-dl-row{grid-template-columns:1fr;gap:var(--space-xxs);}
}

/* ========== DISCLAIMER PAGE ========== */
.disclaimer-page{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:var(--space-section) 0;}
.disclaimer-container{max-width:800px;width:100%;background:var(--canvas);border-radius:var(--radius-lg);box-shadow:var(--shadow-4);padding:var(--space-xxl);margin:var(--space-xl) auto;max-height:80vh;overflow-y:auto;}
.disclaimer-header{text-align:center;margin-bottom:var(--space-xl);}
.disclaimer-title{font-family:var(--font-display);font-size:var(--display-xl);font-weight:var(--fw-display-xl);letter-spacing:var(--ls-display-xl);color:var(--ink);margin-bottom:var(--space-sm);}
.disclaimer-subtitle{font-size:var(--body-lg);color:var(--ink-muted);line-height:var(--lh-body-lg);max-width:600px;margin:0 auto;}
.disclaimer-content{display:flex;flex-direction:column;gap:var(--space-xl);}
.disclaimer-section{background:var(--surface-1);border-radius:var(--radius-lg);padding:var(--space-xl);border:1px solid var(--hairline-soft);}
.disclaimer-section-title{font-family:var(--font-display);font-size:var(--headline);font-weight:var(--fw-headline);color:var(--ink);margin-bottom:var(--space-md);}
.disclaimer-section p{font-size:var(--body);color:var(--ink-secondary);line-height:var(--lh-body);margin-bottom:var(--space-md);}
.disclaimer-list{list-style:none;padding-left:0;}
.disclaimer-list li{font-size:var(--body-sm);color:var(--ink-secondary);line-height:var(--lh-body-sm);margin-bottom:var(--space-sm);padding-left:var(--space-lg);position:relative;}
.disclaimer-list li::before{content:'•';position:absolute;left:0;color:var(--accent-blue);font-weight:600;}

/* ========== RESPONSIVE DISCLAIMER ========== */
@media(max-width:768px){
  .disclaimer-container{padding:var(--space-xl);margin:var(--space-lg);max-height:90vh;}
  .disclaimer-title{font-size:var(--display-lg);}
  .disclaimer-subtitle{font-size:var(--body);}
  .disclaimer-section{padding:var(--space-lg);gap:var(--space-lg);}
  .disclaimer-section-title{font-size:var(--headline);}
  .disclaimer-section p{font-size:var(--body-sm);}
  .disclaimer-list li{font-size:var(--micro);padding-left:var(--space-md);}
}

@media(max-width:480px){
  .disclaimer-container{padding:var(--space-lg);margin:var(--space-md);}
  .disclaimer-title{font-size:var(--display-md);}
  .disclaimer-subtitle{font-size:var(--body-sm);}
  .disclaimer-section{padding:var(--space-md);gap:var(--space-md);}
  .disclaimer-section-title{font-size:var(--body);}
  .disclaimer-section p{font-size:var(--micro);}
  .disclaimer-list li{font-size:10px;padding-left:var(--space-sm);}
}

/* ========== FOOTER ========== */
.footer{margin-left:auto;margin-right:auto;padding:48px var(--space-xl);border-top:1px solid var(--hairline-soft);text-align:center;color:var(--ink-muted);font-size:var(--caption);font-weight:500;letter-spacing:var(--ls-caption);line-height:var(--lh-caption);position:relative;z-index:1;transition:margin-left var(--transition-smooth);max-width:1480px;width:100%;box-sizing:border-box;background:var(--surface-1);}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-sm) 0;border-bottom:1px solid var(--hairline-soft);width:100%;}
.footer-links a{color:var(--ink-muted);text-decoration:none;transition:color var(--transition-fast);}
.footer-links a:hover{color:var(--ink);}
.footer-copyright{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-xs);font-size:var(--micro);color:var(--ink-muted);}
@media (min-width: 1025px) {
  .tools-row > .sidebar {
    margin-top: var(--sidebar-section-header-offset);
  }
  .hero {
    padding-bottom: var(--space-section);
    padding-top: var(--space-xl);
  }
}

/* ========== VIEW CONTROLS ========== */
.view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding: 0 var(--space-xs);
  gap: var(--space-sm);
}

.view-controls-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.view-controls-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ========== COMPACT MODE TOGGLE ========== */
.compact-toggle-container {
  display: flex;
  justify-content: flex-end;
}

.compact-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  user-select: none;
  flex-direction: row-reverse;
}

.compact-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.compact-toggle-slider {
  position: relative;
  width: 48px;
  height: 24px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-pill);
  transition: var(--transition-fast);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.compact-toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--ink-muted);
  border-radius: 50%;
  transition: var(--transition-fast);
  z-index: 1;
}

.slider-icon {
  width: 14px;
  height: 14px;
  color: var(--ink-muted);
  transition: var(--transition-fast);
  z-index: 2;
  position: relative;
}

.slider-text {
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  transition: var(--transition-fast);
  z-index: 2;
  color: var(--ink-muted);
}

.compact-toggle input:checked + .compact-toggle-slider {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.compact-toggle input:checked + .compact-toggle-slider::before {
  transform: translateX(24px);
  background: white;
}

.compact-toggle input:checked + .compact-toggle-slider .text-compact {
  display: none;
}

.compact-toggle input:checked + .compact-toggle-slider .text-expanded {
  display: block;
  color: var(--ink-muted);
}

.compact-toggle input:not(:checked) + .compact-toggle-slider .text-compact {
  display: block;
  color: var(--ink-muted);
}

.compact-toggle input:not(:checked) + .compact-toggle-slider .text-expanded {
  display: none;
}

.compact-toggle input:not(:checked) + .compact-toggle-slider .icon-detailed {
  display: none;
}

.compact-toggle input:checked + .compact-toggle-slider .icon-compact {
  display: none;
}

.compact-toggle input:focus-visible + .compact-toggle-slider {
  box-shadow: var(--shadow-focus);
}


/* ========== COMPACT MODE CARDS ========== */
.compact-mode .card-footer {
  display: none;
}

.compact-mode .card-body .card-verdict {
  display: none;
}

.compact-mode .card {
  min-height: auto;
  padding: var(--space-sm);
}

.compact-mode .card-header {
  display: none;
}

.compact-mode .card-icon {
  width: 32px;
  height: 32px;
}

.compact-mode .card-icon img {
  width: 20px;
  height: 20px;
}

.compact-mode .card-body {
  margin-bottom: 0;
}

.compact-mode .card-title {
  font-size: 13px;
  margin-bottom: 2px;
}

.compact-mode .card-desc {
  font-size: 11px;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* Responsive for compact mode */
@media (max-width: 767px) {
  .compact-mode .card {
    padding: var(--space-xs);
  }
  .compact-mode .card-icon {
    width: 28px;
    height: 28px;
  }
  .compact-mode .card-icon img {
    width: 18px;
    height: 18px;
  }
  .compact-mode .card-title {
    font-size: 12px;
  }
  .compact-mode .card-desc {
    font-size: 10px;
  }
}

@media (max-width: 640px) {
  .compact-toggle-slider {
    width: 40px;
    height: 20px;
    padding: 0 4px;
  }
  .compact-toggle-slider::before {
    width: 14px;
    height: 14px;
    top: 3px;
    left: 3px;
  }
  .compact-toggle input:checked + .compact-toggle-slider::before {
    transform: translateX(19px);
  }
  .slider-text {
    font-size: 10px;
  }
  
  .view-toggle-slider {
    width: 40px;
    height: 20px;
    padding: 0 4px;
  }
  .view-toggle-slider::before {
    width: 14px;
    height: 14px;
    top: 3px;
    left: 3px;
  }
  .view-toggle input:checked + .view-toggle-slider::before {
    transform: translateX(19px);
  }
}

/* ========== RESPONSIVE ========== */
/* Tablet (768px - 1024px) */
@media(max-width:1024px){
  .content-wrapper{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0 var(--space-lg);}
  .sidebar{position:fixed;left:0;top:var(--header-height);height:calc(100vh - var(--header-height));max-height:none;transform:translateX(-100%);transition:var(--transition-smooth);z-index:950;background:var(--canvas);border-right:1px solid var(--hairline-soft);text-align:left;}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,0.3);}
  .nav-pill{justify-content:flex-start;}
  .header{justify-items:space-between;}
  .header > *:first-child{position:relative;left:auto;}
  .header > *:last-child{position:relative;right:auto;}
  .hero{padding-left:0;padding-right:0;}
  .main{margin-left:0;padding:var(--space-xl) 0 60px;max-width:none;}
  .footer{max-width:none;padding:48px var(--space-lg);}
  
  /* Premium responsive adjustments */
  .hero-title{font-size:var(--display-xl);letter-spacing:var(--ls-display-xl);}
  .cards-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-sm);}
  .card{padding:16px;}
  .card-header{gap:var(--space-sm);}
  .card-icon{width:42px;height:42px;}
  .card-icon img{width:24px;height:24px;}
  .card-title{font-size:var(--headline);letter-spacing:var(--ls-headline);}
  .card-desc{font-size:var(--micro);letter-spacing:var(--ls-micro);}
  
  .hero-title{font-size:48px;letter-spacing:-2.5px;}
  .header-search-cluster{max-width:min(300px,52vw);}
  .search-container{width:220px;}
  .search-container.visible{max-width:220px;}
  .stat-pill{display:none;}
  .mobile-toggle{display:flex;}
}

/* Mobile Landscape (480px - 767px) */
@media(max-width:767px){
  .cards-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-sm);}
  .card{padding:14px;transition:transform 0.3s ease,box-shadow 0.3s ease;}
  .card-header{margin-bottom:var(--space-xs);}
  .card-icon{width:44px;height:44px;transition:transform 0.3s ease;}
  .card-icon img{width:26px;height:26px;}
  .card-title{font-size:14px;line-height:1.3;margin-bottom:3px;}
  .card-desc{font-size:12px;-webkit-line-clamp:3;line-clamp:3;line-height:1.4;}
  .card-rating-interactive{font-size:10px;}
  .card-tag{font-size:11px;padding:2px 6px;}
  .back-to-top{bottom:max(var(--space-lg),env(safe-area-inset-bottom,0px));right:max(var(--space-lg),env(safe-area-inset-right,0px));width:36px;height:36px;z-index:10050;}
  .header-search-cluster{max-width:min(280px,58vw);}
  .search-container{width:200px;}
  .search-container.visible{max-width:200px;}
  .header-actions{gap:var(--space-xs);}
  .lang-toggle{padding:1px;}
  .lang-btn{padding:3px 8px;font-size:11px;}
  .hero-tags{gap:var(--space-xs);}
  .hero-tag{padding:4px 10px;font-size:12px;}
}

/* Mobile Portrait (max-width: 640px) */
@media(max-width:640px){
  .content-wrapper{padding:0 var(--space-md);}
  :root{--header-height:52px;--sidebar-sticky-top:calc(var(--header-height) + 10px);}
  .sidebar{position:fixed;left:0;top:var(--header-height);height:calc(100vh - var(--header-height));max-height:none;transform:translateX(-100%);background:var(--canvas);border-right:1px solid var(--hairline-soft);}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,0.3);}
  .header{padding:0 var(--space-md);min-height:var(--header-height);justify-items:space-between;}
  .header > *:first-child{position:relative;left:auto;}
  .header > *:last-child{position:relative;right:auto;}
  .logo{gap:var(--space-xs);}
  .logo-mark{width:28px;height:28px;font-size:14px;}
  .logo-text{font-size:16px;letter-spacing:-0.6px;}
  .mobile-toggle{width:32px;height:32px;display:flex;}
  .theme-toggle{width:32px;height:32px;}
  .search-container{display:none;}
  .search-icon-btn{display:flex;}
  .main{margin-top:var(--header-height);padding:var(--space-lg) 0 60px;max-width:none;}
  .hero{padding:var(--space-xl) 0 var(--space-xxl);}
  .hero-title{font-size:var(--display-lg);letter-spacing:var(--ls-display-lg);}
  .hero-actions{flex-direction:column;gap:var(--space-sm);}
  .hero-tags{gap:var(--space-xs);}
  .hero-tag{font-size:var(--micro);letter-spacing:var(--ls-micro);padding:4px 8px;}
  
  .cards-grid{grid-template-columns:1fr;gap:var(--space-xs);}
  .card{padding:10px;}
  .card-header{gap:var(--space-xs);}
  .card-icon{width:32px;height:32px;}
  .card-icon img{width:19px;height:19px;}
  .card-title{font-size:13px;letter-spacing:-0.4px;}
  .card-desc{font-size:9px;letter-spacing:-0.05px;}
  .card-tag{font-size:11px;padding:2px 6px;line-height:1.3;}
  .card-latest-update{font-size:10px;}
}

/* Small Mobile (max-width: 480px) */
@media(max-width:480px){
  .content-wrapper{padding:0 var(--space-sm);}
  .sidebar{position:fixed;left:0;top:var(--header-height);transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,0.3);}
  .header{padding:0 var(--space-sm);justify-items:space-between;}
  .header > *:first-child{position:relative;left:auto;}
  .header > *:last-child{position:relative;right:auto;}
  .logo{gap:var(--space-xs);}
  .logo-mark{width:24px;height:24px;font-size:12px;}
  .logo-text{font-size:14px;letter-spacing:-0.5px;}
  .mobile-toggle{width:28px;height:28px;}
  .theme-toggle{width:28px;height:28px;}
  .search-icon-btn{width:28px;height:28px;}
  .header-actions{gap:var(--space-xs);}
  .lang-toggle{display:none;}
  .main{padding:var(--space-md) var(--space-sm) 50px;max-width:none;}
  .hero-title{font-size:24px;letter-spacing:-1px;}
  .hero{padding:var(--space-lg) 0 var(--space-xl);}
  .card{padding:12px;min-height:180px;}
  .card-header{margin-bottom:8px;}
  .card-icon{width:40px;height:40px;}
  .card-icon img{width:22px;height:22px;}
  .card-title{font-size:13px;line-height:1.25;margin-bottom:2px;}
  .card-desc{font-size:11px;-webkit-line-clamp:3;line-clamp:3;line-height:1.35;}
  .section-count{font-size:11px;}
  .show-more-btn{padding:var(--space-md);min-height:160px;font-size:13px;}
  .card-rating{font-size:9px;}
  .star{width:7px;height:7px;}
  .card-tag{font-size:10px;padding:2px 5px;line-height:1.3;}
  .card-rating-interactive{gap:6px;}
  .card-star-svg{width:12px;height:12px;}
  .footer{padding:40px var(--space-sm);font-size:12px;max-width:none;}
}

/* ========== TOUCH INTERACTIONS ========== */
@media(hover:none) and (pointer:coarse){
  .card:hover{background:var(--bg-card);border-color:var(--border-subtle);box-shadow:none;transform:none;}
  .card:active{background:var(--bg-card-hover);border-color:var(--border-hover);box-shadow:var(--shadow-2);transform:translateY(-1px);}
  .card:active .card-arrow{opacity:1;transform:translateX(0);color:var(--accent-blue);}
  .card:active .card-title{color:var(--ink);transform:translateX(3px);}
  .card:active .card-icon{transform:scale(1.05);}
  .nav-pill:hover{color:var(--ink-muted);background:transparent;}
  .nav-pill:active{color:var(--ink);background:var(--surface-1);}
  .hero-tag:hover{background:var(--surface-1);color:var(--ink-muted);border-color:var(--hairline-soft);}
  .hero-tag:active{background:var(--surface-2);color:var(--ink);border-color:var(--hairline);}
  .show-more-btn:hover{background:transparent;color:var(--ink-muted);border-color:var(--hairline);}
  .show-more-btn:active{background:var(--surface-1);color:var(--ink);border-color:var(--hairline);}
  .hub-nav-link:hover{color:var(--ink-muted);background:transparent;}
  .hub-nav-link:active{color:var(--ink);background:var(--surface-1);}
  .theme-toggle:active,.mobile-toggle:active{background:var(--surface-2);transform:scale(0.95);}
  .lang-btn:active{transform:scale(0.95);}
}

/* Reduce motion for users who prefer it */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  .ambient-orb{animation:none;}
  .hero-title .accent{animation:none;}
  .card:hover,.card:active{transform:none;}
  .card:hover .card-title,.card:active .card-title{transform:none;}
  .card:hover .card-icon,.card:active .card-icon{transform:none;}
}

/* High contrast mode support */
@media(prefers-contrast:high){
  :root{--hairline-soft:var(--hairline);--border-subtle:var(--border-hover);}
  .card{border-width:2px;}
  .theme-toggle,.mobile-toggle,.lang-toggle{border-width:2px;}
}

.card.hidden{display:none;}
.category-section.hidden{display:none;}

/* ========== LAZY LOADING STYLES ========== */

/* Section懒加载 - 默认隐藏内容，等待进入视口 */
.section-loading .category-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.section-loading.section-visible .category-section {
  opacity: 1;
  transform: translateY(0);
}

/* 卡片懒加载动画 */
.card-lazy {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 隐藏容器的卡片默认可见 */
.hidden-cards .card {
  opacity: 1;
  transform: translateY(0);
}

/* 图片懒加载占位符 */
.card-icon-img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-icon-img.loaded,
.card-icon-img:not([data-src]) {
  opacity: 1;
}

/* 渐进式加载动画 */
@keyframes lazyFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 减少动画（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .section-loading .category-section,
  .card-lazy,
  .card-visible {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* One-line editorial verdict */
.card-verdict{display:none;margin:0 0 var(--space-xs);padding:6px 0 6px 10px;border-left:3px solid var(--accent-blue);font-size:12px;line-height:1.45;font-weight:500;color:var(--ink-muted);}
[data-theme="light"] .card-verdict{color:var(--ink-muted);}
.card-promo .card-verdict{border-left-color:var(--accent-blue);}

.card-verdict,.card-desc{transition:color 0.22s var(--ease-card),background-color 0.22s var(--ease-card);}
@media (hover:hover) and (pointer:fine){
  .card-open:hover .card-verdict{color:var(--ink);background-color:rgba(0,153,255,0.11);border-radius:var(--radius-sm);}
  .card-open:hover .card-desc{color:var(--ink);}
  .card.card-promo .card-open:hover .card-desc{color:var(--ink);}
}
[data-theme="light"] .card-open:hover .card-verdict{background-color:rgba(0,153,255,0.07);}

/* Hub panels (Prompt / Skill / AI News · AI资讯) */
.hub-page-panel{padding:calc(var(--header-height) + var(--space-xl)) var(--space-lg) var(--space-xxl);}
.hub-page-wrap{max-width:880px;margin:0 auto;}
.hub-page-head{margin-bottom:var(--space-xl);}
.hub-page-title{font-family:var(--font-display);font-size:var(--display-md);font-weight:var(--fw-display-md);line-height:var(--lh-display-md);letter-spacing:var(--ls-display-md);color:var(--ink);margin:0 0 var(--space-sm);}
.hub-page-lede{font-size:var(--body);color:var(--ink-muted);line-height:var(--lh-body);margin:0;}
.hub-page-footer{margin-top:var(--space-xxl);}
.hub-inline-btn{cursor:pointer;}

.hub-page-wrap--empty .hub-page-head,
.hub-page-wrap--empty .hub-page-footer{display:none;}
.hub-page-wrap--empty{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  min-height:min(52vh,380px);
}
.hub-page-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-xxl) var(--space-lg);
  text-align:center;
}
.hub-page-placeholder-text{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(22px,4.2vw,var(--subhead));
  font-weight:var(--fw-subhead);
  line-height:var(--lh-subhead);
  letter-spacing:var(--ls-headline);
  color:var(--ink-muted);
}

.prompt-packs-root{display:flex;flex-direction:column;gap:var(--space-xxl);}
.prompt-pack{border:1px solid var(--hairline-soft);border-radius:var(--radius-xl);padding:var(--space-lg);background:var(--surface-1);}
.prompt-pack-title{font-family:var(--font-display);font-size:var(--headline);font-weight:var(--fw-headline);margin:0 0 var(--space-md);color:var(--ink);}
.prompt-pack-body{display:flex;flex-direction:column;gap:var(--space-lg);}
.prompt-item{display:flex;flex-direction:column;gap:var(--space-sm);padding-bottom:var(--space-md);border-bottom:1px solid var(--hairline-soft);}
.prompt-pack .prompt-item:last-child{border-bottom:none;padding-bottom:0;}
.prompt-body{font-size:var(--body-sm);line-height:1.5;color:var(--ink-muted);white-space:pre-wrap;margin:0;}
.prompt-copy{align-self:flex-start;}

.hub-skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-md);}
.skill-card{border:1px solid var(--hairline-soft);border-radius:var(--radius-lg);padding:var(--space-lg);background:var(--surface-1);transition:var(--transition-fast);}
.skill-card:hover{border-color:var(--hairline);background:var(--surface-2);}
.skill-card-title{font-size:var(--headline);font-weight:var(--fw-headline);margin:0 0 var(--space-xs);color:var(--ink);}
.skill-card-body{font-size:var(--body-sm);color:var(--ink-muted);line-height:1.5;margin:0;}

.news-timeline{display:flex;flex-direction:column;gap:var(--space-lg);}
.news-item{padding:var(--space-md) 0;border-bottom:1px solid var(--hairline-soft);}
.news-item:last-child{border-bottom:none;}
.news-date{display:block;font-family:var(--font-mono);font-size:12px;color:var(--accent-blue);margin-bottom:var(--space-xs);}
.news-body{font-size:var(--body);color:var(--ink-muted);line-height:1.5;margin:0;}

/* Visible FAQ — aligns with FAQPage JSON-LD */
.seo-faq{margin-top:var(--space-section);padding-top:var(--space-xxl);border-top:1px solid var(--hairline-soft);}
.seo-faq-title{font-family:var(--font-display);font-size:var(--headline);font-weight:var(--fw-headline);margin:0 0 var(--space-lg);color:var(--ink);}
.seo-faq-list{margin:0;display:flex;flex-direction:column;gap:var(--space-lg);}
.seo-faq-list dt{font-weight:600;color:var(--ink);font-size:var(--body);}
.seo-faq-list dd{margin:0;color:var(--ink-muted);font-size:var(--body-sm);line-height:1.55;}

@media(max-width:640px){
  .hub-page-panel{padding-left:var(--space-md);padding-right:var(--space-md);}
  .hub-skill-grid{grid-template-columns:1fr;}
}

/* AI News Styles */
.ai-news-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.ai-news-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.ai-news-title {
  font-size: var(--display-lg);
  font-weight: 700;
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--gradient-violet), var(--gradient-magenta));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-news-subtitle {
  font-size: var(--body-lg);
  color: var(--ink-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.ai-news-content {
  background: var(--surface-1);
  border-radius: 16px;
  padding: var(--space-xl);
  border: 1px solid var(--hairline);
}

.ai-news-section {
  margin-bottom: var(--space-xl);
}

.ai-news-section:last-child {
  margin-bottom: 0;
}

.ai-news-section h3 {
  font-size: var(--headline);
  margin-bottom: var(--space-md);
  color: var(--ink);
}

.ai-news-features {
  list-style: none;
  padding: 0;
}

.ai-news-features li {
  padding: var(--space-sm) 0;
  color: var(--ink-secondary);
  position: relative;
  padding-left: var(--space-lg);
}

.ai-news-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--semantic-success);
  font-weight: bold;
}

.ai-news-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.ai-news-links {
  list-style: none;
  padding: 0;
}

.ai-news-links li {
  margin-bottom: var(--space-sm);
}

.ai-news-links a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ai-news-links a:hover {
  color: var(--gradient-violet);
}

/* AI News Dynamic Content */
.ai-news-daily {
  animation: fadeIn 0.5s ease;
}

.ai-news-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.ai-news-meta {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.ai-news-source,
.ai-news-updated {
  font-size: var(--body-sm);
  color: var(--ink-muted);
}

.ai-news-items {
  display: grid;
  gap: var(--space-lg);
}

.ai-news-item {
  background: var(--surface-2);
  border-radius: 12px;
  padding: var(--space-lg);
  border: 1px solid var(--hairline-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-news-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.ai-news-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}

.ai-news-item-title {
  font-size: var(--headline);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  flex: 1;
}

.ai-news-item-date {
  font-size: var(--body-sm);
  color: var(--ink-muted);
  white-space: nowrap;
}

.ai-news-item-content {
  color: var(--ink-secondary);
  line-height: 1.6;
}

.ai-news-item-content p {
  margin-bottom: var(--space-sm);
}

.ai-news-item-content p:last-child {
  margin-bottom: 0;
}

.ai-news-item-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 500;
  margin-top: var(--space-sm);
  transition: color 0.2s ease;
}

.ai-news-item-link:hover {
  color: var(--gradient-violet);
}

/* Loading and Error States */
.ai-news-loading {
  text-align: center;
  padding: var(--space-xl);
}

.ai-news-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--hairline);
  border-top: 3px solid var(--accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-md);
}

.ai-news-error {
  text-align: center;
  padding: var(--space-xl);
  color: var(--ink-secondary);
}

.ai-news-error h3 {
  color: var(--gradient-coral);
  margin-bottom: var(--space-md);
}

.ai-news-empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--ink-muted);
}

/* Cookie Required State */
.ai-news-cookie-required {
  text-align: center;
  padding: var(--space-xl);
}

.ai-news-notice {
  background: var(--surface-2);
  border-radius: 12px;
  padding: var(--space-xl);
  border: 1px solid var(--hairline-soft);
  max-width: 500px;
  margin: 0 auto;
}

.ai-news-notice h3 {
  color: var(--ink);
  margin-bottom: var(--space-md);
}

.ai-news-notice p {
  color: var(--ink-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* Modal Styles */
.ai-news-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ai-news-modal.ai-news-modal--show {
  opacity: 1;
  visibility: visible;
}

.ai-news-modal-content {
  background: var(--surface-1);
  border-radius: 16px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.ai-news-modal.ai-news-modal--show .ai-news-modal-content {
  transform: scale(1);
}

.ai-news-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--hairline);
}

.ai-news-modal-header h3 {
  margin: 0;
  color: var(--ink);
}

.ai-news-modal-close {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 24px;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.ai-news-modal-close:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.ai-news-modal-body {
  padding: var(--space-lg);
}

.ai-news-modal-body ol {
  margin: var(--space-md) 0;
  padding-left: var(--space-lg);
}

.ai-news-modal-body li {
  margin-bottom: var(--space-sm);
  color: var(--ink-secondary);
}

.ai-news-modal-body code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--body-sm);
}

.ai-news-cookie-input {
  margin: var(--space-lg) 0;
}

.ai-news-cookie-input label {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--ink);
  font-weight: 500;
}

.ai-news-cookie-input textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--space-md);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--body-sm);
  resize: vertical;
}

.ai-news-cookie-input textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.ai-news-modal-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
  margin-top: var(--space-lg);
}

/* Notification Styles */
.ai-news-notification {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: var(--space-md);
  color: var(--ink);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  max-width: 300px;
}

.ai-news-notification.ai-news-notification--show {
  transform: translateX(0);
}

.ai-news-notification.ai-news-notification--success {
  border-color: var(--semantic-success);
  color: var(--semantic-success);
}

.ai-news-notification.ai-news-notification--error {
  border-color: var(--gradient-coral);
  color: var(--gradient-coral);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .ai-news-container {
    padding: var(--space-md);
  }
  
  .ai-news-content {
    padding: var(--space-lg);
  }
  
  .ai-news-header-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ai-news-meta {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .ai-news-item-header {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .ai-news-actions {
    flex-direction: column;
  }
  
  .ai-news-modal-content {
    width: 95%;
    margin: var(--space-md);
  }
  
  .ai-news-notification {
    right: var(--space-md);
    left: var(--space-md);
    max-width: none;
  }
}

/* ========== LIGHT MODE COMPONENT ADAPTATIONS ========== */

/* AI News item hover */
[data-theme="light"] .ai-news-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Modal backdrop in light mode */
[data-theme="light"] .ai-news-modal {
  background: rgba(0, 0, 0, 0.5);
}

/* Light mode adjustments for notifications */
[data-theme="light"] .ai-news-notification {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* AI News Modal in light mode */
[data-theme="light"] .ai-news-modal-content {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
}

/* AI News Input in light mode */
[data-theme="light"] .ai-news-cookie-input textarea {
  background: var(--canvas);
  border-color: var(--hairline);
  color: var(--ink);
}

/* AI News Modal close button in light mode */
[data-theme="light"] .ai-news-modal-close {
  color: var(--ink-muted);
}

[data-theme="light"] .ai-news-modal-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Light mode ambient orb adjustments */
[data-theme="light"] .ambient-orb {
  opacity: calc(var(--orb-opacity) * 0.6);
}

/* Light mode nav pill active state */
[data-theme="light"] .nav-pill.active {
  background: var(--surface-2);
}

/* Light mode card active state */
[data-theme="light"] .card:active {
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}

/* Light mode sidebar shadow */
[data-theme="light"] .sidebar.open {
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
}

/* Light mode toast adjustments */
[data-theme="light"] .nexus-toast {
  border-color: var(--hairline);
}

/* Light mode search box placeholder */
[data-theme="light"] .search-box::placeholder {
  color: var(--ink-muted);
}

/* Light mode hero tag hover */
[data-theme="light"] .hero-tag:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--hairline);
}

/* ========== VIEW TOGGLE ========== */
.view-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  user-select: none;
  flex-direction: row-reverse;
}

.view-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.view-toggle-slider {
  position: relative;
  width: 48px;
  height: 24px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-pill);
  transition: var(--transition-fast);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.view-toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--ink-muted);
  border-radius: 50%;
  transition: var(--transition-fast);
  z-index: 1;
}

.view-toggle input:checked + .view-toggle-slider {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.view-toggle input:checked + .view-toggle-slider::before {
  transform: translateX(24px);
  background: white;
}

.view-toggle input:checked + .view-toggle-slider .text-grid {
  display: none;
}

.view-toggle input:checked + .view-toggle-slider .text-list {
  display: block;
  color: var(--ink-muted);
}

.view-toggle input:not(:checked) + .view-toggle-slider .text-grid {
  display: block;
  color: var(--ink-muted);
}

.view-toggle input:not(:checked) + .view-toggle-slider .text-list {
  display: none;
}

.view-toggle input:not(:checked) + .view-toggle-slider .icon-list {
  display: none;
}

.view-toggle input:checked + .view-toggle-slider .icon-grid {
  display: none;
}

.view-toggle input:focus-visible + .view-toggle-slider {
  box-shadow: var(--shadow-focus);
}


/* ========== LAZY LOAD MORE ========== */
.lazy-load-sentinel {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-md) 0;
}

.lazy-load-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--hairline-soft);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ========== LIST VIEW ========== */
.list-view .cards-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.list-view .card {
  flex-direction: row;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  min-height: auto;
}

.list-view .card-header {
  margin-bottom: 0;
  margin-right: var(--space-sm);
}

.list-view .card-icon {
  width: 36px;
  height: 36px;
}

.list-view .card-icon img {
  width: 22px;
  height: 22px;
}

.list-view .card-body {
  flex: 1;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-view .card-title {
  font-size: 14px;
  white-space: nowrap;
}

.list-view .card-desc {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  font-size: 12px;
}

.list-view .card-verdict {
  display: none;
}

.list-view .card-footer {
  flex-direction: row;
  align-items: center;
  margin-top: 0;
  margin-left: var(--space-sm);
}

.list-view .card-meta {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.list-view .card-tags {
  display: none;
}

.list-view .card-latest-update {
  display: none;
}

/* List view compact mode adjustments */
.list-view.compact-mode .card {
  padding: var(--space-xs) var(--space-sm);
}

.list-view.compact-mode .card-header {
  display: none;
}

.list-view.compact-mode .card-icon {
  width: 28px;
  height: 28px;
}

.list-view.compact-mode .card-icon img {
  width: 18px;
  height: 18px;
}

.list-view.compact-mode .card-body {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.list-view.compact-mode .card-title {
  font-size: 13px;
}

.list-view.compact-mode .card-desc {
  display: none;
}

.list-view.compact-mode .card-footer {
  margin-left: auto;
}

/* ========== RESPONSIVE VIEW CONTROLS ========== */
@media (max-width: 640px) {
  .view-controls {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .view-controls-left {
    order: 2;
  }

  .view-controls-right {
    order: 1;
    margin-left: auto;
  }


  .list-view .card {
    padding: var(--space-xs) var(--space-sm);
  }

  .list-view .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .list-view .card-meta {
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .view-controls-left {
    width: 100%;
    justify-content: flex-start;
  }

  .view-controls-right {
    margin-left: auto;
  }
}