/* 小站通用语义色：默认暗色，手动浅色只覆盖颜色变量。 */
:root { color-scheme:dark; --page:#191c22; --surface:#20242b; --panel:#232830; --hover:#2b313a; --ink:#e7e8e1; --muted:#adb4b5; --subtle:#929b9f; --line:#343b43; --accent:#b5c69f; --accent-bg:#2c352e; --purple:#b9afd4; --peach:#d8b6a6; --button:#c5d1b8; --button-ink:#20271e; --error:#f0b2b2; --error-bg:#3b292e; --shadow:0 12px 34px #0002; }
:root[data-theme="light"] { color-scheme:light; --page:#f8f7f3; --surface:#fffefa; --panel:#f1f1e9; --hover:#eeeee5; --ink:#303530; --muted:#60685e; --subtle:#687165; --line:#dddfd4; --accent:#586f43; --accent-bg:#e8eddf; --purple:#756b94; --peach:#916750; --button:#465c37; --button-ink:#fff; --error:#a02c3a; --error-bg:#f8e6e7; --shadow:0 12px 34px #323c3310; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scrollbar-gutter:stable; scroll-padding-top:24px; }
body { margin:0; background:var(--page); color:var(--ink); font:14px/1.6 "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; border:0; }
button,a,input { -webkit-tap-highlight-color:transparent; outline-offset:4px; }
:focus-visible { outline:2px solid var(--accent); }
button:disabled { opacity:.55; cursor:not-allowed; }
svg,img { display:block; }
::selection { background:#b9afd4; color:#242430; }
h1,h2,h3,p { overflow-wrap:anywhere; }
.icon { width:21px; height:21px; flex:none; }
.visually-hidden { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:10px 18px; background:var(--button); color:var(--button-ink); border-radius:8px; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }

/* 页眉只保留品牌、导航页与主题按钮，删除区域不占留白。 */
.site-header { width:min(1480px,calc(100% - 88px)); height:100px; margin:auto; display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:700; letter-spacing:.8px; flex:1; min-width:0; }
.header-nav { display:flex; align-items:center; }
.header-link { display:inline-block; padding:12px 0; color:var(--muted); font-size:13px; white-space:nowrap; }
.header-link:hover { color:var(--ink); }
.back-site span { margin-left:8px; }
.icon-button { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:50%; color:var(--muted); flex:none; }
.icon-button:hover { background:var(--hover); color:var(--ink); }
.icon-button[aria-pressed="true"],.favorite-button[aria-pressed="true"] { color:var(--accent); }
.icon-button[aria-pressed="true"] svg,.favorite-button[aria-pressed="true"] svg { fill:var(--accent); fill-opacity:.18; }

/* 保留全部、收藏和小游戏三个入口；手机按阅读顺序变为横向导航。 */
.layout { width:min(1480px,calc(100% - 88px)); margin:auto; display:grid; grid-template-columns:206px minmax(0,1fr); gap:46px; min-height:calc(100vh - 100px); }
.sidebar { padding:40px 24px 40px 0; border-right:1px solid var(--line); }
.category-nav { display:flex; flex-direction:column; gap:7px; }
.category-button { display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:44px; border-radius:9px; width:100%; background:none; text-align:left; color:var(--muted); font-size:13px; white-space:nowrap; }
.category-button .icon { width:17px; height:17px; }
.category-button:hover { background:var(--surface); color:var(--ink); }
.category-button.is-active { background:var(--accent-bg); color:var(--accent); }
.category-count { margin-left:auto; font-size:11px; font-variant-numeric:tabular-nums; }
.main-content { min-width:0; padding-top:40px; display:flex; flex-direction:column; }
#catalog-view,#detail-view { margin-bottom:48px; }
#catalog-view { min-height:440px; }
.search-box { display:flex; gap:15px; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:15px 19px; }
.search-box:focus-within { border-color:var(--accent); }
.search-icon { color:var(--subtle); }
.search-box input { width:100%; border:0; outline:none; background:none; font-size:13px; min-width:0; }
.search-box input::placeholder { color:var(--subtle); }
.search-box kbd { border:1px solid var(--line); border-radius:5px; padding:0 7px; font-size:12px; color:var(--subtle); }
.recent-section { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:18px; }
.recent-section h2 { font-size:11px; color:var(--subtle); font-weight:400; margin:0; white-space:nowrap; }
.recent-links { display:flex; flex-wrap:wrap; gap:7px; flex:1; }
.recent-link { font-size:11px; padding:5px 10px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:6px; }
.recent-link:hover { color:var(--accent); border-color:var(--accent); }
.text-button { color:var(--subtle); background:none; font-size:11px; padding:8px 5px; }
.catalog-heading { margin:30px 0 22px; }
.catalog-heading h1 { font-size:23px; margin:0; font-weight:600; letter-spacing:.3px; }
.catalog-heading h1 span { margin-left:9px; color:var(--subtle); font-size:13px; font-weight:400; vertical-align:2px; }
.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tool-card { --tool-color:var(--peach); position:relative; background:var(--surface); border:1px solid var(--line); border-radius:13px; transition:border-color .18s,transform .18s,background .18s; }
.tool-card:hover { border-color:var(--subtle); transform:translateY(-3px); background:var(--panel); }
.tool-card-link { display:block; height:100%; min-height:190px; padding:23px 23px 30px; border-radius:12px; }
.card-top { display:flex; align-items:center; height:38px; margin-bottom:20px; padding-right:22px; }
.tool-icon { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--tool-color) 10%,transparent); color:var(--tool-color); border-radius:10px; }
.tool-card h3 { margin:0 0 7px; font-size:17px; font-weight:600; }
.tool-card p { margin:0; font-size:12px; line-height:1.85; color:var(--muted); }
.card-arrow { position:absolute; bottom:17px; right:19px; color:var(--subtle); font-size:17px; }
.tool-card:hover .card-arrow { color:var(--tool-color); }
.favorite-button { position:absolute; top:18px; right:15px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; color:var(--subtle); border-radius:6px; }
.favorite-button .icon { width:17px; height:17px; }
.favorite-button:hover { background:var(--hover); color:var(--accent); }
.empty-state { text-align:center; padding:56px 16px; border:1px dashed var(--line); border-radius:13px; }
.empty-state>span { display:block; font-size:40px; color:var(--accent); }
.empty-state h2 { margin:8px 0; font-size:18px; }
.empty-state p { color:var(--muted); font-size:12px; margin:0 0 23px; }

/* 游戏布局由 games.css 管理；这里仅定义共用容器与按钮。 */
.detail-view { padding-bottom:15px; }
.detail-topbar { display:flex; justify-content:space-between; gap:15px; margin-bottom:24px; font-size:12px; color:var(--subtle); }
.back-link:hover { color:var(--accent); }
.detail-category { color:var(--accent); }
.detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }
.detail-heading h1 { margin:0 0 10px; font-size:30px; font-weight:600; letter-spacing:-.5px; }
.detail-heading h1:focus:not(:focus-visible) { outline:none; }
.detail-heading p { color:var(--muted); font-size:12px; margin:0; }
.workbench { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; }
.btn { display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:7px; padding:10px 16px; min-height:42px; font-size:12px; line-height:1.5; white-space:normal; }
.btn-primary { color:var(--button-ink); background:var(--button); font-weight:500; }
.btn-primary:hover { filter:brightness(1.05); }
.btn-secondary { color:var(--ink); background:var(--panel); border-color:var(--line); }
.btn-secondary:hover { border-color:var(--subtle); }
.field-note { font-size:12px; color:var(--muted); line-height:1.9; margin:10px 0; }
.error-message { background:var(--error-bg); color:var(--error); border-radius:8px; padding:11px 14px; font-size:12px; }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-top:auto; padding:27px 0 30px; border-top:1px solid var(--line); color:var(--subtle); font-size:10px; }
.footer-registrations { display:flex; flex-wrap:wrap; gap:8px 24px; width:100%; font-size:10px; }
.footer-registrations a:hover { color:var(--accent); }
.toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); padding:11px 20px; background:var(--button); color:var(--button-ink); border-radius:10px; box-shadow:var(--shadow); z-index:100; font-size:13px; }
.noscript-note { padding:25px; background:var(--panel); border-radius:12px; margin-bottom:25px; }
.noscript-note a { color:var(--accent); margin-left:10px; }

@media(max-width:1200px) {
  .site-header,.layout { width:calc(100% - 64px); }
  .layout { grid-template-columns:180px minmax(0,1fr); gap:30px; }
  .sidebar { padding-right:16px; }
  .category-button { padding:12px 10px; gap:9px; }
  .tool-card-link { padding:20px 18px 30px; }
}
@media(max-width:1000px) {
  .tool-grid { gap:13px; }
  .tool-card h3 { font-size:16px; }
  .workbench { padding:22px; }
}
@media(max-width:760px) {
  .site-header,.layout { width:calc(100% - 40px); }
  .site-header { height:80px; gap:22px; }
  .brand { font-size:18px; }
  .header-link { font-size:12px; }
  .theme-toggle { width:36px; height:36px; }
  .layout { display:block; min-height:calc(100vh - 80px); }
  .sidebar { border:0; padding:20px 0 0; }
  .category-nav { flex-direction:row; gap:8px; overflow-x:auto; padding:3px 3px 12px; scrollbar-width:thin; }
  .category-button { width:auto; padding:9px 12px; border:1px solid var(--line); border-radius:8px; font-size:11px; gap:7px; flex:none; }
  .category-count { display:none; }
  .category-button .icon { width:15px; height:15px; }
  .main-content { padding-top:16px; }
  #catalog-view { min-height:380px; }
  .search-box { padding:13px 14px; gap:10px; }
  .search-box input { font-size:12px; }
  .catalog-heading { margin:25px 0 18px; }
  .catalog-heading h1 { font-size:22px; }
  .tool-card-link { min-height:183px; padding:19px 17px 30px; }
  .tool-card p { font-size:11px; }
  .detail-topbar { margin:8px 0 24px; }
  .detail-heading h1 { font-size:27px; }
  .workbench { padding:20px; }
  .footer-registrations { gap:7px; flex-direction:column; }
  .recent-section { gap:8px; }
  .recent-section h2 { width:100%; }
}
@media(max-width:480px) {
  .site-header,.layout { width:calc(100% - 32px); }
  .site-header { gap:16px; }
  .brand { font-size:17px; gap:7px; }
  .brand img { width:25px; height:25px; }
  .back-site span { margin-left:3px; }
  .tool-grid { gap:11px; }
  .tool-card-link { padding:17px 14px 29px; min-height:193px; }
  .card-top { margin-bottom:17px; }
  .tool-icon { width:34px; height:34px; }
  .favorite-button { right:6px; top:12px; }
  .tool-card h3 { font-size:15px; }
  .tool-card p { font-size:11px; }
  .card-arrow { right:13px; bottom:12px; }
  .search-box kbd { display:none; }
  .workbench { padding:13px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}