/* =====================================================================
   Lite Comments · 全局样式 (MONO Design System v2.0)
   集中管理：设计 token / 重置 / 布局 / 公共组件 / 工具类
   纯黑白灰、绝对直角、无阴影、1px 边框分层、等宽数据、暗亮双模式
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --ui-bg:#0a0a0a; --ui-surface:#111111; --ui-surface-2:#1a1a1a;
  --ui-fg:#e4e4e4; --ui-fg-muted:#a1a1a1; --ui-accent:#ededed;
  --ui-line:#212121; --ui-line-strong:#3a3a3a;
  --ui-danger:#e5484d; --ui-danger-line:#5a2226;
  --ui-radius:0px; --ui-blur:0px; --ui-shadow-sm:0 0 0 1px var(--ui-line);
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --tap-scale:.98; --hover-y:-1px;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
[data-theme="light"]{
  --ui-bg:#fcfcfc; --ui-surface:#f7f7f7; --ui-surface-2:#efefef;
  --ui-fg:#1a1a1a; --ui-fg-muted:#5c5c5c; --ui-accent:#171717;
  --ui-line:#e6e6e6; --ui-line-strong:#cccccc; --ui-danger:#c1121f;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;border-radius:var(--ui-radius)!important;box-shadow:none!important;
  margin:0;padding:0;letter-spacing:-0.01em}
html,body{height:100%}
body{font-family:var(--sans);background:var(--ui-bg);color:var(--ui-fg);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a.link{text-decoration:underline;text-underline-offset:3px}
a.link:hover{color:var(--ui-fg-muted)}

/* ---------- 布局 ---------- */
.container{max-width:1080px;margin:0 auto;padding:0 24px}
.section{padding:64px 0}
main{min-height:calc(100vh - 57px - 120px)}

/* ---------- 导航栏 ---------- */
.navbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;height:57px;padding:0 24px;
  background:var(--ui-bg);border-bottom:1px solid var(--ui-line)}
.navbar .brand{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:-0.04em}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:13px;color:var(--ui-fg-muted);transition:color var(--motion-base)}
.nav-links a:hover,.nav-links a.active{color:var(--ui-fg)}
.nav-actions{display:flex;gap:8px;align-items:center}

/* ---------- 页脚 ---------- */
.footer{border-top:1px solid var(--ui-line);padding:32px 24px;margin-top:48px;
  color:var(--ui-fg-muted);font-size:13px}
.footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer a:hover{color:var(--ui-fg)}

/* ---------- 排版工具 ---------- */
h1{font-size:40px;font-weight:700;letter-spacing:-0.04em;line-height:1.1}
h2{font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ui-fg-muted);margin:0 0 16px}
h3{font-size:18px;font-weight:600;letter-spacing:-0.03em}
.mono{font-family:var(--mono)}
.greeting{margin-bottom:22px}
.g-hi{margin:0;font-size:24px;font-weight:600;font-family:var(--sans);color:var(--ui-fg);letter-spacing:-0.04em}
.g-hi b{color:var(--ui-accent)}
.g-tip{margin-top:6px;color:var(--ui-fg-muted);font-size:13px}
.muted{color:var(--ui-fg-muted)}
.lead{font-size:17px;color:var(--ui-fg-muted);max-width:640px;line-height:1.6}
.center{text-align:center}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spread{justify-content:space-between}
.grow>input{flex:1}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb12{margin-bottom:12px}.mb24{margin-bottom:24px}
hr{border:0;border-top:1px solid var(--ui-line);margin:16px 0}

/* ---------- 表单控件 ---------- */
label{display:block;font-size:13px;color:var(--ui-fg-muted);margin-bottom:6px}
input,select,textarea{font-family:var(--sans);font-size:14px;color:var(--ui-fg);
  background:var(--ui-surface);border:1px solid var(--ui-line);
  padding:10px 12px;width:100%;transition:border-color var(--motion-base)}
input::placeholder,textarea::placeholder{color:var(--ui-fg-muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ui-line-strong)}
.field{margin-bottom:16px}
.field-error{color:var(--ui-danger);font-size:12px;font-family:var(--mono);margin-top:6px;min-height:14px}
input.invalid{border-color:var(--ui-danger)}

/* ---------- 按钮 ---------- */
button{font-family:var(--sans);font-size:14px;cursor:pointer;background:transparent;
  color:var(--ui-fg);border:1px solid var(--ui-line);padding:10px 18px;
  transition:border-color var(--motion-base),transform var(--motion-base),background var(--motion-base)}
button:hover{border-color:var(--ui-line-strong);transform:translateY(var(--hover-y))}
button:active{transform:scale(var(--tap-scale))}
button:disabled{color:var(--ui-fg-muted);border-color:var(--ui-line);cursor:not-allowed;transform:none}
.btn-primary{background:var(--ui-accent);color:var(--ui-bg);border-color:var(--ui-accent);font-weight:600}
.btn-primary:hover{border-color:var(--ui-line-strong)}
.btn-danger{color:var(--ui-danger);border-color:var(--ui-line)}
.btn-danger:hover{border-color:var(--ui-danger)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-block{width:100%}
.btn-lg{padding:13px 26px;font-size:15px}

/* ---------- 卡片 / 面板 ---------- */
.card{background:var(--ui-surface);border:1px solid var(--ui-line);padding:24px;
  animation:enter var(--motion-slow) ease both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- 徽标 / 标签 ---------- */
.badge{font-family:var(--mono);font-size:12px;padding:2px 8px;border:1px solid var(--ui-line);
  color:var(--ui-fg-muted);display:inline-block}
.tag{font-family:var(--mono);font-size:11px;padding:2px 7px;border:1px solid var(--ui-line);
  color:var(--ui-fg-muted);text-transform:uppercase;letter-spacing:0.04em}
.site-key{font-family:var(--mono);font-size:13px;background:var(--ui-surface-2);
  border:1px solid var(--ui-line);padding:3px 8px;display:inline-block;word-break:break-all}
pre{font-family:var(--mono);white-space:pre-wrap;word-break:break-word;
  background:var(--ui-surface-2);border:1px solid var(--ui-line);padding:14px;font-size:12.5px;color:var(--ui-fg)}
.feature-icon{font-family:var(--mono);font-size:20px;border:1px solid var(--ui-line);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}

/* ---------- 统计 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ui-line);border:1px solid var(--ui-line)}
.stat{background:var(--ui-surface);padding:20px}
.stat .k{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:-0.04em}
.stat .l{font-size:12px;color:var(--ui-fg-muted);text-transform:uppercase;letter-spacing:0.04em;margin-top:4px}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- 评论项 ---------- */
.cmt{border:1px solid var(--ui-line);background:var(--ui-surface);padding:16px;margin-bottom:10px;
  animation:enter var(--motion-slow) ease both}
.cmt .meta{font-family:var(--mono);font-size:12px;color:var(--ui-fg-muted);margin-bottom:8px}
.cmt .body{white-space:pre-wrap;word-break:break-word;line-height:1.6}
.cmt .acts{display:flex;gap:8px;margin-top:12px}

/* ---------- Tab ---------- */
.tabs{display:flex;border:1px solid var(--ui-line);margin-bottom:14px;width:fit-content}
.tab{padding:8px 16px;font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:0.04em;cursor:pointer;background:var(--ui-surface);border-right:1px solid var(--ui-line);color:var(--ui-fg-muted)}
.tab:last-child{border-right:0}
.tab.active{background:var(--ui-accent);color:var(--ui-bg)}

/* ---------- 主题切换按钮 ---------- */
.theme-toggle{cursor:pointer;background:transparent;border:1px solid var(--ui-line);
  color:var(--ui-fg-muted);padding:6px 12px;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:0.04em}
.theme-toggle:hover{border-color:var(--ui-line-strong);color:var(--ui-fg)}

/* ---------- 通用提示 ---------- */
.empty{color:var(--ui-fg-muted);padding:24px 0;text-align:center;border:1px dashed var(--ui-line)}
.alert{font-family:var(--mono);font-size:12px;padding:10px 12px;border:1px solid var(--ui-line);
  background:var(--ui-surface);margin-top:12px;min-height:16px}
.alert.err{color:var(--ui-danger);border-color:var(--ui-danger-line)}
/* 无内容的提示框不渲染（避免常驻空红框） */
.alert:empty{display:none;padding:0;margin:0;border:0;min-height:0}

/* ---------- 统一 Toast 通知 ---------- */
.lc-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:max-content;max-width:90vw}
.lc-toast-item{font-family:var(--mono);font-size:13px;padding:10px 16px;
  border:1px solid var(--ui-line-strong);background:var(--ui-surface);color:var(--ui-fg);
  opacity:0;transform:translateY(-8px);transition:opacity var(--motion-base),transform var(--motion-base);
  pointer-events:auto}
.lc-toast-item.show{opacity:1;transform:translateY(0)}
.lc-toast-success{border-color:var(--ui-line-strong);color:var(--ui-fg)}
.lc-toast-info{border-color:var(--ui-line-strong);color:var(--ui-fg-muted)}
.lc-toast-warn{border-color:var(--ui-line-strong);color:var(--ui-fg)}
.lc-toast-error{border-color:var(--ui-danger-line);color:var(--ui-danger)}

/* ---------- 认证页专用容器 ---------- */
.auth-wrap{max-width:400px;margin:0 auto;padding:64px 24px}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ui-fg-muted)}
.checkbox-row input{width:auto}

/* ============================================================
   新增组件（响应式 / 加载态 / 数据展示 / 无障碍）
   纯增量，沿用 --ui-* 设计 token 与 MONO 风格
   ============================================================ */

/* ---------- 通用头像（首字母） ---------- */
.avatar{width:28px;height:28px;flex:0 0 28px;border:1px solid var(--ui-line-strong);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:12px;color:var(--ui-fg-muted);background:var(--ui-surface-2);text-transform:uppercase;
  user-select:none;overflow:hidden}
.avatar.lg{width:36px;height:36px;flex-basis:36px;font-size:14px}

/* ---------- 加载指示 ---------- */
.spinner{width:16px;height:16px;border:1.5px solid var(--ui-line-strong);
  border-top-color:var(--ui-fg);border-radius:0;display:inline-block;
  animation:lc-spin .7s linear infinite;vertical-align:-3px}
.spinner.lg{width:22px;height:22px;border-width:2px}
@keyframes lc-spin{to{transform:rotate(360deg)}}
.btn-primary .spinner{border-top-color:var(--ui-bg)}
.btn .spinner{border-top-color:var(--ui-fg)}

/* 按钮加载态：禁用 + 文字替换由 JS 控制，这里仅保证禁用观感 */
.btn[disabled],.btn-primary[disabled]{opacity:.6;cursor:not-allowed}

/* ---------- 骨架屏（异步加载占位） ---------- */
.skeleton{position:relative;background:var(--ui-surface-2);border:1px solid var(--ui-line);
  overflow:hidden;min-height:16px}
.skeleton::after{content:"";position:absolute;inset:0;
  background:var(--ui-line-strong);opacity:0;
  animation:lc-shimmer 1.2s infinite}
@keyframes lc-shimmer{0%{opacity:0}50%{opacity:.5}100%{opacity:0}}
@keyframes lc-shimmer{100%{transform:translateX(100%)}}
.sk-stat{height:64px}
.sk-row{height:56px;margin-bottom:10px}

/* ---------- 字符计数 ---------- */
.char-counter{font-family:var(--mono);font-size:11px;color:var(--ui-fg-muted);
  text-align:right;margin-top:4px}
.char-counter.over{color:var(--ui-danger)}

/* ---------- 移动端导航（汉堡菜单） ---------- */
.nav-toggle{display:none;background:transparent;border:1px solid var(--ui-line-strong);
  color:var(--ui-fg);width:34px;height:34px;font-family:var(--mono);font-size:15px;cursor:pointer;
  align-items:center;justify-content:center}
@media (max-width:720px){
  .navbar{padding:12px 16px}
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--ui-surface);border-bottom:1px solid var(--ui-line-strong);
    padding:8px 0;display:none;z-index:50}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 16px}
  .navbar .theme-toggle{margin-left:auto}
  /* 移动端让主题切换与汉堡并排 */
  .navbar > .theme-toggle{order:3}
  .nav-toggle{order:2}
  .nav-links{order:4}
  .brand{order:1}
}

/* ---------- 聚焦可见性（无障碍） ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.chk:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}

/* ---------- 全局动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- 移动端间距微调（不影响桌面） ---------- */
@media (max-width:560px){
  .container,.auth-wrap{padding-left:16px;padding-right:16px}
  .card{padding:16px}
  .grid-2{grid-template-columns:1fr}
  .stat{--s:calc(50% - 8px)}
  .stat{margin:0}
  .row{flex-wrap:wrap}
  .row.grow input{flex:1 1 100%}
  .cmt{padding:12px}
  .lc-toast-item{font-size:12px;padding:9px 14px}
}