/* ============================================================
   线报酷实用工具箱 /tools.html — v20261025b
   视觉语言对齐 style/dingyue.css（站内独立页统一口径）：
   1280 容器 / surface 白卡 + shadow-ring / eyebrow + fs-28 hero /
   编号小节标题 / c-input + c-btn。只用 var(--token)，夜间与主题自动适配。
   JS（script/tools.js）依赖的类名：xbtool-urlrow / xbtool-btn-mini /
   xbtool-final / xbtool-chain / xbtool-kouling / xbtool-qrc / xbtool-res /
   xbtool-toast，改名前先查。
   ============================================================ */

.xbtool-page{max-width:var(--container,1280px);margin:0 auto;padding:20px 24px 56px;color:var(--text);font-size:var(--fs-14);box-sizing:border-box}

/* ---------------- Hero ---------------- */
.xbtool-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px 30px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-ring-sm)}
.xbtool-eyebrow{margin:0 0 8px;font-size:var(--fs-12);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.xbtool-hero h1{margin:0 0 10px;font-size:var(--fs-28);font-weight:var(--fw-700);line-height:1.25;letter-spacing:-.01em}
.xbtool-hero-sub{margin:0;max-width:56ch;font-size:var(--fs-14);line-height:1.7;color:var(--text-2)}
.xbtool-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.xbtool-stats{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:10px}
.xbtool-stat{padding:14px 16px;border-radius:var(--radius);background:var(--surface-2);text-align:center}
.xbtool-stat-v{display:block;font-size:var(--fs-22);font-weight:var(--fw-700);font-variant-numeric:tabular-nums;line-height:1.2}
.xbtool-stat-l{display:block;margin-top:4px;font-size:var(--fs-12);color:var(--text-3)}
.xbtool-stat-free .xbtool-stat-v{color:var(--success-text)}

/* ---------------- 隐私提示条（对齐 xbdy-notice） ---------------- */
.xbtool-notice{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 16px;border-radius:var(--radius);background:var(--warning-bg);color:var(--warning-text);font-size:var(--fs-13);line-height:1.65}

/* ---------------- 编号小节 ---------------- */
.xbtool-sec{margin-top:34px;scroll-margin-top:76px}
.xbtool-sec-hd{margin-bottom:16px}
.xbtool-sec-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xbtool-sec-idx{font-size:var(--fs-12);font-weight:var(--fw-600);font-variant-numeric:tabular-nums;color:var(--text-3);letter-spacing:.06em}
.xbtool-sec-title h2{margin:0;font-size:var(--fs-22);font-weight:var(--fw-700);line-height:1.3}
.xbtool-pill{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);font-size:var(--fs-12);font-weight:var(--fw-600);white-space:nowrap}
.xbtool-sec-sub{margin:6px 0 0;color:var(--text-2);line-height:1.7}

/* ---------------- 工具面板卡（对齐 xbdy-pick 卡片语言） ---------------- */
.xbtool-panel{padding:20px 22px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-ring-sm)}
.xbtool-row{display:flex;gap:10px;flex-wrap:wrap}
.xbtool-row .c-input{flex:1 1 260px;min-width:0}
textarea.c-input.xbtool-area{width:100%;flex:none;min-height:110px}
.xbtool-res{margin-top:12px;border-radius:var(--radius);background:var(--surface-2);padding:12px 14px;font-size:var(--fs-13);line-height:1.9;word-break:break-all;display:none}
.xbtool-res.show{display:block}
.xbtool-res .err{color:var(--danger-text)}
.xbtool-res .tip{color:var(--text-3)}
.xbtool-chain{color:var(--text-3);margin:6px 0 0;padding-left:0;list-style:none}
.xbtool-chain li{padding:1px 0}
.xbtool-final{display:flex;gap:8px;align-items:flex-start;margin-top:8px}
.xbtool-final code{flex:1 1 auto;min-width:0;background:var(--surface);border-radius:var(--radius-sm);padding:8px 10px;font-size:var(--fs-13);line-height:1.6}
.xbtool-btn-mini{flex-shrink:0;border:0;background:var(--surface);box-shadow:var(--shadow-ring-sm);border-radius:var(--radius-sm);padding:6px 12px;font-size:var(--fs-12);cursor:pointer;color:var(--text);transition:color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.xbtool-btn-mini:hover{color:var(--primary);box-shadow:var(--shadow-ring-strong)}
.xbtool-btn-mini.on{background:var(--success);color:var(--success-text);box-shadow:none}
.xbtool-urlrow{padding:7px 0;border-bottom:1px solid var(--row-border)}
.xbtool-urlrow:last-child{border-bottom:none}
.xbtool-urlrow .src{color:var(--text-3);font-size:var(--fs-12)}
.xbtool-urlrow .dst{margin-top:2px}
.xbtool-urlrow .dst.err{color:var(--danger-text);font-size:var(--fs-12)}
.xbtool-kouling{margin-top:10px}
.xbtool-kouling code{display:inline-block;background:var(--surface);box-shadow:var(--shadow-ring-sm);border-radius:var(--radius-sm);padding:4px 10px;margin:3px 6px 0 0;font-size:var(--fs-13);cursor:pointer}
/* 二维码铁律豁免（同 xbdy-qr-bg 口径）：码图必须白底深码才扫得出，白底由 JS 画进画布 */
.xbtool-qrc{margin-top:14px;display:none;flex-direction:column;align-items:center;gap:10px}
.xbtool-qrc.show{display:flex}
.xbtool-qrc canvas{max-width:100%;height:auto;border-radius:var(--radius-sm);box-shadow:var(--shadow-ring-sm)}
.xbtool-note{font-size:var(--fs-12);color:var(--text-3);margin:12px 0 0;line-height:1.8}

/* ---------------- 顺手看看（对齐 xbdy-pick） ---------------- */
.xbtool-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.xbtool-pick{display:block;padding:18px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-ring-sm);text-decoration:none;color:inherit;transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.xbtool-pick:hover{transform:translateY(-2px);box-shadow:var(--shadow-ring-lg);color:inherit}
.xbtool-pick:focus-visible{outline:none;box-shadow:0 0 0 1px var(--focus-ring),0 0 0 4px var(--focus-halo)}
.xbtool-pick-hd b{font-size:var(--fs-15);font-weight:var(--fw-600)}
.xbtool-pick-tx{margin:4px 0 0;font-size:var(--fs-13);color:var(--text-2);line-height:1.65}
.xbtool-pick-go{margin-top:10px;font-size:var(--fs-13);color:var(--text);font-weight:var(--fw-600)}
.xbtool-pick:hover .xbtool-pick-go{color:var(--primary)}

.xbtool-toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(8px);background:var(--foreground);color:var(--background);border-radius:var(--radius-pill);padding:8px 18px;font-size:var(--fs-13);opacity:0;pointer-events:none;transition:all .25s ease;z-index:9999;max-width:86vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xbtool-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:768px){
    .xbtool-page{padding:14px 14px 40px}
    .xbtool-hero{grid-template-columns:1fr;padding:20px;gap:18px}
    .xbtool-hero h1{font-size:var(--fs-24,1.5rem)}
    .xbtool-stats{grid-template-columns:repeat(2,1fr)}
    .xbtool-panel{padding:16px}
    .xbtool-row .c-btn{flex:1 1 100%}
    .xbtool-sec{margin-top:26px}
}