:root {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #17151b;
  background: #faf8fc;
  font-synthesis: none;
  --purple-950: #3d1248;
  --purple-900: #4f1b5d;
  --purple-800: #642174;
  --purple-700: #762987;
  --purple-600: #82318e;
  --purple-100: #f0e8f3;
  --purple-050: #faf7fb;
  --gold: #b8790c;
  --line: #e7e0ea;
  --muted: #746e78;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; }
.public-page { background: radial-gradient(circle at 8% 8%, #f3ebf6 0, transparent 32%), #fcfbfd; }
.public-shell { width: min(100%, 760px); min-height: 100vh; border-right: 1px solid var(--line); background: rgba(255,255,255,.72); display: flex; flex-direction: column; }
.public-header { min-height: 88px; padding: 0 clamp(28px, 5vw, 66px); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-name { color: var(--purple-900); font-size: 23px; font-weight: 800; text-decoration: none; letter-spacing: .02em; }
.public-header nav { display: flex; gap: 22px; }
.public-header nav a { color: #504a54; text-decoration: none; font-size: 14px; }
.public-header nav a:hover, .public-header nav a:focus { color: var(--purple-700); }
.public-main { width: min(100% - 56px, 620px); margin: auto; padding: 78px 0 42px; }
.eyebrow { margin: 0 0 10px; color: var(--purple-700); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.intro h1 { margin: 0; font-size: clamp(38px, 5vw, 58px); line-height: 1.18; letter-spacing: -.035em; }
.intro-copy { max-width: 540px; margin: 24px 0 0; color: #68616b; font-size: 17px; line-height: 1.9; }
.record-list { margin: 54px 0 36px; }
.record-item { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 28px; padding: 24px 12px; border-bottom: 1px solid var(--line); }
.record-icon { width: 64px; height: 64px; display: grid; place-items: center; color: var(--purple-700); border-radius: 14px; background: var(--purple-050); }
.record-icon svg, .tool-icon svg { width: 45px; height: 45px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.record-item h2 { margin: 0 0 7px; font-size: 24px; }
.record-item p { margin: 0; color: var(--muted); line-height: 1.7; }
.primary-entry { display: grid; place-items: center; min-height: 64px; border-radius: 10px; color: #fff; background: linear-gradient(115deg, var(--purple-900), var(--purple-700)); text-decoration: none; font-size: 19px; font-weight: 800; box-shadow: 0 10px 26px #64217425; transition: transform .18s ease, box-shadow .18s ease; }
.primary-entry:hover, .primary-entry:focus { transform: translateY(-2px); box-shadow: 0 15px 30px #64217433; }
.public-footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px clamp(28px, 5vw, 66px); color: #7c7580; border-top: 1px solid var(--line); font-size: 13px; }
.public-footer a { text-decoration: none; }
.public-footer a:hover { color: var(--purple-700); }

.tools-page { background: #f7f4f8; }
.workbench-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.workbench-sidebar { position: sticky; top: 0; height: 100vh; padding: 34px 20px 24px; border-right: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.sidebar-brand { display: block; padding: 0 12px 30px; color: var(--purple-900); font-size: 18px; line-height: 1.45; font-weight: 800; text-decoration: none; }
.workbench-sidebar nav { display: grid; gap: 8px; }
.workbench-sidebar nav a { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 15px; border-radius: 8px; color: #4e4852; text-decoration: none; }
.workbench-sidebar nav a span { width: 22px; font-size: 20px; text-align: center; }
.workbench-sidebar nav a:hover { color: var(--purple-800); background: var(--purple-050); }
.workbench-sidebar nav a.active { color: #fff; background: linear-gradient(110deg, var(--purple-900), var(--purple-700)); box-shadow: 0 8px 20px #64217424; }
.back-home { margin-top: auto; padding: 14px; color: var(--purple-700); font-size: 13px; text-align: center; text-decoration: none; border-top: 1px solid var(--line); }
.workbench-main { width: min(100%, 1320px); padding: 34px clamp(24px, 4vw, 58px) 48px; }
.workbench-header { min-height: 72px; display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-bottom: 28px; }
.workbench-header h1 { margin: 0; font-size: 30px; }
.login-state { display: flex; align-items: center; gap: 13px; color: var(--purple-900); font-weight: 700; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--purple-800); }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 20px; }
.tool-card { min-height: 310px; padding: 30px 24px 24px; display: flex; flex-direction: column; align-items: center; color: inherit; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center; text-decoration: none; box-shadow: 0 5px 18px #35113e0a; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tool-card:hover, .tool-card:focus { transform: translateY(-4px); border-color: #cbb6d2; box-shadow: 0 15px 32px #35113e16; outline: none; }
.tool-icon { width: 80px; height: 80px; display: grid; place-items: center; margin-bottom: 17px; color: var(--purple-700); }
.tool-icon svg { width: 62px; height: 62px; stroke-width: 2.1; }
.tool-card.accent .tool-icon { color: var(--gold); }
.tool-card h2 { margin: 0 0 7px; font-size: 22px; }
.tool-card p { margin: 0 0 24px; color: var(--muted); }
.enter-button { min-width: 112px; margin-top: auto; padding: 9px 18px; color: var(--purple-800); border: 1px solid #a980b3; border-radius: 8px; font-weight: 700; }
.tool-card:hover .enter-button { color: #fff; background: var(--purple-700); border-color: var(--purple-700); }
.recent-panel { margin-top: 22px; padding: 23px 28px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.recent-panel h2 { margin: 0 0 7px; font-size: 19px; }
.recent-panel p { margin: 0; color: var(--muted); }
.recent-link { padding: 9px 16px; color: var(--purple-800); border: 1px solid #a980b3; border-radius: 8px; text-decoration: none; font-weight: 700; }

@media (min-width: 1100px) {
  .public-page::after { content: "个人工具 · 开发实践"; position: fixed; left: min(830px, 68vw); top: 45%; color: #e6dce9; font-size: 44px; font-weight: 800; letter-spacing: .08em; transform: rotate(90deg); pointer-events: none; }
}
@media (max-width: 900px) {
  .workbench-shell { grid-template-columns: 1fr; }
  .workbench-sidebar { position: static; width: 100%; height: auto; padding: 18px 20px; }
  .sidebar-brand { padding: 0 0 16px; }
  .workbench-sidebar nav { grid-template-columns: repeat(3, 1fr); }
  .workbench-sidebar nav a { justify-content: center; }
  .back-home { display: none; }
  .tool-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
}
@media (max-width: 620px) {
  .public-header { padding: 20px 24px; align-items: flex-start; flex-direction: column; }
  .public-header nav { width: 100%; justify-content: space-between; gap: 12px; }
  .public-main { padding-top: 50px; }
  .record-item { grid-template-columns: 58px 1fr; gap: 17px; padding-left: 0; padding-right: 0; }
  .record-icon { width: 52px; height: 52px; }
  .record-icon svg { width: 36px; height: 36px; }
  .record-item h2 { font-size: 21px; }
  .public-footer { flex-direction: column; text-align: center; }
  .workbench-sidebar nav a { padding: 0 7px; font-size: 13px; }
  .workbench-sidebar nav a span { display: none; }
  .workbench-main { padding: 24px 16px 36px; }
  .workbench-header { align-items: center; }
  .workbench-header .eyebrow { display: none; }
  .workbench-header h1 { font-size: 24px; }
  .login-state span:first-child { display: none; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 265px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}