/* =========================================================================
 * site-shared.css — 站点（前台）设计系统 · 单一来源
 * -------------------------------------------------------------------------
 * 本文件是「前台」所有页面的共享样式唯一来源（令牌 / 主题 / 导航 / 搜索 /
 * 主题切换 / 页脚 / 基础布局 / 响应式 / 复用组件）。
 * 任何页面只需 <link rel="stylesheet" href=".../partials/site-shared.css">，
 * 不再内联重复样式。导航与页脚的结构来源见 site-nav.html / site-footer.html，
 * 真实实现由 site-base.html 经 Jinja2 {% include %} 注入。
 *
 * 设计语言：欧美·冷中性。默认 Pretty White，可切 Tech Dark（下拉控制，
 * localStorage 持久化，不由系统深色模式接管）。
 * ========================================================================= */

/* ===== 站点令牌（欧美·冷中性）— 权威值见 Beaver-native-UI设计.md §2.2 ===== */
:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --text:#1E293B; --heading:#0F172A;
  --accent:#2563EB; --border:#E2E8F0; --shadow:0 1px 3px rgba(15,23,42,.08);
  --danger:#DC2626; --success:#059669; --muted:#64748B;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --radius:8px; --radius-sm:6px;
  --font-sm:12px; --font-base:14px; --font-lg:18px; --font-xl:24px; --font-2xl:40px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* 全站内容宽度上限（唯一事实源）：容器宽度 = min(视口宽, 1440px)，随页面宽度变化 */
  --page-max:1440px;
  --page-gutter:var(--space-5);
}

/* ===== 站点主题：Pretty White（默认）/ Tech Dark — 值同 UI设计.md §2.2 ===== */
body[data-theme="white"]{--bg:#F7F8FA;--surface:#FFFFFF;--text:#1E293B;--heading:#0F172A;--accent:#2563EB;--border:#E2E8F0;--shadow:0 1px 3px rgba(15,23,42,.08);--danger:#DC2626;--success:#059669;--muted:#64748B}
body[data-theme="dark"]{--bg:#0F172A;--surface:#1E293B;--text:#E2E8F0;--heading:#F8FAFC;--accent:#60A5FA;--border:#334155;--shadow:0 1px 3px rgba(0,0,0,.4);--danger:#F87171;--success:#34D399;--muted:#94A3B8}

/* ===== 主题切换下拉 ===== */
.theme-sel{flex:0 0 auto;margin-left:auto;font-family:var(--font-sans);font-size:var(--font-sm);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;cursor:pointer}

/* ===== 搜索框（导航内） ===== */
.search{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;flex:0 0 220px;min-width:140px;height:34px}
.search-ic{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;flex:0 0 16px}
.search-input{border:none;background:transparent;outline:none;color:var(--text);font-size:var(--font-sm);font-family:var(--font-sans);width:100%}
.search-input::placeholder{color:var(--muted)}
.search-btn{border:none;background:var(--accent);color:#fff;font-family:var(--font-sans);font-size:var(--font-sm);font-weight:600;padding:0 14px;height:22px;border-radius:var(--radius-sm);cursor:pointer;flex:0 0 auto;transition:filter .15s}
.search-btn:hover{filter:brightness(1.08)}

/* ===== 基础布局 ===== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);font-size:var(--font-base);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}

/* ===== 顶部导航（横向标签）· 结构来源 site-nav.html =====
   宽度与 .container 共用 --page-max；搜索框固定宽度不被压缩。
   8 个以内保持单行横向滚动；分类太多（>8）时模板输出 .tabs-multiline，
   导航项在「logo 与搜索框之间」的可用宽度内自动换行，放不下的落到下一行，
   不再靠横向滚动才能看全部分类。 */
.nav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.nav-inner{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter);display:flex;align-items:center;flex-wrap:nowrap;gap:var(--space-4);min-height:64px}
.logo{flex:0 0 auto;font-size:var(--font-lg);font-weight:700;color:var(--heading);display:flex;align-items:center;gap:8px}
.logo svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:2}
.tabs{display:flex;flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;gap:2px;scrollbar-width:thin}
.tabs a{flex:0 0 auto;white-space:nowrap;padding:10px 12px;color:var(--muted);font-weight:600;font-size:var(--font-base);border-bottom:2px solid transparent}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.active{color:var(--accent);border-bottom-color:var(--accent)}
/* 分类过多：按搜索框左侧的可用宽度自动折行，行高略收紧避免导航过高 */
.tabs.tabs-multiline{flex-wrap:wrap;overflow-x:visible;align-content:center;gap:2px;padding:6px 0}
.tabs.tabs-multiline a{padding:6px 12px}

/* ===== 首屏（大留白） =====
   简介段落与页面主内容区同宽：.hero 位于 .container 内，容器宽度由
   --page-max 统一决定，因此这里不再单独限宽，随页面宽度同步变化。 */
.hero{width:100%;padding:var(--space-6) 0}
.hero h1{font-size:var(--font-2xl);font-weight:700;color:var(--heading);line-height:1.2;letter-spacing:-.5px}
.hero p{width:100%;max-width:100%;color:var(--muted);font-size:var(--font-lg);margin-top:var(--space-4);line-height:1.7}

/* ===== 分类导航（横向标签） ===== */
.cats{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0 var(--space-5) var(--space-5)}
.cat{padding:6px 14px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:var(--font-sm);font-weight:600;background:var(--surface)}
.cat.active{color:var(--accent);border-color:var(--accent)}
.cat:hover{text-decoration:none;color:var(--accent)}

/* ===== 工具卡片网格 ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5);padding:0 0 var(--space-6)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-5);transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 4px 14px rgba(15,23,42,.10);transform:translateY(-2px)}
.card .name{font-size:var(--font-lg);font-weight:700;color:var(--heading);margin-bottom:6px}
.card .desc{color:var(--muted);font-size:var(--font-base);margin-bottom:var(--space-4)}
.badge{display:inline-block;font-size:11px;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:999px;padding:2px 10px}

.section-title{font-size:var(--font-xl);font-weight:700;color:var(--heading);margin:var(--space-6) 0 var(--space-4)}
.sub{color:var(--muted);margin-bottom:var(--space-5)}

/* ===== 详情页（关于 / 文档 / 工具详情通用） ===== */
.detail{max-width:760px}
.detail h1{font-size:var(--font-2xl);font-weight:700;color:var(--heading);margin-bottom:var(--space-3)}
.detail .lead{color:var(--muted);font-size:var(--font-lg);margin-bottom:var(--space-5)}
.detail p{margin-bottom:var(--space-4)}
.detail h2{font-size:var(--font-xl);font-weight:700;color:var(--heading);margin:var(--space-6) 0 var(--space-3)}
.divider{height:1px;background:var(--border);margin:var(--space-6) 0}

/* ===== 隐私统计开关 ===== */
.toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-5)}
.toggle-row .t-label{font-weight:600;color:var(--heading)}
.toggle-row .t-sub{color:var(--muted);font-size:var(--font-sm);margin-top:2px}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 46px}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:.2s;cursor:pointer}
.switch .track::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::before{transform:translateX(20px)}

.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-weight:600;font-size:var(--font-base);border:none;border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}

/* ===== 页脚 · 结构来源 site-footer.html ===== */
.footer{border-top:1px solid var(--border);margin-top:var(--space-6);padding:var(--space-6) var(--space-5)}
.footer .f-inner{width:100%;max-width:var(--page-max);margin:0 auto;color:var(--muted);font-size:var(--font-sm);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4)}
.footer a{color:var(--muted)}

.back{display:inline-block;margin:var(--space-5) 0 0;font-weight:600}

/* ===== 响应式：容器 / 导航 / 首屏随页面宽度自适应 ===== */
@media(min-width:1600px){
  :root{--page-max:1520px}
}
@media(max-width:1200px){
  .nav-inner{gap:var(--space-3)}
  .tabs a{padding:10px 9px}
}
@media(max-width:1024px){
  .search{flex:0 0 180px;min-width:120px}
  .hero h1{font-size:34px}
  .hero p{font-size:var(--font-base)}
}
@media(max-width:900px){
  /* 导航栏改为三行：logo+主题 / 搜索 / 分类横向滚动，不再互相挤压 */
  .nav-inner{flex-wrap:wrap;min-height:0;padding:10px var(--page-gutter);gap:8px}
  .logo{flex:1 1 auto}
  .theme-sel{order:2;margin-left:0}
  .search{order:3;flex:1 1 100%;min-width:0}
  .tabs{order:4;flex:1 1 100%;width:100%;gap:4px;padding-bottom:2px}
}
@media(max-width:639px){
  .container{padding:0 var(--space-4)}
  .nav-inner{padding:10px var(--space-4)}
  .hero{padding:var(--space-5) 0}
  .hero h1{font-size:28px}
  .cats{padding:0 0 var(--space-4)}
  .grid{padding:0 0 var(--space-5)}
  .tabs a{padding:8px 10px}
}

/* ===== Beaver 注入组件（由 render.py 生成，勿手改；改这里后重跑 sync_assets.py） ===== */
/* 广告位：尺寸随广告内容自适应 —— 不写死宽高，用 fit-content 收缩包裹并居中；
   超过容器宽度时由 max-width:100% 收敛，内部媒体元素保持其自身尺寸且可缩放。
   异步注入的广告（脚本/iframe）加载后浏览器会按内容重排，槽位自动跟随变化。 */
.site-ads{display:flex;flex-direction:column;align-items:center}
.site-ads-top{margin-top:var(--space-5)}
.site-ads-bottom{margin-bottom:var(--space-5)}
.ad-slot{display:block;width:fit-content;max-width:100%;min-width:0;box-sizing:border-box;margin:var(--space-5) auto;padding:10px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);font-size:var(--font-sm);text-align:center;background:var(--surface);overflow:visible}
.ad-slot:empty{display:none}
.ad-slot img,.ad-slot video,.ad-slot canvas{max-width:100%;height:auto;display:block;margin:0 auto}
.ad-slot iframe,.ad-slot ins,.ad-slot embed,.ad-slot object,.ad-slot>a{max-width:100%;display:block;margin:0 auto}
.btn-sm{padding:6px 12px;font-size:var(--font-sm)}
/* Cookie 同意横幅：默认悬浮在站点首页右下角（内容与按钮见 ads.json 合规配置） */
.cookie-bar{position:fixed;right:var(--space-4);bottom:var(--space-4);left:auto;max-width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 30px rgba(15,23,42,.16);z-index:30}
.cookie-bar .cb-inner{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);padding:var(--space-4);color:var(--text);font-size:var(--font-sm)}
.cookie-bar .cb-text{line-height:1.6}
.cookie-bar .cb-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}
.cookie-bar .cb-actions .btn{cursor:pointer}
.cookie-bar .cb-actions .btn-ghost{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.cookie-bar .cb-actions .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:639px){
  .cookie-bar{right:var(--space-3);bottom:var(--space-3);left:var(--space-3);max-width:none}
}
.detail ul{margin:0 0 var(--space-4) var(--space-5)}
.detail li{margin-bottom:6px}
code{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:var(--font-sm)}