/* ============================================================
   tools.css —— 摸鱼小站工具箱共享样式（枢纽页 + 各工具页）
   设计变量与首页/游戏页保持同一套 token（浅/深双主题）
   ============================================================ */
:root{
  --bg-a:#dfe7ff; --bg-b:#fde7f3; --bg-c:#dcfbf7;
  --panel:rgba(255,255,255,.60);
  --panel-strong:rgba(255,255,255,.78);
  --panel-line:rgba(255,255,255,.72);
  --text:#111c33;
  --text-soft:#64748b;
  --text-faint:#94a3b8;
  --accent:#6366f1;
  --accent-2:#22d3ee;
  --danger:#ef4444;
  --ok:#10b981;
  --warn:#f59e0b;
  --board-bg:rgba(255,255,255,.42);
  --board-line:rgba(148,163,184,.22);
  --shadow-lg:0 24px 60px -18px rgba(30,41,59,.34), 0 8px 22px -12px rgba(30,41,59,.20);
  --shadow-sm:0 2px 6px rgba(30,41,59,.10);
  --r-lg:26px; --r-md:18px;
}
[data-theme="dark"]{
  --bg-a:#131a33; --bg-b:#2a1533; --bg-c:#0e2a2e;
  --panel:rgba(28,34,54,.62);
  --panel-strong:rgba(32,39,62,.82);
  --panel-line:rgba(148,163,184,.20);
  --text:#e8edf9;
  --text-soft:#a3b0c7;
  --text-faint:#7c8aa5;
  --accent:#818cf8;
  --accent-2:#22d3ee;
  --board-bg:rgba(12,16,30,.44);
  --board-line:rgba(148,163,184,.16);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.66), 0 8px 22px -12px rgba(0,0,0,.5);
  --shadow-sm:0 2px 6px rgba(0,0,0,.34);
}

/* SECTION: base */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 8% -8%, var(--bg-a) 0%, transparent 58%),
    radial-gradient(900px 620px at 102% 4%, var(--bg-b) 0%, transparent 56%),
    radial-gradient(900px 700px at 50% 112%, var(--bg-c) 0%, transparent 60%),
    linear-gradient(180deg,#f7f9ff 0%,#f2f5fb 100%);
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(18px + env(safe-area-inset-top)) 14px calc(26px + env(safe-area-inset-bottom));
  overflow-x:hidden;
  transition:color .35s ease;
}
[data-theme="dark"] body{background:
    radial-gradient(1100px 700px at 8% -8%, var(--bg-a) 0%, transparent 58%),
    radial-gradient(900px 620px at 102% 4%, var(--bg-b) 0%, transparent 56%),
    radial-gradient(900px 700px at 50% 112%, var(--bg-c) 0%, transparent 60%),
    linear-gradient(180deg,#0b0f1d 0%,#090c17 100%);
}
.bgfx{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0;will-change:transform}
.blob.b1{width:340px;height:340px;left:-90px;top:12%;background:linear-gradient(135deg,#a5b4fc,#67e8f9);animation:float1 19s ease-in-out infinite}
.blob.b2{width:300px;height:300px;right:-80px;top:44%;background:linear-gradient(135deg,#f9a8d4,#c4b5fd);animation:float2 23s ease-in-out infinite}
[data-theme="dark"] .blob{opacity:.26}
@keyframes float1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(46px,-38px,0)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-40px,34px,0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* SECTION: shell —— 毛玻璃骨架 */
.app{position:relative;z-index:1;width:min(100%,860px);display:flex;flex-direction:column;gap:14px}
.app.wide{width:min(100%,1240px)}
@media (min-width:980px){.app.wide .tools{grid-template-columns:repeat(3,1fr)}}
.glass{
  background:var(--panel);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--panel-line);
  box-shadow:var(--shadow-lg);
  border-radius:var(--r-lg);
}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 18px}
.topbar .spacer{flex:1}
.topbar h1{margin:0;font-size:15px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-pill{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:12.5px;font-weight:600;color:var(--text-soft);
  padding:8px 13px;border-radius:99px;
  border:1px solid var(--panel-line);background:var(--panel-strong);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),color .2s,box-shadow .2s;
  white-space:nowrap;
}
.home-pill:hover{color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.home-pill:active{transform:scale(.96)}
.home-pill svg{width:16px;height:16px}
.icon-btn{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;cursor:pointer;
  border:1px solid var(--panel-line);background:var(--panel-strong);
  color:var(--text-soft);display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),color .2s,background .25s,box-shadow .2s;
}
.icon-btn:hover{color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:19px;height:19px}

/* SECTION: hero */
.hero{padding:26px 28px 22px;display:flex;flex-direction:column;gap:8px;animation:rise .5s cubic-bezier(.22,.9,.35,1) both}
.hero .kicker{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.hero h2{margin:0;font-size:clamp(21px,4.6vw,28px);font-weight:800;letter-spacing:.3px;line-height:1.25}
.hero p{margin:4px 0 0;font-size:13.5px;line-height:1.85;color:var(--text-soft)}

/* SECTION: 工具卡片网格（枢纽页） */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tool-card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:20px 18px;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s;
  animation:rise .5s cubic-bezier(.22,.9,.35,1) both;
}
.tool-card:hover{transform:translateY(-4px)}
.tool-card:active{transform:scale(.985)}
.tc-head{display:flex;align-items:center;gap:12px}
.tc-icon{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent));
  color:var(--accent);border:1px solid var(--panel-line);
}
.tc-icon svg{width:23px;height:23px}
.tool-card h3{margin:0;font-size:15.5px;font-weight:800}
.tool-card h3 small{display:block;font-size:10.5px;font-weight:600;color:var(--text-faint);letter-spacing:.4px;margin-top:2px}
.tool-card p{margin:0;font-size:12.5px;line-height:1.7;color:var(--text-soft)}
.tc-tags{display:flex;gap:6px;flex-wrap:wrap}
.tc-tags span{font-size:10.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);padding:3px 9px;border-radius:99px}
.tool-card.soon{opacity:.62;cursor:not-allowed}
.tool-card.soon:hover{transform:none}
.tool-card.soon .tc-ribbon{
  position:absolute;top:14px;right:-34px;transform:rotate(35deg);
  font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 36px;
  background:var(--warn);color:#3d2a05;box-shadow:var(--shadow-sm);
}
.tool-card{overflow:hidden}

/* SECTION: 表单与结果（工具页） */
.card{padding:20px 22px;display:flex;flex-direction:column;gap:14px;animation:rise .5s cubic-bezier(.22,.9,.35,1) both}
.card > h2{margin:0;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.card > h2::before{content:"";width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent-2))}
.card .hint{margin:0;font-size:12px;color:var(--text-faint);line-height:1.7}
.frm{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.fld{display:flex;flex-direction:column;gap:5px;flex:1 1 140px;min-width:110px}
.fld.wide{flex:1 1 100%}
.fld label{font-size:11.5px;font-weight:700;color:var(--text-soft)}
.inp{
  width:100%;padding:10px 12px;font:inherit;font-size:14px;color:var(--text);
  background:var(--panel-strong);border:1px solid var(--panel-line);border-radius:12px;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
input[type="date"].inp{min-height:42px}
.inp::-webkit-calendar-picker-indicator{filter:invert(.35)}
[data-theme="dark"] .inp::-webkit-calendar-picker-indicator{filter:invert(.85)}
select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;
  color:#fff;border:0;border-radius:13px;
  background:linear-gradient(135deg,var(--accent),#8b5cf6);
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:active{transform:scale(.95)}
.btn svg{width:16px;height:16px}
.btn.ghost{color:var(--text-soft);background:var(--panel-strong);border:1px solid var(--panel-line);box-shadow:none;font-weight:700}
.btn.ghost:hover{color:var(--accent)}
.seg{display:inline-flex;padding:4px;gap:4px;border-radius:14px;background:var(--board-bg);border:1px solid var(--panel-line);flex-wrap:wrap}
/* 锚点导航版页签：吸顶 + 点击滚动定位（工具全部常驻可见） */
.seg.tabs{position:sticky;top:10px;z-index:90;background:var(--panel-strong);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.card{scroll-margin-top:72px}
.seg button{
  border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--text-soft);
  padding:7px 14px;border-radius:10px;cursor:pointer;transition:background .18s,color .18s,transform .18s;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--panel-strong);color:var(--accent);box-shadow:var(--shadow-sm)}
.seg button:active{transform:scale(.95)}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--text-soft);cursor:pointer;user-select:none;padding:8px 12px;border-radius:12px;border:1px solid var(--panel-line);background:var(--panel-strong);transition:color .2s,border-color .2s}
.chk input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;margin:0}
.chk:has(input:checked){color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, transparent)}

/* SECTION: 结果展示 */
.result{background:var(--board-bg);border:1px solid var(--board-line);border-radius:var(--r-md);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.r-big{font-size:clamp(22px,4.6vw,32px);font-weight:900;letter-spacing:.3px;line-height:1.25;font-variant-numeric:tabular-nums}
.r-big em{font-style:normal;color:var(--accent)}
.r-big .unit{font-size:.5em;font-weight:800;color:var(--text-soft);margin-left:3px}
.r-soft{font-size:12.5px;color:var(--text-soft);line-height:1.8}
.r-soft b{color:var(--text)}
.kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kv{background:var(--panel-strong);border:1px solid var(--panel-line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.kv span{font-size:11px;font-weight:700;color:var(--text-faint)}
.kv b{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.kv b.ok{color:var(--ok)}.kv b.warn{color:var(--warn)}.kv b.bad{color:var(--danger)}
.pulse{color:var(--text-faint);font-size:13px;text-align:center;padding:6px 0}
.mono{font-family:"SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace}

/* SECTION: 页脚 */
.foot{padding:18px 8px 4px;text-align:center;font-size:11.5px;color:var(--text-faint);line-height:1.9}
.foot b{color:var(--text-soft)}

/* SECTION: 响应式 */
@media (max-width:640px){
  .tools{grid-template-columns:1fr}
  .card{padding:16px 15px}
  .hero{padding:20px 18px 18px}
  .topbar{padding:12px 14px}
}

/* SECTION: v12 第二批 —— 文本域 / 操作条 / 对照表 */
.ta{width:100%;min-height:200px;resize:vertical;padding:12px 14px;font:inherit;font-size:14px;line-height:1.7;color:var(--text);background:var(--panel-strong);border:1px solid var(--panel-line);border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s}
.ta:focus{border-color:rgba(99,102,241,.55);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.ops .btn{flex:0 0 auto;padding:8px 13px;font-size:12.5px}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:7px 9px;text-align:right;border-bottom:1px solid var(--panel-line);white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{font-size:11px;font-weight:800;color:var(--text-faint);border-bottom:1px solid var(--board-line)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl td b{font-weight:800}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.kv b.copy{cursor:pointer}
.kv b.copy:hover{color:var(--accent)}
details.fold{border:1px solid var(--panel-line);border-radius:14px;background:var(--panel-strong);padding:2px 14px}
details.fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:11px 0;font-size:13px;font-weight:800;color:var(--text-soft)}
details.fold summary::-webkit-details-marker{display:none}
details.fold[open] summary{color:var(--text)}
details.fold .wrap{overflow-x:auto;padding-bottom:10px}
.r-cap{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--text-faint)}