/* ═══════════════════════════════════════════
   TianR Showcase — Full Stylesheet
   Design Token System + Components + Dark Mode
   ═══════════════════════════════════════════ */

/* ══════ DESIGN TOKEN SYSTEM ══════ */
:root{
  /* Primary — 深蓝灰色阶 */
  --color-pri-50:  #F5F6F7;
  --color-pri-100: #E0E3E6;
  --color-pri-300: #8A95A0;
  --color-pri-500: #1B262C;
  --color-pri-700: #121A1F;
  --color-pri-900: #0A0F12;

  /* Accent — 金色色阶 */
  --color-acc-50:  #FAF6EF;
  --color-acc-100: #F0E6D3;
  --color-acc-300: #D4BC8E;
  --color-acc-500: #C4A46C;
  --color-acc-700: #A8884E;
  --color-acc-900: #8C6F3A;

  /* Neutral — 暖灰色阶 */
  --color-neutral-50:  #FCFBF9;
  --color-neutral-100: #F4F2EE;
  --color-neutral-200: #E8E5DE;
  --color-neutral-400: #6B716B;
  --color-neutral-600: #52616B;
  --color-neutral-900: #1C1E1C;

  /* 语义色 */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* 字体族 */
  --font-sans:  'PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif: 'Georgia','Times New Roman','PingFang SC','Microsoft YaHei',serif;
  --font-mono:  'JetBrains Mono','Consolas',monospace;

  /* 字号 — clamp() 流式响应 */
  --text-xs:   clamp(11px, 0.7vw, 12px);
  --text-sm:   clamp(12px, 0.8vw, 13px);
  --text-base: clamp(14px, 0.9vw, 16px);
  --text-lg:   clamp(16px, 1.1vw, 18px);
  --text-xl:   clamp(18px, 1.4vw, 20px);
  --text-2xl:  clamp(22px, 1.8vw, 24px);
  --text-3xl:  clamp(26px, 2.2vw, 28px);
  --text-hero: clamp(30px, 5vw, 56px);

  /* 行高 */
  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* 间距 — 8pt Grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* 圆角 */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* 过渡 */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* 兼容旧变量 */
  --pri: var(--color-pri-500);
  --sec: var(--color-neutral-600);
  --acc: var(--color-acc-500);
  --bg:  var(--color-neutral-50);
  --bg2: var(--color-neutral-100);
  --txt: var(--color-neutral-900);
  --dim: var(--color-neutral-400);

  /* 导航背景 */
  --nav-bg: rgba(255,255,255,.92);
  --nav-border: var(--bg2);
  --shadow-card: 0 2px 28px rgba(27,38,44,.1);
  --shadow-card-hover: 0 12px 40px rgba(27,38,44,.12);
}

/* ══════ Dark Mode ══════ */
[data-theme="dark"]{
  --color-pri-50:  #0A0F12;
  --color-pri-100: #121A1F;
  --color-pri-300: #8A95A0;
  --color-pri-500: #E0E3E6;
  --color-pri-700: #F5F6F7;
  --color-pri-900: #FCFBF9;

  --color-neutral-50:  #14150F;
  --color-neutral-100: #1E1F1A;
  --color-neutral-200: #2E2F2A;
  --color-neutral-400: #9CA3A0;
  --color-neutral-600: #B0B6B0;
  --color-neutral-900: #EDEBE5;

  --bg:  var(--color-neutral-50);
  --bg2: var(--color-neutral-100);
  --txt: var(--color-neutral-900);
  --dim: var(--color-neutral-400);
  --pri: var(--color-pri-500);

  --nav-bg: rgba(20,21,15,.92);
  --nav-border: var(--color-neutral-200);
  --shadow-card: 0 2px 28px rgba(0,0,0,.3);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,.4);
}

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

/* ══════ Skip Link ══════ */
.skip-link{
  position:absolute;top:-100px;left:0;
  background:var(--color-pri-500);color:#fff;
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-sm);font-weight:600;
  text-decoration:none;z-index:10000;
  border-radius:0 0 var(--radius-sm) 0;
  transition:top var(--transition-fast);
}
.skip-link:focus{top:0}

/* ══════ Focus Visible ══════ */
a:focus-visible,
button:focus-visible,
.cat-tab:focus-visible,
.ct-btn:focus-visible,
.svc-card:focus-visible,
.skill:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--color-acc-500);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

body{
  font-family:var(--font-sans);
  background:var(--bg);color:var(--txt);
  line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased;
  min-width:320px;overflow-x:hidden;
  transition:background var(--transition-normal),color var(--transition-normal);
}
html{scroll-behavior:smooth;}

/* ══════ 导航 ══════ */
nav{
  position:sticky;top:0;z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--nav-border);
  padding:0 var(--space-4);
  display:flex;align-items:center;justify-content:space-between;
  height:52px;
}
nav .logo{display:flex;align-items:baseline;gap:6px;white-space:nowrap;flex-shrink:0;text-decoration:none}
nav .logo .logo-cn{font-size:var(--text-base);font-weight:700;color:var(--pri);letter-spacing:1px}
nav .logo .logo-en{font-size:var(--text-xs);font-weight:500;color:var(--color-acc-500);letter-spacing:.5px;font-family:var(--font-serif);text-transform:lowercase}
nav .logo .logo-slogan{display:none;font-size:10px;color:var(--dim);letter-spacing:2px;margin-left:8px;padding-left:8px;border-left:1px solid var(--nav-border);white-space:nowrap}
@media(min-width:768px){nav .logo .logo-slogan{display:inline}}
nav .links{display:flex;gap:var(--space-2);align-items:center}
nav .links a{
  color:var(--dim);text-decoration:none;
  font-size:var(--text-sm);font-weight:500;
  transition:color var(--transition-fast);white-space:nowrap;
}
nav .links a:hover,nav .links a:active{color:var(--pri)}
nav .pai-badge{
  background:linear-gradient(135deg,#ff6b35,#ff8c42);color:#fff!important;
  padding:5px var(--space-3);border-radius:18px;font-weight:700;
  font-size:var(--text-xs);
  display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
}
nav .pai-badge span{font-size:10px;opacity:.85}
nav .menu-toggle{
  display:none;flex-direction:column;gap:4px;
  cursor:pointer;padding:var(--space-2);margin-right:-4px;
  -webkit-tap-highlight-color:transparent;
  background:none;border:none;
}
nav .menu-toggle span{
  width:20px;height:2px;background:var(--pri);
  border-radius:1px;transition:all var(--transition-normal);
}
nav .menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
nav .menu-toggle.open span:nth-child(2){opacity:0}
nav .menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* Theme Toggle */
.theme-toggle{
  background:none;border:none;cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--dim);transition:all var(--transition-fast);
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.theme-toggle:hover{color:var(--acc);background:var(--bg2)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .sun{display:none}
.theme-toggle .moon{display:block}
[data-theme="dark"] .theme-toggle .sun{display:block}
[data-theme="dark"] .theme-toggle .moon{display:none}

.mobile-menu{display:none}
.mobile-menu.open{
  display:block;position:fixed;top:52px;left:0;right:0;
  background:var(--nav-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--nav-border);
  z-index:99;padding:var(--space-2) 0;
  box-shadow:0 var(--space-2) 24px rgba(0,0,0,.06);
}
.mobile-menu a{
  display:block;padding:14px var(--space-6);
  font-size:var(--text-lg);font-weight:500;
  color:var(--pri);text-decoration:none;
  border-bottom:1px solid var(--bg2);
  transition:background var(--transition-fast);
}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:active{background:var(--bg2)}

@media(min-width:769px){
  nav{padding:0 var(--space-6);height:56px}
  nav .links{gap:var(--space-4)}
  nav .links a{font-size:var(--text-sm)}
  nav .pai-badge{padding:6px var(--space-4);font-size:var(--text-sm)}
  nav .nav-full{display:inline!important}
  nav .menu-toggle{display:none!important}
  .mobile-menu{display:none!important}
  .theme-toggle{width:38px;height:38px}
  .theme-toggle svg{width:20px;height:20px}
}
@media(max-width:768px){
  nav .nav-full{display:none}
}

/* ══════ Hero ══════ */
.hero{
  background:#0d0b09;
  color:#f0ebe0;text-align:center;
  position:relative;overflow:hidden;
}
[data-theme="dark"] .hero{background:#000}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 25% 30%, rgba(196,164,108,.12) 0%, transparent 55%),
             radial-gradient(ellipse at 75% 65%, rgba(196,164,108,.08) 0%, transparent 50%),
             radial-gradient(ellipse at 50% 100%, rgba(196,164,108,.04) 0%, transparent 40%);
}
.hero-inner{
  position:relative;z-index:1;
  max-width:900px;margin:0 auto;
  padding:var(--space-12) var(--space-6) var(--space-8);
}
.hero .avatar-frame{
  width:96px;height:96px;border-radius:50%;
  margin:0 auto var(--space-4);
  border:2px solid rgba(196,164,108,.3);
  box-shadow:0 0 48px rgba(196,164,108,.06), inset 0 0 0 3px rgba(196,164,108,.04);
  overflow:hidden;position:relative;
}
.hero .avatar-frame img{width:100%;height:100%;object-fit:cover;display:block}
.hero .hero-accent{display:none}
.hero .hero-label{
  display:block;font-size:var(--text-xs);font-weight:600;
  color:rgba(196,164,108,.7);letter-spacing:3px;
  margin-bottom:var(--space-2);text-transform:uppercase;
}
.hero h1{
  font-size:var(--text-hero);font-weight:700;letter-spacing:2px;
  margin-bottom:var(--space-1);color:#f0ebe0;
  font-family:var(--font-serif);
  line-height:var(--leading-tight);
}
.hero-brand{
  margin-bottom:var(--space-8);
}
.hero-slogan{
  font-family:var(--font-serif);font-size:clamp(20px,3vw,32px);font-weight:400;
  color:#C4A46C;letter-spacing:6px;margin-top:var(--space-2);line-height:1.4;
  margin-bottom:0;
}
.hero-slogan .sep{display:inline-block;width:1px;height:18px;background:rgba(196,164,108,.4);margin:0 14px;vertical-align:middle}
.hero-designer{
  padding-top:var(--space-6);
}
.hero-name{
  font-size:clamp(18px,2.2vw,24px);font-weight:500;
  color:rgba(240,235,224,.85);letter-spacing:3px;
  margin-bottom:var(--space-1);font-family:var(--font-serif);
}
.hero .role{
  font-size:var(--text-sm);color:var(--acc);font-weight:400;letter-spacing:2px;
  margin-bottom:var(--space-4);
}
.hero .hero-divider{
  width:48px;height:1px;background:rgba(196,164,108,.3);
  margin:0 auto var(--space-6);
}
.hero .tagline{
  color:rgba(240,235,224,.7);font-size:var(--text-sm);
  max-width:400px;margin:0 auto var(--space-6);
  line-height:1.9;font-weight:300;
}
.hero .stats{display:flex;justify-content:center;align-items:center;gap:0}
.hero .stat{text-align:center;padding:0 var(--space-3)}
.hero .stat .num{
  font-size:var(--text-2xl);font-weight:700;display:block;line-height:1.2;
  color:#f0ebe0;font-family:var(--font-serif);letter-spacing:-.5px;
}
.hero .stat .num .num-suffix{font-weight:300;font-size:75%}
.hero .stat .label{
  font-size:var(--text-xs);color:rgba(196,164,108,.4);font-weight:400;
  letter-spacing:1px;margin-top:2px;display:block;
}
.hero .stat-divider{
  width:1px;height:24px;background:rgba(196,164,108,.15);
  flex-shrink:0;align-self:center;
}

@media(min-width:769px){
  .hero-inner{
    display:flex;align-items:center;gap:60px;
    text-align:left;padding:var(--space-16) var(--space-8) var(--space-12);
  }
  .hero-visual{flex-shrink:0;display:flex;flex-direction:column;align-items:center}
  .hero .avatar-frame{width:150px;height:150px;margin:0 0 var(--space-6);border-width:2px}
  .hero .hero-accent{display:block;width:1px;height:36px;background:rgba(196,164,108,.2)}
  .hero-content{flex:1}
  .hero .hero-label{font-size:10px;letter-spacing:4px;margin-bottom:var(--space-3)}
  .hero .hero-name{font-size:var(--text-xl);letter-spacing:4px;margin-bottom:var(--space-2)}
  .hero .role{font-size:var(--text-base);letter-spacing:3px;margin-bottom:var(--space-6)}
  .hero .hero-divider{width:60px;margin:0 0 var(--space-6)}
  .hero-brand{margin-bottom:var(--space-12)}
  .hero-designer{padding-top:0}
  .hero .tagline{max-width:100%;margin:0 0 var(--space-8);font-size:var(--text-base)}
  .hero .stats{justify-content:flex-start}
  .hero .stat{padding:0 var(--space-6)}
  .hero .stat:first-child{padding-left:0}
  .hero .stat .num{font-size:var(--text-3xl)}
}

/* ══════ Section ══════ */
.section{padding:var(--space-12) var(--space-4);max-width:1200px;margin:0 auto}
.section--full{background:var(--bg2);max-width:100%;padding-left:var(--space-4);padding-right:var(--space-4)}
.section--full .section--full-inner{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:var(--space-8)}
.section-header .tag{
  display:inline-block;padding:4px var(--space-3);border-radius:16px;
  background:var(--bg2);color:var(--acc);font-size:var(--text-xs);font-weight:600;
  letter-spacing:2px;margin-bottom:var(--space-3);text-transform:uppercase;
}
.section-header h2{font-size:var(--text-2xl);font-weight:700;color:var(--pri);letter-spacing:1px}
.section-header p{font-size:var(--text-sm);color:var(--dim);margin-top:var(--space-2);font-weight:300}

@media(min-width:769px){
  .section{padding:var(--space-16) var(--space-6)}
  .section--full{padding-left:var(--space-6);padding-right:var(--space-6)}
  .section-header{margin-bottom:var(--space-12)}
  .section-header h2{font-size:var(--text-3xl)}
}

/* ══════ 分类标签 ══════ */
.cat-tabs{
  display:flex;justify-content:flex-start;gap:var(--space-2);
  margin-bottom:var(--space-6);
  overflow-x:auto;padding:4px 0 var(--space-2);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  padding:9px var(--space-4);border-radius:20px;
  font-size:var(--text-sm);font-weight:500;
  background:var(--bg);color:var(--dim);border:1px solid var(--bg2);
  cursor:pointer;transition:all var(--transition-normal);white-space:nowrap;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.cat-tab:active{color:var(--pri);border-color:var(--acc)}
.cat-tab.active{background:var(--pri);color:#fff;border-color:var(--pri)}
.cat-panel{display:none}
.cat-panel.active{display:block}

@media(min-width:769px){
  .cat-tabs{justify-content:center;overflow-x:visible;gap:var(--space-1)}
  .cat-tab{padding:10px var(--space-6);border-radius:24px;font-size:var(--text-sm)}
}
@media(min-width:500px) and (max-width:768px){
  .cat-tabs{justify-content:center}
}

/* ══════ 服务网格 ══════ */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.svc-card{
  background:var(--bg);border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-4);text-align:center;
  border:1px solid var(--bg2);transition:all var(--transition-normal);
  -webkit-tap-highlight-color:transparent;
}
.svc-card:active{border-color:var(--acc);transform:translateY(-2px)}
.svc-card .svc-icon{
  width:32px;height:32px;margin:0 auto var(--space-3);display:block;
  color:var(--color-acc-500);
}
.svc-card .svc-name{font-size:var(--text-base);font-weight:700;color:var(--pri);margin-bottom:var(--space-1)}
.svc-card .svc-desc{font-size:var(--text-xs);color:var(--dim);line-height:var(--leading-normal)}

@media(min-width:769px){
  .svc-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
  .svc-card{padding:var(--space-8) var(--space-6);border-radius:var(--radius-lg)}
  .svc-card:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:var(--shadow-card)}
  .svc-card .svc-icon{width:36px;height:36px;margin-bottom:var(--space-4)}
  .svc-card .svc-name{font-size:var(--text-lg);margin-bottom:var(--space-2)}
}

/* ══════ 项目卡片 ══════ */
.project.pj-hidden{display:none}
.project{
  display:block;
  background:var(--bg);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(0,0,0,.06);margin-bottom:var(--space-4);
  transition:all var(--transition-slow) cubic-bezier(.25,.8,.25,1);
  text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  /* Scroll animation initial state */
  opacity:0;transform:translateY(24px);
}
.project.visible{opacity:1;transform:translateY(0)}
[data-theme="dark"] .project{border-color:rgba(255,255,255,.06)}
.project:active{transform:scale(.985)}
.project .pj-index{
  position:absolute;top:var(--space-3);right:var(--space-4);z-index:6;
  font-size:var(--text-2xl);font-weight:200;color:rgba(255,255,255,.7);
  font-family:var(--font-serif);letter-spacing:-1px;line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.pj-cover{
  position:relative;width:100%;
  aspect-ratio:4/3;overflow:hidden;
  background:var(--bg2);
}
.pj-cover::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,var(--bg2) 25%,var(--color-neutral-200) 50%,var(--bg2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}
.pj-cover img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--transition-slow) cubic-bezier(.25,.8,.25,1);
  display:block;position:relative;z-index:1;
  opacity:0;
}
.pj-cover img.loaded{opacity:1;animation:blurUp .4s ease}
.pj-cover img:not([src]){display:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes blurUp{from{filter:blur(8px)}to{filter:blur(0)}}
.project:active .pj-cover img{transform:scale(1.04)}
.pj-cover::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,
    rgba(0,0,0,.02) 0%,rgba(0,0,0,.02) 40%,
    rgba(0,0,0,.45) 75%,rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
.pj-cover .tag{
  position:absolute;top:var(--space-3);left:var(--space-3);z-index:5;
  padding:5px var(--space-3);border-radius:16px;
  font-size:var(--text-xs);font-weight:600;
  color:#fff;background:rgba(196,164,108,.85);
  letter-spacing:.5px;backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.pj-on-cover{
  position:absolute;bottom:0;left:0;right:0;z-index:4;
  padding:var(--space-4) var(--space-4) var(--space-4);
  pointer-events:none;
}
.pj-on-cover h3{
  font-size:var(--text-xl);font-weight:700;color:#fff;
  margin-bottom:var(--space-1);letter-spacing:.5px;
  text-shadow:0 2px 6px rgba(0,0,0,.3);
  line-height:var(--leading-tight);
}
.pj-on-cover .pj-meta-compact{display:flex;gap:var(--space-3);align-items:center}
.pj-on-cover .pj-meta-compact span{
  font-size:var(--text-xs);color:rgba(255,255,255,.75);
  display:flex;align-items:center;gap:3px;
  background:rgba(255,255,255,.1);padding:3px var(--space-3);border-radius:12px;
  backdrop-filter:blur(4px);
}
.pj-info{padding:var(--space-3) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.pj-tags{display:flex;gap:var(--space-2);flex-wrap:wrap}
.pj-tags span{
  padding:4px var(--space-3);border-radius:14px;
  font-size:var(--text-xs);font-weight:500;
  background:transparent;color:var(--dim);
  border:1px solid rgba(0,0,0,.08);transition:all var(--transition-fast);
}
[data-theme="dark"] .pj-tags span{border-color:rgba(255,255,255,.08)}
.pj-tags span:first-child{
  background:rgba(196,164,108,.08);color:var(--acc);
  border-color:rgba(196,164,108,.2);
}

@media(min-width:769px){
  .cat-panel.active{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-6);
  }
  .project{margin-bottom:0;border-radius:var(--radius-lg)}
  .project:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-card-hover);
    border-color:rgba(196,164,108,.2);
  }
  .project.visible:hover{transform:translateY(-3px)}
  .project:hover .pj-cover img{transform:scale(1.05)}
  .project .pj-index{top:var(--space-4);right:var(--space-4);font-size:var(--text-3xl);color:rgba(255,255,255,.6)}
  .pj-cover{aspect-ratio:4/3}
  .pj-cover .tag{top:var(--space-4);left:var(--space-4);padding:6px var(--space-4);font-size:var(--text-xs)}
  .pj-on-cover{padding:var(--space-6) var(--space-6) var(--space-6)}
  .pj-on-cover h3{font-size:var(--text-xl);margin-bottom:var(--space-2)}
  .pj-on-cover .pj-meta-compact span{font-size:var(--text-xs);padding:4px var(--space-3)}
  .pj-info{padding:var(--space-4) var(--space-6);gap:var(--space-3)}
  .pj-tags span{padding:5px var(--space-3);font-size:var(--text-xs);border-radius:16px}
  .view-more-card{grid-column:1/-1}
}

@media(min-width:1024px){
  .cat-panel.active{grid-template-columns:repeat(3,1fr)}
  .section{max-width:1200px}
}

/* ══════ 技能 ══════ */
.skills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.skill{
  padding:var(--space-2) var(--space-4);border-radius:20px;
  font-size:var(--text-xs);font-weight:500;
  background:var(--bg2);color:var(--pri);border:1px solid var(--bg2);
  transition:all var(--transition-normal);-webkit-tap-highlight-color:transparent;
}
.skill:active{border-color:var(--acc);background:var(--pri);color:var(--acc)}

@media(min-width:769px){
  .skills{gap:var(--space-3)}
  .skill{padding:10px var(--space-6);border-radius:24px;font-size:var(--text-sm)}
  .skill:hover{border-color:var(--acc);background:var(--pri);color:var(--acc);transform:translateY(-1px)}
}

/* ══════ 合作流程 ══════ */
.process{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.step{text-align:center;padding:var(--space-4) var(--space-2);position:relative}
.step .step-num{
  width:40px;height:40px;border-radius:50%;margin:0 auto var(--space-3);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-base);font-weight:700;
  background:var(--pri);color:#fff;
}
.step .step-name{font-size:var(--text-base);font-weight:700;color:var(--pri);margin-bottom:3px}
.step .step-desc{font-size:var(--text-xs);color:var(--dim)}
.step::after{display:none}

@media(min-width:769px){
  .process{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
  .step{padding:var(--space-6) var(--space-3)}
  .step .step-num{width:44px;height:44px;margin-bottom:var(--space-4);font-size:var(--text-lg)}
  .step .step-name{font-size:var(--text-lg);margin-bottom:var(--space-1)}
  .step::after{
    content:'';position:absolute;top:22px;right:-8px;
    width:16px;height:16px;
    border-top:1.5px solid var(--acc);border-right:1.5px solid var(--acc);
    transform:rotate(45deg);display:block;
  }
  .step:last-child::after{display:none}
}

/* ══════ CTA ══════ */
.cta{
  background:linear-gradient(135deg, var(--pri), #0F1A20);
  color:#fff;text-align:center;
  padding:var(--space-12) var(--space-6);
  margin:0 var(--space-3) var(--space-8);
  border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
}
[data-theme="dark"] .cta{background:linear-gradient(135deg, #1E1F1A, #0A0B08)}
.cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 40% 30%, rgba(196,164,108,.15) 0%, transparent 60%);
}
.cta>*{position:relative;z-index:1}
.cta h2{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-2)}
.cta p{font-size:var(--text-sm);color:rgba(255,255,255,.75);margin-bottom:var(--space-6);font-weight:300}
.cta .btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-8);border-radius:26px;
  font-size:var(--text-base);font-weight:700;
  text-decoration:none;background:var(--acc);color:var(--pri);
  transition:all var(--transition-normal);word-break:break-all;max-width:100%;
}
.cta .btn:active{background:var(--color-acc-700);color:#fff}

@media(min-width:769px){
  .cta{padding:var(--space-16) var(--space-6);margin:0 var(--space-6) var(--space-12);border-radius:var(--radius-xl)}
  .cta h2{font-size:var(--text-2xl);margin-bottom:var(--space-2)}
  .cta p{font-size:var(--text-base);margin-bottom:var(--space-8)}
  .cta .btn{padding:14px var(--space-12);border-radius:30px;font-size:var(--text-lg)}
  .cta .btn:hover{background:var(--color-acc-700);color:#fff;transform:translateY(-2px)}
}

/* ══════ Footer ══════ */
footer{
  text-align:center;padding:var(--space-12) var(--space-4) var(--space-8);
  border-top:1px solid var(--bg2);
  position:relative;
}
footer::before{
  content:'';display:block;width:40px;height:1px;
  background:rgba(196,164,108,.25);margin:0 auto var(--space-8);
}
footer .name{
  font-size:var(--text-lg);font-weight:700;color:var(--pri);margin-bottom:var(--space-1);
  font-family:var(--font-serif);letter-spacing:1px;
}
footer .bio{font-size:var(--text-sm);color:var(--dim);margin-bottom:var(--space-6)}
footer .social{
  display:flex;justify-content:center;gap:var(--space-2);
  margin-bottom:var(--space-6);flex-wrap:wrap;
}
footer .social a{color:var(--dim);text-decoration:none;font-size:var(--text-sm);transition:color var(--transition-fast)}
footer .social a:active{color:var(--acc)}
footer .copy{font-size:var(--text-xs);color:var(--dim);opacity:.7;letter-spacing:.5px;margin-bottom:var(--space-2);line-height:var(--leading-normal)}
footer .footer-slogan{font-family:var(--font-serif);font-size:var(--text-base);color:var(--color-acc-500);letter-spacing:4px;margin-bottom:var(--space-2)}
footer .footer-quote{
  font-size:var(--text-xs);color:var(--dim);font-style:italic;
  letter-spacing:1px;margin-top:var(--space-4);margin-bottom:var(--space-4);
}

.ct-btn{
  padding:10px var(--space-6);background:var(--bg);
  border:1.5px solid rgba(196,164,108,.35);
  border-radius:24px;color:var(--pri);
  font-size:var(--text-sm);font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-1);
  transition:all var(--transition-normal);letter-spacing:.5px;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  font-family:var(--font-sans);
}
.ct-btn:active{background:var(--pri);color:#fff;border-color:var(--pri);transform:translateY(-1px)}
.ct-btn svg{width:16px;height:16px;flex-shrink:0}

.footer-qr{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  margin:var(--space-6) 0;
}
.footer-qr .qr-title{
  font-size:var(--text-sm);font-weight:600;color:var(--pri);
  display:flex;align-items:center;gap:var(--space-2);
}
.footer-qr .qr-title svg{width:18px;height:18px;color:var(--acc)}
.footer-qr img{
  width:130px;height:130px;max-width:100%;
  border-radius:var(--radius-sm);border:1px solid var(--bg2);padding:var(--space-2);
  background:#fff;
}
.footer-qr .qr-hint{font-size:var(--text-xs);color:var(--dim)}

.footer-bottom{
  margin-top:var(--space-6);padding-top:var(--space-4);
  border-top:1px solid var(--bg2);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
}
.footer-bottom .links-row{
  display:flex;gap:var(--space-6);flex-wrap:wrap;justify-content:center;
}
.footer-bottom .links-row a{
  font-size:var(--text-xs);color:var(--dim);text-decoration:none;
  transition:color var(--transition-fast);
}
.footer-bottom .links-row a:hover{color:var(--acc)}
.footer-bottom .icp{
  font-size:var(--text-xs);color:var(--dim);opacity:.6;
}
.footer-bottom .icp a{color:var(--dim);text-decoration:none}

@media(min-width:769px){
  footer{padding:var(--space-12) var(--space-6) var(--space-8)}
  footer::before{width:48px;margin-bottom:var(--space-12)}
  footer .name{font-size:var(--text-lg);margin-bottom:var(--space-2)}
  footer .social{gap:var(--space-3);margin-bottom:var(--space-8)}
  .ct-btn{padding:var(--space-3) var(--space-8);border-radius:28px;font-size:var(--text-base)}
  .ct-btn:hover{background:var(--pri);color:#fff;border-color:var(--pri);transform:translateY(-2px);box-shadow:0 4px 20px rgba(27,38,44,.1)}
  .footer-qr img{width:160px;height:160px}
}

/* ══════ 联系弹窗 ══════ */
.contact-popup{
  position:fixed!important;inset:0;background:rgba(0,0,0,.6);
  z-index:9999;display:none!important;align-items:center;justify-content:center;
}
.contact-popup.show{display:flex!important}
.contact-popup .card{
  background:#1a1a20;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);
  text-align:center;max-width:300px;width:88vw;position:relative;
}
.contact-popup .icon{margin-bottom:var(--space-3);display:flex;justify-content:center}
.contact-popup .icon svg{width:36px;height:36px;color:var(--acc)}
.contact-popup .val{font-size:var(--text-lg);font-weight:700;color:#fff;margin-bottom:var(--space-6);word-break:break-all}
.contact-popup .act-btn{
  display:inline-block;padding:11px var(--space-8);
  background:var(--acc);color:#1a1a20;
  border-radius:24px;font-size:var(--text-base);font-weight:700;
  text-decoration:none;cursor:pointer;border:none;
  transition:var(--transition-fast);-webkit-tap-highlight-color:transparent;
  font-family:var(--font-sans);
}
.contact-popup .act-btn:active{background:var(--color-acc-700)}
.contact-popup .close{
  position:absolute;top:var(--space-3);right:var(--space-4);
  font-size:22px;color:rgba(255,255,255,.5);cursor:pointer;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;font-family:var(--font-sans);
}

@media(min-width:769px){
  .contact-popup .card{padding:var(--space-8);max-width:320px;width:90vw}
  .contact-popup .icon svg{width:40px;height:40px}
  .contact-popup .val{font-size:var(--text-xl);margin-bottom:var(--space-8)}
  .contact-popup .act-btn{padding:var(--space-3) var(--space-8);border-radius:28px;font-size:var(--text-lg)}
  .contact-popup .act-btn:hover{background:var(--color-acc-700)}
  .contact-popup .close{top:var(--space-4);right:var(--space-6);font-size:24px}
}

/* ══════ 查看更多 ══════ */
.view-more-card{
  display:flex;align-items:center;justify-content:center;gap:var(--space-3);
  background:var(--bg);border-radius:var(--radius-lg);overflow:hidden;
  border:1.5px dashed rgba(0,0,0,.1);margin-bottom:var(--space-4);
  padding:var(--space-6) var(--space-4);text-decoration:none;cursor:pointer;
  transition:all var(--transition-normal);text-align:center;
  -webkit-tap-highlight-color:transparent;
}
[data-theme="dark"] .view-more-card{border-color:rgba(255,255,255,.1)}
.view-more-card:hover,.view-more-card:active{
  border-color:var(--acc);background:rgba(196,164,108,.03);
}
.view-more-card .more-icon{
  font-size:var(--text-xl);color:var(--acc);font-weight:200;
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(196,164,108,.3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.view-more-card .more-text{font-size:var(--text-base);font-weight:500;color:var(--sec);letter-spacing:.3px}
.view-more-card .more-arrow{color:var(--acc);font-size:var(--text-base);font-weight:400;margin-left:2px}

@media(min-width:769px){
  .view-more-card{border-radius:var(--radius-lg);margin-bottom:0;padding:var(--space-6) var(--space-6)}
  .view-more-card:hover{border-color:var(--acc);background:rgba(196,164,108,.04)}
}

/* ══════ Toast 通知 ══════ */
.toast{
  position:fixed;bottom:80px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(27,38,44,.92);color:#fff;
  padding:12px 24px;border-radius:24px;
  font-size:var(--text-sm);font-weight:500;
  opacity:0;transition:all .3s ease;z-index:10000;
  pointer-events:none;max-width:90vw;text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
[data-theme="dark"] .toast{background:rgba(196,164,108,.92);color:#1a1a20}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════ 图片保护 ══════ */
img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}

/* ══════ Reduced Motion ══════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .pj-cover::before{animation:none}
  .project{opacity:1!important;transform:none!important}
  .section-header{opacity:1!important;transform:none!important}
}