/* Paplume design tokens v2 — see 03-设计规范v2.md */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Inter:wght@400..700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --brand-50:#EEF2FF;--brand-100:#E0E7FF;--brand-300:#A5B4FC;--brand-500:#6366F1;
  --brand-600:#4F46E5;--brand-700:#4338CA;--accent-500:#8B5CF6;
  --ink-900:#0F172A;--ink-700:#334155;--ink-500:#64748B;--ink-200:#E2E8F0;
  --s0:#FFFFFF;--s1:#F8FAFC;--s2:#F1F5F9;
  --success:#059669;--warning:#D97706;--danger:#DC2626;
  --sh-sm:0 1px 2px rgb(15 23 42/.06);--sh-md:0 4px 12px rgb(15 23 42/.08);--sh-lg:0 12px 32px rgb(15 23 42/.12);
  --ease:cubic-bezier(.2,.8,.4,1);
  --serif:"Fraunces","Noto Serif SC",Georgia,serif;
  --sans:"Inter","Noto Sans SC",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
html[data-theme=dark]{
  --s0:#131B2E;--s1:#0B1120;--s2:#1D2740;
  --ink-900:#F1F5F9;--ink-700:#CBD5E1;--ink-500:#94A3B8;--ink-200:#26314D;
  --brand-600:#818CF8;--brand-700:#A5B4FC;--brand-50:#1B2340;--brand-100:#232D52;--brand-300:#4A5690;
  --sh-sm:0 1px 2px rgb(0 0 0/.4);--sh-md:0 4px 12px rgb(0 0 0/.45);--sh-lg:0 12px 32px rgb(0 0 0/.5);
}
*{box-sizing:border-box;margin:0}
body{font:400 16px/1.6 var(--sans);color:var(--ink-900);background:var(--s1);-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.wide{max-width:1320px}
@media(max-width:640px){.container{padding:0 16px}}

/* type */
.display{font:560 64px/1.1 var(--serif);letter-spacing:-.02em}
h1.tool{font:560 44px/1.2 var(--serif);letter-spacing:-.01em}
h2{font:600 32px/1.25 var(--sans);letter-spacing:-.01em}
h3{font:600 22px/1.35 var(--sans)}
.small{font-size:14px;line-height:1.5}.caption{font:500 12.5px/1.4 var(--sans);color:var(--ink-500)}
.mono{font-family:var(--mono)}
@media(max-width:640px){.display{font-size:40px;line-height:1.15}h1.tool{font-size:30px}h2{font-size:24px}h3{font-size:19px}}

/* nav */
nav{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;
 backdrop-filter:blur(12px);background:color-mix(in srgb,var(--s0) 80%,transparent);border-bottom:1px solid var(--ink-200)}
nav .container{display:flex;align-items:center;gap:28px;width:100%}
.logo{display:flex;align-items:center;gap:10px;font:600 21px/1 var(--serif);color:var(--ink-900);text-decoration:none}
.logo svg{width:34px;height:34px}
nav a.nl{color:var(--ink-700);text-decoration:none;font-size:15px;font-weight:500}
nav a.nl:hover{color:var(--brand-600)}
.nav-spacer{flex:1}
@media(max-width:640px){nav a.nl{display:none}nav .pill{display:none}nav .container{gap:10px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;
 font:600 15px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;transition:all .15s var(--ease)}
.btn-p{background:var(--brand-600);color:#fff;box-shadow:var(--sh-sm)}
.btn-p:hover{background:var(--brand-700);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-s{background:var(--s0);color:var(--ink-900);border:1px solid var(--ink-200)}
.btn-s:hover{background:var(--s2)}
.btn-lg{height:52px;padding:0 28px;font-size:16px}
@media(max-width:640px){.btn{height:48px}}

/* cards */
.card{background:var(--s0);border:1px solid var(--ink-200);border-radius:16px;box-shadow:var(--sh-md)}
.toolcard{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:16px;background:var(--s0);
 border:1px solid var(--ink-200);text-decoration:none;color:var(--ink-900);transition:all .15s var(--ease);box-shadow:var(--sh-sm)}
.toolcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--brand-300)}
.ticon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.tc-org{background:rgb(79 70 229/.1);color:#4F46E5}.tc-conv{background:rgb(5 150 105/.12);color:#059669}
.tc-edit{background:rgb(217 119 6/.12);color:#D97706}.tc-sec{background:rgb(220 38 38/.1);color:#DC2626}
.tc-ai{background:rgb(139 92 246/.12);color:#8B5CF6}.tc-sign{background:rgb(2 132 199/.12);color:#0284C7}
html[data-theme=dark] .ticon{filter:brightness(1.25)}
.toolcard b{font-size:15.5px}.toolcard p{font-size:13px;color:var(--ink-500);margin-top:2px}

/* tags & badges */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;padding:6px 14px;font:600 13px/1 var(--sans)}
.pill-beta{background:var(--brand-50);color:var(--brand-600);border:1px solid var(--brand-300)}
.pill-ok{background:rgb(5 150 105/.1);color:var(--success)}

/* dropzone */
.drop{border:2px dashed var(--brand-300);border-radius:24px;background:var(--s0);min-height:320px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:32px;transition:all .15s var(--ease)}
.drop:hover{background:var(--brand-50)}
.drop .di{width:64px;height:64px;border-radius:18px;background:var(--brand-50);display:flex;align-items:center;justify-content:center}
.drop b{font-size:18px}.drop span{font-size:13px;color:var(--ink-500)}

/* progress */
.prog{height:6px;border-radius:3px;background:var(--s2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand-600),var(--accent-500))}

/* hero */
.hero{position:relative;overflow:hidden;background:
 radial-gradient(900px 420px at 70% -10%,color-mix(in srgb,var(--accent-500) 14%,transparent),transparent 70%),
 radial-gradient(700px 380px at 15% 0%,color-mix(in srgb,var(--brand-600) 12%,transparent),transparent 70%),var(--s1)}
.hero::before{content:"";position:absolute;inset:0;
 background-image:linear-gradient(color-mix(in srgb,var(--ink-200) 55%,transparent) 1px,transparent 1px),
 linear-gradient(90deg,color-mix(in srgb,var(--ink-200) 55%,transparent) 1px,transparent 1px);
 background-size:56px 56px;mask-image:radial-gradient(800px 400px at 50% 0%,#000,transparent)}
.hero>*{position:relative}

/* footer */
footer{border-top:1px solid var(--ink-200);background:var(--s0);margin-top:96px;padding:48px 0;color:var(--ink-500);font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer a{color:var(--ink-700);text-decoration:none;display:block;margin-top:8px}
@media(max-width:640px){footer .cols{grid-template-columns:1fr 1fr}}

/* utility */
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:640px){.g4,.g2{grid-template-columns:1fr}}
.sect{padding:96px 0}@media(max-width:640px){.sect{padding:56px 0}}
.muted{color:var(--ink-500)}
input,textarea,select{font:inherit;color:inherit;background:var(--s0);border:1px solid var(--ink-200);border-radius:10px;padding:10px 14px;outline:none}
input:focus,textarea:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 25%,transparent)}
.theme-toggle{margin-left:8px}