/* 工具箱共享样式
   设计语言沿用主站：柔和双色径向渐变底、白色半透明卡片、22px 大圆角、粉→紫→蓝渐变标题。
   每个工具页只写自己的业务样式，布局/顶栏/按钮/输入一律复用这里。 */
:root{
  --ink:#2c2a3a; --sub:#7a7689; --line:#ece9f4; --faint:#a29eb3;
  --pink:#f2779f; --blue:#6b8cff; --violet:#b07bff;
  --ok:#3fb98a; --warn:#e4695e;
  --card:rgba(255,255,255,.88);
  --accent:var(--blue);          /* 各工具页可覆盖，用于焦点/高亮 */
  --r-lg:22px; --r-md:16px; --r-sm:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100dvh;color:var(--ink);
  background:
    radial-gradient(1000px 520px at 10% -10%, #ffe6f1 0%, rgba(255,230,241,0) 60%),
    radial-gradient(860px 480px at 100% 0%, #e2ebff 0%, rgba(226,235,255,0) 55%),
    linear-gradient(160deg,#fdf8fc 0%,#f4f7ff 55%,#fdf3f7 100%);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  padding:max(22px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          calc(36px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:680px;margin:0 auto}
a{color:var(--accent);text-decoration:none}

/* ---------- 顶栏：返回图标 + 标题（图标由 kit.js 注入，样式在此） ---------- */
header{display:flex;align-items:center;gap:10px;margin:0 0 16px}
header h1{margin:0;font-size:20px;font-weight:800;flex:1;min-width:0}
header h1 small{
  display:block;font-size:12px;color:var(--sub);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
header .home{
  flex:none;display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  color:var(--sub);-webkit-tap-highlight-color:transparent;
  transition:color .2s ease,border-color .2s ease;
}
header .home:hover{color:var(--accent);border-color:var(--accent)}
header .home:active{opacity:.6}
header .home svg{display:block}
@media (max-width:360px){
  header{gap:7px}
  header .home{width:36px;height:36px;border-radius:10px}
  header .home svg{width:17px;height:17px}
}

/* ---------- 卡片与排版 ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 16px;box-shadow:0 10px 26px rgba(120,110,160,.08);margin:0 0 14px;
}
.card h2{margin:0 0 12px;font-size:14px;color:var(--sub);font-weight:700;letter-spacing:1px}
.hint{margin:10px 0 0;font-size:12px;color:var(--faint);letter-spacing:.4px}
.hint b{color:var(--sub);font-weight:600}

/* ---------- 表单 ---------- */
.row{display:flex;gap:10px;align-items:center}
.row+.row{margin-top:10px}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:12px 13px;width:100%;
  -webkit-appearance:none;appearance:none;
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent)
}
/* 勾选类控件必须留在通配之外：appearance:none 会吃掉对勾，小方块套上 14px 圆角
   就变成一个「圈」，勾没勾根本看不出来（见 docs/kit.md §6） */
input[type=checkbox],input[type=radio]{
  flex:none;width:20px;height:20px;padding:0;margin:0;border-radius:5px;
  -webkit-appearance:auto;appearance:auto;accent-color:var(--accent);
}
select{
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237a7689' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.btn{
  flex:none;border:none;border-radius:14px;padding:12px 18px;cursor:pointer;
  font:700 15px/1 inherit;color:#fff;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,var(--pink),var(--violet) 60%,var(--blue));
  box-shadow:0 8px 20px rgba(150,120,220,.26);
}
.btn:active{opacity:.85;transform:translateY(1px)}
.btn.ghost{
  background:#fff;color:var(--sub);border:1px solid var(--line);box-shadow:none;font-weight:600;
}
.btn.ghost:hover{color:var(--accent);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- 工具箱首页的入口网格（index.html 用） ---------- */
.grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:560px){.grid{grid-template-columns:1fr 1fr}}
a.tool{
  display:flex;gap:13px;align-items:center;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 15px;box-shadow:0 8px 22px rgba(120,110,160,.08);
  transition:transform .16s ease,box-shadow .16s ease;
}
a.tool:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(120,110,160,.14)}
a.tool:active{transform:translateY(-1px)}
a.tool .ico{
  flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  font-size:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
a.tool .tt{font-size:16px;font-weight:800;margin:0 0 3px}
a.tool .ds{margin:0;font-size:12.5px;color:var(--faint);letter-spacing:.3px}