/* 口袋工具箱 shared styles */
:root{
  --bg:#F3F5F2; --ink:#1B2A32; --sub:#5B6B72; --card:#FFFFFF; --line:#DDE4DF;
  --c:#0E7490; /* page accent, overridden per category */
  --c-fin:#A16207; --c-unt:#0E7490; --c-dat:#C2410C; --c-lif:#4D7C0F; --c-txt:#475569; --c-img:#3454D1; --c-med:#C2366B; --c-hea:#2F855A; --c-ast:#6D4AC0;
  --radius:14px; --serif:"Noto Serif TC","PMingLiU",serif;
  --sans:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans)}
body[data-cat="fin"]{--c:var(--c-fin)} body[data-cat="img"]{--c:var(--c-img)}
body[data-cat="med"]{--c:var(--c-med)} body[data-cat="hea"]{--c:var(--c-hea)}
body[data-cat="ast"]{--c:var(--c-ast)}
body[data-cat="unt"]{--c:var(--c-unt)} body[data-cat="dat"]{--c:var(--c-dat)} body[data-cat="lif"]{--c:var(--c-lif)} body[data-cat="txt"]{--c:var(--c-txt)}
a{color:var(--c)}
h1,h2,h3{font-family:var(--serif);line-height:1.3;margin:0 0 .4em}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:52px}
.top a.home{color:#fff;text-decoration:none;font-weight:700;font-family:var(--serif);font-size:17px;display:flex;align-items:center;gap:8px}
.top .dot{width:10px;height:10px;border-radius:3px;background:var(--c);display:inline-block}
.top .cat{margin-left:auto;font-size:14px;color:#C9D4D9}

/* tool chip nav */
.chips{position:sticky;top:52px;z-index:19;background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;gap:8px;overflow-x:auto;padding:10px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:7px 14px;font:14px var(--sans);cursor:pointer;border-left:4px solid var(--c)}
.chips button.on{background:var(--c);border-color:var(--c);color:#fff}

/* tool card */
main{padding:18px 0 60px}
.tool{display:none}
.tool.on{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;margin:0 0 14px}
.tool>h2{font-size:22px;padding-left:12px;border-left:5px solid var(--c)}
.tool .hint{color:var(--sub);font-size:14px;margin:-4px 0 12px;padding-left:17px}

/* forms */
.field{margin:0 0 12px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--sub);margin-bottom:4px}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:16px var(--sans);
  background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--c);outline-offset:1px;border-color:var(--c)}
input[type=range]{width:100%;accent-color:var(--c)}
input[type=file]{font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.field{flex:1 1 130px;margin-bottom:12px}
.btn{display:inline-block;border:0;background:var(--c);color:#fff;font:600 15px var(--sans);
  padding:11px 20px;border-radius:10px;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--c);border:1.5px solid var(--c)}
.btn.sm{padding:7px 12px;font-size:13.5px;border-radius:8px}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.check{display:flex;align-items:center;gap:8px;font-size:15px}
.check input{width:18px;height:18px;accent-color:var(--c)}

/* results */
.result{background:linear-gradient(0deg,rgba(0,0,0,.02),rgba(0,0,0,.02));border:1.5px dashed var(--c);
  border-radius:var(--radius);padding:14px 16px;margin-top:12px}
.result .big{font:800 30px/1.2 var(--mono);color:var(--c);font-variant-numeric:tabular-nums;word-break:break-all}
.result .lbl{font-size:13px;color:var(--sub)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:8px}
.kv>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.kv b{display:block;font:700 18px var(--mono);font-variant-numeric:tabular-nums}
.neg{color:#C0392B!important}.pos{color:#1E8449!important}
table.tb{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
table.tb th,table.tb td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:right;font-variant-numeric:tabular-nums}
table.tb th{color:var(--sub);font-weight:600;background:rgba(0,0,0,.03)}
table.tb td:first-child,table.tb th:first-child{text-align:left}
.tbwrap{overflow-x:auto}
.note{font-size:13px;color:var(--sub);margin-top:10px}
.status{font-size:14px;color:var(--c);font-weight:600;min-height:1.4em;margin-top:8px}
canvas.prev{max-width:100%;border:1px solid var(--line);border-radius:10px;background:
  repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;touch-action:none;display:block}
img.prev{max-width:100%;border-radius:10px;border:1px solid var(--line)}
video.prev,audio.prev{width:100%;border-radius:10px;background:#000}
audio.prev{background:none}
.badge{display:inline-block;background:var(--c);color:#fff;border-radius:6px;font-size:12px;padding:2px 8px;vertical-align:middle}

/* homepage */
.hero{background:var(--ink);color:#fff;padding:44px 0 34px}
.hero h1{font-size:clamp(30px,7vw,44px);font-weight:900;margin:0 0 10px}
.hero h1 em{font-style:normal;color:#7BD3C8}
.hero p{color:#B8C6CC;margin:0;font-size:15.5px}
.search{margin:18px 0 0}
.search input{border-radius:12px;border:0;padding:13px 16px;font-size:16px}
.cats{padding:26px 0 70px}
.cat-sec{margin:0 0 26px}
.cat-sec h2{display:flex;align-items:center;gap:10px;font-size:20px}
.cat-sec h2 .sq{width:14px;height:14px;border-radius:4px;background:var(--cc)}
.cat-sec h2 .n{margin-left:auto;font:600 13px var(--mono);color:var(--sub)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.tcard{display:block;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--cc);
  border-radius:12px;padding:12px 12px;text-decoration:none;color:var(--ink)}
.tcard:active{background:#F0F3F0}
.tcard b{display:block;font-size:15px;line-height:1.35}
.tcard span{font-size:12.5px;color:var(--sub);display:block;margin-top:3px;line-height:1.45}
footer{border-top:1px solid var(--line);padding:20px 0 34px;color:var(--sub);font-size:13px}
.hide{display:none!important}
@media(max-width:480px){ .grid{grid-template-columns:1fr 1fr} .result .big{font-size:25px} }