/* 搞定证件照 · 全站基础样式
 *
 * 之前每个页面各写一套 CSS，结果首页和工具页看起来像两个产品：
 * 头部不一样、容器宽度 1080 vs 760、卡片一个带投影一个是平的。
 * 这里把「设计变量 + 头部 + 页脚 + 通用组件」收成一份，页面只留自己特有的部分。
 */

:root{
  --ink:#101114;--sub:#5f6673;--faint:#9aa1ad;
  --line:#e9eaee;--line2:#dcdfe5;
  --bg:#f6f7f9;--card:#fff;
  --pass:#0f9d58;--warn:#e8830c;--fail:#e0483c;
  --r:20px;--ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}

/* 顶栏：全站一致。半透明毛玻璃，滚动时内容从下面穿过 */
header{position:sticky;top:0;z-index:20;height:58px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 28px;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.brand{font-size:15px;font-weight:680;letter-spacing:-.01em;margin:0;display:flex;
  align-items:baseline;gap:10px}
.brand span{color:var(--faint);font-weight:400;font-size:12.5px;letter-spacing:0}
nav{display:flex;gap:4px;flex-wrap:nowrap}
nav a{font-size:13px;color:var(--sub);text-decoration:none;padding:7px 12px;border-radius:999px;
  transition:.16s var(--ease);white-space:nowrap}
nav a:hover{color:var(--ink);background:#f1f2f5}
nav a.on{color:var(--ink);background:#eff0f3;font-weight:550}

/* 容器：全站统一 1080 */
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}

/* 标题区：每个页面都从一句说明开始 */
.lede{color:var(--sub);margin-top:10px;font-size:15px;max-width:62ch;line-height:1.7}

.card{background:var(--card);border-radius:var(--r);padding:22px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 30px rgba(16,24,40,.055);
  border:1px solid rgba(16,24,40,.03)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;
  border:0;border-radius:22px;background:var(--ink);color:#fff;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;transition:.18s var(--ease);text-decoration:none;white-space:nowrap}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px rgba(16,17,20,.22)}
.btn:disabled{background:#d6d9df;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover:not(:disabled){box-shadow:none;border-color:var(--ink)}

.chip{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;
  border:1px solid var(--line2);background:#fff;border-radius:999px;font:inherit;font-size:13px;
  color:var(--ink);cursor:pointer;transition:.16s var(--ease)}
.chip:hover{border-color:var(--ink);background:#fafafb}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 上传区 */
.drop{border:1.5px dashed var(--line2);border-radius:16px;padding:34px 20px;text-align:center;
  color:var(--sub);cursor:pointer;transition:.2s var(--ease);
  background:linear-gradient(#fcfcfd,#f9fafb)}
.drop:hover{border-color:#aab0bb;background:#f6f8fa;transform:translateY(-1px)}
.drop.on{border-style:solid;border-color:var(--pass);background:#f4fbf7;color:var(--ink)}
.drop img{max-height:190px;border-radius:10px;display:block;margin:0 auto 10px}
.drop b{display:block;color:var(--ink);font-weight:600;font-size:14px}

footer{max-width:1080px;margin:0 auto;padding:36px 28px 56px;font-size:12px;color:var(--faint);
  line-height:1.9}
footer a{color:var(--faint);text-decoration:underline;text-underline-offset:3px}

@media (max-width:880px){
  header{padding:0 16px}
  .wrap{padding:0 16px}
  footer{padding:0 16px 40px}
}
@media (max-width:520px){
  .brand span{display:none}
  nav a{padding:6px 10px;font-size:12.5px}
}