/* roybase visual system v9: Impeccable craft-floor full audit, all issues fixed */
:root {
  --bg:#0a0e14; --bg-card:#111722; --bg-elevated:#1a2230;
  --accent:#6ee7ff; --accent-dim:rgba(110,231,255,.15); --accent-hover:rgba(110,231,255,.25);
  --accent-warm:#ffb86b; --accent-warm-dim:rgba(255,184,107,.12);
  --text:#e6edf3; --text-dim:#8b98a9; --text-muted:#7a8899; --danger:#ff5f57;
  --border:#1e2a3a; --border-light:rgba(110,231,255,.16); --border-accent:rgba(110,231,255,.4);
  --shadow-sm:0 8px 16px rgba(0,0,0,.3); --shadow-md:0 12px 28px rgba(0,0,0,.35); --shadow-lg:0 18px 44px rgba(0,0,0,.42);
  color-scheme:dark;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --radius:12px; --maxw:1180px;
  /* hero 配色令牌：浅色主题只改这组变量，不再写组件级 #hero 覆盖 */
  --hero-terminal-bg:linear-gradient(145deg,rgba(17,23,34,.94),rgba(10,14,20,.96));
  --hero-terminal-border:rgba(110,231,255,.24);
  --hero-bar-bg:rgba(13,19,32,.82);
  --hero-card-bg:rgba(17,23,34,.7);
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { min-width:320px; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; padding:0; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 50% 0%,rgba(110,231,255,.09),transparent 42%),rgba(10,14,20,.84); }


/* Skip link */
.sr-only-focusable {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.sr-only-focusable:focus {
  position:fixed;top:8px;left:8px;width:auto;height:auto;padding:12px 20px;margin:0;
  clip:auto;background:var(--accent);color:var(--bg);font:600 .82rem var(--mono);
  z-index:9999;border-radius:8px;outline:3px solid var(--text);
}

/* Enhanced focus indicators */
*:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
button:focus-visible,
.section-toggle:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(110,231,255,.15);
}
a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
  text-decoration:underline;
}
input:focus-visible,
textarea:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}
/* === Browser surfaces themed from palette === */
::selection { background:var(--accent-hover); color:var(--text); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:5px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:rgba(110,231,255,.35); }
html { caret-color:var(--accent); }

a { color:var(--accent); text-decoration:none; transition:color .2s ease; } a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; } :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.mono { font-family:var(--mono); } .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; }
#sidebar { display:none; }
#topnav { display:block; position:sticky; top:0; z-index:50; height:64px; border-bottom:1px solid var(--border-light); background:rgba(10,14,20,.9); backdrop-filter:blur(18px); }
#topnav .nav-inner { width:min(var(--maxw),calc(100% - 48px)); height:100%; margin:auto; padding:0; display:flex; align-items:center; gap:28px; }
#topnav .brand { color:var(--text); font:600 .92rem var(--mono); letter-spacing:.04em; white-space:nowrap; }
#topnav .brand b { color:var(--accent); }
#topnav .nav-links { display:flex; align-items:center; gap:4px; margin-left:auto; overflow:auto; scrollbar-width:none; }
#topnav .nav-links::-webkit-scrollbar { display:none; }
#topnav .nav-links a { position:relative; display:flex; align-items:center; height:40px; padding:0 14px; color:var(--text-dim); font:600 .78rem var(--sans); letter-spacing:.02em; white-space:nowrap; }
#topnav .nav-links a::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; transform:scaleX(0); transform-origin:center; background:var(--accent); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
#topnav .nav-links a:hover, #topnav .nav-links a.active { color:var(--text); } #topnav .nav-links a:hover::after,#topnav .nav-links a.active::after { transform:scaleX(1); }
.container { width:min(var(--maxw),calc(100% - 48px)); max-width:none; margin:auto; padding:0; overflow-x:hidden; }
#hero { min-height:calc(100vh - 64px); padding:clamp(56px,10vh,120px) 0 clamp(54px,9vh,100px); display:grid; place-items:center; }
#hero .terminal { width:100%; overflow:hidden; border:1px solid var(--hero-terminal-border); border-radius:18px; background:var(--hero-terminal-bg); box-shadow:var(--shadow-lg); animation:hero-in .85s cubic-bezier(.2,.8,.2,1) both; }
.terminal-bar { display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--hero-bar-bg); }
.terminal-bar .dot { width:10px;height:10px;border-radius:50%; } .terminal-bar .dot.r{background:#ff5f57}.terminal-bar .dot.y{background:#febc2e}.terminal-bar .dot.g{background:#28c840}
.terminal-title { margin-left:8px; color:var(--text-muted); font:.72rem var(--mono); }
#hero .terminal-body { min-height:390px; padding:clamp(38px,7vw,86px); display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:center; gap:clamp(34px,8vw,110px); }
#hero .prompt-line { margin:0; max-width:640px; min-height:3.1em; color:var(--text); font:500 clamp(1.15rem,2.5vw,2rem)/1.55 var(--mono); letter-spacing:-.04em; }
.prompt { color:var(--accent); } #typewriter { color:var(--text); } .cursor { display:inline-block;width:.6em;height:1.15em;margin-left:5px;vertical-align:-.16em;background:var(--accent);animation:blink 1s steps(2,end) infinite; }
#hero .hero-cards { display:grid; grid-template-columns:1fr; gap:12px; }
#hero .hero-cards .card { min-height:118px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--border); border-radius:var(--radius); background:var(--hero-card-bg); animation:hero-card-in .7s .16s both; }
.card-label { color:var(--text-dim); font:600 .74rem var(--mono); letter-spacing:.03em; } /* aria-label already on parent */ #clock{font-size:1.65rem;color:var(--accent)} #weather{font-size:1rem;color:var(--accent-warm)}
.collapsible-section { position:relative; margin:20px 0; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:rgba(17,23,34,.65); transition:border-color .3s,background .3s; }
.collapsible-section:hover { border-color:var(--accent-hover); }
.section-toggle { width:100%; min-height:92px; padding:22px 26px; display:flex; align-items:center; gap:24px; border:0; background:transparent; color:inherit; cursor:pointer; text-align:left; }
.section-toggle .section-head { flex:1; min-width:0; margin:0; display:block; }
.section-toggle .section-head h2 { margin:0; font-size:1.32rem; line-height:1.3; font-family:var(--sans); font-weight:700; letter-spacing:-.02em; }
.section-toggle .section-sub { display:block; margin-top:5px; color:var(--text-dim); font-size:.82rem; font-family:var(--sans); }
.toggle-icon { width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--accent);font-size:.7rem; transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s; flex-shrink:0; } .section-toggle[aria-expanded="true"] .toggle-icon { transform:rotate(90deg);background:rgba(110,231,255,.1); }
.section-content { padding:0 26px 28px; animation:view-in .4s cubic-bezier(.2,.8,.2,1) both; }
.service-group { margin:4px 0 30px; } .service-group h3,.bm-group h3 { margin-bottom:12px;padding-left:12px;border-left:2px solid var(--accent);color:var(--text-dim);font:600 .8rem var(--sans);letter-spacing:.02em; }
.service-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; contain:layout style; }
.card { border:1px solid var(--border); border-radius:var(--radius); background:rgba(17,23,34,.82); transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s; will-change:transform; }
.card:hover { transform:translateY(-5px); border-color:var(--border-accent); box-shadow:var(--shadow-sm), var(--shadow-md); }
a.card { display:block;color:inherit; } .service-card { min-height:142px; padding:20px; display:flex!important; flex-direction:column; justify-content:center; min-height:44px; }
.service-card h4 { margin-top:11px;font-size:1rem; } .service-card p { margin-top:4px;color:var(--text-dim);font-size:.82rem; } .service-card .svc-url { margin-top:12px;overflow:hidden;color:var(--text-muted);font: .68rem var(--mono);text-overflow:ellipsis;white-space:nowrap; }
.status-dot { width:8px;height:8px;border-radius:50%;background:var(--text-dim);box-shadow:0 0 0 transparent;transition:background .3s,box-shadow .3s; }
.status-dot.loading { background:var(--accent-warm); animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.85); } } .status-dot.up{background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent),0 0 20px color-mix(in srgb,var(--accent) 30%,transparent);}
.status-dot.down{background:var(--danger);box-shadow:0 0 8px color-mix(in srgb,var(--danger) 60%,transparent),0 0 20px color-mix(in srgb,var(--danger) 30%,transparent);}
.link-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; } .link-row { min-width:0;padding:14px 16px;border:1px solid transparent;border-radius:10px;background:rgba(10,14,20,.28);transition:background .25s,border-color .25s,transform .25s; min-height:44px; display:flex; align-items:center; }.link-row:hover{border-color:var(--border);background:rgba(110,231,255,.05);transform:translateX(4px)}.link-row a{font-size:.88rem;font-family:var(--sans)}.link-row .link-note{color:var(--text-muted);font-size:.72rem}.link-group-label { margin:20px 0 8px; color:var(--text-dim); font:600 .78rem/1 var(--mono); letter-spacing:.04em; }
.link-group-label:first-child { margin-top:0; }
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat-card{padding:18px 20px;text-align:left;min-height:44px;display:flex;flex-direction:column;justify-content:center}.stat-value{display:block;color:var(--accent);font:600 1.15rem var(--mono)}.stat-card .stat-label{display:block;margin-top:6px;color:var(--text-muted);font:500 .74rem var(--sans);letter-spacing:.01em}
footer{margin-top:54px;padding:28px 20px 46px;border-top:1px solid var(--border);color:var(--text-dim);font-size:.8rem;text-align:center;font-family:var(--sans)}footer a{color:var(--text-dim)}
.reveal { opacity:0; transition:opacity .55s ease,transform .55s ease; }
.reveal.in { opacity:1; transform:none; }
/* Service group: slide from right */
.service-group.reveal { transform:translateX(24px); opacity:0; transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1); }
.service-group.reveal.in { transform:none; opacity:1; }
.service-group:nth-child(1).reveal { transition-delay:.05s; }
.service-group:nth-child(2).reveal { transition-delay:.1s; }
.service-group:nth-child(3).reveal { transition-delay:.15s; }
.service-group:nth-child(4).reveal { transition-delay:.2s; }
.service-group:nth-child(5).reveal { transition-delay:.25s; }
/* Tool list: fade only */
#tool-list.reveal { transform:none; }
/* Article/bookmark tree: slide from left */
.article-tree.reveal, .bookmark-tree.reveal { transform:translateX(-16px); }
.article-tree.reveal.in, .bookmark-tree.reveal.in { transform:none; }
/* Stats: scale up slightly */
.stats-wrap.reveal { transform:scale(.97); }
.stats-wrap.reveal.in { transform:none; }
@keyframes hero-in{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}} @keyframes hero-card-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} @keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes blink{50%{opacity:0}}


[data-theme="light"] {
  --bg:#f5f7fa; --bg-card:#ffffff; --bg-elevated:#e8ecf1;
  --text:#1a1e26; --text-dim:#5a6b7d; --text-muted:#64707d; --danger:#c13932;
  --border:#d1d5db; --border-light:rgba(110,231,255,.25); --border-accent:rgba(110,231,255,.5);
  --accent:#0a7396; --accent-dim:rgba(10,115,150,.12); --accent-hover:rgba(10,115,150,.22);
  --accent-warm:#b45309; --accent-warm-dim:rgba(180,83,9,.12);
  --hero-terminal-bg:linear-gradient(145deg,#ffffff,#f2f5f8);
  --hero-terminal-border:rgba(0,0,0,.08);
  --hero-bar-bg:rgba(230,235,240,.92);
  --hero-card-bg:#ffffff;
  --shadow-sm:0 8px 16px rgba(16,24,40,.08); --shadow-md:0 12px 28px rgba(16,24,40,.10); --shadow-lg:0 18px 44px rgba(16,24,40,.12);
  color-scheme:light;
}
[data-theme="light"] body {
  background-image:linear-gradient(rgba(30,42,58,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(30,42,58,.04) 1px,transparent 1px);
  background-size:48px 48px;
}
[data-theme="light"] body::before {
  background:radial-gradient(circle at 50% 0%,rgba(110,231,255,.06),transparent 42%),rgba(245,247,250,.84);
}
[data-theme="light"] #topnav {
  background:rgba(255,255,255,.9);
  border-bottom-color:rgba(0,0,0,.08);
}
[data-theme="light"] .card {
  background:rgba(255,255,255,.85);
  border-color:rgba(0,0,0,.08);
}
[data-theme="light"] .card:hover {
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
[data-theme="light"] footer {
  border-top-color:rgba(0,0,0,.06);
}
@media (max-width:768px) and (min-width:701px) {
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #hero .hero-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #hero #weather-card { grid-column:1 / -1; }
  .link-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){#topnav{height:auto;min-height:60px}#topnav .nav-inner{width:calc(100% - 32px);padding:10px 0;display:block}.nav-links{margin-top:8px!important;justify-content:flex-start}#topnav .nav-links a{height:32px;padding:0 10px;font-size:.66rem}.container{width:calc(100% - 32px)}#hero{min-height:auto;padding:38px 0 28px}#hero .terminal-body{min-height:0;grid-template-columns:1fr;gap:30px;padding:34px 22px}#hero .prompt-line{font-size:1.05rem}.section-toggle{padding:18px 16px;min-height:82px}.section-content{padding:0 16px 22px}.section-toggle .section-head{grid-template-columns:1fr}.section-toggle .section-sub{grid-column:1}.link-grid,.stats-grid{grid-template-columns:1fr}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{min-height:132px;padding:16px}}
@media (max-width:430px){.service-grid{grid-template-columns:1fr}.section-toggle .section-head h2{font-size:1.15rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.random-dialogue{opacity:.82!important}}
.collapsible-section.is-active { border-color:var(--border-accent); box-shadow:var(--shadow-md); }
.section-content.view-refresh { animation:view-in .42s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy { min-width:0; }
.random-dialogue { min-height:2.8em; margin-top:24px; color:var(--accent-warm); font:.82rem/1.7 var(--mono); opacity:.82; }
.random-dialogue.dialogue-in { animation:dialogue-in .45s cubic-bezier(.2,.8,.2,1) both; }
.calendar-lunar { display:block; margin-top:8px; color:var(--accent-warm); font-size:.78rem; }
.calendar-note { display:block; margin-top:10px; color:var(--text-muted); font-size:.68rem; line-height:1.5; }
#calendar-card { min-height:142px; }
.stat-value-small { overflow:hidden; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.visitor-card { border-color:var(--accent-warm-dim); }
@keyframes dialogue-in { from { opacity:0; transform:translateY(7px); } to { opacity:.82; transform:none; } }
@media (max-width:900px) { .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }


/* light 主题补齐：此前硬编码深色的组件 + 强调色对比度已在变量里换好 */
[data-theme="light"] .collapsible-section { background:rgba(255,255,255,.72); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .link-row { background:rgba(30,42,58,.04); }
[data-theme="light"] .link-row:hover { background:var(--accent-dim); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .tree-node > summary.tree-branch:hover { background:rgba(30,42,58,.06); }
[data-theme="light"] .random-dialogue { opacity:.9; }

@media (max-width:700px) { #hero .hero-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } #hero #weather-card { grid-column:1 / -1; } .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:430px) { #hero .hero-cards { grid-template-columns:1fr; } #hero #weather-card { grid-column:auto; } }

/* Theme toggle button */
.theme-toggle {
  width:40px;height:40px;border:1px solid var(--border);border-radius:50%;
  background:transparent;color:var(--text-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,color .3s;
  font-size:1.1rem;
}
.theme-toggle:hover {
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
}
/* v5: 文件树视图（日志/收藏）+ 统计分组小标题 */
.article-tree, .bookmark-tree { display:flex; flex-direction:column; gap:2px; padding:8px 0; }
.tree-node { margin:0; }
.tree-node > summary.tree-branch { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; color:var(--text); font:500 .86rem var(--sans); cursor:pointer; list-style:none; user-select:none; transition:background .2s; }
.tree-node > summary.tree-branch::-webkit-details-marker { display:none; }
.tree-node > summary.tree-branch:hover { background:var(--accent-dim); }
.tree-children { display:flex; flex-direction:column; gap:2px; margin-left:16px; padding-left:14px; border-left:1px solid var(--border); }
.tree-leaf { display:flex; align-items:baseline; gap:8px; min-width:0; padding:10px; border-radius:8px; color:var(--text); font-size:.85rem; font-family:var(--sans); transition:background .2s,color .2s; min-height:44px; }
.tree-leaf:hover { background:var(--accent-dim); color:var(--accent); }
.tree-date, .tree-note { margin-left:auto; flex-shrink:0; color:var(--text-muted); font:.68rem var(--mono); white-space:nowrap; }

/* === Loading skeleton === */
@keyframes shimmer {
  0% { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
.skeleton {
  background:linear-gradient(90deg,var(--border) 25%,var(--bg-elevated) 50%,var(--border) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--radius);
}
.skeleton-card { min-height:142px; padding:20px; }
.skeleton-text { height:1em; margin-bottom:.5em; border-radius:4px; }
.skeleton-text:last-child { width:60%; }
.skeleton-label { width:80px; height:.8em; margin-bottom:.6em; }

/* === Error banner === */
.error-banner {
  padding:12px 16px;border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);border-radius:10px;
  background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger);font:.82rem var(--mono);
  display:flex;align-items:center;gap:8px;
}
.error-banner button {
  margin-left:auto;padding:4px 12px;border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);
  border-radius:6px;background:transparent;color:var(--danger);font:.72rem var(--mono);
  cursor:pointer;
}
.error-banner button:hover { background:color-mix(in srgb,var(--danger) 12%,transparent); }

/* === Offline indicator === */
.offline-badge {
  position:fixed;bottom:20px;right:20px;padding:8px 16px;
  background:var(--accent-warm);color:var(--bg);
  font:600 .72rem var(--mono);border-radius:20px;
  z-index:100;display:none;
}
.offline-badge.show { display:block; }
/* === Empty / loading states */
.tree-empty { padding:16px; color:var(--text-dim); font:.82rem var(--sans); text-align:center; }
.status-note { padding:12px; color:var(--accent-warm); font:.82rem var(--sans); text-align:center; }
.stats-wrap { display:flex; flex-direction:column; gap:24px; }
.stats-subhead { margin-bottom:10px; padding-left:12px; border-left:2px solid var(--accent); color:var(--text-dim); font:600 .82rem var(--mono); letter-spacing:.03em; }

/* === SEO: visible page heading (was screen-reader-only; now a real h1) */
#hero > h1 {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}