:root{color-scheme:light;--bg:#f4f7fb;--card:#fff;--ink:#0f1b2d;--ink2:#2c3e57;--muted:#5b6b82;--line:#e2e8f1;--line2:#cbd5e3;--acc:#1f5fcc;--acc2:#174a9e;--acc-ink:#fff;--soft:#edf3fd;--head:#0b2447;--head2:#133a6b;--head-ink:#f5f8fc;--chip:#eef2f8;--err:#b42318;--shadow:0 1px 2px rgba(15,27,45,.05),0 2px 8px rgba(15,27,45,.04)}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0a1322;--card:#101c30;--ink:#e3eaf5;--ink2:#c3cfe0;--muted:#8fa0b8;--line:#1c2b44;--line2:#2a3d5c;--acc:#5b9cff;--acc2:#8fbcff;--acc-ink:#07111f;--soft:#12264a;--head:#06101f;--head2:#0f2445;--head-ink:#f5f8fc;--chip:#16243b;--err:#f97066;--shadow:none}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--acc)}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
/* header */
.top{background:var(--head);color:var(--head-ink);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:16px;height:60px}
.logo{display:flex;align-items:center;gap:10px;color:var(--head-ink);text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.02em;flex:none}
.logo i{width:30px;height:30px;border-radius:8px;background:#1f5fcc;display:grid;place-items:center;font-style:normal;color:#fff;font-size:14px;font-weight:900}
.logo span{color:#7fb2ff}
.search{position:relative;flex:1;max-width:460px;margin-left:auto}
.search input{width:100%;height:40px;border-radius:10px;border:1px solid #28508a;background:var(--head2);color:#f8fafc;padding:0 12px 0 36px;font:inherit;font-size:15px}
.search input::placeholder{color:#9fb3cf}.search input:focus{outline:2px solid var(--acc);border-color:transparent}
.search svg{position:absolute;left:11px;top:11px;width:18px;height:18px;stroke:#9fb3cf}
.results{position:absolute;left:0;right:0;top:46px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);max-height:70vh;overflow:auto;display:none;padding:6px}
.results.on{display:block}.results a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
.results a:hover,.results a.sel{background:var(--chip)}.results small{display:block;color:var(--muted);font-size:13px}.results .none{padding:10px;color:var(--muted)}
.cats{background:var(--card);border-bottom:1px solid var(--line)}
.cats .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;height:48px;align-items:center}.cats .wrap::-webkit-scrollbar{display:none}
.cats a{flex:none;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;color:var(--ink2);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.cats a:hover{background:var(--chip)}.cats a.on{background:var(--soft);color:var(--acc)}
.cats svg,.ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main{padding:28px 0 56px;min-height:60vh}
h1{font-size:clamp(28px,4.5vw,40px);line-height:1.12;letter-spacing:-.025em;margin:0 0 10px}
h2{font-size:22px;letter-spacing:-.015em;margin:36px 0 12px}h3{font-size:17px;margin:22px 0 8px}
.lead{font-size:18px;color:var(--muted);margin:0 0 8px;max-width:680px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:10px}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}
/* home */
.hero{background-color:var(--head);background-image:linear-gradient(rgba(127,178,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,178,255,.07) 1px,transparent 1px);background-size:28px 28px;color:var(--head-ink);padding:48px 0 56px;margin:-28px 0 32px}
.hero h1{color:#fff;max-width:760px}.hero .lead{color:#c5d4ea}
.hero .big{margin:22px 0 0;max-width:620px}.hero .big input{height:52px;font-size:17px;padding-left:44px;border-radius:12px}.hero .big svg{top:16px;left:15px;width:20px;height:20px}.hero .big .results{top:58px}
.stats{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:18px;color:#9fb3cf;font-size:14px}.stats b{color:#fff}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.catcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;transition:border-color .15s;box-shadow:var(--shadow);display:flex;flex-direction:column}
.catcard .hd{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.ico{width:40px;height:40px;border-radius:10px;background:var(--soft);color:var(--acc);display:grid;place-items:center;flex:none}
.ico svg{width:22px;height:22px}
.catcard h3{margin:0;font-size:18px}.catcard .cnt{font-size:13px;color:var(--muted)}
.catcard p{color:var(--muted);font-size:14.5px;margin:10px 0}
.catcard ul{list-style:none;padding:0;margin:0 0 12px}.catcard li a{display:block;padding:4px 0;color:var(--ink2);text-decoration:none;font-size:15px}.catcard li a:hover{color:var(--acc)}
.catcard .all{margin-top:auto;font-weight:700;font-size:14px;text-decoration:none}
.pop{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pill{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.pill:hover{border-color:var(--acc)}.pill .ico{width:32px;height:32px}.pill .ico svg{width:18px;height:18px}
.band{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:14px;padding:20px 22px;margin-top:36px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h3{margin:0 0 4px}.band p{margin:0;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:var(--acc-ink)!important;border:0;border-radius:10px;padding:11px 18px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.05)}.btn.ghost{background:transparent;color:var(--ink2)!important;border:1px solid var(--line2);font-weight:600;padding:8px 12px;font-size:14px}
/* category page */
.chead{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}.chead .ico{width:52px;height:52px;border-radius:14px}.chead .ico svg{width:28px;height:28px}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}.jump a{background:var(--chip);color:var(--ink2);padding:5px 12px;border-radius:999px;font-size:14px;text-decoration:none;font-weight:600}
.group{margin-top:30px}.group h2{margin:0 0 12px;font-size:19px;display:flex;align-items:center;gap:10px}.group h2 small{font-weight:500;color:var(--muted);font-size:14px}
.tlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.titem{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.titem:hover{border-color:var(--acc)}.titem strong{display:block;font-size:16px}.titem span{color:var(--muted);font-size:14px;line-height:1.45;display:block;margin-top:3px}
/* tool page */
.tool{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media (max-width:900px){.tool{grid-template-columns:1fr}}
.calc{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.calc form{padding:20px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 16px}
.f label{display:block;font-weight:600;font-size:14px;margin-bottom:5px;color:var(--ink2)}
.f .in{display:flex;align-items:stretch;border:1px solid var(--line2);border-radius:10px;background:var(--bg);overflow:hidden}
.f .in:focus-within{outline:2px solid var(--acc);border-color:transparent}
.f input,.f select{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;padding:10px 12px;outline:none}
.f select{cursor:pointer}.f .u{display:flex;align-items:center;padding:0 12px;background:var(--chip);color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}
.f .u:empty{display:none}.f .hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.out{background:var(--soft);padding:20px;border-top:1px solid var(--line)}
.out .prim{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.out .prim span,.out .sec span{display:block;font-size:13.5px;color:var(--muted);font-weight:600}
.out .prim b{font-size:30px;color:var(--ink);letter-spacing:-.02em;line-height:1.2;word-break:break-word}.out small{font-size:15px;font-weight:600;color:var(--ink2)}
.out .sec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.out .sec div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px}.out .sec b{font-size:18px}
.out .err{color:var(--err);margin:0;font-weight:600}.rnote{margin:14px 0 0;font-size:15px}
.prose{max-width:760px}.prose p,.prose li{color:var(--ink2)}
.formula{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14.5px;overflow-x:auto;line-height:1.8;white-space:pre-wrap}
.note{border-left:4px solid var(--acc);background:var(--soft);padding:12px 16px;border-radius:0 10px 10px 0;font-size:15px;margin:18px 0}
table{border-collapse:collapse;width:100%;font-size:15px}th,td{border-bottom:1px solid var(--line);padding:8px 8px;text-align:left}th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tablewrap{overflow-x:auto}
aside .box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
aside h3{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ink2)}
aside ul{list-style:none;margin:0;padding:0}aside li a{display:block;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15px}aside li:last-child a{border:0}aside li a:hover{color:var(--acc)}
footer{background:var(--head);color:#9fb3cf;padding:36px 0;font-size:14px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px}
footer h4{color:#f8fafc;margin:0 0 8px;font-size:14px}footer a{color:#c5d4ea;text-decoration:none;display:block;padding:3px 0}footer a:hover{color:#fff}
footer .fine{border-top:1px solid #1c3a63;margin-top:24px;padding-top:16px}
@media (max-width:640px){.top .wrap{gap:10px}.logo b{display:none}.hero{padding:30px 0 36px}.calc form{padding:16px}.out .prim b{font-size:26px}}
.catcard:hover{border-color:var(--line2)}
.convrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto minmax(0,1.2fr);gap:12px;align-items:end}
.swapbtn{height:44px;width:44px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:var(--acc);cursor:pointer;display:grid;place-items:center;font-size:20px;line-height:1}
.swapbtn:hover{background:var(--soft);border-color:var(--acc)}
@media (max-width:640px){.convrow{grid-template-columns:1fr auto;}.convrow .f:first-child{grid-column:1/-1}.convrow .f:nth-child(2){grid-column:1/2}.convrow .swapbtn{grid-column:2/3;grid-row:2;align-self:end}.convrow .f:nth-child(4){grid-column:1/-1}}
.out .factor{margin:12px 0 0;font-size:14.5px;color:var(--ink2)}
.f,.convrow>*{min-width:0}.f .in{min-width:0}.f select{width:100%;min-width:0;text-overflow:ellipsis}

/* ---- v5 polish ---- */
h1,h2,h3{font-weight:700;color:var(--ink)}
h1{font-size:clamp(28px,4vw,38px);letter-spacing:-.022em}
.logo i{background:none;width:32px;height:32px}.logo i svg{width:32px;height:32px;display:block}
.top{box-shadow:0 1px 0 rgba(255,255,255,.04)}
.cats{box-shadow:0 1px 2px rgba(15,27,45,.04)}
.cats a{font-weight:600;color:var(--muted)}.cats a:hover{color:var(--ink);background:var(--chip)}
.cats a.on{box-shadow:inset 0 0 0 1px rgba(31,95,204,.18)}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--acc);background:var(--soft);padding:4px 10px;border-radius:999px;margin-bottom:10px;text-decoration:none}
.eyebrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.crumbs{font-size:13.5px}
/* form controls */
.f label{font-size:13.5px;letter-spacing:.01em}
.f .in{background:var(--card);border-color:var(--line2);transition:border-color .15s,box-shadow .15s}
.f .in:hover{border-color:#9fb0c8}
.f .in:focus-within{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(31,95,204,.18)}
.f input,.f select{font-size:16px;color:var(--ink);height:44px;padding:0 12px}
.f select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c95' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px}
.f select option{background-color:#fff;color:#0f1b2d}
@media (prefers-color-scheme:dark){.f select option{background-color:#101c30;color:#e3eaf5}.f .in:hover{border-color:#3d5578}}
.f .u{background:var(--chip);border-left:1px solid var(--line);font-size:13.5px;min-width:44px;justify-content:center}
.swapbtn{height:46px;width:46px;background:var(--soft);border-color:transparent;font-weight:700}
.swapbtn:hover{background:var(--acc);color:#fff}
.btn{border-radius:10px;padding:10px 18px;font-size:15px;transition:background .15s,border-color .15s}
.btn:hover{filter:none;background:var(--acc2)}
.btn.ghost{background:var(--card);border-color:var(--line2);color:var(--ink2)!important}
.btn.ghost:hover{background:var(--chip);border-color:#9fb0c8}
/* calculator card */
.calc{border-color:var(--line);border-radius:14px}
.calc form{padding:22px 22px 18px}
.out{background:linear-gradient(180deg,var(--soft),transparent 140%);padding:22px}
.out .prim{gap:16px}
.out .prim span{font-size:13px;letter-spacing:.02em}
.out .prim b{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums}
.out .prim small{color:var(--muted);font-weight:600}
.out .sec div{border-color:var(--line);box-shadow:var(--shadow)}
.out .sec b{font-weight:650;font-variant-numeric:tabular-nums}
.out .sec small{color:var(--muted)}
.rnote{color:var(--ink2)}
.formula{border-left:3px solid var(--acc);border-radius:0 10px 10px 0;background:var(--card)}
table{border:1px solid var(--line);border-radius:10px;overflow:hidden;border-collapse:separate;border-spacing:0;background:var(--card)}
th{background:var(--chip);font-weight:700}
tr:nth-child(even) td{background:rgba(127,150,190,.06)}
td{font-variant-numeric:tabular-nums}
.note{border-left-width:3px}
aside .box{border-radius:14px;padding:18px}
aside li a{font-size:14.5px;color:var(--ink2)}
.titem{border-radius:12px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.titem:hover{transform:translateY(-1px)}
.titem strong{font-weight:650}
.catcard{box-shadow:var(--shadow)}
.catcard h3{font-size:17px}
.pill{box-shadow:var(--shadow);font-weight:600}
.jump a{border:1px solid var(--line);background:var(--card)}
.jump a:hover{border-color:var(--acc);color:var(--acc)}
.hero h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.03em}
.hero .big input{background:#fff;color:#0f1b2d;border-color:transparent;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hero .big input::placeholder{color:#6b7c95}.hero .big svg{stroke:#6b7c95}
.results a strong{font-weight:600}
@media (prefers-color-scheme:dark){.hero .big input{background:#16243b;color:#f5f8fc}.hero .big input::placeholder{color:#8fa0b8}}
aside .box p a{text-decoration:none;font-weight:600;font-size:14.5px}aside .box p a:hover{text-decoration:underline}
/* ---- v6 ---- */
.phead{background:var(--card);border-bottom:1px solid var(--line);margin:-28px 0 8px;padding:26px 0 18px;background-image:linear-gradient(rgba(31,95,204,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(31,95,204,.045) 1px,transparent 1px);background-size:24px 24px}
.phead h1{margin-bottom:6px}.phead .lead{margin:0}.phead .jump{margin-top:16px}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:-4px 0 8px}
.feats div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);border-top:3px solid var(--acc)}
.feats b{display:block;font-size:15px}.feats span{font-size:14px;color:var(--muted)}
.flogo{margin-bottom:8px}.flogo b{color:#fff}
@media print{.top,.cats,aside,footer,.actions,.hero .big,.search{display:none!important}body{background:#fff;color:#000}.tool{display:block}.calc,.out{box-shadow:none;border:1px solid #999;background:#fff}main{padding:0}a{color:#000;text-decoration:none}}
.hero h1{max-width:900px}