/* isurl 工具箱 — brand + layout. All tools run client-side. */
:root{
  --accent:#EC6248; --accent-2:#D64A32; --accent-ink:#B8412B; --accent-soft:#FCE7E0;
  --teal:#15908B; --teal-soft:#DCEFED; --teal-ink:#0E6E6A;
  --bg:#FBF6F3; --surface:#FFFFFF; --surface-2:#F5ECE6; --surface-3:#EFE4DC;
  --border:#E7D9D0; --border-strong:#D8C6BB;
  --ink:#2A2320; --ink-2:#6E625B; --ink-3:#988A80;
  --ok:#1E9E62; --ok-soft:#DEF3E8;
  --font:"Noto Sans TC",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --r:14px; --r-sm:9px; --r-lg:20px;
  --sh:0 1px 2px rgba(42,35,32,.05),0 8px 24px -14px rgba(42,35,32,.2);
  --sh-lg:0 24px 60px -28px rgba(42,35,32,.4);
  --wrap:1080px;
}
@media (prefers-color-scheme:dark){:root{
  --accent:#FF7C63; --accent-2:#FF6448; --accent-ink:#FF9F8B; --accent-soft:#3B2621;
  --teal:#4FC5BF; --teal-soft:#12332F; --teal-ink:#7FDAD5;
  --bg:#181310; --surface:#221B17; --surface-2:#2A221D; --surface-3:#332A24;
  --border:#3A2F28; --border-strong:#4A3D34;
  --ink:#F3EAE4; --ink-2:#B7A99F; --ink-3:#8A7C72;
  --ok:#54C88C; --ok-soft:#13301F;
  --sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
  --sh-lg:0 30px 70px -30px rgba(0,0,0,.75);
}}
:root[data-theme="light"]{
  --accent:#EC6248; --accent-2:#D64A32; --accent-ink:#B8412B; --accent-soft:#FCE7E0;
  --teal:#15908B; --teal-soft:#DCEFED; --teal-ink:#0E6E6A;
  --bg:#FBF6F3; --surface:#FFFFFF; --surface-2:#F5ECE6; --surface-3:#EFE4DC;
  --border:#E7D9D0; --border-strong:#D8C6BB; --ink:#2A2320; --ink-2:#6E625B; --ink-3:#988A80;
  --ok:#1E9E62; --ok-soft:#DEF3E8;
}
:root[data-theme="dark"]{
  --accent:#FF7C63; --accent-2:#FF6448; --accent-ink:#FF9F8B; --accent-soft:#3B2621;
  --teal:#4FC5BF; --teal-soft:#12332F; --teal-ink:#7FDAD5;
  --bg:#181310; --surface:#221B17; --surface-2:#2A221D; --surface-3:#332A24;
  --border:#3A2F28; --border-strong:#4A3D34; --ink:#F3EAE4; --ink-2:#B7A99F; --ink-3:#8A7C72;
  --ok:#54C88C; --ok-soft:#13301F;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
img{max-width:100%}
code,.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,28px)}
.container.narrow{max-width:800px}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:14px;height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .cat{width:34px;height:34px;flex:none;border-radius:10px;overflow:hidden;box-shadow:var(--sh)}
.nav .spacer{flex:1}
.nav a.link{color:var(--ink-2);font-size:.9rem;font-weight:600}
.nav a.link:hover{color:var(--ink);text-decoration:none}
.nav a.cta{background:var(--accent);color:#fff;padding:8px 15px;border-radius:100px;font-size:.86rem;font-weight:700}
.nav a.cta:hover{background:var(--accent-2);text-decoration:none}
.tbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:16px;flex:none}
.tbtn:hover{border-color:var(--accent)}
@media (max-width:560px){.nav a.link.hide-sm{display:none}}

/* ---------- hero (hub) ---------- */
.hero{text-align:center;padding:clamp(36px,7vw,68px) 0 8px}
.hero h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:850;letter-spacing:-.035em}
.hero h1 .hl{color:var(--accent)}
.hero p{color:var(--ink-2);font-size:1.06rem;margin:14px auto 0;max-width:56ch}
.hero .badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:650;padding:5px 12px;border-radius:100px;border:1px solid transparent}
.badge.client{background:var(--teal-soft);color:var(--teal-ink);border-color:color-mix(in srgb,var(--teal) 30%,transparent)}
.badge.tw{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.search{max-width:440px;margin:26px auto 0;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-strong);border-radius:100px;padding:12px 20px;box-shadow:var(--sh)}
.search input{border:0;background:transparent;flex:1;font-size:1rem;color:var(--ink);outline:none;font-family:inherit}
.search .ic{color:var(--ink-3);font-size:18px}

/* ---------- category + tool grid ---------- */
main{flex:1;padding-bottom:56px}
.cat-block{margin-top:clamp(30px,5vw,48px)}
.cat-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cat-h .d{width:11px;height:11px;border-radius:3px;background:var(--accent)}
.cat-h .d.tw{background:var(--teal)}
.cat-h h2{font-size:1.2rem;font-weight:750}
.cat-h .cn{color:var(--ink-3);font-size:.82rem;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--sh);transition:transform .14s,border-color .14s,box-shadow .14s}
.tcard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--sh-lg);text-decoration:none}
.tcard .em{color:var(--accent);height:26px;line-height:0}
.tcard .n{font-weight:700;font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.tcard .d{font-size:.84rem;color:var(--ink-2);line-height:1.5}
.tcard .soon{align-self:flex-start;font-size:.66rem;font-weight:700;color:var(--ink-3);background:var(--surface-3);padding:2px 8px;border-radius:100px;margin-top:auto}
.no-result{color:var(--ink-2);text-align:center;padding:40px 0;display:none}

/* ---------- tool page ---------- */
.bc{font-size:.78rem;color:var(--ink-3);padding-top:22px}
.bc a{color:var(--ink-2)} .bc a:hover{color:var(--ink)}
.tool-head{padding:10px 0 6px}
.tool-head h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:820;letter-spacing:-.025em}
.tool-head p{color:var(--ink-2);margin-top:8px;max-width:60ch}
.tool-head .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

.widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(18px,4vw,28px);box-shadow:var(--sh);margin-top:20px;display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.82rem;font-weight:650;color:var(--ink-2)}
.inp,textarea.inp,select.inp{width:100%;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:11px 14px;font-size:1rem;color:var(--ink);font-family:inherit;outline:none;transition:border-color .14s}
.inp:focus,textarea.inp:focus,select.inp:focus{border-color:var(--accent);background:var(--surface)}
textarea.inp{resize:vertical;min-height:104px;line-height:1.7}
textarea.inp.tall{min-height:240px;font-size:1.02rem}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;font-size:.92rem;font-weight:650;padding:10px 18px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);transition:.14s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:100px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-size:.85rem;font-weight:650;padding:7px 14px;border-radius:100px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.hint{font-size:.78rem;color:var(--ink-3)}
.note-safe{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--teal-ink);font-weight:600}
.result{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;min-height:44px;word-break:break-word}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;text-align:center}
.stat .v{font-size:1.5rem;font-weight:800;color:var(--accent-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .k{font-size:.72rem;color:var(--ink-2);margin-top:2px}
.drop{border:2px dashed var(--border-strong);border-radius:var(--r);padding:30px;text-align:center;color:var(--ink-2);cursor:pointer;transition:.14s;background:var(--surface-2)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.drop .big{display:block;margin-bottom:8px;color:var(--accent);line-height:0}
.preview-img{max-height:260px;border-radius:var(--r-sm);border:1px solid var(--border);display:block;margin:0 auto}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:8px}
.qr-canvas{background:#fff;border-radius:12px;padding:12px;box-shadow:var(--sh);width:220px;height:220px;display:flex;align-items:center;justify-content:center}
.qr-canvas canvas,.qr-canvas svg{max-width:100%;height:auto}
.range{width:100%;accent-color:var(--accent)}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:var(--ink);cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--accent)}
.pw-out{font-family:var(--mono);font-size:1.15rem;letter-spacing:.02em;word-break:break-all;color:var(--ink)}

/* ---------- content sections (howto/faq/related) ---------- */
.section{margin-top:clamp(30px,5vw,44px)}
.section h2{font-size:1.15rem;font-weight:750;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.steps{display:grid;gap:10px}
.step{display:flex;gap:12px;font-size:.95rem;color:var(--ink-2)}
.step .num{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:.8rem;font-weight:800;display:grid;place-items:center;flex:none}
details.faq{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);margin-bottom:9px;overflow:hidden}
details.faq summary{cursor:pointer;padding:14px 16px;font-weight:650;font-size:.95rem;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--accent);font-size:1.2rem;font-weight:600;transition:transform .2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 16px 15px;color:var(--ink-2);font-size:.92rem;line-height:1.6}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{font-size:.86rem;padding:8px 14px;border-radius:100px;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-2)}
.chip:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}

/* ---------- CTA + footer ---------- */
.cta-band{margin-top:clamp(34px,6vw,52px);background:linear-gradient(120deg,var(--accent),var(--accent-2));border-radius:var(--r-lg);padding:clamp(22px,4vw,32px);color:#fff;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:var(--sh-lg)}
.cta-band .t{flex:1;min-width:220px}
.cta-band .t b{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;display:block}
.cta-band .t span{opacity:.92;font-size:.95rem}
.cta-band a.go{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);color:#fff;padding:11px 20px;border-radius:100px;font-weight:700;white-space:nowrap}
.cta-band a.go:hover{background:rgba(255,255,255,.28);text-decoration:none}

footer.site{border-top:1px solid var(--border);background:var(--surface);margin-top:auto}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding:40px 0 26px}
.foot .about .brand{margin-bottom:12px}
.foot .about p{font-size:.86rem;color:var(--ink-2);max-width:34ch}
.foot .col h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:12px}
.foot .col a{display:block;font-size:.9rem;color:var(--ink-2);padding:4px 0}
.foot .col a:hover{color:var(--accent-ink)}
.foot-b{border-top:1px solid var(--border);padding:16px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-3)}
@media (max-width:720px){.foot{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1}}
@media (max-width:440px){.foot{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:100px;font-size:.88rem;font-weight:600;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- icons (sized via SVG width/height attributes for reliability) ---------- */
.icon{display:inline-block;vertical-align:-.15em;flex:none}
.logo-mark{display:block}
.tool-head h1 .icon{color:var(--accent);vertical-align:-.05em}
.section h2 .icon{color:var(--accent)}
.nav a.cta .icon{vertical-align:-.12em}
.cta-band a.go .icon{vertical-align:-.14em}
.chip .icon{vertical-align:-.18em}
.note-safe .icon{vertical-align:-.18em}
.tbtn .i-sun{display:none}
.tbtn .i-moon{display:inline-block}
@media (prefers-color-scheme:dark){.tbtn .i-sun{display:inline-block}.tbtn .i-moon{display:none}}
:root[data-theme="light"] .tbtn .i-sun{display:none}
:root[data-theme="light"] .tbtn .i-moon{display:inline-block}
:root[data-theme="dark"] .tbtn .i-sun{display:inline-block}
:root[data-theme="dark"] .tbtn .i-moon{display:none}