/* ============================================
   Claude Aesthetic Design System
   ============================================ */

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--text-primary);
  opacity: 0.15;
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ============================================
   1. CSS Variables & Design Tokens
   ============================================ */

/* ============================================
   2. Base & Reset - Claude Aesthetic
   ============================================ */
body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 700; }

::selection {
  background: rgba(251,191,36,0.2);
  color: inherit;
}

/* ============================================
   Background Atmosphere - Claude Aesthetic
   ============================================ */
.bg-atmosphere {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-blob { display: none !important; }
.bg-blob-1 { display: none !important; }
.bg-blob-2 { display: none !important; }
.bg-blob-3 { display: none !important; }
.bg-blob-4 { display: none !important; }
.hero-deco { display: none !important; }

@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 30px) scale(0.95); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-60px, -40px) scale(1.05); }
  66% { transform: translate(30px, -60px) scale(0.9); }
}
@keyframes blobFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-45%, -55%) scale(1.15); }
}

/* ============================================
   3. Typography - Claude Aesthetic
   ============================================ */
.home-welcome h1, .hero-title {
  font-family: var(--font-title);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.2;
  /* 去掉渐变文字效果 */
  background: none;
  -webkit-text-fill-color: unset;
  text-fill-color: unset;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.2px;
}

.content-page-title {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  letter-spacing: -0.02em;
}

/* ============================================
   4. Navigation - Claude Glass Morphism
   ============================================ */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.nav-logo-icon {
  background: var(--accent-gradient);
}

.nav-link {
  position: relative;
  transition: all 0.25s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: 1px;
  transition: all 0.25s ease;
  transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 60%;
}

/* ============================================
   6. Components - Claude Glass Cards
   ============================================ */
.card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}

.btn-primary {
  background: var(--primary, #1F2328);
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-body);
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: var(--accent-light, #333840);
}
.btn-primary:active {
  transform: scale(0.99);
  filter: brightness(0.95);
  transition: transform 0.1s ease, filter 0.1s ease;
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  filter: none;
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-body);
}
.btn-secondary:hover {
  background: var(--hover);
}

.form-input {
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--ring-offset, rgba(59,130,246,0.3));
}

/* ============================================
   9. Competition Hub - Claude Cards
   ============================================ */
.comp-hub-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--bg-card-solid, var(--bg-card));
  box-shadow: var(--shadow-card);
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.comp-hub-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card-hover);
}

.knowledge-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--bg-card-solid, var(--bg-card));
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.knowledge-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card-hover);
}

/* ============================================
   14. Animations - Claude Cinematic
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes screenFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

.page {
  display: none;
  opacity: 0;
}
.page.active {
  display: block;
  animation: screenFadeIn 0.3s ease forwards;
}
.page.fading-out {
  display: block;
  animation: screenFadeOut 0.3s ease forwards;
}

/* ============================================
   Claude Aesthetic - Glass Morphism Modals
   ============================================ */
.contact-modal, .legal-modal {
  background: var(--bg-card-solid, var(--bg-card));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  position: relative;
}

/* ============================================
   Claude Aesthetic - Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(251,191,36,0.2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(251,191,36,0.35); }



    @font-face{font-family:'Inter';src:local('Inter'),local('-apple-system'),local('BlinkMacSystemFont');font-display:swap}
    @font-face{font-family:'Playfair Display';src:local('Playfair Display'),local('Georgia'),local('STSong');font-display:swap}
    :root{
  --page-bg:#F6F5F2;
  --panel-bg:#FFFFFF;
  --panel-bg-2:#FAFAF8;
  --bg-primary:#F6F5F2;
  --bg-secondary:#EDECEA;
  --bg-tertiary:#E5E4E1;
  --bg-card:#FFFFFF;
  --bg-hover:rgba(17,17,17,0.04);
  --bg-card-solid:#FFFFFF;
  --text-primary:#111111;
  --text-secondary:rgba(17,17,17,0.72);
  --text-muted:rgba(17,17,17,0.56);
  --accent:#1F2328;
  --accent-light:#333840;
  --accent-dark:#111318;
  --accent-gradient:linear-gradient(135deg,#1F2328,#333840);
  --accent-gradient-soft:linear-gradient(135deg,rgba(31,35,40,0.04),rgba(17,19,24,0.02));
  --accent-gradient-bg:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(31,35,40,0.03),transparent);
  --accent-gold:#1F2328;
  --accent-orange:#1F2328;
  --accent-cyan:#1F2328;
  --border-subtle:rgba(17,17,17,0.10);
  --border-light:rgba(17,17,17,0.14);
  --border-accent:rgba(17,17,17,0.16);
  --border-accent-strong:rgba(17,17,17,0.24);
  --border-gold:rgba(17,17,17,0.16);
  --border-gold-strong:rgba(17,17,17,0.24);
  --surface:rgba(17,17,17,0.02);
  --surface-glass:rgba(255,255,255,0.92);
  --surface-glass-hover:rgba(17,17,17,0.04);
  --surface-accent:rgba(17,17,17,0.04);
  --surface-accent-light:rgba(17,17,17,0.06);
  --surface-gold-subtle:rgba(17,17,17,0.04);
  --surface-gold-light:rgba(17,17,17,0.06);
  --surface-gold-medium:rgba(17,17,17,0.08);
  --shadow-sm:0 1px 3px rgba(17,17,17,0.06);
  --shadow-md:0 4px 12px rgba(17,17,17,0.08);
  --shadow-lg:0 10px 30px rgba(17,17,17,0.08);
  --shadow-xl:0 20px 60px rgba(17,17,17,0.10);
  --shadow-glow:0 10px 30px rgba(17,17,17,0.06);
  --shadow-accent:0 4px 12px rgba(17,17,17,0.10);
  --shadow-deep:0 8px 24px rgba(17,17,17,0.12);
  --shadow-card:0 10px 30px rgba(17,17,17,0.08);
  --shadow-card-hover:0 14px 40px rgba(17,17,17,0.12);
  --ring-color:rgba(17,17,17,0.10);
  --ring-offset:0 0 0 3px rgba(17,17,17,0.06);
  --gold:#1F2328;--gold-light:#333840;--gold-dark:#111318;
  --gold-gradient:linear-gradient(135deg,#1F2328,#333840);
  --border-gold:rgba(17,17,17,0.16);--border-gold-strong:rgba(17,17,17,0.24);
  --surface-gold-subtle:rgba(17,17,17,0.04);--surface-gold-light:rgba(17,17,17,0.06);
  --bg-hover:rgba(17,17,17,0.04);
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:999px;
  --font-title:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --transition-fast:0.15s cubic-bezier(.4,0,.2,1);
  --transition-normal:0.25s cubic-bezier(.4,0,.2,1);
  --transition-slow:0.4s cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out-expo:cubic-bezier(0.23,1,0.32,1);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  --text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:15px;--text-lg:17px;--text-xl:20px;--text-2xl:28px;--text-3xl:36px;--text-4xl:48px;--text-5xl:60px;--text-6xl:72px;--text-7xl:96px;
  --leading-tight:1.1;--leading-normal:1.5;--leading-relaxed:1.6;
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC",sans-serif;
  --font-serif:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nav-height:64px;
  --gradient-hero:none;
  --glow-gold:none;
  --glow-cyan:none;
  --radius-2xs:6px;
}
    *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
    
    
    
    .bg-atmosphere{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden}
    .bg-blob{position:absolute;border-radius:50%;filter:blur(120px)}
    .bg-blob-1{width:700px;height:700px;top:-200px;left:-150px;background:radial-gradient(circle,rgba(217,119,6,0.06),transparent 70%);animation:blobFloat1 25s ease-in-out infinite}
    .bg-blob-2{width:600px;height:600px;bottom:-100px;right:-100px;background:radial-gradient(circle,rgba(217,119,6,0.04),transparent 70%);animation:blobFloat2 30s ease-in-out infinite}
    .bg-blob-3{width:500px;height:500px;top:40%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(245,158,11,0.03),transparent 70%);animation:blobFloat3 22s ease-in-out infinite}
    @keyframes blobFloat1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,60px) scale(1.1)}66%{transform:translate(-40px,30px) scale(0.95)}}
    @keyframes blobFloat2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-60px,-40px) scale(1.05)}66%{transform:translate(30px,-60px) scale(0.9)}}
    @keyframes blobFloat3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-45%,-55%) scale(1.15)}}
    [data-theme="dark"]{
  --page-bg:#1A1B1E;
  --panel-bg:#222326;
  --panel-bg-2:#28292C;
  --bg-primary:#1A1B1E;
  --bg-secondary:#222326;
  --bg-tertiary:#28292C;
  --bg-card:#222326;
  --bg-hover:rgba(255,255,255,0.04);
  --bg-card-solid:#222326;
  --text-primary:rgba(255,255,255,0.92);
  --text-secondary:rgba(255,255,255,0.68);
  --text-muted:rgba(255,255,255,0.48);
  --accent:#E8E6E1;
  --accent-light:#F0EEE9;
  --accent-dark:#D0CEC8;
  --accent-gradient:linear-gradient(135deg,#D0CEC8,#E8E6E1);
  --accent-gradient-soft:linear-gradient(135deg,rgba(232,230,225,0.06),rgba(208,206,200,0.03));
  --accent-gradient-bg:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(232,230,225,0.04),transparent);
  --border-subtle:rgba(255,255,255,0.08);
  --border-light:rgba(255,255,255,0.12);
  --border-accent:rgba(255,255,255,0.14);
  --border-accent-strong:rgba(255,255,255,0.20);
  --border-gold:rgba(255,255,255,0.14);
  --border-gold-strong:rgba(255,255,255,0.20);
  --surface:rgba(255,255,255,0.03);
  --surface-glass:rgba(26,27,30,0.92);
  --surface-glass-hover:rgba(255,255,255,0.04);
  --surface-accent:rgba(255,255,255,0.04);
  --surface-accent-light:rgba(255,255,255,0.06);
  --surface-gold-subtle:rgba(255,255,255,0.04);
  --surface-gold-light:rgba(255,255,255,0.06);
  --surface-gold-medium:rgba(255,255,255,0.08);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.2);
  --shadow-md:0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:0 10px 30px rgba(0,0,0,0.3);
  --shadow-xl:0 20px 60px rgba(0,0,0,0.35);
  --shadow-glow:0 10px 30px rgba(255,255,255,0.02);
  --shadow-accent:0 4px 12px rgba(255,255,255,0.06);
  --shadow-deep:0 8px 24px rgba(0,0,0,0.3);
  --shadow-card:0 10px 30px rgba(0,0,0,0.25);
  --shadow-card-hover:0 14px 40px rgba(0,0,0,0.35);
  --ring-color:rgba(255,255,255,0.10);
  --ring-offset:0 0 0 3px rgba(255,255,255,0.06);
  --gold:#E8E6E1;--gold-light:#F0EEE9;--gold-dark:#D0CEC8;
  --gold-gradient:linear-gradient(135deg,#D0CEC8,#E8E6E1);
  --border-gold:rgba(255,255,255,0.14);--border-gold-strong:rgba(255,255,255,0.20);
  --surface-gold-subtle:rgba(255,255,255,0.04);--surface-gold-light:rgba(255,255,255,0.06);
  --bg-hover:rgba(255,255,255,0.04);
}
    
/* ============================================
   15. Light Mode Overrides
   ============================================ */
[data-theme="light"]{
  --bg-primary:#F6F5F2;
  --bg-secondary:#EDECEA;
  --bg-tertiary:#E5E4E1;
  --bg-card:#FFFFFF;
  --bg-hover:rgba(17,17,17,0.04);
  --bg-card-solid:#FFFFFF;
  --text-primary:#111111;
  --text-secondary:rgba(17,17,17,0.72);
  --text-muted:rgba(17,17,17,0.56);
  --accent:#1F2328;
  --accent-light:#333840;
  --accent-dark:#111318;
  --accent-gradient:linear-gradient(135deg,#1F2328,#333840);
  --border-subtle:rgba(17,17,17,0.10);
  --border-accent:rgba(17,17,17,0.16);
  --border-accent-strong:rgba(17,17,17,0.24);
  --surface-glass:rgba(255,255,255,0.95);
  --surface-glass-hover:rgba(17,17,17,0.04);
  --shadow-card:0 10px 30px rgba(17,17,17,0.08);
  --shadow-card-hover:0 14px 40px rgba(17,17,17,0.12);
}
[data-theme="light"] .skeleton{background:#e8e4dc}
[data-theme="light"] ::selection{background:rgba(217,119,6,0.15);color:#1a1a1a}
[data-theme="dark"] ::selection { background: rgba(245,158,11,0.2); color: #f5f0e8; }
    [data-theme="dark"] .status-open{background:rgba(22,101,52,0.3);color:#4ade80}
    [data-theme="dark"] .status-upcoming{background:rgba(30,64,175,0.3);color:#60a5fa}
    [data-theme="dark"] .status-ended{background:rgba(107,114,128,0.2);color:#9ca3af}
    [data-theme="dark"] .status-closed{background:rgba(153,27,27,0.3);color:#f87171}
    [data-theme="dark"] .status-pending{background:rgba(243,156,18,0.25);color:#fbbf24}
    [data-theme="dark"] .status-approved{background:rgba(46,204,113,0.25);color:#4ade80}
    [data-theme="dark"] .status-rejected{background:rgba(231,76,60,0.25);color:#f87171}
    [data-theme="dark"] .status-cancelled{background:rgba(149,165,166,0.25);color:#d1d5db}
    [data-theme="dark"] .status-forming{background:rgba(52,152,219,0.25);color:#60a5fa}
    [data-theme="dark"] .status-submitted{background:rgba(243,156,18,0.25);color:#fbbf24}
    [data-theme="dark"] .mobile-menu::-webkit-scrollbar-thumb{background:rgba(212,165,116,0.35)}.mobile-menu::-webkit-scrollbar-thumb:hover{background:rgba(212,165,116,0.55)}
    [data-theme="dark"] ::selection { background: rgba(245,158,11,0.2); color: #f5f0e8; }
    ::selection{background:rgba(217,119,6,0.15);color:#1a1a1a}
    ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(217,119,6,0.2);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:rgba(217,119,6,0.35)}
    @media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.bg-blob{animation:none!important}#dotGridCanvas{display:none!important}#particleContainer{display:none!important}}
  

    .top-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-height);background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px}
    .nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;flex-shrink:0}
    .nav-logo-icon{width:28px;height:28px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
    .nav-logo-text{font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--text-primary)}
    .nav-links{display:flex;align-items:center;gap:2px}
    .nav-group{display:flex;align-items:center;gap:2px;position:relative}
    .nav-group-trigger{display:flex;align-items:center;gap:4px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;border-radius:999px;transition:all .25s ease;border:none;background:none;white-space:nowrap}
    .nav-group-trigger:hover{color:var(--text-secondary);background:var(--bg-hover)}
    .nav-group-trigger.active{color:var(--accent);background:var(--surface-accent)}
    .nav-group-trigger svg{width:12px;height:12px;transition:transform .3s ease}
    .nav-group-trigger.active svg{transform:rotate(180deg)}
    .nav-dropdown-trigger svg{transition:transform .2s ease}
    .nav-dropdown-trigger.active svg{transform:rotate(180deg)}
    .nav-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:180px;background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px;z-index:200;box-shadow:var(--shadow-lg)}
    .nav-dropdown.show{display:block;animation:dropIn .2s ease forwards}
    @keyframes dropIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
    .nav-dropdown .nav-link{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:8px;font-size:13px}
    .nav-sep{width:1px;height:20px;background:var(--border-subtle);margin:0 4px;flex-shrink:0}
    .nav-link{padding:6px 14px;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;border-radius:999px;transition:all .25s ease;border:none;background:none;text-decoration:none;white-space:nowrap;position:relative}
    .nav-link:hover{color:var(--text-secondary);background:var(--bg-hover)}
    .nav-link.active{color:var(--accent);background:var(--surface-accent)}
    .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
    /* 移动端搜索按钮 */
    .nav-search-btn{display:none;width:32px;height:32px;border:none;background:none;color:var(--text-secondary);cursor:pointer;border-radius:50%;align-items:center;justify-content:center;transition:all .25s ease}
    .nav-search-btn:hover{background:var(--bg-hover);color:var(--accent)}
    .nav-search-btn svg{width:20px;height:20px}
    .nav-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;cursor:pointer;border:2px solid var(--border-gold);transition:all .25s ease}
    .nav-avatar:hover{border-color:var(--accent);transform:scale(1.05)}
    .nav-login-btn{padding:6px 16px;font-size:13px;font-weight:600;color:var(--accent);border:1px solid var(--border-accent);border-radius:999px;background:transparent;cursor:pointer;transition:all .25s ease}
    .nav-login-btn:hover{background:var(--bg-hover);border-color:var(--border-gold-strong)}
    .hamburger{display:none;width:32px;height:32px;border:none;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
    .hamburger span{display:block;width:20px;height:1.5px;background:var(--text-primary);border-radius:2px;transition:all .25s ease}
    .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
    .mobile-menu{display:flex;position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;background:var(--surface-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:99;padding:20px;flex-direction:column;gap:4px;overflow-y:auto;max-height:calc(100vh - var(--nav-height));transform:translateX(100%);visibility:hidden;opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s}
    .mobile-menu::-webkit-scrollbar{width:6px}.mobile-menu::-webkit-scrollbar-track{background:transparent}.mobile-menu::-webkit-scrollbar-thumb{background:rgba(194,136,78,0.35);border-radius:3px}.mobile-menu::-webkit-scrollbar-thumb:hover{background:rgba(194,136,78,0.55)}
    .mobile-menu.open{transform:translateX(0);visibility:visible;opacity:1;pointer-events:auto}
    .mobile-menu::after{content:'';position:sticky;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to bottom,transparent,var(--surface-glass));pointer-events:none;flex-shrink:0;margin-top:auto}
    .mobile-menu .nav-link{font-size:16px;padding:14px 16px;border-radius:var(--radius-sm)}
    .mobile-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}
    .mobile-menu-header span{font-size:14px;font-weight:600;color:var(--text-primary)}
    .mobile-menu-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px;font-size:20px;line-height:1;min-width:44px;min-height:44px}
    .mobile-menu-label{padding:12px 16px 6px;font-size:11px;color:var(--text-muted);letter-spacing:0.1em;text-transform:uppercase;font-weight:600}
    @media(max-width:768px){.nav-links{display:none}.hamburger{display:flex}.top-nav{padding:0 16px}.nav-group .nav-dropdown{display:none !important}.nav-search-btn{display:flex}}
    @media(max-width:1024px) and (min-width:769px){.nav-group .nav-dropdown{min-width:160px}.nav-link{padding:8px 10px;font-size:13px}}
  

    .shell{max-width:720px;margin:0 auto;padding:calc(var(--nav-height) + 24px) 16px calc(60px + env(safe-area-inset-bottom, 0px));position:relative;z-index:2}
    /* ===== 响应式布局宽度 ===== */
    @media(min-width:769px) and (max-width:1024px){.shell{max-width:720px}}
    @media(min-width:1025px) and (max-width:1280px){.shell{max-width:960px}}
    @media(min-width:1281px){.shell{max-width:1080px}}
    .card{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:box-shadow .2s ease}
    .card:hover{box-shadow:var(--shadow-card-hover)}
    button{border:0;cursor:pointer;font:inherit;outline:none}button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
    .btn-primary{background:var(--primary, #1F2328);color:#FFFFFF;padding:10px 20px;border-radius:var(--radius-md);border:none;font-weight:500;font-size:14px;cursor:pointer;transition:all .15s ease;font-family:var(--font-body);line-height:1.4;position:relative;overflow:hidden}
    .btn-primary:hover{background:var(--accent-light, #333840)}
    .btn-primary:active{transform:scale(0.99);filter:brightness(0.95);transition:transform .1s ease,filter .1s ease}
    .btn-primary:disabled{cursor:not-allowed;opacity:.4;transform:none!important;filter:none}
    .btn-secondary{background:transparent;color:var(--text-primary);padding:10px 20px;border-radius:var(--radius-md);border:1px solid var(--border-strong);font-weight:500;font-size:14px;cursor:pointer;transition:all .15s ease;font-family:var(--font-body)}
    .btn-secondary:hover{background:var(--hover)}
    .btn-secondary:disabled{cursor:not-allowed;opacity:.4}
    .btn-sm{padding:10px 20px;font-size:13px;border-radius:var(--radius-sm)}
    .page{display:none;opacity:0}.page.active{display:block;animation:screenFadeIn .2s ease forwards}
    .page.fading-out{display:block;animation:screenFadeOut .2s ease forwards}
    @keyframes screenFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
    @keyframes screenFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    .copy-toast{display:none;position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--panel-bg);color:var(--text-primary);padding:12px 24px;border-radius:var(--radius-md);font-weight:600;font-size:14px;z-index:2000;box-shadow:var(--shadow-lg);border:1px solid var(--border-subtle)}
    .copy-toast.active{display:block;animation:fadeInUp .3s var(--ease-out-expo),fadeInOut .3s ease 2.2s forwards}
    @keyframes fadeInOut{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}15%{opacity:1;transform:translateX(-50%) translateY(0)}85%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
    .form-group{margin-bottom:16px}
    .form-group label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:6px;font-weight:500}
    .form-input{width:100%;padding:10px 12px;background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
    .form-input:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px var(--ring-offset, rgba(59,130,246,0.3))}
    .form-input::placeholder{color:var(--text-muted)}
    .form-error{font-size:12px;color:#e74c3c;margin-top:6px;display:none}
    .form-error.show{display:block}
    .footer-simple{text-align:center;padding:32px 0 0;color:var(--text-muted);font-size:12px}
    .footer-simple a,.footer-simple button{font-size:12px;color:var(--text-muted);text-decoration:none;background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .25s ease}
    .footer-simple a:hover,.footer-simple button:hover{color:var(--accent);background:var(--bg-hover)}
  

    .home-welcome{text-align:center;padding:60px 20px 40px}
    .home-welcome h1{font-size:clamp(24px,4vw,32px);font-weight:700;letter-spacing:0;color:var(--text-primary);margin-bottom:8px;background:none;-webkit-text-fill-color:unset;text-fill-color:unset}
    .home-welcome .subtitle{font-size:17px;color:var(--text-secondary);font-weight:400}
    .home-search{max-width:600px;margin:32px auto 0;position:relative}
    .home-search input{width:100%;height:44px;padding:0 48px 0 40px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--panel-bg);color:var(--text-primary);font-size:15px;font-family:var(--font-body);outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-shadow:var(--shadow-sm)}
    .home-search input:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px var(--ring-offset, rgba(59,130,246,0.3))}
    .home-search .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;display:flex}
    .home-search .search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:var(--primary, #1F2328);color:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-weight:600}
    .home-search .search-btn:hover{filter:brightness(1.05)}
    .home-search .search-btn:active{transform:translateY(-50%) scale(0.95);filter:brightness(0.96)}
    .daily-quote{text-align:center;padding:0;margin-top:24px;font-size:18px;color:var(--text-secondary);font-weight:400;line-height:1.7;letter-spacing:0}
    .daily-quote .quote-text{font-size:18px;line-height:1.7;color:var(--text-secondary);font-weight:400;max-width:100%;letter-spacing:0}
    .daily-quote .quote-author{font-size:13px;color:var(--text-muted);margin-top:8px}
    .quote-card{background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px 28px;position:relative;display:flex;gap:16px;align-items:flex-start;max-width:600px;margin:0 auto}
    .quote-bar{width:3px;min-height:20px;border-radius:2px;background:var(--accent-gradient);flex-shrink:0;align-self:stretch}
    .quote-body{flex:1;min-width:0}
    .quote-refresh{margin-top:0;background:none;border:none;color:var(--text-muted);padding:0;font-size:14px;cursor:pointer;transition:all .25s ease;position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center}
    .quote-refresh:hover{color:var(--accent);border-color:var(--border-gold);background:var(--bg-hover)}
    .featured-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:600px;margin:40px auto 0}
    .featured-item{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-card);cursor:pointer;transition:all .25s ease}
    .featured-item:hover{border-color:var(--border-accent);background:var(--surface-accent)}
    .featured-item .fi-icon{font-size:24px;flex-shrink:0}
    .featured-item .fi-text h3{font-size:14px;font-weight:600;color:var(--text-primary)}
    .featured-item .fi-text p{font-size:12px;color:var(--text-muted);margin-top:2px}
    .featured-item .fi-arrow{color:var(--text-muted);font-size:14px;margin-left:auto;flex-shrink:0}
    .service-list{max-width:600px;margin:32px auto 0}
    .service-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:background .2s ease}
    .service-item:hover{background:var(--bg-hover)}
    .service-item .si-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;opacity:0.6}
    .service-item .si-label{flex:1;font-size:14px;color:var(--text-primary);font-weight:500}
    .service-item .si-arrow{color:var(--text-muted);font-size:12px}
  

    .ai-page{display:flex;flex-direction:column;height:calc(100dvh - var(--nav-height));padding:0;margin-top:0}
    .ai-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
    .ai-empty-icon{width:64px;height:64px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700}
    .ai-empty-text{font-size:18px;color:var(--text-secondary);font-weight:400}
    .ai-quick-questions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:500px}
    .ai-quick-btn{padding:8px 16px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .2s ease;font-family:inherit}
    .ai-quick-btn:hover{border-color:var(--border-gold);color:var(--accent);background:var(--surface-accent)}
    .ai-messages{flex:1;overflow-y:auto;padding:20px 0;display:flex;flex-direction:column;gap:20px}
    .ai-input-bar{padding:16px 0;border-top:1px solid var(--border-subtle);background:var(--surface-glass)}
    .ai-input-wrap{display:flex;gap:10px;align-items:flex-end;max-width:600px;margin:0 auto}
    .ai-input-wrap textarea{flex:1;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:20px;padding:14px 18px;color:var(--text-primary);font-size:14px;outline:none;resize:none;font-family:inherit;line-height:1.5;max-height:120px;transition:border-color .25s ease}
    .ai-input-wrap textarea:focus{border-color:var(--accent);box-shadow:var(--ring-offset)}
    .ai-send-btn{width:42px;height:42px;border-radius:50%;border:none;background:var(--accent-gradient);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;flex-shrink:0}
    .ai-send-btn:hover{transform:scale(1.05)}
    .ai-send-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
    .msg{max-width:75%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.7;word-break:break-word}
    /* AI消息气泡 - 左对齐 */
    .msg-ai{align-self:flex-start;background:var(--bg-secondary);color:var(--text-primary);border-radius:18px 18px 18px 4px;border:none}
    /* 用户消息气泡 - 右对齐金色渐变 */
    .msg-user{align-self:flex-end;background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;border-radius:18px 18px 4px 18px;border:none}
    .msg-time{font-size:12px;color:var(--text-muted);margin-top:4px}
    /* AI头像 */
    .msg-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
    /* 消息间距 */
    .ai-messages{gap:16px}
    /* 打字指示器 - 三点弹跳动画 */
    .ai-typing-indicator{display:flex;gap:4px;padding:12px 16px;align-self:flex-start;border-radius:18px 18px 18px 4px;background:var(--bg-secondary)}
    .ai-typing-indicator span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:typingBounce 1.2s ease-in-out infinite}
    .ai-typing-indicator span:nth-child(2){animation-delay:0.15s}
    .ai-typing-indicator span:nth-child(3){animation-delay:0.3s}
    @keyframes typingBounce{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
    .ai-clear-btn{padding:8px 16px;border-radius:999px;border:1px solid var(--border-subtle);background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .25s ease;font-family:inherit}
    .ai-clear-btn:hover{border-color:var(--border-gold);color:var(--accent)}
  

    .content-page{margin-top:20px}
    .content-page-title{font-size:22px;font-weight:600;color:var(--text-primary);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border-subtle)}
    .content-page-title .gold{color:var(--accent)}
    .tabs-bar{display:flex;gap:0;border-bottom:1px solid var(--border-subtle);margin-bottom:24px;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .tabs-bar::-webkit-scrollbar{display:none}
    .tab-btn{padding:12px 20px;font-size:14px;font-weight:500;color:var(--text-muted);cursor:pointer;border:none;background:none;font-family:inherit;transition:color .25s ease;position:relative;white-space:nowrap;flex-shrink:0}
    .tab-btn.active{color:var(--text-primary);font-weight:600}
    .tab-btn.active::after{content:'';position:absolute;bottom:-1px;left:20px;right:20px;height:2px;background:var(--accent);border-radius:1px}
    .tab-btn:hover{color:var(--text-secondary);background:var(--surface)}
    .info-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
    .info-row:last-child{border-bottom:none}
    .info-label{font-size:13px;color:var(--text-muted)}
    .info-value{font-size:14px;color:var(--text-primary);font-weight:500;text-align:right;max-width:60%}
    .knowledge-list{display:grid;gap:14px}
    .knowledge-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;background:var(--bg-card);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:border-color .25s ease}
    .knowledge-card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-md);transform:translateY(-1px)}
    .knowledge-card h4{font-size:15px;color:var(--text-primary);margin-bottom:10px;line-height:1.6}
    .knowledge-card p{font-size:14px;color:var(--text-secondary);line-height:1.8}
    .knowledge-card strong{color:var(--text-primary)}
    .tag-pill{display:inline-block;padding:2px 8px;margin:2px;border-radius:6px;background:var(--surface-gold-subtle);color:var(--gold);font-size:12px}
    .score-table{width:100%;border-collapse:collapse;font-size:13px}
    .score-table thead tr{border-bottom:2px solid var(--border-gold)}
    .score-table th{padding:10px;text-align:left;color:var(--gold);font-weight:600}
    .score-table th:last-child,.score-table td:last-child{text-align:right}
    .score-table tbody tr{border-bottom:1px solid var(--border-subtle)}
    .score-table td{padding:10px;color:var(--text-primary)}
    .score-table td:nth-child(2){color:var(--text-secondary)}
    .score-table td:nth-child(3){color:var(--text-muted)}
    .score-table td:nth-child(4){color:var(--gold);font-weight:700}
    .content-note{font-size:12px;color:var(--text-muted);margin-top:12px}
    .tag-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;margin-right:8px}
    .tag-lost{background:rgba(231,76,60,0.12);color:#e74c3c}
    .tag-found{background:rgba(46,204,113,0.12);color:#2ecc71}
    .publish-form{margin-top:16px}
    .publish-form .form-group{margin-bottom:12px}
    .publish-form label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:6px;font-weight:500}
  

    .profile-header{text-align:center;padding:40px 20px}
    .profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700;margin:0 auto 16px}
    .profile-name{font-size:20px;font-weight:600;color:var(--text-primary)}
    .profile-meta{font-size:13px;color:var(--text-muted);margin-top:4px}
    .settings-group{margin:16px 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle)}
    .settings-item{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--bg-card);cursor:pointer;transition:background .2s ease;border-bottom:1px solid var(--border-subtle)}
    .settings-item:last-child{border-bottom:none}
    .settings-item:hover{background:var(--surface-accent)}
    .settings-item .si-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
    .settings-item .si-label{flex:1;font-size:14px;color:var(--text-primary)}
    .settings-item .si-arrow{color:var(--text-muted);font-size:14px}
    .settings-item.danger .si-label{color:#EF4444}
    .settings-group-title{font-size:12px;color:var(--text-muted);padding:8px 20px 4px;text-transform:uppercase;letter-spacing:0.05em;font-weight:600}
    .login-required{text-align:center;padding:48px 20px;margin-top:20px}
    .login-required h3{font-size:18px;color:var(--text-primary);margin-bottom:8px}
    .login-required p{font-size:14px;color:var(--text-muted);margin-bottom:16px}
  

    .auth-container{max-width:400px;margin:0 auto;margin-top:20px}
    .auth-card{padding:32px}
    .auth-card h2{font-family:'Playfair Display',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",serif;font-size:24px;color:var(--text-primary);margin-bottom:8px;text-align:center}
    .auth-card .auth-sub{font-size:14px;color:var(--text-muted);text-align:center;margin-bottom:24px}
    .auth-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--border-subtle)}
    .auth-tab{flex:1;padding:10px 0;text-align:center;font-size:14px;font-weight:500;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .25s ease;background:none;border-top:none;border-left:none;border-right:none}
    .auth-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
    .auth-tab:hover{color:var(--text-secondary)}
    .auth-form{display:none}.auth-form.active{display:block}
    .auth-submit{width:100%;margin-top:8px;background:var(--accent-gradient)}
    .auth-logout{margin-top:16px;text-align:center}
    .password-strength{display:flex;gap:4px;margin-top:8px}
    .password-strength-bar{flex:1;height:3px;border-radius:2px;background:var(--border-subtle);transition:background .3s ease}
    .password-strength-bar.weak{background:#e74c3c}
    .password-strength-bar.medium{background:#f39c12}
    .password-strength-bar.strong{background:#2ecc71}
    .password-strength-text{font-size:11px;margin-top:4px;color:var(--text-muted)}
    .auth-agreement{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px;font-size:12px;color:var(--text-muted);line-height:1.6}
    .auth-agreement input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);margin-top:2px;flex-shrink:0;cursor:pointer}
    .auth-agreement a{color:var(--accent);text-decoration:none;cursor:pointer}
    .auth-agreement a:hover{text-decoration:underline}
  

    .share-modal-overlay,.contact-modal-overlay,.legal-modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(17,17,17,0.3);z-index:1000;justify-content:center;align-items:center;padding:20px}
    .share-modal-overlay.active,.contact-modal-overlay.active,.legal-modal-overlay.active{display:flex;animation:modalOverlayIn .3s ease forwards}
    @keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}
    .share-modal,.contact-modal,.legal-modal{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:28px;max-width:480px;width:100%;box-shadow:var(--shadow-lg);position:relative;animation:modalScaleIn .4s var(--ease-out-expo) forwards}
    @keyframes modalScaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
    @keyframes spin{to{transform:rotate(360deg)}}
    .contact-modal h3{font-size:18px;margin-bottom:14px;color:var(--accent);font-family:'Inter',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
    .contact-modal .contact-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:24px}
    .contact-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:10px;background:var(--bg-secondary);transition:all .25s ease;cursor:default;user-select:none;-webkit-user-select:none}
    .contact-item:hover{border-color:var(--border-accent);background:var(--surface-accent)}
    .contact-icon{width:40px;height:40px;border-radius:12px;background:var(--surface-accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent);flex-shrink:0}
    .contact-info{flex:1;min-width:0}
    .contact-label{font-size:12px;color:var(--text-muted);margin-bottom:2px}
    .contact-value{font-size:15px;color:var(--text-primary);font-weight:500;font-family:'Inter',"PingFang SC","Microsoft YaHei",monospace;letter-spacing:.02em}
    .contact-copy-hint{font-size:11px;color:var(--text-muted);margin-top:2px}
    .contact-item.copied{border-color:var(--border-gold-strong);background:var(--bg-hover)}
    .contact-item.copied .contact-copy-hint{color:var(--gold)}
    .modal-close{position:absolute;top:16px;right:16px;background:none;border:1px solid var(--border-subtle);color:var(--text-muted);width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease}
    .modal-close:hover{border-color:var(--border-gold);color:var(--accent);background:var(--bg-hover)}
    .legal-modal{background:var(--bg-card);max-height:85vh;max-height:85dvh;overflow-y:auto}
    .legal-modal h3{margin-bottom:20px;text-align:center;font-family:'Playfair Display',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",serif;font-size:22px;color:var(--text-primary)}
    .legal-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border-subtle)}
    .legal-tab{flex:1;padding:10px 0;text-align:center;font-size:14px;font-weight:500;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .25s ease;background:none;border-top:none;border-left:none;border-right:none}
    .legal-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
    .legal-tab:hover{color:var(--text-secondary)}
    .legal-content{font-size:13px;line-height:1.9;color:var(--text-secondary);max-height:50vh;max-height:50dvh;overflow-y:auto}
    .legal-content h4{font-size:14px;color:var(--text-primary);margin:16px 0 8px;font-weight:600}
    .legal-content h4:first-child{margin-top:0}
    .legal-content p{margin-bottom:10px}
    .legal-section{display:none}.legal-section.active{display:block}
    .legal-update{color:var(--text-muted);margin-top:20px}
  

    @media(max-width:600px){
      .featured-row{grid-template-columns:1fr}
      .shell{padding-left:12px;padding-right:12px}
      .home-welcome{padding:40px 16px 24px}
      .content-page-title{font-size:18px}
      .tab-btn{padding:10px 14px;font-size:13px}
      .msg{max-width:85%}
      .profile-header{padding:24px 16px}
    }
    /* ===== Competition Hub Registration System ===== */
    /* ===== 骨架屏加载效果 ===== */
    @keyframes skeletonPulse{0%,100%{opacity:1}50%{opacity:.4}}
    .skeleton{background:#e8e4dc;border-radius:var(--radius-sm);animation:skeletonPulse 1.5s ease-in-out infinite}
    [data-theme="dark"] .skeleton{background:#2a2820}
    .skeleton-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px;background:var(--bg-card);margin-bottom:12px}
    .skeleton-card .skeleton{margin-bottom:10px}
    .skeleton-card .skeleton:last-child{margin-bottom:0}
    .skeleton-line{height:14px;border-radius:6px;margin-bottom:8px}
    .skeleton-line:last-child{margin-bottom:0}
    .skeleton-title{height:20px;width:60%;margin-bottom:12px}
    .skeleton-row{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card);margin-bottom:10px}
    .skeleton-row .skeleton-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0}
    .skeleton-row .skeleton-content{flex:1}
    .loading-spinner{display:inline-block;border:3px solid var(--border-subtle);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
    .loading-overlay{text-align:center;padding:48px 20px;color:var(--text-muted)}
    .empty-state{text-align:center;padding:48px 20px;color:var(--text-muted)}
    .empty-state-icon{font-size:48px;margin-bottom:12px}
    .empty-state p{font-size:14px;margin-top:4px}
    .status-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
    /* 状态徽章 - 药丸样式 */
    .status-open{background:#dcfce7;color:#166534}
    .status-upcoming{background:#dbeafe;color:#1e40af}
    .status-ended{background:#f3f4f6;color:#6b7280}
    .status-closed{background:#fee2e2;color:#991b1b}
    .status-pending{background:rgba(243,156,18,0.12);color:#f39c12}
    .status-approved{background:rgba(46,204,113,0.12);color:#2ecc71}
    .status-rejected{background:rgba(231,76,60,0.12);color:#e74c3c}
    .status-cancelled{background:rgba(149,165,166,0.12);color:#95a5a6}
    .status-forming{background:rgba(52,152,219,0.12);color:#3498db}
    .status-submitted{background:rgba(243,156,18,0.12);color:#f39c12}
    .comp-hub-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px;background:var(--bg-card);box-shadow:var(--shadow-sm);transition:all .25s ease;cursor:pointer;position:relative;overflow:hidden}
    /* 竞赛卡片左侧彩色边条 */
    .comp-hub-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;transition:background .25s ease}
    .comp-hub-card[data-level="A类"]::before,.comp-hub-card[data-level="A"]::before{background:#FFC84A}
    .comp-hub-card[data-level="B+类"]::before,.comp-hub-card[data-level="B+"]::before{background:#06b6d4}
    .comp-hub-card[data-level="B-类"]::before,.comp-hub-card[data-level="B-"]::before{background:#06b6d4}
    .comp-hub-card[data-level="C级"]::before,.comp-hub-card[data-level="C"]::before{background:#8b5cf6}
    .comp-hub-card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-deep);transform:translateY(-2px)}
    .comp-hub-card:hover::before{background:var(--gold) !important}
    .comp-hub-card h4{font-size:15px;color:var(--text-primary);margin-bottom:8px;line-height:1.5}
    .comp-hub-meta{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
    .comp-hub-info{font-size:13px;color:var(--text-secondary);line-height:1.6}
    .comp-hub-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
    .reg-count{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:4px}
    .reg-count svg{width:14px;height:14px}
    .team-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;background:var(--bg-card);margin-bottom:10px;transition:border-color .25s ease}
    .team-card:hover{border-color:var(--border-accent)}
    .team-card h4{font-size:14px;color:var(--text-primary);margin-bottom:6px}
    .team-card .team-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px}
    .team-member-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-subtle)}
    .team-member-item:last-child{border-bottom:none}
    .team-member-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
    .team-member-info{flex:1;min-width:0}
    .team-member-name{font-size:13px;color:var(--text-primary);font-weight:500}
    .team-member-role{font-size:11px;color:var(--text-muted)}
    .admin-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
    .admin-stat-card{text-align:center;padding:20px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card)}
    .admin-stat-value{font-size:28px;font-weight:700;color:var(--accent)}
    .admin-stat-label{font-size:12px;color:var(--text-muted);margin-top:4px}
    .admin-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
    .admin-filter-bar select,.admin-filter-bar input{padding:8px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none}
    .admin-filter-bar select:focus,.admin-filter-bar input:focus{border-color:var(--accent)}
    .admin-reg-item{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;background:var(--bg-card);margin-bottom:10px}
    .admin-reg-item .reg-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
    .admin-reg-item .reg-comp{font-size:15px;font-weight:600;color:var(--text-primary)}
    .admin-reg-item .reg-student{font-size:13px;color:var(--text-secondary);margin-bottom:4px}
    .admin-reg-item .reg-detail{font-size:12px;color:var(--text-muted)}
    .admin-reg-item .reg-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .btn-approve{padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;border:none;background:rgba(46,204,113,0.15);color:#2ecc71;cursor:pointer;transition:all .2s ease}
    .btn-approve:hover{background:rgba(46,204,113,0.25)}
    .btn-reject{padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;border:none;background:rgba(231,76,60,0.15);color:#e74c3c;cursor:pointer;transition:all .2s ease}
    .btn-reject:hover{background:rgba(231,76,60,0.25)}
    .reject-reason-input{width:100%;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;margin-top:8px;resize:vertical;min-height:60px}
    .reject-reason-input:focus{border-color:var(--accent)}
    .notif-bell{position:relative;cursor:pointer;padding:12px;border:none;background:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center}
    .notif-bell svg{width:20px;height:20px}
    .notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:999px;background:#e74c3c;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
    .notif-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:360px;max-height:480px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:200;overflow:hidden;flex-direction:column}
    .notif-dropdown.show{display:flex}
    .notif-dropdown-header{padding:14px 16px;border-bottom:1px solid var(--border-subtle);font-size:14px;font-weight:600;color:var(--text-primary);display:flex;justify-content:space-between;align-items:center}
    .notif-dropdown-header button{background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;font-family:inherit}
    .notif-list{overflow-y:auto;flex:1}
    .notif-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .15s ease}
    .notif-item:hover{background:var(--bg-hover)}
    .notif-item.unread{background:var(--surface-accent)}
    .notif-item-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--surface-gold-subtle)}
    .notif-item-content{flex:1;min-width:0}
    .notif-item-title{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
    .notif-item-text{font-size:12px;color:var(--text-secondary);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .notif-item-time{font-size:11px;color:var(--text-muted);margin-top:2px}
    .notif-empty{text-align:center;padding:32px 16px;color:var(--text-muted);font-size:13px}
    .auth-field{margin-bottom:14px}
    .auth-field label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:6px;font-weight:500}
    .auth-field input,.auth-field select,.auth-field textarea{width:100%;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:8px;font-size:14px;background:var(--bg-card);color:var(--text-primary);font-family:inherit;outline:none;transition:border-color .25s ease}
    .auth-field input:focus,.auth-field select:focus,.auth-field textarea:focus{border-color:var(--accent);box-shadow:var(--ring-offset)}
    .auth-field input::placeholder,.auth-field textarea::placeholder{color:var(--text-muted)}
    .auth-error{font-size:12px;color:#e74c3c;margin-top:6px;display:none}
    .auth-error.show{display:block}
    .nav-user-info{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:999px;transition:background .2s ease}
    .nav-user-info:hover{background:var(--bg-hover)}
    .nav-user-name{font-size:13px;font-weight:500;color:var(--text-primary);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .nav-user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px;z-index:200;box-shadow:var(--shadow-lg)}
    .nav-user-dropdown.show{display:block;animation:dropIn .2s ease forwards}
    .nav-user-dropdown .nav-link{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:8px;font-size:13px}
    .my-reg-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;background:var(--bg-card);margin-bottom:10px;transition:border-color .25s ease}
    .my-reg-card:hover{border-color:var(--border-accent)}
    .my-reg-card .reg-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
    .my-reg-card .reg-info{font-size:13px;color:var(--text-secondary);margin-bottom:4px}
    .my-reg-card .reg-time{font-size:12px;color:var(--text-muted)}
    .my-reg-card .reg-actions{margin-top:10px;display:flex;gap:8px;align-items:center}
    @media(max-width:600px){
      .admin-stat-grid{grid-template-columns:1fr}
      .notif-dropdown{width:calc(100vw - 32px);right:-8px}
      .toolbox-grid{grid-template-columns:repeat(2,1fr)}
      .pomodoro-time{font-size:48px}
      .schedule-grid{font-size:10px}
    }
    .theme-toggle-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;font-size:16px}
    .theme-toggle-btn:hover{background:var(--bg-hover);border-color:var(--border-accent)}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    @supports(padding:env(safe-area-inset-bottom)){.shell{padding-bottom:calc(60px + env(safe-area-inset-bottom))}}
  

    /* ===== 移动端交互优化 ===== */
    /* 触摸反馈：去除点击高亮 */
    *{-webkit-tap-highlight-color:transparent}
    /* 触摸反馈：按钮/卡片按下缩放 */
    button:active,.nav-link:active,.card:active,.comp-hub-card:active,.settings-item:active{transform:scale(0.96)}
    /* 密码显示切换按钮 */
    .pwd-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;padding:13px;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
    .pwd-toggle svg{width:18px;height:18px}
    .auth-field.pwd-field{position:relative}
    .auth-field.pwd-field input{padding-right:40px}
    /* 返回导航栏 */
    .back-nav{display:none;position:fixed;top:var(--nav-height);left:0;right:0;height:48px;z-index:99;background:var(--surface-glass);-webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8);border-bottom:1px solid var(--border-subtle);align-items:center;padding:0 16px}
    .back-nav-arrow{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text-primary);cursor:pointer;border-radius:50%;flex-shrink:0}
    .back-nav-arrow:active{background:var(--bg-hover);transform:scale(0.9)}
    .back-nav-arrow svg{width:20px;height:20px}
    .back-nav-title{flex:1;text-align:center;font-size:15px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}
    .back-nav-spacer{width:32px;flex-shrink:0}
    /* 底部标签栏 */
    .bottom-tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;height:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel-bg);border-top:1px solid var(--border);align-items:center;justify-content:space-around}
    .bottom-tab-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border:none;background:none;padding:6px 0;flex:1;transition:transform .2s ease;position:relative}
    .bottom-tab-item:active{transform:scale(0.9)}
    .bottom-tab-item svg{width:24px;height:24px;color:var(--text-muted);transition:color .2s ease}
    .bottom-tab-item span{font-size:10px;color:var(--text-muted);transition:color .2s ease}
    .bottom-tab-item.active{transform:translateY(-2px);color:var(--accent);background:rgba(255,200,74,0.08)}
    .bottom-tab-item.active svg{color:var(--accent)}
    .bottom-tab-item.active span{color:var(--accent);font-weight:600}
    .bottom-tab-item.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--accent);border-radius:1px}
    /* 回到顶部按钮 */
    .back-to-top{display:none;position:fixed;right:16px;bottom:calc(60px + 16px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;background:var(--accent-gradient);color:#fff;border:none;cursor:pointer;z-index:90;box-shadow:var(--shadow-md);align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease,transform .3s ease;transform:translateY(10px)}
    .back-to-top.visible{opacity:1;transform:translateY(0)}
    .back-to-top:active{transform:scale(0.9)}
    .back-to-top svg{width:20px;height:20px}
    /* 筛选栏横向滚动 */
    .club-filter-bar,.tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative}
    .club-filter-bar::-webkit-scrollbar,.tabs-bar::-webkit-scrollbar{display:none}
    .club-filter-bar::after,.tabs-bar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,var(--bg-card));pointer-events:none;z-index:1}
    /* 报名表单提交按钮粘性定位 */
    .reg-submit-sticky{position:sticky;bottom:0;padding:16px;background:var(--bg-card);border-top:1px solid var(--border-subtle);margin:16px -20px -20px;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
    @media(max-width:768px){
      .back-nav{display:flex}
      .bottom-tab-bar{display:flex}
      .back-to-top{display:flex}
      .shell{padding-top:calc(var(--nav-height) + 48px + 24px)}
      .shell.on-sub-page{padding-top:calc(var(--nav-height) + 48px + 24px)}
      body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
    }
  

.search-modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(17,17,17,0.3);z-index:5000;justify-content:center;padding-top:15vh}
/* 移动端搜索弹窗全屏适配 */
@media(max-width:768px){.search-modal-overlay{padding-top:0;align-items:flex-start}.search-modal{width:100%;max-width:100%;max-height:100vh;height:100vh;border-radius:0;border:none}.search-modal-results{max-height:calc(100vh - 110px)}}
.search-modal-overlay.active{display:flex;animation:modalOverlayIn .2s ease forwards}
.search-modal{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:90%;max-width:560px;max-height:70vh;overflow:hidden;box-shadow:var(--shadow-lg);animation:modalScaleIn .3s var(--ease-out-expo) forwards}
.search-modal-input-wrap{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border-subtle)}
.search-modal-input-wrap svg{flex-shrink:0;color:var(--text-muted)}
.search-modal-input{flex:1;border:none;background:none;color:var(--text-primary);font-size:16px;font-family:inherit;outline:none}
.search-modal-input::placeholder{color:var(--text-muted)}
.search-modal-hint{font-size:12px;color:var(--text-muted);padding:8px 20px;border-bottom:1px solid var(--border-subtle);background:var(--bg-secondary)}
.search-modal-results{overflow-y:auto;max-height:calc(70vh - 110px);padding:8px}
.search-result-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s ease}
.search-result-item:hover{background:var(--bg-hover)}
.search-result-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--surface-gold-subtle);color:var(--accent)}
.search-result-info{flex:1;min-width:0}
.search-result-title{font-size:14px;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-desc{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-type{font-size:11px;color:var(--text-muted);background:var(--surface-gold-subtle);padding:2px 6px;border-radius:4px;flex-shrink:0}
.search-history-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;cursor:pointer;transition:background 0.2s ease;font-size:14px;color:var(--text-secondary)}
.search-history-item:hover{background:var(--bg-hover)}
.search-history-item .shi-icon{color:var(--text-muted);font-size:12px}
.toolbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.toolbox-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:20px 16px;text-align:center;cursor:pointer;transition:all .25s ease;background:var(--bg-card)}
.toolbox-card:hover{border-color:var(--border-accent);background:var(--surface-accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.toolbox-card-icon{margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:var(--accent);width:40px;height:40px;border-radius:var(--radius-sm);background:var(--surface-accent)}
.toolbox-card-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.toolbox-card-desc{font-size:12px;color:var(--text-muted);margin-top:4px}
.gpa-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.gpa-table th,.gpa-table td{padding:10px 8px;text-align:left;font-size:13px;border-bottom:1px solid var(--border-subtle)}
.gpa-table th{color:var(--gold);font-weight:600;font-size:12px}
.gpa-table select,.gpa-table input{width:100%;padding:8px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:inherit}
.gpa-table select:focus,.gpa-table input:focus{border-color:var(--accent);outline:none}
.gpa-result{text-align:center;padding:20px;background:var(--surface-gold-subtle);border-radius:var(--radius-md);margin-bottom:16px}
.gpa-result .gpa-value{font-size:36px;font-weight:700;color:var(--accent)}
.gpa-result .gpa-label{font-size:13px;color:var(--text-muted);margin-top:4px}
.gpa-delete-btn{background:none;border:none;color:#e74c3c;cursor:pointer;font-size:16px;padding:4px;border-radius:4px}
.pomodoro-display{text-align:center;padding:40px 20px}
.pomodoro-time{font-size:64px;font-weight:300;color:var(--text-primary);font-variant-numeric:tabular-nums}
.pomodoro-label{font-size:14px;color:var(--text-muted);margin-top:8px}
.pomodoro-controls{display:flex;gap:12px;justify-content:center;margin-top:24px}
.pomodoro-btn{padding:12px 28px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}
.pomodoro-btn-primary{background:var(--accent-gradient);color:#fff}
.pomodoro-btn-primary:hover{filter:brightness(1.05)}
.pomodoro-btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle)}
.pomodoro-btn-secondary:hover{border-color:var(--border-accent);background:var(--bg-hover)}
.pomodoro-settings{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.pomodoro-preset{padding:6px 14px;border-radius:999px;font-size:12px;cursor:pointer;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);transition:all .15s ease}
.pomodoro-preset.active{border-color:var(--border-gold);color:var(--accent);background:var(--surface-gold-subtle)}
.countdown-grid{display:grid;gap:12px}
.countdown-item{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card)}
.countdown-item-info{flex:1}
.countdown-item-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.countdown-item-date{font-size:12px;color:var(--text-muted);margin-top:2px}
.countdown-item-value{font-size:20px;font-weight:700;color:var(--accent);white-space:nowrap}
.countdown-item-value span{font-size:12px;color:var(--text-muted);font-weight:400}
.schedule-grid{display:grid;grid-template-columns:60px repeat(7,1fr);gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}
.schedule-cell{background:var(--bg-card);padding:6px 4px;font-size:11px;text-align:center;min-height:48px;position:relative}
.schedule-cell.header{background:var(--bg-secondary);font-weight:600;color:var(--text-primary);font-size:12px;min-height:auto;padding:10px 4px}
.schedule-cell.time{background:var(--bg-secondary);font-weight:500;color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:11px}
.schedule-event{background:var(--surface-gold-light);border-radius:4px;padding:4px;font-size:10px;color:var(--text-primary);line-height:1.3;cursor:pointer}
.scholarship-category{margin-bottom:24px}
.scholarship-category-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--border-gold)}
.scholarship-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:8px;background:var(--bg-card);transition:border-color .2s ease}
.scholarship-item:hover{border-color:var(--border-accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.scholarship-amount{font-size:16px;font-weight:700;color:var(--accent);white-space:nowrap;min-width:100px}
.scholarship-info{flex:1}
.scholarship-name{font-size:14px;font-weight:600;color:var(--text-primary)}
.scholarship-condition{font-size:12px;color:var(--text-muted);margin-top:2px}
.links-grid{display:grid;gap:10px}
.link-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card);cursor:pointer;transition:all .2s ease;text-decoration:none}
.link-item:hover{border-color:var(--border-accent);background:var(--surface-accent)}
.link-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:var(--surface-gold-subtle)}
.link-info{flex:1;min-width:0}
.link-name{font-size:14px;font-weight:600;color:var(--text-primary)}
.link-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.link-arrow{color:var(--text-muted);font-size:14px;flex-shrink:0}
.club-filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.club-filter-btn{padding:6px 14px;border-radius:999px;font-size:12px;cursor:pointer;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);transition:all .15s ease}
.club-filter-btn.active{border-color:var(--border-gold);color:var(--accent);background:var(--surface-gold-subtle)}
.shuttle-item{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:10px;background:var(--bg-card);transition:border-color .2s ease}
.shuttle-item:hover{border-color:var(--border-accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.shuttle-route{font-size:15px;font-weight:600;color:var(--text-primary);min-width:140px}
.shuttle-details{flex:1;display:flex;flex-wrap:wrap;gap:8px}
.shuttle-tag{font-size:12px;color:var(--text-secondary);background:var(--surface-gold-subtle);padding:3px 8px;border-radius:6px}
.credit-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.credit-stat{text-align:center;padding:16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card)}
.credit-stat-value{font-size:24px;font-weight:700;color:var(--accent)}
.credit-stat-label{font-size:12px;color:var(--text-muted);margin-top:4px}
@media(max-width:600px){.credit-summary{grid-template-columns:1fr}.toolbox-grid{grid-template-columns:repeat(2,1fr)}.pomodoro-time{font-size:48px}.schedule-grid{font-size:10px}}

/* ========== 校历日历样式 ========== */
/* 日历容器 */
.cal-container{max-width:720px;margin:0 auto}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.cal-title{font-size:var(--text-xl);font-weight:700;color:var(--text-primary)}
.cal-semester-tabs{display:flex;gap:4px;background:var(--bg-secondary);border-radius:var(--radius-2xs);padding:3px}
.cal-semester-tab{padding:6px 16px;border-radius:5px;font-size:13px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--text-muted);transition:all .2s}
.cal-semester-tab.active{background:var(--bg-card);color:var(--text-primary);box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.cal-semester-tab:hover:not(.active){color:var(--text-secondary)}
.cal-month-nav{display:flex;align-items:center;gap:12px}
.cal-month-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s}
.cal-month-btn:hover{border-color:var(--border-accent);color:var(--accent)}
.cal-month-label{font-size:var(--text-md);font-weight:600;color:var(--text-primary);min-width:120px;text-align:center}

/* 日历网格 */
.cal-grid-wrapper{position:relative;overflow:hidden}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;background:var(--bg-secondary);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle)}
.cal-weekday{text-align:center;padding:10px 4px;font-size:12px;font-weight:600;color:var(--text-muted);background:var(--bg-tertiary)}
.cal-cell{min-height:72px;padding:6px;background:var(--bg-card);cursor:pointer;transition:all .15s;position:relative}
.cal-cell:hover{background:var(--bg-hover)}
.cal-cell.other-month{opacity:0.35}
.cal-cell.other-month:hover{opacity:0.55}
.cal-cell.today .cal-date{background:var(--accent);color:#fff;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.cal-date{font-size:13px;font-weight:500;color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px}
.cal-dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px;justify-content:center}
.cal-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cal-cell.has-events{cursor:pointer}

/* 图例 */
.cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.cal-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;user-select:none}
.cal-legend-item:hover{background:var(--bg-hover)}
.cal-legend-item.active{background:var(--bg-secondary);font-weight:600}
.cal-legend-item.inactive{opacity:0.35}
.cal-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* 列表视图切换按钮 */
.cal-view-toggle{display:flex;gap:4px;margin-bottom:12px}
.cal-view-btn{padding:6px 14px;border-radius:var(--radius-2xs);border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-muted);font-size:12px;cursor:pointer;transition:all .2s;font-weight:500}
.cal-view-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 事件列表视图 */
.cal-event-list{display:flex;flex-direction:column;gap:8px}
.cal-event-list-item{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color .2s}
.cal-event-list-item:hover{border-color:var(--border-accent)}
.cal-event-list-date{min-width:56px;text-align:center;padding:8px;background:var(--bg-secondary);border-radius:var(--radius-2xs)}
.cal-event-list-day{font-size:20px;font-weight:700;color:var(--text-primary);line-height:1.1}
.cal-event-list-month{font-size:11px;color:var(--text-muted)}
.cal-event-list-info{flex:1}
.cal-event-list-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.cal-event-list-desc{font-size:12px;color:var(--text-muted)}
.cal-event-list-category{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;margin-top:4px;font-weight:500}

/* 近期事项 */
.cal-upcoming{margin-top:20px}
.cal-upcoming-title{font-size:var(--text-md);font-weight:600;color:var(--text-primary);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cal-upcoming-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:6px;transition:border-color .2s}
.cal-upcoming-item:hover{border-color:var(--border-accent)}
.cal-upcoming-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cal-upcoming-info{flex:1}
.cal-upcoming-title-text{font-size:13px;font-weight:600;color:var(--text-primary)}
.cal-upcoming-date-text{font-size:11px;color:var(--text-muted)}
.cal-upcoming-empty{text-align:center;padding:20px;color:var(--text-muted);font-size:13px}

/* 事件详情弹窗 */
.cal-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(17,17,17,0.3);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s}
.cal-popup-overlay.show{opacity:1}
.cal-popup{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-subtle);box-shadow:0 20px 60px rgba(0,0,0,0.2);max-width:380px;width:100%;padding:24px;transform:translateY(10px);transition:transform .2s}
.cal-popup-overlay.show .cal-popup{transform:translateY(0)}
.cal-popup-date{font-size:var(--text-lg);font-weight:700;color:var(--text-primary);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}
.cal-popup-event{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-subtle)}
.cal-popup-event:last-of-type{border-bottom:none}
.cal-popup-event-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.cal-popup-event-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.cal-popup-event-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.cal-popup-event-btn{display:inline-block;margin-top:6px;padding:4px 12px;border-radius:var(--radius-2xs);background:var(--accent);color:#fff;font-size:12px;cursor:pointer;border:none;font-weight:500;transition:opacity .2s}
.cal-popup-event-btn:hover{opacity:0.85}
.cal-popup-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:none;background:var(--bg-secondary);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s}
.cal-popup-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.cal-popup{position:relative}

/* 日历淡入淡出动画 */
.cal-fade-enter{opacity:0;transition:opacity .2s ease}
.cal-fade-enter.cal-fade-active{opacity:1}

/* 暗色模式适配 */
[data-theme="dark"] .cal-cell:hover{background:var(--bg-hover)}
[data-theme="dark"] .cal-popup{box-shadow:0 20px 60px rgba(0,0,0,0.5)}
[data-theme="dark"] .cal-popup-overlay{background:rgba(17,17,17,0.3)}
[data-theme="dark"] .cal-semester-tab.active{box-shadow:0 1px 3px rgba(0,0,0,0.3)}

/* 移动端适配 */
@media(max-width:600px){
  .cal-header{flex-direction:column;align-items:stretch}
  .cal-title{text-align:center}
  .cal-semester-tabs{justify-content:center}
  .cal-month-nav{justify-content:center}
  .cal-cell{min-height:48px;padding:4px}
  .cal-date{font-size:11px;width:22px;height:22px}
  .cal-cell.today .cal-date{width:22px;height:22px}
  .cal-dot{width:4px;height:4px}
  .cal-weekday{padding:8px 2px;font-size:11px}
  .cal-legend{gap:8px;padding:10px 12px}
  .cal-legend-item{font-size:11px;padding:3px 6px}
  .cal-popup{padding:18px;margin:0 8px}
  .cal-event-list-item{flex-direction:column;gap:8px}
  .cal-event-list-date{min-width:auto;text-align:left;display:flex;gap:8px;align-items:center}
}

/* ============================================
   Claude Aesthetic: Gradient Text Animation
   ============================================ */
.highlight {
  background: linear-gradient(90deg, #fbbf24, #f97316, #fbbf24, #22d3ee, #fbbf24);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================
   Claude Aesthetic: Card Shine Effect (已禁用)
   ============================================ */

/* ============================================
   Claude Aesthetic: Gold Top Border (克制版)
   ============================================ */
.comp-hub-card::after,
.knowledge-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--border);
  z-index: 2;
}
.comp-hub-card:hover::after,
.knowledge-card:hover::after {
  background: var(--border-strong);
}

/* ============================================
   Claude Aesthetic: Button Shine Sweep
   ============================================ */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}
.btn-primary:hover::before {
  left: 100%;
}

/* ============================================
   Claude Aesthetic: Scroll Progress
   ============================================ */
.scroll-progress {
  will-change: width;
}

/* ============================================
   Lightweight Reveal Animations
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Claude Aesthetic: Section Spacing
   ============================================ */
.content-page {
  padding-top: calc(var(--nav-height) + 32px) !important;
  padding-bottom: 120px !important;
}

/* ============================================
   Claude Aesthetic: Hero Gradient Text
   ============================================ */
.home-welcome {
  padding-top: 48px;
  margin-bottom: 24px;
}

/* ============================================
   Fix 4: Visual Homepage Enhancements
   ============================================ */
.hero-title {
  font-size: clamp(24px, 4vw, 32px) !important;
}

.hero-title .char {
  display: inline-block;
  white-space: pre;
}

.hero-deco {
  display: none !important;
}

.hero-deco-circle {
  width: 200px;
  height: 200px;
  top: 80px;
  right: -40px;
  background: radial-gradient(circle, rgba(251,191,36,0.1), transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
}

.hero-deco-dots {
  width: 120px;
  height: 120px;
  bottom: 200px;
  left: -20px;
  background-image: radial-gradient(circle, rgba(6,182,212,0.15) 1px, transparent 1px);
  background-size: 12px 12px;
  border-radius: 8px;
}

.hero-deco-ring {
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(251,191,36,0.06);
  border-radius: 50%;
  animation: ringRotate 30s linear infinite;
}

@keyframes ringRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Floating particles */
.hero-deco-circle::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(251,191,36,0.3);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  animation: particleFloat 4s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50% { transform: translate(20px, -30px); opacity: 0.8; }
}

/* Stats Row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 600px;
  margin: 24px auto 0;
}

.stat-card {
  text-align: center;
  padding: 16px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: var(--border-accent);
}

.stat-number {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Featured Competitions Section */
.featured-competitions-section {
  max-width: 700px;
  margin: 32px auto 0;
}

.section-label {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.featured-competitions-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.featured-competitions-scroll::-webkit-scrollbar {
  height: 4px;
}

.featured-competitions-scroll::-webkit-scrollbar-thumb {
  background: rgba(251,191,36,0.2);
  border-radius: 999px;
}

.featured-comp-card {
  min-width: 220px;
  max-width: 260px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.featured-comp-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.featured-comp-header {
  padding: 16px;
  color: #fff;
  position: relative;
}

.featured-comp-header.level-a { background: rgba(17,17,17,0.04); border-left: 3px solid rgba(17,17,17,0.3); }
.featured-comp-header.level-b { background: rgba(17,17,17,0.04); border-left: 3px solid rgba(17,17,17,0.2); }
.featured-comp-header.level-c { background: rgba(17,17,17,0.04); border-left: 3px solid rgba(17,17,17,0.15); }

.featured-comp-name {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.featured-comp-body {
  padding: 12px 16px;
}

.featured-comp-level {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.featured-comp-btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.featured-comp-btn:hover {
  text-decoration: underline;
}

/* ============================================
   Fix 5: Enhanced Competition Hub Cards
   ============================================ */
.comp-hub-card .comp-card-gradient {
  height: 4px;
  border-radius: 4px 4px 0 0;
  margin: -20px -20px 16px -20px;
}

.comp-card-gradient.level-a { background: linear-gradient(90deg, rgba(17,17,17,0.03), transparent); }
.comp-card-gradient.level-b { background: linear-gradient(90deg, rgba(17,17,17,0.03), transparent); }
.comp-card-gradient.level-c { background: linear-gradient(90deg, rgba(17,17,17,0.03), transparent); }

.comp-card-category-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.comp-card-category-icon svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.comp-card-category-icon.cat-math { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.comp-card-category-icon.cat-structure { background: linear-gradient(135deg, #f59e0b, #d97706); }
.comp-card-category-icon.cat-english { background: linear-gradient(135deg, #10b981, #059669); }
.comp-card-category-icon.cat-startup { background: linear-gradient(135deg, #ef4444, #dc2626); }
.comp-card-category-icon.cat-default { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.hub-card-featured {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .hub-card-featured {
    grid-column: span 1;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   Fix 6: Page Transition
   ============================================ */
.page {
  transition: opacity 0.25s ease;
}

/* ============================================
   Responsive adjustments
   ============================================ */
@media (max-width: 640px) {
  .hero-deco-circle { display: none; }
  .hero-deco-ring { display: none; }
  .stats-row { gap: 8px; }
  .stat-card { padding: 12px 6px; }
  .stat-number { font-size: 20px; }
}

/* ============================================
   Visual Effects: Dot Grid, Card Tilt, Particles
   ============================================ */

/* Dot Grid Canvas - positioned within hero section */
#page-home {
  position: relative;
  overflow: hidden;
}

#dotGridCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Ensure hero content is above the canvas */
#page-home .hero-deco,
#page-home .home-welcome,
#page-home .home-search,
#page-home .stats-row,
#page-home .daily-quote,
#page-home .featured-competitions-section,
#page-home .featured-row,
#page-home .service-list,
#page-home .footer-simple {
  position: relative;
  z-index: 1;
}

/* Card Tilt Shine Overlay */
.card-tilt-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Particle System Container */
#particleContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

#particleContainer canvas {
  display: block;
}

/* ============================================
   Home Mission Cards (三条主线)
   ============================================ */
.home-missions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
  margin: 32px auto 0;
}
.mission-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.mission-card:hover {
  box-shadow: var(--shadow-card-hover);
}
.mission-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,0.03), transparent);
  transition: left 0.6s ease;
  z-index: 1;
  pointer-events: none;
}
.mission-card:hover::before { left: 100%; }
.mission-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mission-text { flex: 1; }
.mission-text h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.mission-text p {
  font-size: 12px;
  color: var(--text-muted);
}
.mission-arrow {
  font-size: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ============================================
   Toolbox Panel Styles
   ============================================ */
.toolbox-panel {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

/* ============================================
   Accessibility: Focus Visible
   ============================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   Content Area Fog/Mask (舞台灯效果)
   ============================================ */
.home-welcome,
.home-search,
.stats-row,
.daily-quote,
.featured-competitions-section,
.home-missions,
.footer-simple {
  position: relative;
  z-index: 1;
}

/* 内容区底部渐变蒙版 */
#page-home::after {
  display: none;
}

/* ============================================
   Unified Interaction States
   ============================================ */

/* 按钮体系：三种风格 */
/* 1. 填充按钮 (.btn-primary) - 已有，保持 */
/* 2. 描边按钮 (.btn-secondary) - 已有，保持 */
/* 3. 幽灵按钮 (.btn-ghost) - 新增 */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: none;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}
.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--surface-glass-hover);
}

/* 统一 hover 规则 */
.card:hover,
.comp-hub-card:hover,
.knowledge-card:hover,
.stat-card:hover,
.toolbox-card:hover,
.featured-item:hover,
.mission-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* 统一 active 规则 */
button:active,
.card:active,
.comp-hub-card:active,
.knowledge-card:active,
.stat-card:active,
.toolbox-card:active,
.featured-item:active,
.mission-card:active,
.nav-link:active,
.bottom-tab-item:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* 统一 focus 规则 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 底部导航交互 */
.bottom-tab-item {
  transition: all 0.2s ease;
}
.bottom-tab-item:hover {
  color: var(--text-secondary);
}
.bottom-tab-item.active {
  color: var(--accent);
}
.bottom-tab-item.active svg {
  filter: drop-shadow(0 0 6px rgba(255,200,74,0.3));
}

/* 卡片内按钮 hover 不触发卡片 hover */
.card .btn-primary:hover,
.card .btn-secondary:hover,
.comp-hub-card .btn-primary:hover,
.comp-hub-card .btn-secondary:hover {
  transform: none;
}

/* 禁用状态 */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================
   8pt Spacing System
   ============================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* Section 三段式：标题 + 说明 + 内容 */
.section-block {
  margin-bottom: var(--space-6);
}
.section-block .section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-2);
}
.section-block .section-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.si-badge {
  font-size: 11px;
  background: rgba(255,200,74,0.15);
  color: #FFC84A;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* ============================================
   Breadcrumb Navigation
   ============================================ */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 20px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.page-breadcrumb button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  font-family: inherit;
  transition: color 0.2s ease;
}
.page-breadcrumb button:hover {
  color: var(--text-primary);
}
.bc-sep {
  color: var(--text-muted);
  opacity: 0.5;
}
.bc-current {
  color: var(--text-secondary);
  font-weight: 500;
}

@media(max-width:768px){
  .page-breadcrumb { display: none; }
}

/* 用户手动选择亮色主题时，即使在移动端也使用亮色变量 */
html[data-user-theme="light"]{--page-bg:#F6F5F2;--panel-bg:#FFFFFF;--bg-primary:#F6F5F2;--bg-secondary:#EDECEA;--bg-tertiary:#E5E4E1;--bg-card:#FFFFFF;--bg-hover:rgba(17,17,17,0.04);--bg-card-solid:#FFFFFF;--text-primary:#111111;--text-secondary:rgba(17,17,17,0.72);--text-muted:rgba(17,17,17,0.56);--accent:#1F2328;--accent-light:#333840;--accent-dark:#111318;--border-subtle:rgba(17,17,17,0.10);--border-light:rgba(17,17,17,0.14);--border-accent:rgba(17,17,17,0.16);--surface-glass:rgba(246,245,242,0.92);--shadow-card:0 10px 30px rgba(17,17,17,0.08);--shadow-card-hover:0 14px 40px rgba(17,17,17,0.12)}

/* Claude 风格：移动端可保持暗色 */
@media(max-width:768px){
  :root {
    --page-bg: #1A1B1E;
    --panel-bg: #222326;
    --bg-primary: #1A1B1E;
    --bg-secondary: #222326;
    --bg-tertiary: #28292C;
    --bg-card: #222326;
    --bg-card-solid: #222326;
    --text-primary: rgba(255,255,255,0.92);
    --text-secondary: rgba(255,255,255,0.68);
    --text-muted: rgba(255,255,255,0.48);
    --accent: #E8E6E1;
    --accent-light: #F0EEE9;
    --border-subtle: rgba(255,255,255,0.08);
    --border-accent: rgba(255,255,255,0.14);
    --surface-glass: rgba(26,27,30,0.92);
    --shadow-card: 0 10px 30px rgba(0,0,0,0.25);
    --shadow-card-hover: 0 14px 40px rgba(0,0,0,0.35);
  }
}

/* Claude 风格：内容最大宽度 */
#page-home,
#page-ai,
#page-academic,
#page-campus,
#page-admission,
#page-news,
#page-competition,
#page-toolbox,
#page-profile {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}
@media(max-width:768px){
  #page-home,
  #page-ai,
  #page-academic,
  #page-campus,
  #page-admission,
  #page-news,
  #page-competition,
  #page-toolbox,
  #page-profile {
    padding: 0 16px;
  }
}

/* 深度思考模式开关 */
.deep-mode-toggle {
  background: var(--bg-secondary, #f0f0f0);
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.deep-mode-toggle:hover {
  background: var(--bg-hover, rgba(0,0,0,0.04));
}
.deep-mode-toggle.active {
  background: var(--accent, #1F2328);
  color: #fff;
  border-color: var(--accent, #1F2328);
}
/* 流式消息动画 */
.streaming-content {
  display: inline;
}
.msg-ai .streaming-content::after {
  content: '\25CA';
  animation: blink 1s infinite;
  color: var(--accent);
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}