/* ============================================================================
   外观调试面板（仅本地开发时出现，上线自动隐藏）
   ----------------------------------------------------------------------------
   用法：页面里加两行
     <link rel="stylesheet" href="_tweaks.css">
     <script src="_tweaks.js" defer></script>

   它做的事：把 :root 上的 CSS 变量实时改掉，并给出可复制的 CSS。
   要求页面用统一的变量名：--ac / --bg / --panel / --line / --tx / --r ...
   ============================================================================ */

.tw-btn{
  position:fixed;right:18px;bottom:18px;z-index:9999;
  display:flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;border:1px solid rgba(0,0,0,.12);
  background:#fff;color:#111;font:600 13px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  cursor:pointer;box-shadow:0 6px 22px rgba(15,23,42,.16)}
.tw-btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(15,23,42,.22)}

.tw-panel{
  position:fixed;right:18px;bottom:66px;z-index:9999;width:290px;
  background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:16px;
  box-shadow:0 20px 60px rgba(15,23,42,.24);
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#111;
  overflow:hidden;display:none}
.tw-panel.open{display:block}
.tw-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #eef1f5;
  font-weight:700;font-size:13px}
.tw-hd i{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,#6366f1,#22d3ee)}
.tw-hd .x{margin-left:auto;cursor:pointer;color:#94a3b8;font-size:16px;line-height:1}
.tw-bd{padding:12px 14px;max-height:62vh;overflow:auto}
.tw-row{margin-bottom:13px}
.tw-row>label{display:block;font-size:11px;font-weight:700;color:#64748b;margin-bottom:6px;
  letter-spacing:.3px;display:flex;justify-content:space-between}
.tw-row>label em{font-style:normal;font-family:ui-monospace,Menlo,monospace;color:#0f172a;font-weight:600}
.tw-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tw-preset{border:1px solid #e4e8ef;background:#fff;border-radius:9px;padding:7px 4px;cursor:pointer;
  font:600 10.5px/1.35 inherit;color:#475569;text-align:center;transition:.14s}
.tw-preset:hover{border-color:#cbd5e1;background:#f8fafc}
.tw-preset.on{border-color:#111;color:#111;background:#f1f5f9}
.tw-preset span{display:block;width:100%;height:4px;border-radius:2px;margin-bottom:5px}
input[type=color]{width:100%;height:34px;padding:2px;border:1px solid #e4e8ef;border-radius:9px;
  background:#fff;cursor:pointer}
input[type=range]{width:100%;accent-color:#111;cursor:pointer}
.tw-btns{display:flex;gap:7px;margin-top:4px}
.tw-btns button{flex:1;padding:9px;border-radius:9px;border:1px solid #e4e8ef;background:#fff;
  font:700 12px inherit;color:#334155;cursor:pointer}
.tw-btns button.pri{background:#111;color:#fff;border-color:#111}
.tw-btns button:hover{opacity:.88}
.tw-out{width:100%;height:104px;margin-top:9px;padding:9px 10px;border:1px solid #e4e8ef;border-radius:9px;
  font:400 11px/1.6 ui-monospace,Menlo,monospace;color:#0f172a;background:#f8fafc;resize:vertical}
.tw-tip{font-size:10.5px;color:#94a3b8;margin-top:7px;line-height:1.6}