/* ============================================================
   qtt · Personal Site
   静态个人站共享样式：设计令牌 / 组件 / 暗色模式 / 响应式
   ============================================================ */
:root{
  --bg:#f7f4ee;
  --surface:rgba(255,255,255,.84);
  --surface-solid:#fffdfa;
  --text:#14213d;
  --muted:#65748b;
  --line:#e7dece;
  --blue:#16395e;
  --blue-soft:#e6eff7;
  --accent:#2e7a59;      /* 原 gold → 青绿 */
  --accent-soft:#e3f0e8;
  --purple:#6556ad;
  --rose:#a34e5b;
  --shadow:0 18px 50px rgba(22,57,94,.11);
  --radius-lg:30px;--radius-md:20px;--radius-sm:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-width:320px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 5% 3%,rgba(46,122,89,.14),transparent 25%),
    radial-gradient(circle at 95% 92%,rgba(22,57,94,.13),transparent 30%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(22,57,94,.24);outline-offset:2px}

/* ---------- 布局：侧边栏 + 主区 ---------- */
#app{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh}
.main{min-width:0;padding:28px 38px 44px}

/* ---------- 侧边栏 ---------- */
.sidebar{
  position:sticky;top:0;height:100vh;padding:24px 20px;width:264px;
  border-right:1px solid var(--line);
  background:rgba(255,253,250,.72);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;z-index:10;
  transition:width .22s ease,padding .22s ease;
}
.brand{
  display:flex;gap:12px;align-items:center;width:100%;min-width:0;
  border:0;background:transparent;padding:0;margin:0 4px 32px;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.brand:hover .brand-mark{transform:translateY(-1px);box-shadow:0 14px 28px rgba(22,57,94,.28)}
.brand:active .brand-mark{transform:scale(.97)}
.brand-mark{
  width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:16px;font-weight:900;letter-spacing:.04em;
  box-shadow:0 12px 24px rgba(22,57,94,.22);
  transition:transform .18s ease,box-shadow .18s ease;
}
.brand b{color:var(--blue);font-size:17px;line-height:1.12}
.brand small{display:block;color:var(--muted);margin-top:4px;font-size:11px;letter-spacing:.08em}
.nav-list{display:grid;gap:8px}
.nav{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:14px;padding:12px 14px;font-weight:730;
}
.nav span{width:23px;display:inline-block;text-align:center;color:var(--accent);font-size:19px}
.nav em{font-style:normal}
.nav:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(22,57,94,.09)}
.nav.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 10px 24px rgba(22,57,94,.22)}
.nav.active span{color:#8fd6b6}
.sidebar-note{margin:22px 4px 0;padding:15px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);font-size:12px;line-height:1.5}
.sidebar-note b{display:block;color:var(--blue);font-size:12px}
.side-footer{margin-top:auto;display:grid;gap:8px}
.mode-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:14px;padding:12px 14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px}
.mode-btn span{color:var(--accent);font-size:16px}
.mode-btn em{font-style:normal}
.mode-btn.active{border-color:var(--accent);color:var(--accent);font-weight:800;background:var(--accent-soft)}

/* ---------- 侧边栏收起：仅保留图标 ---------- */
body.nav-collapsed .sidebar{width:84px;padding-left:12px;padding-right:12px}
body.nav-collapsed .brand{justify-content:center}
body.nav-collapsed .brand b,
body.nav-collapsed .brand small{display:none}
body.nav-collapsed .nav{padding:12px 0;justify-content:center}
body.nav-collapsed .nav em{display:none}
body.nav-collapsed .nav span{width:auto}
body.nav-collapsed .sidebar-note{display:none}
body.nav-collapsed .mode-btn{justify-content:center}
body.nav-collapsed .mode-btn em{display:none}

/* 移动端展开导航时的背景遮罩（默认隐藏，不拦截点击） */
.nav-backdrop{
  position:fixed;inset:0;z-index:95;
  background:rgba(12,25,43,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}
.eyebrow{margin:0 0 7px;color:var(--accent);font-weight:830;letter-spacing:.115em;text-transform:uppercase;font-size:11px}
.topbar h1{margin:0;color:var(--blue);font-size:34px;line-height:1.12}
.mode-status{margin:8px 0 0;color:var(--muted);font-size:13px}
.top-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- 按钮 ---------- */
.compact-btn,.secondary-btn,.primary-btn{
  display:inline-block;border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:14px;padding:12px 14px;
}
.compact-btn{font-size:13px;white-space:nowrap}
.compact-btn:hover,.secondary-btn:hover,.primary-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(22,57,94,.09)}
.primary-btn{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:800;text-align:center}
.secondary-btn{font-weight:720;text-align:center}
.text-link{color:var(--accent);font-weight:800;font-size:14px}
.text-link:hover{text-decoration:underline}

/* ---------- Hero 卡片 ---------- */
.hero-card{
  display:grid;grid-template-columns:1.12fr .88fr;gap:30px;padding:42px;
  overflow:hidden;position:relative;
  background:linear-gradient(125deg,rgba(255,253,250,.96),rgba(247,241,229,.9));
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.hero-card:after{
  content:"";position:absolute;width:310px;height:310px;border-radius:50%;
  right:-130px;top:-140px;
  background:radial-gradient(circle,rgba(46,122,89,.2),transparent 68%);
  pointer-events:none;
}
.hero-copy{position:relative;z-index:1}
.hero-copy h2{
  font-family:Georgia,"Times New Roman","Songti SC",serif;color:var(--blue);
  font-size:56px;line-height:1.06;margin:10px 0 16px;letter-spacing:-.04em;
}
.hero-copy>p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:17px;line-height:1.8;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.stat-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
.stat-card{background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:20px;padding:22px 18px;text-align:center}
.stat-card b{display:block;color:var(--blue);font-size:36px;line-height:1.05}
.stat-card span{display:block;color:var(--muted);font-size:13px;margin-top:8px}

/* ---------- 板块标题 ---------- */
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:38px 0 16px}
.section-heading h2,.view-intro h2{margin:0;color:var(--blue);font-size:28px}
.section-heading>p,.view-intro>p{margin:0;color:var(--muted);font-size:14px}
.view-intro{display:flex;justify-content:space-between;gap:22px;align-items:flex-end;margin-bottom:22px}
.view-intro p:not(.eyebrow){margin:9px 0 0;color:var(--muted);line-height:1.65}

/* ---------- 关于我 / 技能 ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px rgba(22,57,94,.04)}
.panel h3{margin:0 0 12px;color:var(--blue);font-size:20px}
.panel p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tag{font-size:12px;padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:730}
.tag.blue{background:var(--blue-soft);color:var(--blue)}
.tag.purple{background:rgba(101,86,173,.12);color:var(--purple)}
.tag.rose{background:rgba(163,78,91,.12);color:var(--rose)}
.skill-list{display:grid;gap:14px}
.skill-item{display:flex;align-items:center;gap:12px}
.skill-item b{color:var(--blue);font-size:14px;width:92px;flex:0 0 auto}
.skill-item .bar{flex:1;height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.skill-item .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#4aa583)}

/* ---------- 项目卡片 ---------- */
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.project-card{
  min-height:220px;display:flex;flex-direction:column;align-items:flex-start;padding:20px;
  border:1px solid var(--line);border-radius:22px;background:var(--surface);
  box-shadow:0 10px 30px rgba(22,57,94,.045);
  transition:transform .18s ease,box-shadow .18s ease;
}
.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.project-meta{display:flex;width:100%;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}
.project-meta .year{color:var(--accent);font-weight:900}
.project-card h3{margin:14px 0 10px;font-family:Georgia,"Times New Roman","Songti SC",serif;font-size:21px;line-height:1.36;font-weight:600;color:var(--text)}
.project-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.project-card .tag-row{margin-top:auto;padding-top:15px}

/* ---------- 博客文章列表 ---------- */
.article-list{display:grid;gap:12px}
.article-item{
  display:flex;align-items:center;gap:16px;padding:18px 20px;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
  transition:transform .18s ease,box-shadow .18s ease;
}
.article-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.article-item .article-date{
  flex:0 0 auto;width:58px;text-align:center;padding:9px 4px;
  border-radius:14px;background:var(--blue-soft);color:var(--blue);
}
.article-item .article-date b{display:block;font-size:20px;line-height:1.05}
.article-item .article-date span{font-size:11px}
.article-item h3{margin:0 0 5px;font-size:17px;color:var(--text)}
.article-item p{margin:0;color:var(--muted);font-size:13px}
.article-item .go{flex:0 0 auto;margin-left:auto;color:var(--accent);font-weight:900;font-size:18px}

/* ---------- 联系 / 社交 ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.contact-link{
  display:flex;align-items:center;gap:13px;padding:18px 20px;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
  font-weight:800;color:var(--blue);
  transition:transform .18s ease,box-shadow .18s ease;
}
.contact-link:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.contact-link .ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:18px;flex:0 0 auto;
}

/* ---------- 空壳页占位（这里是知识的荒原） ---------- */
.empty-hero{
  position:relative;text-align:center;padding:70px 30px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(125deg,rgba(255,253,250,.96),rgba(247,241,229,.9));
  box-shadow:var(--shadow);
}
.empty-hero:after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(46,122,89,.12),transparent 66%);
  pointer-events:none;
}
.empty-hero .glyph{font-size:58px;margin-bottom:14px;color:var(--accent);position:relative;z-index:1}
.empty-hero h2{position:relative;z-index:1;margin:0;font-family:Georgia,"Times New Roman","Songti SC",serif;color:var(--blue);font-size:44px;letter-spacing:-.02em}
.empty-hero p{position:relative;z-index:1;margin:14px auto 0;max-width:520px;color:var(--muted);font-size:15px;line-height:1.75}
.empty-actions{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- 页脚 ---------- */
.page-footer{
  margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.page-footer a{color:var(--accent);font-weight:700}
.page-footer a:hover{text-decoration:underline}

/* ---------- 暗色模式 ---------- */
body.dark{
  --bg:#101826;--surface:rgba(23,34,52,.9);--surface-solid:#172238;
  --text:#eef4fb;--muted:#b4c1d1;--line:#314259;
  --blue:#b6d4ed;--blue-soft:#1d3952;
  --accent:#7ed3ab;--accent-soft:#173a2c;
  --shadow:0 18px 50px rgba(0,0,0,.34);
}
body.dark .sidebar{background:rgba(15,23,38,.82)}
body.dark .hero-card,body.dark .empty-hero{background:linear-gradient(125deg,rgba(24,37,57,.96),rgba(26,40,34,.86))}
body.dark .stat-card,body.dark .panel,body.dark .project-card,body.dark .article-item,body.dark .contact-link{background:rgba(16,24,38,.46)}
body.dark .primary-btn,body.dark .nav.active{background:#2f638e;border-color:#2f638e;color:#fff}
body.dark .nav.active span{color:#8fd6b6}
body.dark .tag{background:rgba(126,211,171,.16);color:#a7e6c8}
body.dark .tag.blue{background:rgba(182,212,237,.16);color:#cfe4f3}
body.dark .skill-item .bar{background:#314259}
body.dark .article-item .article-date{background:#1d3952;color:#cfe4f3}
body.dark .contact-link .ico{background:#173a2c;color:#a7e6c8}
body.dark .mode-btn.active{background:rgba(126,211,171,.14)}

/* ---------- 响应式 ---------- */
@media(max-width:1280px){.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1050px){
  #app{grid-template-columns:1fr}
  .main{padding:23px}
  .hero-card,.about-grid{grid-template-columns:1fr}

  /* 移动端：左侧偏上悬浮的竖排图标导航（无面板背景，不遮挡页面） */
  .sidebar{
    position:fixed;
    top:60px;
    left:12px;
    z-index:100;
    width:auto;
    height:auto;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    overflow:visible;
    gap:10px;
  }
  /* 品牌：仅保留 qt 图标方块 */
  .brand{
    width:48px;
    height:48px;
    padding:0;
    margin:0;
    justify-content:center;
    background:var(--blue);
    border-radius:14px;
    box-shadow:0 10px 22px rgba(22,57,94,.28);
  }
  .brand .brand-mark{
    width:auto;
    height:auto;
    background:transparent;
    box-shadow:none;
    border-radius:0;
    font-size:17px;
  }
  .brand b,
  .brand small{display:none}

  /* 导航项：竖向圆角图标按钮 */
  .nav-list{display:flex;flex-direction:column;gap:10px}
  .nav{
    width:48px;
    height:48px;
    padding:0;
    justify-content:center;
    border-radius:14px;
    background:var(--surface-solid);
    box-shadow:0 6px 16px rgba(22,57,94,.08);
  }
  .nav span{width:auto;font-size:20px}
  .nav em{display:none}
  .nav.active{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
    box-shadow:0 10px 22px rgba(22,57,94,.24);
  }
  .nav.active span{color:#8fd6b6}

  /* 侧栏备注隐藏 */
  .sidebar-note{display:none}

  /* 底部暗色按钮并入图标栈 */
  .side-footer{margin-top:0}
  .mode-btn{
    width:48px;
    height:48px;
    padding:0;
    border-radius:14px;
    background:var(--surface-solid);
    box-shadow:0 6px 16px rgba(22,57,94,.08);
  }
  .mode-btn em{display:none}
  .mode-btn span{font-size:20px}

  /* 自动隐藏：空闲后淡出并移出屏幕左侧 */
  .sidebar{transition:opacity .25s ease,transform .25s ease}
  body.nav-hidden .sidebar{opacity:0;transform:translateX(-150%);pointer-events:none}

  /* 点击展开：图标按钮展开为带文字的胶囊 */
  body.nav-expanded .nav,
  body.nav-expanded .mode-btn{
    width:auto;
    padding:0 14px;
    justify-content:flex-start;
    gap:10px;
  }
  body.nav-expanded .nav em,
  body.nav-expanded .mode-btn em{display:inline}
  body.nav-expanded .nav span,
  body.nav-expanded .mode-btn span{width:auto;text-align:center}
}
@media(max-width:700px){
  .main{padding:18px 14px 32px}
  .topbar,.view-intro{display:block}
  .top-actions{justify-content:flex-start;margin-top:15px}
  .hero-card{padding:26px}
  .hero-copy h2{font-size:44px}
  .stat-grid{margin-top:6px}
  .project-grid,.contact-grid{grid-template-columns:1fr}
  .side-footer{grid-template-columns:1fr}
  .empty-hero{padding:50px 20px}
  .empty-hero h2{font-size:34px}
}