:root{--ink:#14213D;--paper:#F4F6FA;--card:#fff;--line:#D8DEE9;--mut:#5B6678;--gold:#F5A700;--teal:#0E7C7B;--r:10px}
@media(prefers-color-scheme:dark){:root{--ink:#E8EDF7;--paper:#0E1523;--card:#172136;--line:#2A3752;--mut:#9AA6BC}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 'Mukta',system-ui,sans-serif}
a{color:inherit}h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:800}
.wrap{max-width:1120px;margin:auto;padding:0 18px}
header.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;font-size:22px;text-decoration:none;display:flex;gap:8px;align-items:center}
.logo b{background:var(--gold);color:#14213D;border-radius:6px;padding:0 8px}
nav a{margin-left:18px;text-decoration:none;color:var(--mut);font-weight:600}nav a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hero{padding:44px 0 28px}.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.5px}.hero p{color:var(--mut);max-width:34em}
.search{display:flex;margin:22px 0 6px;max-width:520px}
.search input{flex:1;font:inherit;padding:13px 16px;border:2px solid var(--ink);border-radius:var(--r);background:var(--card);color:var(--ink)}
.slip{background:#fff;color:#14213D;border-radius:4px;padding:22px 24px;box-shadow:6px 6px 0 var(--gold);transform:rotate(1.5deg);font-size:15px;position:relative}
.slip:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:linear-gradient(135deg,#fff 50%,transparent 50%) 0 0/14px 9px,linear-gradient(225deg,#fff 50%,transparent 50%) 0 0/14px 9px}
.slip h3{font-size:17px;border-bottom:2px dashed #C9D1DF;padding-bottom:8px}.slip p{margin:2px 0;display:flex;justify-content:space-between}.slip .t{font-weight:800;font-size:19px;border-top:2px solid #14213D;margin-top:8px;padding-top:6px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:12px 0 8px}
.cat{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:var(--r);padding:18px 18px 16px;text-decoration:none;display:block}
.cat:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,var(--card))}
.cat i{color:var(--c);font-size:26px}.cat h3{margin:8px 0 2px;font-size:20px}.cat p{margin:0;color:var(--mut);font-size:15px;line-height:1.45}.cat small{color:var(--c);font-weight:700}
.sec{padding:26px 0}.sec h2{font-size:28px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;display:block}
.tool:hover{border-color:var(--c,var(--teal))}.tool i{color:var(--c,var(--teal));font-size:24px}.tool h3{margin:8px 0 2px;font-size:18px}.tool p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.4}
.crumb{font-size:14px;color:var(--mut);padding:14px 0 0}.crumb a{text-decoration:none}
.lead{color:var(--mut);max-width:46em}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start;padding:10px 0 20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fld{display:block}.fld span{display:block;font-weight:600;font-size:15px;margin-bottom:3px}
input,select,textarea{width:100%;font:inherit;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none}
.fld:has(textarea){grid-column:1/-1}
.tbl{margin-top:18px}.tbl h3{font-size:18px}.scroll{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;min-width:420px}.tbl th{text-align:left;font-size:14px;color:var(--mut);padding:4px}.tbl td{padding:3px}.tbl td input{padding:7px 8px;min-width:70px}
.calc{font-weight:700;white-space:nowrap;padding:0 8px!important}
.del{border:0;background:none;color:#C0392B;font-size:22px;cursor:pointer}
.add,.btn{font:inherit;font-weight:700;border-radius:8px;padding:8px 14px;cursor:pointer;border:1.5px solid var(--ink);background:var(--card);color:var(--ink)}
.add{margin-top:6px}.btn.pri{background:var(--ink);color:var(--paper)}
.sticky{position:sticky;top:76px}
.exp{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:14px}
.exp .btn i{margin-right:6px}.exp .btn:hover{background:var(--gold);color:#14213D;border-color:var(--gold)}
#preview{background:#fff;color:#14213D;border-radius:6px;padding:18px;font-size:15px;line-height:1.5;overflow-x:auto;border:1px solid var(--line)}
#preview h2{font-size:21px;margin-bottom:2px}#preview h3{font-size:16px;margin:14px 0 4px}.meta{margin:0 0 10px;color:#5B6678}
#preview table{border-collapse:collapse;width:100%;margin:4px 0}#preview th,#preview td{text-align:left;padding:3px 8px;vertical-align:top}
.grid-t th,.grid-t td{border:1px solid #D8DEE9}.grid-t th{background:#EEF2F8}.kv th{width:42%;font-weight:600}
.res{margin-top:14px!important;border-top:2px solid #14213D}.res th{font-weight:600}.res td{font-weight:700;text-align:right!important}.res .last{background:#FFF3CF}.res .last *{font-size:18px;font-weight:800}
.prose{max-width:46em}.prose ol{padding-left:22px}details{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:8px 0}summary{cursor:pointer;font-weight:700}
footer{margin-top:30px;border-top:1px solid var(--line);background:var(--card);padding:26px 0;color:var(--mut);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}footer a{margin-right:14px}
@media(max-width:820px){.hero .wrap,.layout{grid-template-columns:1fr}.slip{transform:none;max-width:420px}.sticky{position:static}nav{display:none}}
@media print{body>*:not(main),header,footer,.crumb,.lead,h1,#form,.exp,.noprint{display:none!important}main,.layout,.wrap{display:block!important;padding:0!important}.panel{border:0;padding:0}.sticky{position:static}#preview{border:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ---- v2: simple layout, logo, ads, mobile fixes ---- */
html,body{max-width:100%;overflow-x:hidden}
h1,h2,h3,p,a,label,span{overflow-wrap:anywhere}
.logo img{display:block;border-radius:8px}.logo span{font-weight:800;font-size:21px}
.badge{font-size:13px;font-weight:600;background:#D1FAE5;color:#065F46;padding:3px 12px;border-radius:99px;text-decoration:none}
.ctitle{text-align:center;font-size:clamp(22px,4vw,30px);font-weight:700;margin:22px 0 18px}
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:10px}
@media(min-width:700px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
@media(min-width:1000px){.cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ccard{background:var(--card);border-radius:20px;padding:24px 12px;text-align:center;text-decoration:none;display:block;transition:transform .25s,box-shadow .25s}
.ccard:hover{transform:translateY(-6px);box-shadow:0 16px 28px rgba(0,0,0,.1)}
.ccard i{font-size:32px;color:var(--c)}.ccard h3{margin:12px 0 0;font-size:17px;font-weight:600}.ccard p{margin:2px 0 0;font-size:14px;color:var(--mut)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.ad-slot{max-width:100%;min-height:100px;margin:14px auto;text-align:center;overflow:hidden;display:flex;justify-content:center;align-items:center}
.ad-slot iframe{max-width:100%!important}
.ad-slot .ph{width:100%;max-width:728px;min-height:90px;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:10px;color:var(--mut);font-size:13px;letter-spacing:.5px;text-transform:uppercase}
.layout>*{min-width:0}.panel{min-width:0}
.calc{max-width:440px;margin:14px auto}
.cdisp{font-size:30px;text-align:right;padding:14px;margin-bottom:12px;font-weight:600}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.keys button{font:inherit;font-size:22px;font-weight:600;padding:14px 0;border-radius:12px;border:0;background:var(--paper);color:var(--ink);cursor:pointer}
.keys button.op{background:var(--gold);color:#14213D}.keys button.eq{background:var(--ink);color:var(--paper)}
.keys button:active{transform:scale(.96)}
.hh{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.hh h2{font-size:18px;margin:0}
#history{max-height:160px;overflow:auto;font-size:15px;color:var(--mut);margin-top:6px}.mut{color:var(--mut)}
#chart{max-width:100%;margin-top:12px}
@media(max-width:640px){
 .wrap{padding:0 14px}.panel{padding:14px}
 .tbl table{min-width:0;display:block}.tbl thead{display:none}.tbl tbody{display:block}
 .tbl tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;position:relative}
 .tbl td{display:block;padding:0;min-width:0}
 .tbl td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:13px;font-weight:600;color:var(--mut)}
 .tbl td:first-child{grid-column:1/-1;padding-right:26px}
 .tbl td.calc{grid-column:1/-1;display:flex;justify-content:space-between;padding:4px 0!important}
 .tbl td:last-child{position:absolute;top:2px;right:4px}
 .tbl td input{min-width:0;width:100%}
 .exp{grid-template-columns:repeat(2,1fr)}
 .logo span{font-size:19px}
}
