/* img.diy v4 — hububble-style: royal blue + lemon yellow + cream, Poppins/Caveat, bubbles. */
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Caveat;src:url(/assets/fonts/caveat-700.woff2) format('woff2');font-weight:700;font-display:swap}

/* Notion palette — warm minimalism, serif headings, soft surfaces, pastel callouts */
:root, [data-theme="light"]{
  --bg:#ffffff; --band-lilac:#f7f6f3; --band-cream:#f7f6f3; --card:#ffffff;
  --border:#e9e9e7; --border-soft:#efefee;
  --text:#37352f; --muted:#787774; --faint:#9b9a97;
  --blue:#2383e2; --blue-hover:#0b6fc9; --blue-deep:#f7f6f3;
  --yellow:#fdecc8; --gold:#cb912f; --babyblue:#e7f3f8; --red:#d44c47;
  --accent:#2383e2; --accent-hover:#0b6fc9; --accent-ink:#ffffff; --accent-soft:#f1f1ef;
  --on-navy:#37352f; --on-navy-dim:#787774;
  --ok:#448361; --danger:#d44c47; --warn:#cb912f;
  --ok-soft:#edf3ec; --danger-soft:#fdebec;
  --shadow:0 1px 2px rgba(15,15,15,.05),0 3px 12px rgba(15,15,15,.04);
  --shadow-lift:0 2px 4px rgba(15,15,15,.08),0 10px 26px rgba(15,15,15,.08);
  --radius:8px; --radius-sm:6px; --pill:6px; --maxw:1200px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,'PingFang SC','Microsoft YaHei',Arial,sans-serif;
  --serif:'Lyon-Text',Georgia,'Times New Roman','Songti SC','Noto Serif SC','SimSun',ui-serif,serif;
  --hand:var(--serif);
  --mono:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;
}
[data-theme="dark"]{
  --bg:#191919; --band-lilac:#202020; --band-cream:#202020; --card:#202020;
  --border:#373737; --border-soft:#2b2b2b;
  --text:#e9e9e7; --muted:#9b9a97; --faint:#6f6f6f;
  --blue:#529cca; --blue-hover:#6fb0d8; --blue-deep:#202020;
  --yellow:#56502f; --gold:#cb912f; --babyblue:#1e3a4a; --red:#ff7369;
  --accent:#529cca; --accent-hover:#6fb0d8; --accent-ink:#ffffff; --accent-soft:#2f2f2f;
  --on-navy:#e9e9e7; --on-navy-dim:#9b9a97;
  --ok:#4dab74; --danger:#ff7369; --warn:#cb912f;
  --ok-soft:rgba(77,171,116,.14); --danger-soft:rgba(255,115,105,.14);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 3px 12px rgba(0,0,0,.3);
  --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.7;-webkit-font-smoothing:antialiased;font-size:16px;transition:background .18s,color .18s}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em;color:var(--text);font-weight:800}
h1{font-size:clamp(2.2rem,3.4vw,2.9rem)}h2{font-size:clamp(1.5rem,2vw,1.9rem)}
p{margin:0 0 1em}
svg{display:inline-block;vertical-align:middle}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,64px);width:100%}
.muted{color:var(--muted)}
/* handwritten highlight (hububble signature) */
.hand{font-family:var(--hand);font-weight:700;color:var(--blue);font-size:1.15em;letter-spacing:0}
.mark{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 .06em}
[data-theme="dark"] .mark{background:linear-gradient(transparent 62%,rgba(250,227,81,.5) 62%)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(245,246,253,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft)}
[data-theme="dark"] header.site{background:rgba(15,21,38,.86)}
.nav{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--text)}
.brand:hover{text-decoration:none}
.brand .logo{width:32px;height:32px;color:var(--blue);flex-shrink:0;display:inline-block;vertical-align:middle;
  transition:color .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1)}
.brand .logo svg{width:100%;height:100%;display:block}
/* header brand: sparkle turns yellow + a little spin on hover */
header.site .brand:hover .logo{color:var(--yellow);transform:rotate(90deg) scale(1.08)}
@media(prefers-reduced-motion:reduce){header.site .brand:hover .logo{transform:none}}
.brand em{font-style:normal;color:var(--blue)}
.nav .spacer{flex:1}
.nav a.navlink{color:var(--muted);font-size:.94rem;font-weight:600;padding:8px 14px;border-radius:var(--pill)}
.nav a.navlink:hover{color:var(--blue);background:var(--accent-soft);text-decoration:none}
.iconbtn{width:40px;height:40px;border:1.5px solid var(--border);border-radius:50%;
  background:var(--card);color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0;
  transition:border-color .15s,color .15s,transform .15s}
.iconbtn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.iconbtn svg{width:17px;height:17px}
[data-theme="light"] .ic-moon{display:block}[data-theme="light"] .ic-sun{display:none}
[data-theme="dark"] .ic-moon{display:none}[data-theme="dark"] .ic-sun{display:block}
.langsw{display:flex;border:1.5px solid var(--border);border-radius:var(--pill);overflow:hidden}
.langsw a{padding:7px 15px;font-size:.85rem;font-weight:700;color:var(--muted);background:var(--card)}
.langsw a.on{background:var(--blue);color:#fff}
.langsw a:hover{text-decoration:none}.langsw a:not(.on):hover{color:var(--blue)}

/* ---------- hero (with decorative bubbles) ---------- */
.hero-wrap{position:relative;overflow:hidden}
.hero{position:relative;padding:clamp(60px,9vw,132px) 0 clamp(48px,6vw,80px);max-width:960px;z-index:2}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);margin-bottom:.42em;line-height:1.1;letter-spacing:-.03em}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 .08em;color:inherit;white-space:nowrap}
[data-theme="dark"] .hero h1 em{background:linear-gradient(transparent 58%,rgba(250,227,81,.55) 58%)}
.hero p.lead{font-size:clamp(1.1rem,1.5vw,1.4rem);color:var(--muted);margin:0 0 1.6em;max-width:720px}
.hero .badges{display:flex;gap:12px 26px;flex-wrap:wrap;font-size:.94rem;font-weight:600;color:var(--muted)}
.hero .badges span{display:inline-flex;align-items:center;gap:8px}
.hero .badges svg{width:18px;height:18px;color:var(--ok)}
.bubble{position:absolute;border-radius:50%;z-index:1;opacity:.85;pointer-events:none}
.bubble.b1{width:340px;height:340px;background:var(--babyblue);top:-90px;right:-70px;opacity:.4}
.bubble.b2{width:120px;height:120px;background:var(--yellow);top:180px;right:230px;opacity:.55}
.bubble.b3{width:64px;height:64px;background:var(--gold);top:60px;right:150px;opacity:.6}
.bubble.b4{width:200px;height:200px;background:var(--accent-soft);bottom:-80px;left:-70px;opacity:.7}
[data-theme="dark"] .bubble{opacity:.34!important}

/* ---------- sections & tool grid ---------- */
section[id]{padding:10px 0 28px}
.sec-head{display:flex;align-items:baseline;gap:15px;margin:44px 0 6px}
.sec-head .no{font-family:var(--mono);font-size:.82rem;color:var(--blue);font-weight:700;
  background:var(--accent-soft);padding:4px 12px;border-radius:var(--pill)}
.sec-head h2{margin:0;font-size:1.5rem}
.sec-head p{margin:0;color:var(--faint);font-size:.92rem;margin-left:auto;text-align:right}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px;margin:24px 0 10px}
.tool-card{display:flex;gap:14px;background:var(--card);border:1.5px solid var(--border-soft);
  border-radius:var(--radius);padding:22px 20px;transition:transform .16s,box-shadow .16s,border-color .16s}
.tool-card:hover{text-decoration:none;border-color:var(--babyblue);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
/* vibrant colour-rotating icon tiles — white glyph on a bold gradient (the "lively" pop) */
.tool-card .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;
  color:#fff;background:linear-gradient(135deg,#ff6b4a,#ff3d6e);box-shadow:0 8px 18px -8px rgba(255,77,110,.55)}
.tool-card:nth-child(6n+2) .ic{background:linear-gradient(135deg,#ffab2e,#ff6a1a);box-shadow:0 8px 18px -8px rgba(255,106,26,.55)}
.tool-card:nth-child(6n+3) .ic{background:linear-gradient(135deg,#17c088,#5ee0a0);box-shadow:0 8px 18px -8px rgba(23,192,136,.5)}
.tool-card:nth-child(6n+4) .ic{background:linear-gradient(135deg,#f74d86,#ff8db3);box-shadow:0 8px 18px -8px rgba(247,77,134,.5)}
.tool-card:nth-child(6n+5) .ic{background:linear-gradient(135deg,#f6a609,#ffd23f);box-shadow:0 8px 18px -8px rgba(246,166,9,.5)}
.tool-card:nth-child(6n) .ic{background:linear-gradient(135deg,#e8590c,#fa8231);box-shadow:0 8px 18px -8px rgba(232,89,12,.5)}
.tool-card .ic svg{width:25px;height:25px;color:#fff}
.tool-card h3{color:var(--text);font-size:1.04rem;margin:2px 0 4px;font-weight:700}
.tool-card p{color:var(--muted);font-size:.87rem;margin:0;line-height:1.55}

/* ---------- tool page ---------- */
.tool-head{padding:44px 0 8px;position:relative}
.tool-head .crumb{font-size:.82rem;color:var(--faint);margin-bottom:14px;font-weight:600}
.tool-head .crumb a{color:var(--muted)}
.tool-head h1{font-size:2.1rem;display:flex;align-items:center;gap:15px}
.tool-head h1 .ticon{width:56px;height:56px;border-radius:16px;display:inline-grid;place-items:center;
  color:#fff;background:var(--blue);flex-shrink:0;box-shadow:0 10px 24px rgba(60,91,174,.32)}
.tool-head h1 .ticon svg{width:27px;height:27px}
.tool-head p.sub{color:var(--muted);font-size:1.1rem;max-width:680px;margin:8px 0 0}

.app{background:var(--card);border:1.5px solid var(--border-soft);border-radius:var(--radius);
  padding:28px;margin:26px 0;box-shadow:var(--shadow)}
.drop{border:2.5px dashed var(--border);border-radius:var(--radius);padding:50px 20px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s;background:var(--band-lilac)}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--accent-soft)}
.drop .big{color:var(--blue);margin-bottom:10px}.drop .big svg{width:44px;height:44px}
.drop h3{margin:0 0 4px;font-size:1.18rem}.drop p{margin:0;color:var(--muted);font-size:.92rem}
.drop .btn{margin-top:18px}

.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ff6b4a,#ff3d6e);color:#fff;
  border:none;border-radius:var(--pill);padding:13px 26px;font-size:.97rem;font-weight:700;cursor:pointer;
  font-family:inherit;transition:transform .14s,box-shadow .14s,filter .14s;box-shadow:0 10px 22px -6px rgba(255,77,110,.5)}
.btn:hover{filter:brightness(1.05) saturate(1.08);text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 30px -6px rgba(255,61,110,.55)}
.btn:active{transform:translateY(0)}
.btn.sec{background:var(--card);color:var(--text);border:1.5px solid var(--border);box-shadow:none}
.btn.sec:hover{border-color:var(--blue);color:var(--blue);background:var(--card);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.sm{padding:8px 16px;font-size:.85rem}

/* ---------- controls ---------- */
.controls{display:grid;gap:16px;margin:20px 0}
@media(min-width:640px){.controls.cols2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.05em}
.field input[type=number],.field input[type=text],.field select{width:100%;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;color:var(--text);
  font-family:inherit;font-size:.95rem}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--accent-soft)}
.range-row{display:flex;align-items:center;gap:12px}
.range-row input[type=range]{flex:1;accent-color:var(--blue)}
.range-row .val{min-width:56px;text-align:right;font-family:var(--mono);font-size:.9rem;font-weight:700}
.seg{display:inline-flex;border:1.5px solid var(--border);border-radius:var(--pill);overflow:hidden;flex-wrap:wrap;background:var(--card)}
.seg button{background:none;border:none;color:var(--muted);padding:9px 18px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.88rem}
.seg button.on{background:var(--blue);color:#fff}
.chk{display:flex;align-items:center;gap:9px;color:var(--text);font-size:.93rem;cursor:pointer}
.chk input{accent-color:var(--blue);width:16px;height:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* ---------- results ---------- */
.results{margin-top:10px;display:grid;gap:10px}
.item{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:12px 14px}
.item .thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--band-lilac);flex-shrink:0;border:1px solid var(--border-soft)}
.item .meta{flex:1;min-width:0}
.item .meta .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.item .meta .st{font-size:.82rem;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.tag{display:inline-block;font-size:.73rem;font-weight:700;padding:3px 10px;border-radius:var(--pill);background:var(--ok-soft);color:var(--ok);margin-left:6px}
.tag.red{background:var(--danger-soft);color:var(--danger)}.tag.dim{background:var(--band-lilac);color:var(--muted)}
canvas.preview,img.preview{max-width:100%;border-radius:var(--radius-sm);border:1.5px solid var(--border-soft);background:var(--band-lilac)}
.hidden{display:none!important}
.spin{width:17px;height:17px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.note{background:var(--band-lilac);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:12px 16px;font-size:.88rem;color:var(--muted);display:flex;gap:10px;align-items:center}
.note b{color:var(--text)}.note svg{width:16px;height:16px;color:var(--blue);flex-shrink:0}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--danger)}

/* ---------- tool page: one centered column so title, app & content share edges ---------- */
main.toolpage{max-width:960px}

/* ---------- content / SEO ---------- */
.content{padding:26px 0 10px;max-width:none}
/* keep running prose at a readable measure; card grids use the full column width */
.content > p{max-width:780px}
.usecases{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.content h2{margin-top:48px;font-size:1.5rem}
.content h2::after{content:'';display:block;width:52px;height:5px;background:var(--yellow);border-radius:99px;margin-top:10px}
.content h3{margin-top:26px;font-size:1.14rem}
.content ul,.content ol{padding-left:22px;color:var(--muted)}
.content li{margin-bottom:9px}.content li b,.content p b{color:var(--text)}
.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:14px;margin:22px 0}
.steps li{counter-increment:s;padding-left:56px;position:relative;color:var(--muted)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:38px;height:38px;background:var(--blue);color:#fff;
  border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.98rem;box-shadow:0 6px 15px rgba(60,91,174,.3)}
.steps li b{display:block;color:var(--text);margin-bottom:2px}
.faq{margin:18px 0}
.faq details{border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--card);transition:box-shadow .15s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{padding:16px 20px;cursor:pointer;font-weight:700;list-style:none;font-size:.97rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--blue);font-weight:800;font-family:var(--mono);font-size:1.15rem}
.faq details[open] summary::after{content:'\2212'}
.faq .a{padding:0 20px 16px;color:var(--muted);font-size:.94rem}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.feat .f{background:var(--card);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:20px 18px;transition:transform .15s,box-shadow .15s}
.feat .f:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feat .f .fi{width:24px;height:24px;color:var(--ok);margin-bottom:9px}.feat .f .fi svg{width:21px;height:21px}
.feat .f h3{margin:0 0 4px;font-size:.99rem}.feat .f p{margin:0;font-size:.87rem;color:var(--muted)}
.usecases{margin:18px 0;display:grid;gap:10px}
.usecases .uc{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:14px 16px}
.usecases .uc svg{width:18px;height:18px;color:var(--blue);flex-shrink:0;margin-top:3px}
.usecases .uc p{margin:0;font-size:.92rem;color:var(--muted)}.usecases .uc p b{color:var(--text)}
.related{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.related a{background:var(--card);border:1.5px solid var(--border);border-radius:var(--pill);padding:9px 17px;font-size:.87rem;color:var(--muted);font-weight:600;display:inline-flex;gap:8px;align-items:center;transition:border-color .15s,color .15s,transform .15s}
.related a svg{width:15px;height:15px;color:var(--blue)}
.related a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none;transform:translateY(-1px)}

/* ---------- 404 ---------- */
.e404{max-width:860px;padding:48px 0 20px}
.e404-hero{text-align:center}
.e404-art{width:150px;height:auto;color:var(--muted);display:block;margin:0 auto}
.e404-code{font-size:clamp(4rem,13vw,7rem);font-weight:800;line-height:.95;color:var(--blue);letter-spacing:-.05em;margin-top:-8px}
.e404 h1{font-size:clamp(1.4rem,3vw,2rem);margin:.15em 0 .35em}
.e404-msg{color:var(--muted);font-size:1.06rem;margin:0 auto 1.5em;max-width:44ch}
.e404-msg b{color:var(--blue);font-variant-numeric:tabular-nums;font-size:1.1em}
.e404-rand{margin:52px 0 8px}
.e404-rand h2{font-size:1.15rem;margin-bottom:16px}
.e404-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.e404-picks a{display:flex;flex-direction:column;gap:3px;background:var(--card);border:1.5px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:13px 16px;transition:transform .15s,box-shadow .15s,border-color .15s}
.e404-picks a:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.e404-picks .pk-t{font-weight:700;color:var(--text);font-size:.96rem}
.e404-picks .pk-u{font-family:var(--mono);font-size:.76rem;color:var(--faint);word-break:break-all}

/* ---------- home bands ---------- */
.band{padding:clamp(56px,7vw,96px) 0;margin:clamp(24px,3vw,48px) 0;position:relative;overflow:hidden}
.band-lilac{background:var(--band-lilac)}
.band-navy{background:var(--blue-deep);color:var(--on-navy)}
.band-navy h2,.band-navy .sec-head h2{color:#fff}
.band-navy .sec-head p{color:var(--on-navy-dim)}
.band-yellow{background:var(--yellow)}
.band-yellow h2,.band-yellow p,.band-yellow .n,.band-yellow .l{color:#1a1a0a!important}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;position:relative;z-index:2}
.stats .stat{display:flex;flex-direction:column;gap:4px}
.stats .stat .n{font-size:2.7rem;font-weight:800;color:var(--yellow);letter-spacing:-.02em;line-height:1}
.stats .stat .l{font-size:.92rem;color:var(--on-navy-dim);font-weight:600}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:26px;position:relative;z-index:2}
.why-card{background:var(--card);border:1.5px solid var(--border-soft);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.why-card .wi{width:50px;height:50px;border-radius:14px;background:var(--accent-soft);color:var(--blue);display:grid;place-items:center;margin-bottom:15px}
.why-card:nth-child(2) .wi{background:rgba(23,192,136,.18);color:#0f8f66}
.why-card:nth-child(3) .wi{background:rgba(246,166,9,.22);color:#c47f08}
.why-card .wi svg{width:25px;height:25px}
.why-card h3{font-size:1.14rem;margin:0 0 6px}.why-card p{margin:0;color:var(--muted);font-size:.92rem}
.cta{text-align:center}
.cta h2{font-size:2rem;margin-bottom:8px}
.cta p{color:var(--on-navy-dim);max-width:560px;margin:0 auto 24px;font-size:1.06rem}
.cta .btn{font-size:1.02rem;padding:15px 32px;background:var(--yellow);color:#1a1a0a;box-shadow:0 10px 26px rgba(250,227,81,.3)}
.cta .btn:hover{background:#ffe870;color:#1a1a0a}
/* decorative bubbles inside bands */
.band .deco{position:absolute;border-radius:50%;pointer-events:none;opacity:.5}
.band-navy .deco{opacity:.14}

/* ---------- footer ---------- */
footer.site{background:var(--blue-deep);margin-top:0;padding:52px 0 32px;color:var(--on-navy-dim);font-size:.9rem}
footer.site .brand{color:#fff}footer.site .brand .logo{color:var(--yellow)}
.foot{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:760px){.foot{grid-template-columns:1.25fr 1fr 1fr 1fr 1fr}}
.foot .col h4{color:#fff;font-size:.8rem;margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em}
.foot .col a{display:block;color:var(--on-navy-dim);margin-bottom:7px;font-size:.88rem}
footer.site .brand{display:inline-flex;align-items:center;gap:10px}
.foot .col a:hover{color:var(--yellow)}
.foot .about p{font-size:.88rem;color:var(--on-navy-dim)}
.copy{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:var(--on-navy-dim);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copy svg{width:14px;height:14px;color:var(--yellow)}
.foot-family{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.foot-family .fh{color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-bottom:2px}
.foot .foot-family a{color:var(--on-navy);font-size:.86rem;font-weight:600;display:flex;align-items:center;gap:8px}
.foot-family a svg{width:16px;height:16px;flex-shrink:0;transition:transform .25s ease}
.foot-family a:hover{color:var(--yellow)}
.foot-family a:hover svg{transform:scale(1.12)}

/* ---------- contextual cross-promo bands on tool pages ---------- */
.promo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0;padding:20px 24px;
  border-radius:var(--radius);border:1.5px solid var(--border-soft)}
.promo .promo-txt{flex:1;min-width:220px}
.promo .promo-txt h3{margin:0 0 3px;font-size:1.08rem}
.promo .promo-txt p{margin:0;font-size:.9rem;color:var(--muted)}
.promo .btn{flex-shrink:0}
.promo-wall{background:var(--band-lilac)}
.promo-pixpix{background:linear-gradient(120deg,var(--blue) 0%,var(--blue-hover) 100%);border-color:transparent;color:#fff}
.promo-pixpix .promo-txt h3{color:#fff}
.promo-pixpix .promo-txt p{color:rgba(255,255,255,.85)}
.promo-pixpix .promo-ic{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;flex-shrink:0;color:var(--yellow)}
.promo-pixpix .promo-ic svg{width:24px;height:24px}
.promo-pixpix .btn{background:var(--yellow);color:#1a1f2b;box-shadow:none}
.promo-pixpix .btn:hover{background:#fff;color:var(--blue-deep)}

/* large designer monitors: widen the canvas and scale up so it doesn't float in the middle */
@media(min-width:1600px){
  :root{--maxw:1560px}
  body{font-size:17px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
  .stats .stat .n{font-size:3.2rem}
}
@media(min-width:2100px){
  :root{--maxw:1840px}
  body{font-size:18px}
  .grid{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:640px){
  .hero h1{font-size:2.1rem}.hero{padding:48px 0 26px}
  h1{font-size:1.7rem}.tool-head h1{font-size:1.6rem}
  .tool-head h1 .ticon{width:46px;height:46px}
  .nav{gap:10px}.nav a.navlink{display:none}
  .sec-head p{display:none}.app{padding:18px}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px 16px}.stats .stat .n{font-size:2.1rem}
  .band{padding:40px 0}.bubble.b1,.bubble.b2{display:none}
}

/* ============ Articles / Guides ============ */
.article-index .ai-head{padding:38px 0 6px;max-width:760px}
.article-index .crumb,.article .crumb{font-size:.82rem;color:var(--faint);font-weight:650;margin-bottom:12px}
.article-index .crumb a,.article .crumb a{color:var(--muted)}
.article-index h1{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.article-index .lead{font-size:1.1rem;color:var(--muted);max-width:680px}
.art-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px;margin:26px 0 40px}
.art-card{display:flex;flex-direction:column;gap:7px;background:var(--card);border:1.5px solid var(--border-soft);
  border-radius:var(--radius);padding:22px;transition:transform .16s,box-shadow .16s,border-color .16s}
.art-card:hover{text-decoration:none;border-color:var(--babyblue);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.art-card .ac-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);
  background:var(--accent-soft);align-self:flex-start;padding:3px 10px;border-radius:var(--pill)}
.art-card h3{margin:.2rem 0 0;font-size:1.12rem;line-height:1.3;color:var(--text)}
.art-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55;flex:1}
.art-card .ac-meta{font-size:.8rem;color:var(--faint);font-family:var(--mono)}

.article{max-width:820px}
.article-main{padding:34px 0 10px}
.article h1{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.18;margin-bottom:.4em}
.art-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--faint);font-size:.86rem;margin-bottom:22px}
.art-meta span{white-space:nowrap}
.toc{background:var(--bg-soft);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:16px 20px;margin:0 0 28px}
.toc .toc-h{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.toc ul{margin:0;padding-left:18px}.toc li{margin:4px 0}
.toc a{color:var(--muted);font-size:.92rem}.toc a:hover{color:var(--blue)}
.article-body{font-size:1.05rem;line-height:1.8;color:var(--text)}
.article-body h2{font-size:1.5rem;margin:2em 0 .6em;scroll-margin-top:80px}
.article-body h2::after{content:'';display:block;width:44px;height:4px;background:var(--accent);border-radius:99px;margin-top:10px}
.article-body h3{font-size:1.2rem;margin:1.5em 0 .4em;scroll-margin-top:80px}
.article-body p{margin:0 0 1.1em}
.article-body ul,.article-body ol{padding-left:24px;margin:0 0 1.2em}
.article-body li{margin-bottom:.5em}
.article-body a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--babyblue)}
.article-body strong{color:var(--text)}
.article-body blockquote{margin:1.4em 0;padding:2px 18px;border-left:4px solid var(--accent);color:var(--muted);background:var(--bg-soft);border-radius:0 8px 8px 0}
.article-body code{font-family:var(--mono);font-size:.9em;background:var(--bg-soft);padding:2px 6px;border-radius:5px}
.article-body table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95rem;display:block;overflow-x:auto}
.article-body th,.article-body td{border:1px solid var(--border);padding:9px 13px;text-align:left}
.article-body th{background:var(--bg-soft);font-weight:700}
.article-body img{border-radius:var(--radius-sm);margin:1em 0}
.article-body hr{border:none;border-top:1.5px solid var(--border-soft);margin:2em 0}

/* inline tool CTA inside an article */
.art-tool{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;margin:1.6em 0;box-shadow:var(--shadow)}
.art-tool .at-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--accent)}
.art-tool .at-ic svg{width:22px;height:22px}
.art-tool .at-b{flex:1;min-width:0}
.art-tool .at-b h4{margin:0;font-size:1rem;color:var(--text)}
.art-tool .at-b p{margin:2px 0 0;font-size:.86rem;color:var(--muted)}

.article h2{font-size:1.5rem;margin-top:2em}
.art-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:14px 0 6px}
.rt-card{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;font-weight:650;color:var(--text);transition:.15s}
.rt-card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.rt-ic{color:var(--accent)}.rt-ic svg{width:18px;height:18px}.rt-t{font-size:.92rem}
.art-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;margin:14px 0 30px}
.art-more-card{display:flex;flex-direction:column;gap:5px;background:var(--card);border:1.5px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:15px 17px;transition:.15s}
.art-more-card:hover{border-color:var(--babyblue);text-decoration:none;transform:translateY(-2px)}
.amc-t{font-weight:700;color:var(--text);font-size:.98rem;line-height:1.3}
.amc-d{color:var(--muted);font-size:.85rem;line-height:1.5}

/* per-tool deep-dive block (why + advantages + vs alternatives) */
.tool-deep{margin-top:8px}
.tool-deep h2{font-size:1.5rem;margin-top:2em}
.tool-deep h2::after{content:'';display:block;width:44px;height:4px;background:var(--accent);border-radius:99px;margin-top:10px}
.tool-deep h3{font-size:1.15rem;margin-top:1.4em}
.tool-deep p{margin:0 0 1em;line-height:1.75}
.tool-deep ul,.tool-deep ol{padding-left:22px;color:var(--muted)}
.tool-deep li{margin-bottom:.5em}
.tool-deep strong{color:var(--text)}
.tool-deep table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95rem;display:block;overflow-x:auto}
.tool-deep th,.tool-deep td{border:1px solid var(--border);padding:9px 13px;text-align:left;vertical-align:top}
.tool-deep th{background:var(--bg-soft);font-weight:700}

/* ============ Liveliness pass (monica-inspired: vibrant, floaty, playful) ============ */
@media (prefers-reduced-motion: no-preference){
  /* hero bubbles drift gently */
  .bubble{animation:floaty 9s ease-in-out infinite}
  .bubble.b2{animation-duration:7s;animation-delay:-2s}
  .bubble.b3{animation-duration:6s;animation-delay:-1s}
  .bubble.b4{animation-duration:11s;animation-delay:-3s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
  /* tool-card icon springs on hover */
  .tool-card .ic{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .tool-card:hover .ic{transform:rotate(-6deg) scale(1.12)}
  /* section number badge pulses subtly */
  .sec-head .no{animation:pulseno 3.5s ease-in-out infinite}
  @keyframes pulseno{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
  /* CTA/primary buttons: soft glow breathing */
  .band.cta .btn{animation:glow 2.8s ease-in-out infinite}
  @keyframes glow{0%,100%{box-shadow:0 6px 16px rgba(242,92,38,0)}50%{box-shadow:0 10px 26px var(--accent-soft)}}
}
/* richer, colour-matched card hover (works without motion too) */
.tool-card{position:relative}
.tool-card:hover{border-color:transparent;box-shadow:0 18px 40px -14px var(--accent-soft),0 0 0 2px var(--babyblue)}
.tool-card:nth-child(3n+2):hover{box-shadow:0 18px 40px -14px rgba(250,227,81,.5),0 0 0 2px var(--gold)}
.tool-card:nth-child(3n):hover{box-shadow:0 18px 40px -14px rgba(255,214,196,.6),0 0 0 2px var(--babyblue)}
/* article cards get the same lift energy */
.art-card:hover{box-shadow:0 18px 40px -14px var(--accent-soft),0 0 0 2px var(--babyblue)}
/* animated gradient sheen on the hero highlight */
.hero h1 em{background-size:100% 100%}
/* tool icon tile in tool-head: gentle float */
@media (prefers-reduced-motion: no-preference){
  .tool-head h1 .ticon{animation:floaty 5s ease-in-out infinite}
}
/* pill "chips" style category feel on badges */
.hero .badges span{background:var(--card);border:1.5px solid var(--border-soft);padding:6px 14px;border-radius:var(--pill);
  box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.hero .badges span:hover{transform:translateY(-2px);border-color:var(--babyblue)}

/* ============================================================
   aioOS skin — dark-neutral, flat, dense, minimal (overrides)
   ============================================================ */
/* kill decorative motion + shapes */
.bubble,.band .deco{display:none!important}
.sec-head .no{animation:none!important}
.tool-head h1 .ticon{animation:none!important}
.tool-card:hover .ic{transform:none!important}
.band.cta .btn{animation:none!important}
.brand:hover .logo{transform:none!important}

/* flat solid icon tiles (no gradients, no glow) */
.tool-card .ic,
.tool-card:nth-child(6n+2) .ic,.tool-card:nth-child(6n+3) .ic,
.tool-card:nth-child(6n+4) .ic,.tool-card:nth-child(6n+5) .ic,.tool-card:nth-child(6n) .ic{
  width:44px;height:44px;border-radius:11px;box-shadow:none;color:#fff}
.tool-card .ic{background:#dd6b4a}
.tool-card:nth-child(6n+2) .ic{background:#d99a2e}
.tool-card:nth-child(6n+3) .ic{background:#2f9e6f}
.tool-card:nth-child(6n+4) .ic{background:#c85c86}
.tool-card:nth-child(6n+5) .ic{background:#c9a53a}
.tool-card:nth-child(6n) .ic{background:#cf5a3c}
.tool-card .ic svg{width:23px;height:23px;color:#fff}

/* flat dense cards */
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,255px),1fr));gap:14px;margin:16px 0 8px}
.tool-card{padding:15px 16px;border-radius:14px;border:1px solid var(--border-soft);
  box-shadow:none;transition:border-color .15s,transform .15s,background .15s}
.tool-card:hover,
.tool-card:nth-child(3n+2):hover,.tool-card:nth-child(3n):hover{
  transform:translateY(-2px);border-color:var(--border);box-shadow:none}
[data-theme="dark"] .tool-card:hover{background:#1a1c22}
[data-theme="light"] .tool-card:hover{background:#fbfbfc}
.tool-card h3{font-size:.98rem;font-weight:700}
.tool-card p{font-size:.83rem;color:var(--muted)}

/* section head: title + count badge, subtitle underneath */
.sec-head{margin:42px 0 2px;align-items:center;border:none}
.sec-head .no{display:none}
.sec-head h2{font-size:1.35rem;font-weight:700}
.sec-head h2 .cnt{font-size:.85rem;color:var(--faint);font-weight:600;margin-left:9px}
.sec-head p{display:none}
.sec-sub{color:var(--muted);font-size:.9rem;margin:2px 0 14px}

/* compact, clean hero (no giant type, no yellow block) */
.hero{padding:clamp(40px,6vw,72px) 0 clamp(26px,3vw,38px);max-width:840px}
.hero h1{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.15}
.hero h1 em{background:none!important;color:var(--accent);padding:0}
.hero p.lead{font-size:clamp(1rem,1.4vw,1.18rem)}
.hero .badges span{background:var(--card);border:1px solid var(--border-soft);box-shadow:none}

/* flat solid buttons */
.btn{background:var(--accent)!important;background-image:none!important;color:var(--accent-ink);
  box-shadow:none!important;border-radius:10px}
.btn:hover{background:var(--accent-hover)!important;filter:none;transform:translateY(-1px)}
.btn.sec{background:var(--card)!important;color:var(--text);border:1px solid var(--border)}

/* neutral bands (were navy/blue) */
.band-navy,.band.cta{background:var(--band-lilac)!important}
.band-navy .stat .n,.band.cta h2{color:var(--text)!important}
.band-lilac{background:var(--card)!important}
footer.site{background:var(--band-lilac)}
footer.site .col h4,footer.site .brand{color:var(--text)}

/* cards/rounding site-wide a touch tighter */
.app,.art-card,.feat .f,.faq details{border-radius:14px}

/* header: neutral solid, flat */
header.site{background:var(--bg)!important;backdrop-filter:none!important;border-bottom:1px solid var(--border-soft)}
.nav a.navlink:hover{background:var(--band-lilac)}
.langsw a.on{background:var(--accent);color:var(--accent-ink)}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
/* article + tool-head icon tiles flat */
.tool-head h1 .ticon{background:var(--accent);box-shadow:none;border-radius:12px}
.art-tool .at-ic{background:var(--accent);box-shadow:none}
.steps li::before{background:var(--accent);box-shadow:none}

/* ===== aioOS-faithful pass: neutral monochrome canvas, system font, denser ===== */
/* neutral headings (system font, a touch lighter than 800) */
h1,h2,h3{font-weight:700}
.hero h1{font-weight:800;letter-spacing:-.025em}
.hero h1 em{color:inherit!important;background:none!important}   /* no coloured highlight word */
.brand em{color:var(--text)}                                     /* .DIY neutral, not accent */
.brand .logo{color:var(--text)}
header.site .brand:hover .logo{color:var(--text)!important}
/* on-accent glyphs must flip to accent-ink now that accent is light-in-dark */
.tool-head h1 .ticon{color:var(--accent-ink)}
.tool-head h1 .ticon svg{color:var(--accent-ink)}
.art-tool .at-ic,.art-tool .at-ic svg{color:var(--accent-ink)}
.steps li::before{color:var(--accent-ink)}
.sec-head h2 .cnt{color:var(--faint)}
/* denser, tighter grid + cards (aioOS density) */
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px;margin:14px 0 6px}
.tool-card{padding:14px 15px;border-radius:12px;gap:12px}
.tool-card .ic{width:42px;height:42px;border-radius:10px}
.tool-card h3{font-size:.95rem}
.tool-card p{font-size:.82rem;line-height:1.45}
.sec-head{margin:36px 0 2px}
.sec-head h2{font-size:1.25rem}
.sec-sub{font-size:.88rem;margin:2px 0 12px}
section[id]{padding:6px 0 22px}
/* compact neutral hero */
.hero{padding:clamp(34px,5vw,60px) 0 clamp(22px,3vw,32px)}
.hero h1{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.hero .badges span{border-radius:8px}
/* flatter corners site-wide */
.app,.art-card,.feat .f,.faq details,.btn,.item,.note{border-radius:10px}
.iconbtn,.langsw{border-radius:8px}

/* ============================================================
   Premium skin: editorial, precise, and consistent across tools
   ============================================================ */
:root,[data-theme="light"]{
  --bg:#f4f6f2;
  --bg-soft:#ecefeb;
  --band-lilac:#e8ece7;
  --band-cream:#f7f8f4;
  --card:#fffef9;
  --text:#111612;
  --muted:#58625c;
  --faint:#8d968f;
  --border:#d9ded7;
  --border-soft:#e6eae3;
  --blue:#173f36;
  --blue-hover:#0c2c25;
  --blue-deep:#111612;
  --yellow:#c5a46a;
  --gold:#a57f3d;
  --babyblue:#dce8e4;
  --accent:#173f36;
  --accent-hover:#0c2c25;
  --accent-ink:#fffef9;
  --accent-soft:#e1ebe6;
  --on-navy:#f7f8f4;
  --on-navy-dim:#bac6bf;
  --shadow:0 18px 50px rgba(28,37,31,.08);
  --shadow-lift:0 24px 64px rgba(28,37,31,.13);
  --radius:16px;
  --radius-sm:10px;
}
[data-theme="dark"]{
  --bg:#0d100f;
  --bg-soft:#171d1a;
  --band-lilac:#121815;
  --band-cream:#101512;
  --card:#151b18;
  --text:#eef2ed;
  --muted:#a4ada7;
  --faint:#6f7872;
  --border:#2b332f;
  --border-soft:#222b27;
  --blue:#d0ad70;
  --blue-hover:#e3c48a;
  --blue-deep:#080a09;
  --yellow:#d0ad70;
  --gold:#e3c48a;
  --babyblue:#24342f;
  --accent:#d0ad70;
  --accent-hover:#e3c48a;
  --accent-ink:#11120f;
  --accent-soft:rgba(208,173,112,.12);
  --on-navy:#eef2ed;
  --on-navy-dim:#9ca8a1;
  --shadow:0 20px 60px rgba(0,0,0,.38);
  --shadow-lift:0 28px 80px rgba(0,0,0,.48);
}
body{
  background:
    linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 360px),
    var(--bg);
}
[data-theme="dark"] body{
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 360px),
    var(--bg);
}
h1,h2,h3{letter-spacing:0;font-weight:760}
.wrap{max-width:1360px}
header.site{
  background:color-mix(in srgb,var(--bg) 88%,transparent)!important;
  backdrop-filter:blur(18px) saturate(1.2)!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}
.nav{height:72px}
.brand{font-size:1.08rem;letter-spacing:.01em}
.brand .logo{width:30px;height:30px;color:var(--accent)}
.brand em{color:var(--accent)}
.nav a.navlink{border-radius:8px;font-weight:650}
.iconbtn,.langsw{border-radius:10px}
.langsw a{background:transparent}
.langsw a.on{background:var(--accent);color:var(--accent-ink)}

.hero-wrap{
  border-bottom:1px solid var(--border-soft);
  background:
    linear-gradient(90deg,rgba(23,63,54,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(23,63,54,.045) 1px,transparent 1px);
  background-size:56px 56px;
}
[data-theme="dark"] .hero-wrap{
  background:
    linear-gradient(90deg,rgba(208,173,112,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(208,173,112,.04) 1px,transparent 1px);
  background-size:56px 56px;
}
.hero{
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,520px);
  gap:clamp(30px,5vw,76px);
  align-items:center;
  padding:clamp(56px,8vw,108px) 0;
}
.hero-copy{max-width:850px}
.hero h1{font-size:clamp(2.35rem,5vw,5.15rem);line-height:1.02;margin-bottom:24px;font-weight:780}
.hero h1 em{color:var(--accent)!important}
.hero p.lead{max-width:760px;font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.72;margin-bottom:28px}
.hero .badges{gap:10px}
.hero .badges span{
  border-radius:999px;
  padding:9px 14px;
  background:color-mix(in srgb,var(--card) 82%,transparent);
  border:1px solid var(--border-soft);
  box-shadow:none;
}
.hero .badges svg{color:var(--accent);width:17px;height:17px}
.hero-panel{
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,transparent),var(--card));
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.hp-top{
  height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid var(--border-soft);
  background:color-mix(in srgb,var(--bg-soft) 72%,var(--card));
}
.hp-top span{width:9px;height:9px;border-radius:50%;background:var(--faint);opacity:.55}
.hp-screen{padding:20px;display:grid;gap:12px}
.hp-meter{
  height:8px;
  background:var(--bg-soft);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:4px;
}
.hp-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--yellow))}
.hero-mini{
  display:flex;
  gap:13px;
  align-items:flex-start;
  padding:14px;
  border:1px solid var(--border-soft);
  border-radius:14px;
  color:var(--text);
  background:color-mix(in srgb,var(--card) 86%,var(--bg-soft));
  transition:transform .16s,border-color .16s,background .16s;
}
.hero-mini:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--accent)}
.hmi{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:var(--accent);background:var(--accent-soft);flex:none;
}
.hmi svg{width:19px;height:19px}
.hero-mini b{display:block;font-size:.95rem;line-height:1.25}
.hero-mini em{display:block;margin-top:4px;font-style:normal;color:var(--muted);font-size:.78rem;line-height:1.45}

.band{margin:0;padding:clamp(44px,6vw,78px) 0}
.band-navy,.band.cta{background:var(--blue-deep)!important;color:var(--on-navy)}
.band-navy .stat .n,.band.cta h2{color:var(--yellow)!important}
.band-navy .stat .l,.cta p{color:var(--on-navy-dim)!important}
.stats{gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.stats .stat{padding:28px 16px;background:rgba(255,255,255,.035)}
.stats .stat .n{font-size:clamp(2rem,4vw,3.15rem);font-weight:760}
.band-lilac{background:var(--band-lilac)!important}
.why-card{
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:none;
  background:var(--card);
}
.why-card .wi{border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.cta .btn{background:var(--yellow)!important;color:#11120f!important;border:0}

.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.tool-card,.art-card,.art-more-card,.rt-card,.feat .f,.faq details,.usecases .uc,.item,.note{
  border:1px solid var(--border-soft);
  background:var(--card);
}
.tool-card{
  border-radius:16px;
  padding:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
.tool-card:hover,.art-card:hover,.art-more-card:hover,.rt-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  box-shadow:var(--shadow);
}
.tool-card .ic,
.tool-card:nth-child(6n+2) .ic,
.tool-card:nth-child(6n+3) .ic,
.tool-card:nth-child(6n+4) .ic,
.tool-card:nth-child(6n+5) .ic,
.tool-card:nth-child(6n) .ic{
  width:44px;height:44px;border-radius:12px;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);
}
.tool-card .ic svg{color:var(--accent);width:22px;height:22px}
.tool-card h3{font-size:1rem}
.tool-card p{font-size:.85rem;line-height:1.55}
.sec-head{margin:46px 0 4px}
.sec-head h2{font-size:1.45rem}
.sec-sub{font-size:.93rem;max-width:680px}

.app{
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 95%,var(--bg-soft)),var(--card));
}
.drop{border-width:1.5px;border-radius:16px;background:var(--bg-soft)}
.btn{
  border-radius:12px;
  background:var(--accent)!important;
  color:var(--accent-ink)!important;
  box-shadow:none!important;
}
.btn:hover{background:var(--accent-hover)!important}
.field input[type=number],.field input[type=text],.field select,.seg{
  border-radius:12px;
  border-color:var(--border);
}
.tool-head{padding-top:54px}
.tool-head h1{font-size:clamp(2rem,3.1vw,3rem);letter-spacing:0}
.tool-head h1 .ticon{
  width:58px;height:58px;border-radius:16px;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
}
.tool-head h1 .ticon svg{color:var(--accent)}
.content h2,.tool-deep h2,.article-body h2{letter-spacing:0}
.content h2::after,.tool-deep h2::after,.article-body h2::after{
  width:36px;height:2px;background:var(--yellow)
}
.steps li::before{border-radius:12px;background:var(--accent);color:var(--accent-ink)}

.article-index{max-width:1360px}
.article-index .ai-head{
  max-width:880px;
  padding:clamp(54px,7vw,92px) 0 20px;
}
.article-index h1{font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:1.04}
.article-index .lead{font-size:clamp(1.03rem,1.5vw,1.22rem);line-height:1.72}
.art-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px}
.article-index .art-card:first-child{grid-column:span 2}
.art-card{
  border-radius:18px;
  padding:24px;
  min-height:220px;
}
.art-card .ac-cat{
  border-radius:999px;
  padding:5px 11px;
  color:var(--accent);
  background:var(--accent-soft);
  letter-spacing:.08em;
}
.art-card h3{font-size:1.22rem;line-height:1.25}
.article-index .art-card:first-child h3{font-size:clamp(1.45rem,2.2vw,2.05rem)}
.art-card p{font-size:.95rem}
.art-card .ac-meta{font-family:var(--font);letter-spacing:.01em}

.article{max-width:1120px}
.article-main{
  max-width:840px;
  margin:0 auto;
  padding:clamp(48px,7vw,86px) 0 24px;
}
.article h1{
  font-size:clamp(2.15rem,4.1vw,4.05rem);
  line-height:1.08;
  margin-bottom:18px;
  letter-spacing:0;
}
.article .crumb,.article-index .crumb{letter-spacing:.02em}
.art-meta{
  padding-bottom:22px;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:26px;
}
.toc{
  background:var(--card);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:none;
}
.toc .toc{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  box-shadow:none;
}
.toc .toc-h{letter-spacing:.09em}
.article-body{
  font-size:1.08rem;
  line-height:1.88;
}
.article-body h2{
  font-size:1.62rem;
  margin-top:2.35em;
  padding-top:.2em;
}
.article-body h3{font-size:1.22rem}
.article-body p{margin-bottom:1.18em}
.article-body blockquote{
  border-left:3px solid var(--yellow);
  background:var(--bg-soft);
  border-radius:12px;
  padding:16px 20px;
}
.article-body table{
  border:1px solid var(--border);
  border-radius:12px;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
.article-body th,.article-body td{border:0;border-bottom:1px solid var(--border-soft)}
.article-body th{background:var(--bg-soft)}
.art-tool{
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.art-tool .at-ic,.rt-ic{
  color:var(--accent);
  background:var(--accent-soft);
}
.art-tool .at-ic svg{color:var(--accent)}
.art-related{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.rt-card,.art-more-card{border-radius:14px;padding:15px 16px}

footer.site{
  background:var(--blue-deep);
  color:var(--on-navy-dim);
}
footer.site .col h4,footer.site .brand{color:var(--on-navy)}
footer.site .brand .logo,footer.site .brand em,.copy svg{color:var(--yellow)}
.foot .col a,.foot .about p,.copy{color:var(--on-navy-dim)}
.foot .col a:hover{color:var(--yellow)}

@media(max-width:920px){
  .hero{grid-template-columns:1fr;padding:48px 0}
  .hero-panel{max-width:560px}
  .article-index .art-card:first-child{grid-column:auto}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .nav{height:64px}
  .brand{font-size:1rem}
  .hero h1{font-size:2.35rem}
  .hero-panel{border-radius:18px}
  .hp-screen{padding:14px}
  .hero-mini{padding:12px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .stat{padding:22px 10px}
  .art-card{min-height:0}
  .article-body{font-size:1rem;line-height:1.78}
  .article h1{font-size:2.1rem}
  .tool-head h1{font-size:1.9rem}
}

/* WeChat module extractor tool */
.wm-paste:empty::before{content:attr(data-ph);color:var(--faint)}
.wm-paste:focus{border-color:var(--accent)}
.wm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin:14px 0}
.wm-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.wm-prevwrap{max-height:240px;overflow:auto;background:#fff;padding:8px;border-bottom:1px solid var(--border-soft)}
.wm-prev{transform-origin:top left}
.wm-actions{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
.wm-panel{padding:10px 12px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:8px;background:var(--bg-soft,transparent)}
.wm-swaprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wm-thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
.wm-sw{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);flex-shrink:0}
.wm-panel input[type=color]{width:40px;height:30px;padding:0;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer}

/* ============================================================
   Notion skin — warm minimalism · serif headings · soft surfaces
   Appended last so it wins over earlier aioOS skin layers.
   ============================================================ */
h1,h2,h3,.hero h1,.tool-head h1,.content h1,.content h2,.content h3,.sec-head h2,.why h2,.cta h2{
  font-family:var(--serif);font-weight:700;letter-spacing:-.012em}
h1,.hero h1{letter-spacing:-.022em}
body{line-height:1.65}

/* links */
a{color:var(--blue)}
a:hover{text-decoration:underline;text-underline-offset:2px}

/* Notion text-highlight (yellow) instead of marker gradient */
.hero h1 em,.mark{background:var(--yellow)!important;color:inherit!important;padding:.02em .16em;border-radius:3px;
  box-shadow:none!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-style:normal}

/* clean surface — no decorative bubbles */
.bubble{display:none!important}
.hero-panel{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--card)}
.hp-top span{background:var(--faint)}

/* header hairline + soft blur */
header.site{border-bottom:1px solid var(--border);background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(1.08) blur(10px);backdrop-filter:saturate(1.08) blur(10px);box-shadow:none}
[data-theme="dark"] header.site{background:rgba(25,25,25,.82)}

/* tool cards — Notion block: hairline border, subtle hover */
.tool-card{border:1px solid var(--border)!important;border-radius:var(--radius)!important;background:var(--card)!important;
  box-shadow:none!important;transition:background .12s,border-color .12s,box-shadow .12s}
.tool-card:hover{background:var(--accent-soft)!important;border-color:var(--border)!important;
  box-shadow:var(--shadow)!important;transform:none!important}

/* pastel Notion callout icon tiles (colored glyph on soft tint) */
.tool-card .ic,
.tool-card:nth-child(6n+2) .ic,.tool-card:nth-child(6n+3) .ic,
.tool-card:nth-child(6n+4) .ic,.tool-card:nth-child(6n+5) .ic,.tool-card:nth-child(6n) .ic{
  border-radius:7px!important;box-shadow:none!important;background:#e7f3f8!important;color:#337ea9!important;transform:none!important}
.tool-card:nth-child(6n+2) .ic{background:#faebdd!important;color:#d9730d!important}
.tool-card:nth-child(6n+3) .ic{background:#edf3ec!important;color:#448361!important}
.tool-card:nth-child(6n+4) .ic{background:#faf1f5!important;color:#c14c8a!important}
.tool-card:nth-child(6n+5) .ic{background:#f6f3f9!important;color:#9065b0!important}
.tool-card:nth-child(6n) .ic{background:#fbf3db!important;color:#cb912f!important}
.tool-card .ic svg{color:currentColor!important;width:24px;height:24px}
[data-theme="dark"] .tool-card .ic{background:rgba(51,126,169,.20)!important;color:#7fb4d6!important}
[data-theme="dark"] .tool-card:nth-child(6n+2) .ic{background:rgba(217,115,13,.20)!important;color:#e0a25e!important}
[data-theme="dark"] .tool-card:nth-child(6n+3) .ic{background:rgba(68,131,97,.20)!important;color:#7cbb9a!important}
[data-theme="dark"] .tool-card:nth-child(6n+4) .ic{background:rgba(193,76,138,.20)!important;color:#d98cb4!important}
[data-theme="dark"] .tool-card:nth-child(6n+5) .ic{background:rgba(144,101,176,.22)!important;color:#b59bd2!important}
[data-theme="dark"] .tool-card:nth-child(6n) .ic{background:rgba(203,145,47,.20)!important;color:#dcb15e!important}

/* buttons — Notion: modest radius, medium weight, subtle */
.btn{border-radius:var(--radius-sm)!important;font-weight:600;box-shadow:none;transition:background .12s,box-shadow .12s}
.btn:not(.sec){background:var(--accent);color:var(--accent-ink)}
.btn:not(.sec):hover{background:var(--accent-hover);box-shadow:var(--shadow)}
.btn.sec{background:var(--card);color:var(--text);border:1px solid var(--border)}
.btn.sec:hover{background:var(--accent-soft)}

/* bands → warm light surfaces (no dark navy) */
.band-navy{background:var(--blue-deep)!important;color:var(--on-navy)!important;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.band-lilac,.band-cream{background:var(--band-lilac)!important}
.band-navy .sec-head p,.stats .stat .l{color:var(--on-navy-dim)!important}
.stats .stat .n{color:var(--text)!important}
.band-navy.cta .btn:not(.sec){background:var(--accent);color:var(--accent-ink)}
.why-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.why-card .wi{background:#e7f3f8;color:#337ea9;border-radius:8px}
[data-theme="dark"] .why-card .wi{background:rgba(51,126,169,.20);color:#7fb4d6}

/* inputs / dropzone / segmented — hairline, low radius */
.drop{border:1.5px dashed var(--border);border-radius:var(--radius);background:var(--band-lilac)}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--accent-soft)}
.field input,.field select,.field textarea{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(35,131,226,.24)}
.seg{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--band-lilac);overflow:hidden}
.seg button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}

/* nav + related + badges → rounded rects, not pills */
.nav a.navlink,.related a,.badges span,.langsw a{border-radius:var(--radius-sm)!important}
.sec-head .cnt{background:var(--accent-soft);color:var(--muted);border-radius:5px;font-weight:600}

/* inline code, pre, tables — Notion */
.content code,code{font-family:var(--mono);font-size:.86em;background:var(--accent-soft);color:#eb5757;
  padding:.15em .35em;border-radius:3px}
[data-theme="dark"] .content code,[data-theme="dark"] code{color:#ff7369}
.content pre{background:var(--band-lilac);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;overflow:auto}
.content pre code{background:none;color:var(--text);padding:0}
.content table{border-collapse:collapse;width:100%;margin:1em 0}
.content th,.content td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.content th{background:var(--band-lilac);font-weight:600}
.content blockquote{border-left:3px solid var(--text);margin:1em 0;padding:.2em 0 .2em 16px;color:var(--muted)}

/* callout / note */
.note{background:var(--band-lilac);border:1px solid var(--border);border-radius:var(--radius-sm)}

/* tool-deep + article body headings serif too */
.tool-deep h2,.tool-deep h3,.article-body h1,.article-body h2,.article-body h3{font-family:var(--serif)}

/* ============================================================
   Notion tokens — FINAL (win over the earlier editorial skin)
   ============================================================ */
:root,[data-theme="light"]{
  --bg:#ffffff; --bg-soft:#f7f6f3; --band-lilac:#f7f6f3; --band-cream:#f7f6f3; --card:#ffffff;
  --border:#e9e9e7; --border-soft:#efefee;
  --text:#37352f; --muted:#787774; --faint:#9b9a97;
  --blue:#2383e2; --blue-hover:#0b6fc9; --blue-deep:#f7f6f3;
  --yellow:#fdecc8; --gold:#cb912f; --babyblue:#e7f3f8;
  --accent:#2383e2; --accent-hover:#0b6fc9; --accent-ink:#ffffff; --accent-soft:#f1f1ef;
  --on-navy:#37352f; --on-navy-dim:#787774;
  --shadow:0 1px 2px rgba(15,15,15,.05),0 3px 12px rgba(15,15,15,.04);
  --shadow-lift:0 2px 4px rgba(15,15,15,.08),0 10px 26px rgba(15,15,15,.08);
  --radius:8px; --radius-sm:6px; --pill:6px; --maxw:1200px;
}
[data-theme="dark"]{
  --bg:#191919; --bg-soft:#202020; --band-lilac:#202020; --band-cream:#202020; --card:#202020;
  --border:#373737; --border-soft:#2b2b2b;
  --text:#e9e9e7; --muted:#9b9a97; --faint:#6f6f6f;
  --blue:#529cca; --blue-hover:#6fb0d8; --blue-deep:#202020;
  --yellow:#56502f; --gold:#cb912f; --babyblue:#1e3a4a;
  --accent:#529cca; --accent-hover:#6fb0d8; --accent-ink:#ffffff; --accent-soft:#2f2f2f;
  --on-navy:#e9e9e7; --on-navy-dim:#9b9a97;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 3px 12px rgba(0,0,0,.3);
  --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.4);
}
/* flat clean hero (drop the editorial green grid) */
.hero-wrap{background:var(--bg)!important;border-bottom:1px solid var(--border)}
[data-theme="dark"] .hero-wrap{background:var(--bg)!important}
.wrap{max-width:var(--maxw)}
/* header hairline (override editorial color-mix) */
header.site{background:color-mix(in srgb,var(--bg) 82%,transparent)!important;border-bottom:1px solid var(--border)!important}
/* brand mark in Notion text tone, not accent-blue */
.brand .logo,.brand em{color:var(--text)!important}
/* on-accent glyphs (accent is now blue) stay white */
.tool-head h1 .ticon,.tool-head h1 .ticon svg,.art-tool .at-ic svg,.steps li::before{color:#fff!important}

/* Notion primary buttons — blue, win over cta/promo/aioOS layers */
.btn:not(.sec),.cta .btn,.band-navy.cta .btn,.promo-pixpix .btn{
  background:var(--accent)!important;background-image:none!important;color:var(--accent-ink)!important;
  box-shadow:none!important;border-radius:var(--radius-sm)!important;font-weight:600}
.btn:not(.sec):hover,.cta .btn:hover,.band-navy.cta .btn:hover,.promo-pixpix .btn:hover{
  background:var(--accent-hover)!important;color:var(--accent-ink)!important;box-shadow:var(--shadow)!important}
.btn.sec{background:var(--card)!important;color:var(--text)!important;border:1px solid var(--border)!important}
.btn.sec:hover{background:var(--accent-soft)!important;color:var(--text)!important;border-color:var(--border)!important}

/* ============================================================
   Vibrant animated icon tiles — colorful gradients + playful hover
   ([data-theme] prefix → beats the flat Notion-pastel tiles above)
   ============================================================ */
[data-theme] .tool-card .ic{
  background:linear-gradient(135deg,#4c8dff,#22d3ee)!important;color:#fff!important;
  border-radius:13px!important;
  box-shadow:0 6px 15px -5px rgba(76,141,255,.6)!important;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1),box-shadow .34s ease!important}
[data-theme] .tool-card:nth-child(6n+2) .ic{background:linear-gradient(135deg,#ff9a3d,#ff5d8f)!important;box-shadow:0 6px 15px -5px rgba(255,110,90,.58)!important}
[data-theme] .tool-card:nth-child(6n+3) .ic{background:linear-gradient(135deg,#12c08a,#5ee08a)!important;box-shadow:0 6px 15px -5px rgba(18,192,138,.55)!important}
[data-theme] .tool-card:nth-child(6n+4) .ic{background:linear-gradient(135deg,#ff5d8f,#ffa07a)!important;box-shadow:0 6px 15px -5px rgba(255,93,143,.55)!important}
[data-theme] .tool-card:nth-child(6n+5) .ic{background:linear-gradient(135deg,#8b5cf6,#c48bff)!important;box-shadow:0 6px 15px -5px rgba(139,92,246,.55)!important}
[data-theme] .tool-card:nth-child(6n) .ic{background:linear-gradient(135deg,#f7a708,#ffd23f)!important;box-shadow:0 6px 15px -5px rgba(247,167,8,.55)!important}
[data-theme] .tool-card .ic svg{color:#fff!important;width:25px;height:25px}

/* playful hover: icon pops + rotates, card lifts, glow intensifies */
[data-theme] .tool-card:hover .ic{transform:translateY(-3px) rotate(-7deg) scale(1.15)!important}
[data-theme] .tool-card:hover{transform:translateY(-2px)!important;box-shadow:var(--shadow-lift)!important;border-color:var(--border)!important;background:var(--card)!important}
[data-theme] .tool-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}

@media (prefers-reduced-motion:reduce){
  [data-theme] .tool-card .ic,[data-theme] .tool-card{transition:none!important}
  [data-theme] .tool-card:hover .ic,[data-theme] .tool-card:hover{transform:none!important}
}

/* ============================================================
   iOS Liquid Glass — frosted translucent surfaces + ambient mesh
   ============================================================ */
:root,[data-theme="light"]{
  --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.55); --glass-blur:saturate(180%) blur(16px);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.8); --glass-sh:0 8px 28px rgba(17,20,24,.08);
}
[data-theme="dark"]{
  --glass:rgba(42,42,45,.55); --glass-strong:rgba(52,52,56,.66);
  --glass-brd:rgba(255,255,255,.10); --glass-blur:saturate(170%) blur(16px);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.07); --glass-sh:0 10px 32px rgba(0,0,0,.38);
}
/* (旧 ambient 光斑已移除 — imgli overlay 用 body::before 光斑替代) */

/* glass surfaces */
.tool-card,.hero-panel,.why-card,.drop,.note,.faq details,.hero-mini{
  background:var(--glass)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd)!important;
  box-shadow:var(--glass-hi),var(--glass-sh)!important;
  border-radius:16px!important}
.drop{border-style:dashed!important}
header.site{background:var(--glass)!important;
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--glass-brd)!important;box-shadow:var(--glass-hi)!important}
.seg{background:var(--glass)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd)!important;box-shadow:var(--glass-hi)!important}
.btn.sec{background:var(--glass)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd)!important;box-shadow:var(--glass-hi)!important}
.related a,.badges span{background:var(--glass)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd)!important}
.langsw,.iconbtn{background:var(--glass)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd)!important}
/* card hover on glass — a touch brighter + lift */
[data-theme] .tool-card:hover,[data-theme] .why-card:hover{
  background:var(--glass-strong)!important;transform:translateY(-2px)!important;
  box-shadow:var(--glass-hi),var(--shadow-lift)!important;border-color:var(--glass-brd)!important}

/* ---- softer icon hover (subtle grow, no spin) ---- */
[data-theme] .tool-card .ic{transition:transform .25s ease,box-shadow .25s ease!important}
[data-theme] .tool-card:hover .ic{transform:translateY(-1px) scale(1.06)!important}
@media (prefers-reduced-motion:reduce){
  [data-theme] .tool-card:hover .ic,[data-theme] .tool-card:hover,[data-theme] .why-card:hover{transform:none!important}
}

/* ============================================================
   Bento feature grid — asymmetric cards, pastel icons, soft motif
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0}
.b-card{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:30px 34px;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-hi),var(--glass-sh);
  display:flex;flex-direction:column;gap:20px;min-height:210px;
  transition:transform .22s ease,box-shadow .22s ease}
.b-card.wide{grid-column:span 2}
.b-card:hover{transform:translateY(-2px);box-shadow:var(--glass-hi),var(--shadow-lift)}
.b-card .wi{position:relative;z-index:1;width:54px;height:54px;border-radius:15px;display:grid;place-items:center}
.b-card .wi svg{width:26px;height:26px;stroke-width:1.8}
.b-card .b-tx{position:relative;z-index:1;margin-top:auto}
.b-card h3{font-family:var(--serif);font-size:1.32rem;line-height:1.25;margin:0 0 10px}
.b-card p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.65}
.b-card.wide .b-tx{max-width:58%}
/* soft pastel icon tones (reference style) */
.wi.blue{background:#e7f3f8;color:#2b7bb0}.wi.orange{background:#faece0;color:#d9730d}
.wi.green{background:#e9f4ec;color:#3d9666}.wi.purple{background:#f1ecfa;color:#8a5cd6}
[data-theme="dark"] .wi.blue{background:rgba(43,123,176,.20);color:#7fb4d6}
[data-theme="dark"] .wi.orange{background:rgba(217,115,13,.20);color:#e0a25e}
[data-theme="dark"] .wi.green{background:rgba(61,150,102,.20);color:#79c39c}
[data-theme="dark"] .wi.purple{background:rgba(138,92,214,.22);color:#b9a0e6}
/* faint decorative motif on the wide feature cards (dot mesh fading from the right + soft tint) */
.b-card.feat::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(2px 2px at 12px 12px,rgba(55,53,47,.05) 42%,transparent 44%);
  background-size:24px 24px;
  -webkit-mask:linear-gradient(90deg,transparent 40%,#000 92%);mask:linear-gradient(90deg,transparent 40%,#000 92%)}
.b-card.feat:nth-child(1)::after{background-image:radial-gradient(120% 150% at 100% -20%,rgba(43,123,176,.13),transparent 60%),radial-gradient(2px 2px at 12px 12px,rgba(55,53,47,.05) 42%,transparent 44%);background-size:auto,24px 24px}
.b-card.feat:nth-child(4)::after{background-image:radial-gradient(120% 150% at 100% 120%,rgba(138,92,214,.13),transparent 60%),radial-gradient(2px 2px at 12px 12px,rgba(55,53,47,.05) 42%,transparent 44%);background-size:auto,24px 24px}
[data-theme="dark"] .b-card.feat::after{background-image:radial-gradient(2px 2px at 12px 12px,rgba(255,255,255,.06) 42%,transparent 44%);background-size:24px 24px}
[data-theme="dark"] .b-card.feat:nth-child(1)::after{background-image:radial-gradient(120% 150% at 100% -20%,rgba(43,123,176,.18),transparent 60%),radial-gradient(2px 2px at 12px 12px,rgba(255,255,255,.06) 42%,transparent 44%);background-size:auto,24px 24px}
[data-theme="dark"] .b-card.feat:nth-child(4)::after{background-image:radial-gradient(120% 150% at 100% 120%,rgba(138,92,214,.20),transparent 60%),radial-gradient(2px 2px at 12px 12px,rgba(255,255,255,.06) 42%,transparent 44%);background-size:auto,24px 24px}
/* responsive */
@media(max-width:860px){.bento{grid-template-columns:1fr 1fr}.b-card.wide{grid-column:span 2}.b-card.wide .b-tx{max-width:100%}}
@media(max-width:560px){.bento{grid-template-columns:1fr;gap:12px}.b-card.wide{grid-column:auto}.b-card{min-height:0;padding:26px 26px}}
@media(prefers-reduced-motion:reduce){.b-card:hover{transform:none}}

/* ============================================================
   Hero bento — featured tools showcase (1 big 2x2 + 4 compact)
   ============================================================ */
.hero{display:block!important}
.hero-copy{max-width:820px}
.hero-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:16px;margin:28px 0 6px}
.ht{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:14px;
  padding:22px 24px;border-radius:20px;min-height:158px;text-decoration:none!important;color:var(--text);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-hi),var(--glass-sh);
  transition:transform .2s ease,box-shadow .2s ease}
.ht:hover{transform:translateY(-3px);box-shadow:var(--glass-hi),var(--shadow-lift)}
.ht.big{grid-column:span 2;grid-row:span 2}
.ht>*{position:relative;z-index:1}
.ht-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#4c8dff,#22d3ee);box-shadow:0 7px 16px -6px rgba(76,141,255,.6);
  transition:transform .25s ease}
.ht:hover .ht-ic{transform:scale(1.06)}
.ht-ic svg{width:26px;height:26px;color:#fff!important;stroke-width:1.8}
.ht.big .ht-ic{width:66px;height:66px;border-radius:18px}
.ht.big .ht-ic svg{width:33px;height:33px}
.ht-tx{margin-top:auto;display:block}
.ht-name{font-family:var(--serif);font-weight:700;font-size:1.08rem;display:block;margin-bottom:5px;line-height:1.2}
.ht-sub{color:var(--muted);font-size:.87rem;line-height:1.5;display:block}
.ht.big .ht-name{font-size:1.7rem;margin-bottom:9px}
.ht.big .ht-sub{font-size:1.02rem;max-width:38ch}
/* gradient tones */
.ht.t1 .ht-ic{background:linear-gradient(135deg,#4c8dff,#22d3ee);box-shadow:0 7px 16px -6px rgba(76,141,255,.6)}
.ht.t2 .ht-ic{background:linear-gradient(135deg,#ff6a5e,#ff5d8f);box-shadow:0 7px 16px -6px rgba(255,93,143,.55)}
.ht.t3 .ht-ic{background:linear-gradient(135deg,#12c08a,#5ee08a);box-shadow:0 7px 16px -6px rgba(18,192,138,.5)}
.ht.t4 .ht-ic{background:linear-gradient(135deg,#f7a708,#ffd23f);box-shadow:0 7px 16px -6px rgba(247,167,8,.5)}
.ht.t5 .ht-ic{background:linear-gradient(135deg,#8b5cf6,#c48bff);box-shadow:0 7px 16px -6px rgba(139,92,246,.5)}
/* big card decorative motif (dot mesh + soft tint fading in from the right) */
.ht.big::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(120% 130% at 100% 0,rgba(255,93,143,.12),transparent 60%),
    radial-gradient(2px 2px at 12px 12px,rgba(55,53,47,.05) 42%,transparent 44%);
  background-size:auto,24px 24px;
  -webkit-mask:linear-gradient(90deg,transparent 34%,#000 92%);mask:linear-gradient(90deg,transparent 34%,#000 92%)}
[data-theme="dark"] .ht.big::after{background-image:radial-gradient(120% 130% at 100% 0,rgba(255,93,143,.16),transparent 60%),radial-gradient(2px 2px at 12px 12px,rgba(255,255,255,.06) 42%,transparent 44%);background-size:auto,24px 24px}
/* responsive */
@media(max-width:900px){.hero-bento{grid-template-columns:repeat(2,1fr)}.ht.big{grid-column:span 2;grid-row:span 1;min-height:180px}}
@media(max-width:520px){.hero-bento{grid-template-columns:1fr}.ht.big{grid-column:auto}.ht{min-height:0}}
@media(prefers-reduced-motion:reduce){.ht:hover,.ht:hover .ht-ic{transform:none}}

/* ============================================================
   Language dropdown + RTL support (multilingual)
   ============================================================ */
.langsw{appearance:none;-webkit-appearance:none;font:inherit;font-size:.85rem;font-weight:600;
  color:var(--text);background-color:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd)!important;border-radius:var(--radius-sm);padding:7px 32px 7px 13px;cursor:pointer;max-width:160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:13px}
.langsw:hover{border-color:var(--blue)!important}
[data-theme="dark"] .langsw option{background:#202020;color:#e9e9e7}
/* RTL */
[dir="rtl"]{direction:rtl}
[dir="rtl"] .langsw{padding:7px 13px 7px 32px;background-position:left 9px center}
[dir="rtl"] .steps li{padding-left:0;padding-right:56px}
[dir="rtl"] .steps li::before{left:auto;right:0}
[dir="rtl"] .b-card.wide .b-tx,[dir="rtl"] .ht.big .ht-sub{max-width:100%}
[dir="rtl"] .b-card.feat::after,[dir="rtl"] .ht.big::after{-webkit-mask:linear-gradient(270deg,transparent 36%,#000 92%);mask:linear-gradient(270deg,transparent 36%,#000 92%)}

/* hero headline — toned down (was clamp(2.4rem,5.2vw,4.4rem)) */
.hero h1{font-size:clamp(1.7rem,3vw,2.6rem)!important;line-height:1.25!important}
.hero p.lead{font-size:clamp(1rem,1.2vw,1.15rem)!important}

/* hero copy — use full row width so headline/lead stay on one line */
.hero-copy{max-width:none!important}
.hero p.lead{max-width:none!important}
@media(max-width:900px){.hero h1{font-size:clamp(1.5rem,4.6vw,1.9rem)!important}}

/* tighter hero spacing */
.hero{padding:clamp(24px,3.2vw,44px) 0 clamp(18px,2.4vw,32px)!important}
.hero h1{margin-bottom:14px!important}
.hero p.lead{margin-bottom:16px!important;line-height:1.6!important}
.hero-bento{margin:20px 0 6px!important}
.sec-head{margin:34px 0 2px!important}

/* FIX: inner-page icon tiles were pale bg + forced-white glyph = invisible.
   Give them the same vibrant gradient as the home cards. */
[data-theme] .tool-head h1 .ticon{
  background:linear-gradient(135deg,#4c8dff,#22d3ee)!important;border:none!important;
  box-shadow:0 7px 16px -6px rgba(76,141,255,.55)!important;color:#fff!important}
[data-theme] .tool-head h1 .ticon svg{color:#fff!important}
[data-theme] .art-tool .at-ic{
  background:linear-gradient(135deg,#4c8dff,#22d3ee)!important;border:none!important;
  box-shadow:0 6px 14px -6px rgba(76,141,255,.5)!important;color:#fff!important}
[data-theme] .art-tool .at-ic svg{color:#fff!important}

/* gap between hero bento and the section boundary below it */
.hero-bento{margin-bottom:44px!important}

/* tighter navy band */
.band{padding:clamp(26px,3.4vw,42px) 0!important}

/* band-navy: ultra-compact strip */
.band{padding:clamp(10px,1.2vw,14px) 0!important;margin:0!important}
.stats{gap:12px!important}
.stats .stat{flex-direction:row!important;align-items:baseline!important;justify-content:center!important;gap:8px!important}
.stats .stat .n{font-size:1.35rem!important}
.stats .stat .l{font-size:.88rem!important}
.stats .stat{padding:6px 10px!important}

/* band-navy → clean Notion-style stat divider strip */
.band.band-navy{
  background:var(--bg)!important;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:16px 0!important}
.band.band-navy .deco{display:none!important}
.stats{display:flex!important;justify-content:center;flex-wrap:wrap;gap:0!important}
.stats .stat{
  flex-direction:row!important;align-items:baseline!important;gap:9px!important;
  background:none!important;border:none!important;box-shadow:none!important;
  padding:2px 34px!important;position:relative}
.stats .stat+.stat::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:20px;width:1px;background:var(--border)}
.stats .stat .n{color:var(--accent)!important;font-size:1.35rem!important;font-weight:700!important}
.stats .stat .l{color:var(--muted)!important;font-size:.92rem!important;font-weight:500!important}
@media(max-width:640px){.stats .stat{padding:2px 16px!important}.stats .stat+.stat::before{display:none}}

/* CTA band heading: was pale cream on light grey — make it readable */
.band.cta h2,.cta h2{color:var(--text)!important}
.cta p{color:var(--muted)!important}

/* sweep: replace pale-cream text remnants on light surfaces */
footer.site .brand .logo,footer.site .brand em,.copy svg{color:var(--gold)!important}
.foot .col a:hover,.foot-family a:hover{color:var(--accent)!important}
header.site .brand:hover .logo{color:var(--accent)!important}
blockquote{border-left-color:var(--gold)!important}

/* ---------- floating language switcher (bottom-right, all pages) ---------- */
.flang{position:fixed;right:20px;bottom:20px;z-index:900;font-size:.9rem}
.flang-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--border);color:var(--text);font-weight:600;font-size:.88rem;
  box-shadow:var(--shadow-lift);transition:transform .18s ease,border-color .18s ease}
.flang-btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.flang-btn svg{width:17px;height:17px;color:var(--accent);flex:none}
.flang-btn .chev{width:13px;height:13px;color:var(--muted);transition:transform .2s ease}
.flang.open .flang-btn .chev{transform:rotate(180deg)}
.flang-panel{
  position:absolute;right:0;bottom:calc(100% + 10px);
  min-width:340px;max-height:min(62vh,480px);overflow:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:8px;
  background:color-mix(in srgb,var(--card) 94%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lift);
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.flang.open .flang-panel{opacity:1;transform:none;pointer-events:auto}
.flang-panel a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;border-radius:8px;color:var(--text);text-decoration:none;
  font-weight:500;font-size:.88rem;line-height:1.3}
.flang-panel a:hover{background:var(--accent-soft);text-decoration:none}
.flang-panel a.on{color:var(--accent);font-weight:700;background:var(--accent-soft)}
.flang-panel a svg{width:15px;height:15px;flex:none}
[dir="rtl"] .flang{right:auto;left:20px}
[dir="rtl"] .flang-panel{right:auto;left:0}
@media(max-width:560px){
  .flang{right:12px;bottom:12px}
  .flang-panel{min-width:min(86vw,320px)}
  .flang-btn span{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media print{.flang{display:none}}

/* ---------- footer: Notion-clean restyle ---------- */
footer.site{
  background:var(--bg)!important;
  border-top:1px solid var(--border);
  padding:44px 0 26px!important;color:var(--muted)}
.foot{gap:40px 34px!important}
@media(min-width:960px){.foot{grid-template-columns:1.35fr .9fr .9fr .9fr 1.7fr!important}}
.foot .col h4{
  color:var(--faint)!important;font-size:.74rem!important;font-weight:600;
  letter-spacing:.1em;margin-bottom:14px!important}
.foot .col a{color:var(--muted)!important;font-size:.87rem!important;margin-bottom:8px!important}
.foot .col a:hover{color:var(--accent)!important;text-decoration:none}
/* long "more tools" list flows into two columns */
.foot .col:last-child{column-count:2;column-gap:26px}
.foot .col:last-child h4{column-span:all}
.foot .col:last-child a{break-inside:avoid}
.foot .about{column-count:auto}
.foot .about p{color:var(--muted)!important;font-size:.85rem!important;line-height:1.75}
/* family links → bordered mini-cards */
.foot-family{margin-top:20px!important;gap:8px!important}
.foot-family .fh{color:var(--faint)!important;opacity:1!important;font-weight:600}
.foot .foot-family a{
  color:var(--text)!important;font-size:.84rem!important;
  border:1px solid var(--border);border-radius:8px;padding:8px 12px;
  background:var(--card);transition:border-color .15s ease,transform .15s ease}
.foot .foot-family a:hover{border-color:var(--accent);transform:translateY(-1px);color:var(--accent)!important}
.foot-family a svg{color:var(--accent)}
/* copy bar */
.copy{
  margin-top:36px!important;padding-top:16px!important;
  border-top:1px solid var(--border)!important;
  color:var(--faint)!important;font-size:.8rem!important;justify-content:center}
@media(max-width:760px){.foot .col:last-child{column-count:2}}
@media(max-width:520px){.foot .col:last-child{column-count:1}}

/* family links: horizontal strip above the copyright bar */
footer.site .foot-family{
  flex-direction:row!important;align-items:center;flex-wrap:wrap;
  justify-content:center;gap:10px!important;
  margin-top:34px!important;padding-top:18px;border-top:1px solid var(--border)}
footer.site .foot-family .fh{margin-bottom:0!important;margin-right:6px}
footer.site .copy{margin-top:14px!important;border-top:none!important;padding-top:0!important}

/* ============================================================
   Form-controls polish — unified, modern, Notion-grade
   ============================================================ */
/* text-ish inputs: one look everywhere (textarea was unstyled browser default) */
.app textarea,.app input[type=text],.app input[type=number],.app input[type=url],
.app input[type=email],.app input[type=search],.app select,
.field textarea,.field input[type=text],.field input[type=number],.field select{
  font-family:inherit!important;font-size:.92rem;color:var(--text);
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;line-height:1.55;width:100%;box-sizing:border-box;
  transition:border-color .15s ease,box-shadow .15s ease;
  -webkit-appearance:none;appearance:none}
.app textarea{min-height:96px;resize:vertical}
.app textarea:hover,.app input:hover,.app select:hover,
.field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.app textarea:focus,.app input:focus,.app select:focus,
.field textarea:focus,.field input:focus,.field select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.app ::placeholder{color:var(--faint)}
/* selects: custom chevron */
.app select,.field select{
  padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
[data-theme="dark"] .app select,[data-theme="dark"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9a97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
/* field labels: quiet small-caps */
.field label{font-size:.76rem!important;font-weight:600!important;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)!important}
/* segmented control: iOS pill-track style */
.seg{background:var(--bg-soft)!important;border:1px solid var(--border-soft)!important;border-radius:10px!important;padding:3px;gap:2px}
.seg button{border-radius:7px!important;padding:7px 14px!important;font-weight:600!important;font-size:.86rem!important;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--card)!important;color:var(--text)!important;
  box-shadow:0 1px 3px rgba(15,15,15,.12),0 0 0 1px var(--border)!important}
/* range slider */
.app input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:none;cursor:pointer;accent-color:var(--accent)}
.app input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;
  background:linear-gradient(to right,var(--accent) var(--_fill,50%),var(--border) var(--_fill,50%))}
.app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:#fff;border:1.5px solid var(--accent);box-shadow:0 1px 4px rgba(15,15,15,.2);margin-top:-6px;
  transition:transform .12s ease}
.app input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.app input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--border)}
.app input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:var(--accent)}
.app input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);box-shadow:0 1px 4px rgba(15,15,15,.2)}
/* color input: clean swatch */
.app input[type=color]{-webkit-appearance:none;appearance:none;width:40px;height:32px;padding:2px;
  border:1px solid var(--border);border-radius:8px;background:var(--card);cursor:pointer;transition:border-color .15s ease}
.app input[type=color]:hover{border-color:var(--accent)}
.app input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.app input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}
.app input[type=color]::-moz-color-swatch{border:none;border-radius:5px}
/* checkboxes */
.app input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
/* buttons: refined press feel */
.btn{transition:background .15s ease,transform .12s ease,box-shadow .15s ease!important}
.btn:not(.sec):not(:disabled){box-shadow:0 1px 2px rgba(15,15,15,.14),inset 0 -1px 0 rgba(0,0,0,.12)!important}
.btn:not(.sec):hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(35,131,226,.32)!important}
.btn:active{transform:translateY(0) scale(.985)!important}
.btn.sec:hover{border-color:var(--accent)!important;color:var(--accent)!important}
/* drop zone: friendlier */
.drop{border:1.5px dashed color-mix(in srgb,var(--accent) 34%,var(--border))!important;border-radius:14px!important;
  background:color-mix(in srgb,var(--accent-soft) 44%,var(--bg-soft))!important;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.drop:hover,.drop.over{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent-soft) 80%,var(--card))!important}
.drop.over{transform:scale(1.005)}

/* ---------- compact tool forms: tighter rhythm, one screen ---------- */
.app{padding:20px 22px!important;margin:18px 0!important}
.controls{gap:12px!important;margin:14px 0!important}
.field label{margin-bottom:4px!important;font-size:.72rem!important}
.app textarea,.app input[type=text],.app input[type=number],.app input[type=url],
.app input[type=email],.app input[type=search],.app select,
.field textarea,.field input[type=text],.field input[type=number],.field select{
  padding:7px 10px!important;font-size:.9rem!important}
.app textarea{min-height:64px!important}
.app select,.field select{padding-right:30px!important}
/* segmented control: compact + neutral track */
.seg{padding:2px!important;background:#f1f1ef!important;border-radius:8px!important}
[data-theme="dark"] .seg{background:#2a2a2a!important}
.seg button{padding:5px 11px!important;font-size:.83rem!important;border-radius:6px!important}
/* drop zone + notes tighter */
.drop{padding:26px 18px!important}
.drop .big svg{width:34px!important;height:34px!important}
.drop h3{font-size:1.04rem!important}
.note{padding:10px 14px!important;margin-top:12px!important;font-size:.85rem}
.row{gap:8px!important}
.btn{padding:9px 18px!important;font-size:.9rem!important}
.btn.sm{padding:6px 12px!important;font-size:.82rem!important}

/* qr-generator: form left, live preview right (stacks on mobile) */
.qr-grid{display:grid;gap:18px}
@media(min-width:860px){.qr-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.qr-side{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-side canvas.preview{width:min(280px,100%)!important}
.qr-side .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0}

/* nested control groups: no double margins */
.controls .controls{margin:0!important}
/* 3-up row (colors + quiet zone) */
@media(min-width:640px){.controls.cols3{grid-template-columns:1fr 1fr 1fr}}
/* tel/password/date inputs missed by earlier selectors — same look as text */
.app input[type=tel],.app input[type=password],.field input[type=tel],.field input[type=password]{
  font-family:inherit!important;font-size:.9rem;color:var(--text);
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:7px 10px;line-height:1.55;width:100%;box-sizing:border-box;
  transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none}
.app input[type=tel]:hover,.app input[type=password]:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.app input[type=tel]:focus,.app input[type=password]:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* theme button shows CURRENT mode: sun=light, moon=dark, monitor=auto(system) */
.iconbtn .ic-sun,.iconbtn .ic-moon,.iconbtn .ic-auto{display:none!important}
[data-thememode="light"] .iconbtn .ic-sun{display:block!important}
[data-thememode="dark"] .iconbtn .ic-moon{display:block!important}
[data-thememode="auto"] .iconbtn .ic-auto{display:block!important}

/* ============ synthetic-performer-tag 工具 ============ */
.spt-panel{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:18px 18px;margin-bottom:14px}
.spt-panel:last-child{margin-bottom:0}
.spt-ph{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.spt-step{flex:none;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:700;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:var(--accent-soft);color:var(--accent)}
.spt-pt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.spt-field{display:block;margin-bottom:12px}
.spt-lb{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;color:var(--text)}
.spt-input{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;padding:11px 13px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);transition:border-color .15s,box-shadow .15s}
.spt-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.spt-hint{font-size:.78rem;color:var(--muted);margin-top:7px}
.spt-hint b{color:#b3541e;font-weight:600}
[data-theme="dark"] .spt-hint b{color:#f0a868}
.spt-check{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;color:var(--text);cursor:pointer}
.spt-check input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none;cursor:pointer}
.spt-dirow{margin-top:10px}
.spt-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:0}
.spt-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink,#fff)!important}
.spt-primary:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important}
.spt-primary:disabled{opacity:.45}
.spt-count{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:var(--muted);margin-left:auto;white-space:nowrap}
.spt-prog{height:5px;border-radius:99px;background:var(--border-soft);overflow:hidden;margin:14px 0 2px;opacity:0;transition:opacity .2s}
.spt-prog.on{opacity:1}
.spt-bar{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--blue));transition:width .3s ease}
.spt-files{list-style:none;margin:14px 0 0;padding:0}
.spt-files:empty{border:1.5px dashed var(--border);border-radius:12px}
.spt-files:empty::after{content:attr(data-empty);display:block;text-align:center;color:var(--muted);font-size:.82rem;padding:24px 16px}
.spt-row{background:var(--card);border:1px solid var(--border-soft);border-radius:11px;padding:11px 13px;margin-bottom:8px;display:flex;gap:13px;align-items:center;box-shadow:var(--shadow)}
.spt-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--bg-soft);border:1px solid var(--border-soft);flex:none}
.spt-meta{min-width:0;flex:1}
.spt-fname{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.spt-fsub{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spt-stamp{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.04em;padding:5px 10px;border-radius:99px;border:1px solid var(--border);color:var(--muted);background:var(--bg-soft)}
.spt-stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.spt-stamp.run{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft)}
.spt-stamp.ok{color:#0b7a55;border-color:#b5e0ce;background:#e7f6ef}
.spt-stamp.err{color:#a8500e;border-color:#ebcba0;background:#fbf0e4}
[data-theme="dark"] .spt-stamp.ok{color:#34d399;border-color:#1f4a39;background:#0f2a20}
[data-theme="dark"] .spt-stamp.err{color:#f0a868;border-color:#4a3315;background:#2a1d0f}
.spt-dl{flex:none;width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);background:var(--bg-soft);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.spt-dl:hover{color:var(--accent);border-color:var(--accent)}
.spt-dl svg{width:15px;height:15px}
.spt-dl[hidden]{display:none}
.spt-panel .btn{white-space:nowrap}
.spt-panel .btn svg{width:16px;height:16px;flex:none;vertical-align:-2px}

/* ============ 亚马逊合规聚合专区（首页 band） ============ */
.amz-hub{display:grid;grid-template-columns:1fr;gap:22px}
.amz-lead{display:flex;gap:16px;align-items:flex-start}
.amz-ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:var(--card);border:1px solid var(--border-soft);box-shadow:var(--shadow)}
.amz-tx h2{margin:0 0 6px}
.amz-tx p{margin:0 0 14px;color:var(--muted);max-width:60ch}
.amz-arts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.amz-arts .art-card h3{margin:0;font-size:1rem}
@media(min-width:820px){.amz-hub{grid-template-columns:minmax(280px,360px) 1fr;align-items:center}}
@media(max-width:820px){.amz-arts{grid-template-columns:1fr}}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ================== IMGLI-STYLE OVERLAY ==================
   参考 img.li(yixian-huang/imgli):Manrope 字体、blur(10px) saturate(1.15)
   毛玻璃、半透明表面 + 细边框、锐利小圆角、负字距标题。
   本段是纯覆盖层——整段删除即恢复原 Notion 风。 */

:root, [data-theme="light"]{
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif;
  --radius:7px; --radius-sm:5px; --pill:5px;
  --glass:rgba(255,255,255,.62);
  --glass-brd:rgba(15,15,20,.08);
  --glass-blur:blur(10px) saturate(1.15);
}
[data-theme="dark"]{
  --bg:#0f0f13;
  --band-lilac:rgba(255,255,255,.03); --band-cream:rgba(255,255,255,.03);
  --border:#32323a; --border-soft:#26262e;
  --glass:rgba(26,27,33,.5);
  --glass-brd:rgba(255,255,255,.08);
}

/* 光斑背景 — 毛玻璃的"透"源(纯 CSS,零加载) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(560px 420px at 12% -6%, rgba(35,131,226,.13), transparent 64%),
    radial-gradient(520px 400px at 88% 4%,  rgba(124,92,255,.10), transparent 62%),
    radial-gradient(620px 480px at 50% 108%, rgba(255,107,74,.07), transparent 66%);}
[data-theme="dark"] body::before{
  background:
    radial-gradient(600px 460px at 12% -6%, rgba(56,132,255,.17), transparent 64%),
    radial-gradient(560px 420px at 88% 4%,  rgba(139,131,255,.13), transparent 62%),
    radial-gradient(660px 500px at 50% 110%, rgba(255,122,92,.09), transparent 66%);}

/* 排版:标题负字距(imgli:700 重 + 收紧字距) */
h1,h2,h3{letter-spacing:-.028em}
.hero h1{letter-spacing:-.034em}

/* header:毛玻璃 */
header.site{background:rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}
[data-theme="dark"] header.site{background:rgba(15,15,19,.55)!important}

/* 表面玻璃化:中大卡片统一 imgli 配方 */
.tool-card,.art-card,.b-card,.ht,.app,.feat .f,.faq details,.related a,
.art-tool,.uc,.amz-ic,.item,.tl-feat,.spt-row{
  background:var(--glass);
  border-color:var(--glass-brd);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);}
@supports not (backdrop-filter:blur(1px)){
  .tool-card,.art-card,.b-card,.ht,.app,.feat .f,.faq details,.related a,
  .art-tool,.uc,.amz-ic,.item,.tl-feat,.spt-row{background:var(--card)}
}

/* 色带半透明化(让光斑透出;大面积不加 blur,保性能) */
.band-lilac{background:rgba(247,246,243,.55)}
[data-theme="dark"] .band-lilac{background:rgba(255,255,255,.03)}

/* 圆角收紧(imgli 锐利风) */
.app,.art-card,.feat .f,.faq details,.btn,.item,.note{border-radius:var(--radius)}
.tool-card{border-radius:var(--radius)}
.tool-card .ic,.item .thumb{border-radius:9px}
.tool-head h1 .ticon{border-radius:11px}
.iconbtn{border-radius:9px}
.btn{border-radius:6px}
.spt-panel{border-radius:var(--radius)}

/* 细节:边框细一号(1.5px→1px 观感) */
.tool-card,.app,.langsw,.iconbtn{border-width:1px}

/* ---- imgli overlay 收尾补丁:压平中段旧皮肤的高优先级规则 ---- */
:root, [data-theme="light"]{ --band-lilac:rgba(247,246,243,.55); --band-cream:rgba(247,246,243,.55); }
h1,h2,h3,.hero h1,.tool-head h1,.content h1,.content h2,.content h3,.sec-head h2,.why h2,.cta h2,
.tool-deep h2,.tool-deep h3,.article-body h1,.article-body h2,.article-body h3,.b-card h3,.ht-name{
  font-family:var(--font)!important;letter-spacing:-.026em}
h1,.hero h1{letter-spacing:-.032em}
header.site{background:rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.15)!important;backdrop-filter:blur(10px) saturate(1.15)!important}
[data-theme="dark"] header.site{background:rgba(15,15,19,.55)!important}
.tool-card,.art-card,.art-more-card,.rt-card,.feat .f,.faq details,.usecases .uc,.item,.note,.why-card{
  background:var(--glass)!important;border-color:var(--glass-brd)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.tool-card{border-radius:9px!important}
.why-card,.art-card,.b-card{border-radius:9px!important}
.feat .f,.faq details,.item,.note,.app{border-radius:8px!important}
@supports not (backdrop-filter:blur(1px)){
  .tool-card,.art-card,.art-more-card,.rt-card,.feat .f,.faq details,.usecases .uc,.item,.note,.why-card{background:var(--card)!important}
}

/* 背景色兜底:绕开简写级联问题 */
body{background-color:var(--bg)!important}

/* ================== MODERN POLISH(参考 Photoroom / remove.bg)==================
   大圆角 + pill 按钮 + 无边框柔影 + 超大标题。叠加于毛玻璃层之上;
   撤销上一轮 imgli 锐利小圆角,改走现代大气派。 */

/* --- 超大 hero 标题(Photoroom: 72px/-2.7%/lh1.1) --- */
.hero h1{font-size:clamp(2.6rem,5.6vw,4.5rem)!important;font-weight:800;line-height:1.06!important;letter-spacing:-.035em!important}
.hero p.lead{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.6}
.hero{padding-top:clamp(64px,8vw,120px)}

/* --- 主按钮:pill + glow(remove.bg 式大 CTA) --- */
.btn{border-radius:999px!important;padding:13px 28px;font-size:1rem;font-weight:700;
  box-shadow:0 2px 6px rgba(255,61,110,.25),0 10px 26px -8px rgba(255,61,110,.45);
  transition:transform .16s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,filter .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(255,61,110,.28),0 16px 34px -8px rgba(255,61,110,.55)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.sec{background:var(--glass);border:1px solid var(--glass-brd);color:var(--text);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 1px 3px rgba(15,15,20,.06)}
.btn.sec:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 6px 18px -6px rgba(15,15,20,.15)}
.btn.sm{padding:9px 18px;font-size:.88rem}
.spt-primary{border-radius:999px!important}

/* --- 卡片:大圆角 + 双层柔影,弱化边框(Photoroom 式) --- */
.tool-card,.art-card,.art-more-card,.rt-card,.why-card,.b-card{
  border-radius:16px!important;
  border-color:color-mix(in srgb,var(--glass-brd) 55%,transparent)!important;
  box-shadow:0 4px 13px rgba(0,0,0,.05),0 8px 25px rgba(0,0,0,.04);
  transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease}
.tool-card:hover,.art-card:hover,.art-more-card:hover,.rt-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,.09),0 18px 42px rgba(0,0,0,.07);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent)!important}
[data-theme="dark"] .tool-card,[data-theme="dark"] .art-card,[data-theme="dark"] .art-more-card,
[data-theme="dark"] .rt-card,[data-theme="dark"] .why-card,[data-theme="dark"] .b-card{
  box-shadow:0 4px 13px rgba(0,0,0,.35),0 8px 25px rgba(0,0,0,.25)}
.feat .f,.faq details,.item,.note,.app,.uc{border-radius:14px!important}
.tool-card{padding:20px 19px}
.tool-card .ic{border-radius:13px;width:50px;height:50px}
.tool-head h1 .ticon{border-radius:15px}
.drop{border-radius:16px}
.spt-panel{border-radius:14px}
.amz-ic{border-radius:14px}

/* --- 顶栏控件 pill 化 --- */
.iconbtn{border-radius:999px}
.langsw{border-radius:999px}
.langsw a{padding:7px 16px}
.nav a.navlink{border-radius:999px;padding:8px 16px}

/* --- hero badges → 玻璃小胶囊 chip --- */
.hero .badges span{background:var(--glass);border:1px solid var(--glass-brd);border-radius:999px;
  padding:8px 16px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 3px rgba(15,15,20,.05)}
.hero .badges{gap:10px 12px}

/* --- hero 磁贴与 CTA 区大圆角 --- */
.ht{border-radius:16px!important}
.sec-head{margin-top:56px}
.sec-head .no{border-radius:999px}
.lbs-tag,.spt-stamp,.tag{border-radius:999px}

/* --- 表单控件现代化 --- */
.toolbar select,select,input[type=text],input[type=number]{border-radius:10px}
.lb-btn{border-radius:999px}

/* --- MODERN 收尾:pill + glow 终版(以 :not(.sec) 同特异性压平 Notion 按钮层) --- */
.btn:not(.sec),.btn.sm,.drop .btn,.cta .btn,.band-navy.cta .btn,.promo-pixpix .btn,.actions .btn,.spt-actions .btn{
  border-radius:999px!important;
  box-shadow:0 2px 6px rgba(35,131,226,.25),0 10px 24px -8px rgba(35,131,226,.45)!important;
  padding:12px 26px;font-weight:700!important;
  transition:transform .16s cubic-bezier(.34,1.4,.64,1),background .15s,box-shadow .2s!important}
.btn:not(.sec):hover,.cta .btn:hover,.band-navy.cta .btn:hover,.promo-pixpix .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(35,131,226,.3),0 16px 32px -8px rgba(35,131,226,.55)!important}
.btn:not(.sec):active{transform:translateY(0) scale(.98)}
.btn.sec,.spt-dirow .btn{border-radius:999px!important;box-shadow:0 1px 3px rgba(15,15,20,.07)!important}
.btn.sec:hover{box-shadow:0 6px 18px -6px rgba(15,15,20,.16)!important}
.btn.sm{padding:9px 18px}
.cta .btn{background:var(--yellow)!important;color:#1a1a0a!important;
  box-shadow:0 2px 6px rgba(203,145,47,.3),0 10px 24px -8px rgba(203,145,47,.5)!important}
[data-theme="dark"] .btn:not(.sec){box-shadow:0 2px 6px rgba(82,156,202,.3),0 10px 24px -8px rgba(82,156,202,.5)!important}
body .nav a.navlink{border-radius:999px!important}
body .hero .badges span{border-radius:999px!important;padding:8px 16px;background:var(--glass);border:1px solid var(--glass-brd)}
body .related a{border-radius:999px!important}
body .langsw{border-radius:999px!important}
body .sec-head .no{border-radius:999px!important}
body .tag{border-radius:999px!important}
.iconbtn{border-radius:999px!important}

/* ================== FORM MODERN(工具表单控件现代化终层) ==================
   参考 shadcn/Linear/Photoroom 表单语言:iOS 浮动胶囊分段器、
   12px 大圆角输入框 + 4px 主色聚焦环、自定义下拉箭头、清晰标签。 */

/* --- 标签:更清晰 --- */
.field label,.spt-lb{font-size:.82rem!important;font-weight:650!important;color:var(--text)!important;
  margin-bottom:8px!important;text-transform:none!important;letter-spacing:0!important}

/* --- 分段选择器 → iOS 浮动胶囊轨道 --- */
.seg{background:rgba(15,15,20,.055)!important;border:none!important;border-radius:12px!important;
  padding:4px!important;gap:3px!important;display:inline-flex;flex-wrap:wrap;
  -webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme="dark"] .seg{background:rgba(255,255,255,.07)!important}
.seg button{border-radius:9px!important;padding:8px 16px!important;font-weight:650!important;
  font-size:.88rem!important;color:var(--muted)!important;background:transparent!important;
  border:none!important;transition:background .15s,color .15s,box-shadow .15s!important}
.seg button:hover{color:var(--text)!important}
.seg button.on{background:var(--card)!important;color:var(--text)!important;
  box-shadow:0 1px 3px rgba(15,15,20,.1),0 4px 10px -2px rgba(15,15,20,.08)!important}
[data-theme="dark"] .seg button.on{background:#2a2c34!important;
  box-shadow:0 1px 3px rgba(0,0,0,.4)!important}

/* --- 输入框 / 文本域 / 数字:大圆角 + 聚焦环 --- */
.field input[type=text],.field input[type=number],.field input[type=url],.field textarea,
.app input[type=text],.app input[type=number],.app input[type=url],.app textarea,
#lb-q,.spt-input{
  border-radius:12px!important;border:1px solid var(--border)!important;
  background:var(--card)!important;color:var(--text)!important;
  padding:12px 14px!important;font-size:.95rem!important;line-height:1.5;
  transition:border-color .15s,box-shadow .18s,background .15s!important;box-shadow:none}
.field input:hover,.field textarea:hover,.app input[type=text]:hover,.app textarea:hover,.spt-input:hover{
  border-color:color-mix(in srgb,var(--text) 22%,var(--border))!important}
.field input:focus,.field textarea:focus,.app input[type=text]:focus,.app input[type=number]:focus,
.app textarea:focus,#lb-q:focus,.spt-input:focus{
  outline:none!important;border-color:var(--accent)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)!important}

/* --- select:同风格 + 自定义箭头 --- */
.field select,.app select,.toolbar select,.lb-toolbar select{
  -webkit-appearance:none!important;appearance:none!important;
  border-radius:12px!important;border:1px solid var(--border)!important;
  background-color:var(--card)!important;color:var(--text)!important;
  padding:12px 40px 12px 14px!important;font-size:.95rem!important;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;
  transition:border-color .15s,box-shadow .18s!important}
.field select:focus,.app select:focus{outline:none!important;border-color:var(--accent)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)!important}
[data-theme="dark"] .field select,[data-theme="dark"] .app select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239b9a97' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important}

/* --- 颜色选择器 & 复选框 --- */
.field input[type=color],.app input[type=color]{width:52px;height:40px;border-radius:11px!important;
  border:1px solid var(--border)!important;padding:3px!important;cursor:pointer;background:var(--card)!important}
.chk input,.spt-check input{width:17px;height:17px;accent-color:var(--accent)}
.chk{font-size:.92rem;gap:9px}

/* --- range 滑杆 --- */
.app input[type=range]{accent-color:var(--accent);height:5px}

/* ================== SPACING RHYTHM(全站垂直间距节奏统一) ==================
   根因:.field 无自身下距,全靠父容器 gap;工具自定义容器(qr-form 等)是
   普通 block → field 全部黏连。兜底:field 自带下距,grid 容器内归零防双倍。 */

/* --- 表单节奏 --- */
.field{margin:0 0 20px!important}
.controls .field,.controls.cols2 .field,.controls.cols3 .field{margin:0!important}
.controls{gap:20px!important;margin:22px 0!important}
.field label{margin-bottom:9px!important}
.field .hint,.field p.muted{margin-top:8px}
.chk{margin:14px 0}
.actions{margin-top:26px!important;gap:12px!important}
.results{margin-top:22px!important;gap:12px!important}
.app>.note{margin-top:20px}
.app .drop{margin-bottom:6px}

/* --- 工具页区块节奏 --- */
.tool-head{padding-bottom:14px}
.tool-head p.sub{margin-top:10px}
.app{margin:28px 0!important;padding:30px!important}
.promo{margin:26px 0!important}
@media(max-width:640px){.app{padding:20px!important}}

/* --- 文章/内容排版呼吸感 --- */
.content h2,.article-body h2,.tool-deep h2{margin-top:2.2em!important;margin-bottom:.7em!important}
.content h3,.article-body h3{margin-top:1.7em!important}
.content p,.article-body p{line-height:1.75}
.content ol.steps li{margin-bottom:12px;line-height:1.7}
.faq details{margin-bottom:10px;padding:16px 20px}
.faq summary{line-height:1.55}
.content table,.article-body table{margin:1.4em 0}
.content table td,.content table th,.article-body table td,.article-body table th{padding:10px 14px}
.usecases{gap:14px;margin-bottom:8px}
.related{gap:10px;margin-bottom:8px}
.art-tool{margin:1.8em 0!important}

/* --- 首页节奏 --- */
.sec-head{margin-top:58px!important;margin-bottom:10px}
.sec-sub{margin-bottom:6px}
.grid{gap:18px!important;margin:26px 0 14px!important}
.hero .badges{margin-top:6px}

/* ---- 性能:语言切换面板用系统字体 ----
   面板列出 37 种语言的本地名(Русский/Ελληνικά/Tiếng Việt/Čeština...),
   若用 Manrope 会连锁拉取 4 个额外 woff2 子集(PSI 实测 +576ms 关键路径)。
   系统字体渲染这些名称同样清晰,且零下载。 */
select.langsw,select.langsw option,.flang,.flang-panel,.fl-n,.flang-btn{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif}