/* =========================================================================
   全站统一主题（与首页 index.html 完全一致）
   - 通过 html[data-theme="dark" | "light"] 覆盖各工具页内联 / 旧变量，
     使所有页面共享同一套配色与明暗切换。
   - 保留旧工具页变量别名（--panel/--panel2/--bd/--tx/--mut/--acc2），
     旧页无需改代码即可自动套用新主题。
   - 复用首页的 localStorage 键 devstation_theme，与首页切换状态互通。
   特异性：html[data-theme=...] 为 (0,1,1)，高于各页内联 :root (0,1,0)，
   故本文件始终优先生效，无需改动任何页面本体。
   ========================================================================= */
html[data-theme="dark"] {
  --bg: #0b0f17;
  --surface: #131a26;
  --surface-2: #1a2230;
  --border: #26304180;
  --text: #e6ebf5;
  --muted: #8b97ad;
  --acc: #818cf8;
  --acc-2: #34d399;
  /* 主色的"文字版"：用于需要高对比度的文字（如导航当前页）。
     浅色主题下 --acc(#6366f1) 落在浅底上仅约 4.0:1，故浅色用更深的靛蓝。 */
  --acc-ink: #818cf8;
  --ok: #34d399;
  --danger: #f87171;
  /* 主按钮配色：白字 + 深靛蓝底（对比度 ≈5.2:1，避免浅色主题下深色字看不清） */
  --btn-bg: #5b5ae0;
  --btn-fg: #ffffff;
  /* 收藏“已收藏”态文字色：深色主题用亮金；浅色主题用深琥珀以保证对比度 */
  --fav-on: #f5b301;
  --card-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
  --radius: 16px;
  /* 旧工具页变量别名（指向新主题变量） */
  --panel: var(--surface);
  --panel2: var(--surface-2);
  --bd: var(--border);
  --tx: var(--text);
  --mut: var(--muted);
  --acc2: var(--acc-2);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --border: #d8deea;
  --text: #1a2030;
  --muted: #5b6478;
  --acc: #6366f1;
  --acc-2: #059669;
  /* 浅色主题的文字版主色：对比度约 7:1（--acc 只有 4.0:1，不适合做小字） */
  --acc-ink: #4338ca;
  --ok: #059669;
  --danger: #dc2626;
  /* 主按钮配色：白字 + 深靛蓝底（对比度 ≈6.3:1） */
  --btn-bg: #4f46e5;
  --btn-fg: #ffffff;
  /* 收藏“已收藏”态文字色：浅色主题下改用深琥珀，避免金底金字看不清 */
  --fav-on: #b45309;
  --card-shadow: 0 10px 30px -14px rgba(20,30,60,.22);
  --panel: var(--surface);
  --panel2: var(--surface-2);
  --bd: var(--border);
  --tx: var(--text);
  --mut: var(--muted);
  --acc2: var(--acc-2);
  color-scheme: light;
}

/* 浮动主题切换按钮（视觉与首页 .icon-btn 一致） */
.dev-theme-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 200;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--card-shadow);
  transition: .18s;
}
.dev-theme-btn:hover { border-color: var(--acc); color: var(--acc); }
@media (max-width: 640px) { .dev-theme-btn { top: 12px; right: 12px; } }

/* =========================================================================
   顶部导航（与首页 header 完全一致的玻璃吸顶栏）
   - 放在 theme.css 内是因为全站 121 个工具页都引用了 theme.css，
     无需再为每个页面单独加样式表即可统一套用。
   ========================================================================= */
.site-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:14px 24px;
  background:color-mix(in srgb,var(--panel) 72%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--bd);
}
.site-nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:.2px;white-space:nowrap;color:var(--tx);text-decoration:none}
.site-nav .brand .logo{height:38px;width:auto;border-radius:6px;display:block;filter:drop-shadow(0 4px 12px -4px var(--acc))}
html[data-theme="light"] .site-nav .brand .logo{filter:none}
.site-nav .brand .name b{color:var(--acc)}
.site-nav .topbar-spacer{flex:1}
.site-nav .top-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;color:var(--mut);font-size:14px;font-weight:600;transition:.18s;text-decoration:none;background:transparent;border:0;cursor:pointer;white-space:nowrap;flex:none}
.site-nav .top-link:hover{color:var(--tx);background:var(--panel2)}
/* 当前所在页：用主色 + 内描边标出，避免用户在导航里点到"自己"却毫无反馈 */
.site-nav .top-link[aria-current="page"]{color:var(--acc-ink,var(--acc));background:var(--panel2);box-shadow:inset 0 0 0 1px var(--bd);cursor:default}
.site-nav .top-link[aria-current="page"]:hover{color:var(--acc-ink,var(--acc));background:var(--panel2)}
.site-nav .icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;cursor:pointer;background:var(--panel2);border:1px solid var(--bd);color:var(--tx);font-size:17px;transition:.18s;padding:0;line-height:1}
.site-nav .icon-btn:hover{border-color:var(--acc);color:var(--acc)}
@media(max-width:1100px){
  /* 平板宽度：先隐藏品牌文字并收紧间距，让导航项的文字标签尽量保留 */
  .site-nav{padding:12px 16px;gap:10px}
  .site-nav .brand .name{display:none}
  .site-nav .top-link{padding:8px 9px;font-size:13px}
}
@media(max-width:820px){
  /* 再窄就只能留图标（锚点内文字仍在 DOM 中，读屏可读） */
  .site-nav{padding:12px 14px;gap:8px}
  .site-nav .top-link span{display:none}
}
@media(max-width:420px){
  .site-nav{gap:4px}
  .site-nav .top-link{padding:8px}
  .site-nav .icon-btn{width:34px;height:34px}
}

/* 页面标题块（原 .wrap > header 迁移而来） */
.page-head{margin:0}
.page-head h1{margin:0 0 4px;font-size:22px}
.page-head p{margin:0 0 24px;color:var(--mut)}

/* =========================================================================
   命令面板（Ctrl/Cmd+K）—— 任意页面秒切工具
   ========================================================================= */
.nav-search{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--bd);color:var(--mut);font-size:13px;cursor:pointer;transition:.18s;font-family:inherit}
.nav-search:hover{border-color:var(--acc);color:var(--acc)}
.nav-search .kbd{font-size:11px;padding:1px 5px;border-radius:4px;border:1px solid var(--bd);background:var(--panel);color:var(--mut);font-family:ui-monospace,monospace}
@media(max-width:760px){.nav-search .label,.nav-search .kbd{display:none}.nav-search{padding:8px}}

.cmdk-mask{position:fixed;inset:0;z-index:300;background:color-mix(in srgb,#000 55%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;padding:0 16px}
.cmdk-mask.on{display:block}
.cmdk{max-width:580px;margin:11vh auto 0;background:var(--panel);border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 28px 70px -18px rgba(0,0,0,.55)}
.cmdk-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.cmdk-top .mag{font-size:16px;color:var(--mut)}
.cmdk-top input{flex:1;border:none;outline:none;background:transparent;color:var(--tx);font-size:15px;font-family:inherit;padding:0}
.cmdk-top .esc{font-size:11px;padding:2px 6px;border-radius:5px;border:1px solid var(--bd);color:var(--mut);cursor:pointer;font-family:ui-monospace,monospace}
.cmdk-list{max-height:min(52vh,420px);overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;text-decoration:none;color:var(--tx)}
.cmdk-item.on{background:var(--panel2);outline:1px solid var(--bd)}
.cmdk-item .ci{font-size:17px;width:22px;text-align:center;flex:none}
.cmdk-item .cb{min-width:0;flex:1}
.cmdk-item .cn{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .cd{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .cc{font-size:11px;color:var(--mut);padding:2px 7px;border-radius:999px;background:var(--panel2);flex:none}
.cmdk-empty{padding:30px 16px;text-align:center;color:var(--mut);font-size:13px}
.cmdk-foot{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--bd);font-size:11.5px;color:var(--mut)}

/* =========================================================================
   相关工具推荐（工具页底部，由 tool-extras.js 渲染）
   ========================================================================= */
.related{margin:36px 0 8px;padding-top:24px;border-top:1px solid var(--bd)}
.related>h2{margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
/* 卡片栅格：minmax(215px,1fr) 保证中文描述有 2 行空间；auto-fill 自适应列数 */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;align-items:stretch}
.related-item{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--panel2);text-decoration:none;color:var(--tx);transition:border-color .18s,transform .18s,box-shadow .18s;min-width:0}
.related-item:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(0,0,0,.55)}
/* 图标徽章：圆角方块，视觉重心与标题首行对齐 */
.related-item .rel-ic{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;border-radius:9px;background:var(--panel);border:1px solid var(--bd)}
/* 关键修复：span 默认 inline，overflow/text-overflow 对其无效，必须显式 flex/block + min-width:0 才能触发省略号截断 */
.related-item .rel-bx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.related-item .rel-n{display:block;max-width:100%;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-item .rel-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;font-size:11.5px;line-height:1.5;color:var(--mut);overflow:hidden;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
@media(max-width:640px){.related-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}}
@media(max-width:520px){.related-grid{grid-template-columns:1fr;gap:9px}.related-item{padding:11px 13px}}

/* =========================================================================
   反馈条（工具页底部）
   ========================================================================= */
.fb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0 30px;padding:12px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--panel2);font-size:12.5px;color:var(--mut)}
.fb-bar b{color:var(--tx);font-weight:600}
.fb-bar a,.fb-bar button{color:var(--acc);text-decoration:none;background:none;border:none;padding:0;font:inherit;cursor:pointer}
.fb-bar a:hover,.fb-bar button:hover{text-decoration:underline}
.fb-bar .fb-sep{color:var(--bd)}

/* =========================================================================
   移动端表格自适应
   背景：指南页 / 部分工具页的表格含较长英文单元格（如 "Java / JavaScript"），
   min-content 宽度会撑破 390px 视口，产生整页横向滚动条。
   方案：窄屏下允许单元格内任意断行，收紧内边距与字号，保持列对齐。
   ========================================================================= */
@media(max-width:640px){
  .guide table{font-size:12.5px;margin:12px 0}
  .guide th,.guide td{padding:6px 7px;overflow-wrap:anywhere;word-break:normal}
  .guide pre{font-size:12px;padding:12px}

  /* 数据表/参考表（端口表、子网表、cron 表等）：窄屏改为容器内横向滚动，
     避免宽表格把整页撑出横向滚动条；env 编辑表与 Markdown 预览表保持原样 */
  .wrap table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wrap table#tbl,#prev table{display:table;overflow:visible}
}

/* =========================================================================
   P1 · 复访与传播增强（收藏 / 分享 / 示例 / 移动栏 / 提示）
   ========================================================================= */
/* 导航内占位符（offline / 404 / favorites 页使用） */
.site-nav .nav-spacer{flex:1}

/* 页面右上角操作（收藏 / 分享 / 示例）—— 桌面与平板显示，移动端改用底部栏 */
.page-head{position:relative}
.page-actions{position:absolute;top:0;right:0;display:flex;gap:8px}
.pa-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:9px;
  border:1px solid var(--bd);background:var(--panel2);color:var(--tx);font-size:13px;font-weight:600;cursor:pointer;transition:.16s}
.pa-btn:hover{border-color:var(--acc)}
.pa-fav.on{color:var(--fav-on);border-color:var(--fav-on);background:color-mix(in srgb,var(--fav-on) 14%,var(--panel2))}
.pa-btn .ico{font-size:14px;line-height:1}

/* 移动端底部操作栏（≤640px 才显示） */
.mobile-bar{display:none}
@media(max-width:640px){
  .page-actions{display:none}
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;
    justify-content:space-around;align-items:stretch;gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:blur(12px);border-top:1px solid var(--bd)}
  .mb-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 4px;background:none;border:none;color:var(--tx);cursor:pointer;font:inherit}
  .mb-btn .ico{font-size:18px;line-height:1}
  .mb-btn .lb{font-size:11px;color:var(--mut)}
  .mb-fav.on .ico{color:var(--fav-on)}
  /* 仅当确实存在底部栏时，给内容留出空间（避免遮挡） */
  .wrap:has(~ .mobile-bar){padding-bottom:76px}
}

/* 轻提示气泡 */
.ds-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(10px);
  background:#1f2430;color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.2s;z-index:200}
.ds-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}