@charset "UTF-8";
/* ==================================================================================
   css/tools.css —— 012.tw 工具頁共用的「iOS 控件層」（v1.0.81 · 2026-09-16）
   ----------------------------------------------------------------------------------
   站方指示：「全部工具頁都強化 iOS 風格」。
   原本每個工具頁（pdf／image／text／excel／calculator／datetime／unit／crypto／currency／
   transfer／wheel／net）都在自己的 <style> 裡複製一份 .fld／.btn／.res／.dt-hero…（共 30+ 份），
   彼此數值還略有出入 → 改動一處要改十幾頁。2026-09-16 統一抽成本檔，各頁只留自己的版面規則。

   載入方式：在各頁的 <link …nav.css> **之後** 加
     <link rel="stylesheet" href="/css/tools.css?v=1.0.81">
   ⚠️ 一定要用**絕對路徑**（/css/…）：工具的功能頁網址含斜線（例 /tool-pdf/merge-pdf、
      /tool-net/ip-lookup），相對路徑會 404。

   涵蓋範圍（這些類別各頁原本都各自定義，現已移除，一律吃本檔）：
     .fld 表單列（label／checkbox→iOS 開關／input／select／textarea／file／color／range／hint／unit）
     .btn 按鈕（.ok／.main／:disabled）、.btn 的 :active 縮放回饋
     .res 結果卡（.b／.big／.sec／.up／.dn／.err）、.auto-on 膠囊提示、.reveal
     .dt-hero 頁首卡／.dt-tags 標籤膠囊、.pn 分頁、.kv 鍵值卡、.tbl 表格
     .iosg iOS「設定」分組清單、.pwbar iOS 分段強度條

   色票一律沿用站上 token（nav.css 的 --muted／--link／--text／--panel／--line／--hero-bg／
   --grad／--danger），iOS 控件用「半透明灰底 rgba(148,163,184,…)＋細邊＋內側高光」那一組數值
   （與首頁天氣卡的 iOS 下拉框、/tool-net/password-generator 同一套）。
   ================================================================================== */

/* ---------- 一、表單列 .fld ---------- */
.fld{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.fld label{font-size:13px;color:var(--muted);min-width:92px}
/* ⚠️ 卡片（.nh-card）本身 padding:0（nav.css 的設計：由各內容區塊自己帶內距），
   所以「直接掛在卡片或卡片那層 form 底下」的 .fld 若只有一行 .hint
   （例：/tool-currency 的「⇄ 可交換幣別…」、/tool-pdf 的「常用功能會自動排在前面…」），
   文字會貼齊卡片邊框 —— 2026-09-17 站方反映「文字太靠近 div」就是這個。
   這裡統一補左右內距（18px 與 .nh-card-hd 的水平內距一致）。
   ⚠️ 只鎖「直接子元素」：.iosg 這類自己帶內距／自己管 .fld 的容器完全不受影響。 */
.nh-card>.fld,.nh-card>form>.fld{padding-left:18px;padding-right:18px}
/* 勾選框 → iOS 式開關（42×23、圓形滑塊、開啟時品牌漸層）。
   ⚠️ 不需要額外標記：直接改造原生 input（appearance:none 之後 ::after 才吃得動），
      所以各頁舊的 <input type="checkbox"> 原封不動、JS 讀 .checked 也不用改。 */
.fld label.chk{min-width:auto;display:flex;align-items:center;gap:9px;color:#dbe7ff;cursor:pointer;-webkit-user-select:none;user-select:none}
.fld label.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:0 0 auto;width:42px;height:23px;margin:0;border-radius:12px;border:1px solid rgba(148,163,184,.45);background:rgba(148,163,184,.22);cursor:pointer;transition:background .18s,border-color .18s,transform .1s}
.fld label.chk input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#e2e8f0;transition:left .18s,background .18s}
.fld label.chk input[type=checkbox]:checked{background:linear-gradient(135deg,#22d3ee,#a78bfa);border-color:transparent}
.fld label.chk input[type=checkbox]:checked::after{left:21px;background:#02121d}
.fld label.chk input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px rgba(34,211,238,.35)}
.fld label.chk:active input[type=checkbox]{transform:scale(.96)}
/* 單行輸入／下拉：iOS 風（半透明灰底、細邊、圓角 11px、內側高光） */
.fld input[type=text],.fld input[type=password],.fld input[type=number],.fld input[type=search],.fld input[type=email],.fld input[type=url],.fld select{flex:1;min-width:110px;box-sizing:border-box;background:rgba(148,163,184,.17);border:1px solid rgba(148,163,184,.26);border-radius:11px;color:#eef4ff;padding:10px 12px;font-size:14px;outline:none;font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background .15s,border-color .15s,box-shadow .15s}
.fld input[type=text]:hover,.fld input[type=password]:hover,.fld input[type=number]:hover,.fld input[type=search]:hover,.fld input[type=email]:hover,.fld input[type=url]:hover,.fld select:hover{background:rgba(148,163,184,.23)}
.fld select option{background:#0d1f33;color:#eef4ff}
.fld textarea{flex:1;min-width:100%;width:100%;box-sizing:border-box;background:rgba(148,163,184,.17);border:1px solid rgba(148,163,184,.26);border-radius:11px;color:#eef4ff;padding:11px 12px;font-size:14px;font-family:inherit;line-height:1.7;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background .15s,border-color .15s,box-shadow .15s}
.fld input[type=file]{flex:1;min-width:180px;color:var(--muted);font-size:13px}
.fld input[type=color]{width:56px;height:38px;padding:5px;background:rgba(148,163,184,.17);border:1px solid rgba(148,163,184,.26);border-radius:11px;cursor:pointer}
/* 滑桿：iOS 風（細軌道 ＋ 白色圓形滑塊） */
.fld input[type=range]{flex:1;min-width:140px;height:4px;border-radius:999px;background:rgba(148,163,184,.32);-webkit-appearance:none;appearance:none;outline:none;margin:12px 0}
.fld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}
.fld input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}
.fld input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(34,211,238,.3)}
/* 聚焦：iOS 的藍／青聚焦環 */
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:rgba(56,189,248,.7);background:rgba(148,163,184,.23);box-shadow:0 0 0 3px rgba(34,211,238,.16)}
.fld .hint{font-size:11.5px;color:#6d86ad;width:100%}
.fld .unit{color:var(--muted);font-size:13px}

/* ---------- 二、按鈕 .btn（iOS 膠囊 ＋ 按下縮放回饋） ---------- */
.btn{border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.12);color:var(--link);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,transform .1s,border-color .15s,box-shadow .15s}
.btn:hover{background:rgba(34,211,238,.3);color:#fff}
.btn:active{transform:scale(.97)}
.btn.ok{background:#22d3ee;color:#02121c;border-color:transparent}
.btn.main{border:0;background:linear-gradient(135deg,#22d3ee,#a78bfa);color:#02121c;font-weight:700;padding:10px 22px;font-size:14px;box-shadow:0 6px 18px rgba(34,211,238,.22)}
.btn.main:active{transform:scale(.97);box-shadow:0 3px 10px rgba(34,211,238,.2)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- 三、結果卡 .res（iOS 內凹分組卡；不用虛線） ---------- */
.res{margin-top:12px;border:1px solid rgba(148,163,184,.22);border-radius:16px;padding:14px 16px;background:rgba(148,163,184,.08);font-size:14px;line-height:1.95;word-break:break-word}
.res b{color:var(--link)}
.res .big{font-size:20px;color:#fff;font-weight:800}
.res .sec{color:var(--muted);font-size:13px}
.res .up{color:#34d399}
.res .dn{color:#fb7185}
.res.err{color:var(--danger);border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.08)}
.auto-on{font-size:11.5px;color:var(--link);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);padding:5px 12px;border-radius:999px;margin-left:8px}
.reveal{opacity:1!important;transform:none!important}
form[id],section[id]{scroll-margin-top:76px}

/* ---------- 四、頁首卡 .dt-hero ／ 標籤 .dt-tags ---------- */
.dt-hero{margin:6px 0 18px;padding:22px 24px;border:1px solid rgba(56,189,248,.25);border-radius:18px;background:var(--hero-bg);position:relative;overflow:hidden}
.dt-hero h1{margin:0 0 8px;font-size:clamp(22px,3vw,30px);color:#fff}
.dt-hero h1 .hl{color:var(--link)}
.dt-hero p{margin:4px 0;color:var(--muted);font-size:14px;line-height:1.9}
.dt-tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.dt-tags a{display:inline-block;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);color:var(--link);border-radius:999px;padding:6px 14px;font-size:12.5px;text-decoration:none}
.dt-tags a:hover{background:rgba(34,211,238,.28);color:#fff}
.dt-tags a.on{background:var(--grad);color:#02121c;border-color:transparent;font-weight:700}

/* ---------- 五、分頁 .pn ／ 鍵值卡 .kv ／ 表格 .tbl ---------- */
.pn{display:none}
.pn.on{display:block}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.kv div{border:1px solid rgba(148,163,184,.22);border-radius:14px;padding:11px 13px;background:rgba(148,163,184,.08)}
.kv .k{font-size:11.5px;color:var(--muted)}
.kv .v{font-size:14.5px;color:var(--text);font-weight:600;word-break:break-all;margin-top:2px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px}
.tbl th{background:rgba(148,163,184,.12);color:var(--link);text-align:left;padding:10px 14px;font-weight:600}
.tbl td{padding:9px 14px;border-top:1px solid rgba(148,163,184,.14);color:var(--muted)}
.tbl td.num{color:var(--text);font-family:Consolas,Menlo,monospace}

/* ---------- 六、iOS「設定」風分組清單 .iosg ---------- */
.iosg{border:1px solid rgba(148,163,184,.2);border-radius:16px;background:rgba(148,163,184,.06);padding:0 16px;margin:12px 0}
.iosg>.fld{margin:0;padding:12px 0}
.iosg>.fld+.fld{border-top:1px solid rgba(148,163,184,.14)}
.iosg>.fld>label{min-width:62px;color:#9fb6d9;font-size:12.5px}

/* ---------- 七、密碼強度條 .pwbar（iOS 分段條：三條髮絲縫切成 4 格） ---------- */
.pwbar{position:relative;height:8px;border-radius:999px;background:rgba(148,163,184,.2);overflow:hidden;margin:12px 0 6px}
.pwbar i{display:block;height:100%;border-radius:999px;transition:width .25s,background .25s}
.pwbar::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(25% - 1.5px),#061426 calc(25% - 1.5px),#061426 calc(25% + 1.5px),transparent calc(25% + 1.5px)),linear-gradient(90deg,transparent calc(50% - 1.5px),#061426 calc(50% - 1.5px),#061426 calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(90deg,transparent calc(75% - 1.5px),#061426 calc(75% - 1.5px),#061426 calc(75% + 1.5px),transparent calc(75% + 1.5px))}

/* ---------- 八、手機 ---------- */
@media(max-width:640px){
  .fld label.chk{gap:8px}
  .iosg{padding:0 13px}
  .dt-hero{padding:18px 16px}
  .dt-hero h1{font-size:22px}
}