:root{
  --bg:#EDF1F5;--grid:#DCE3EB;--panel:#FFFFFF;--ink:#14213A;--muted:#55627A;--line:#C9D2DE;--edge:#7C8AA0;
  --accent:#FFD84D;--accent-ink:#14213A;--result-bg:#14213A;--result-ink:#F4F7FA;--pos:#0F7B6C;--neg:#B83A32;--focus:#2456E5;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tabsh:49px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1622;--grid:#172234;--panel:#152030;--ink:#E8EDF5;--muted:#9AA7BC;--line:#2A3A52;--edge:#6F819C;
    --accent:#FFD84D;--accent-ink:#14213A;--result-bg:#E8EDF5;--result-ink:#14213A;--pos:#4CC9A8;--neg:#FF8078;--focus:#8DAAFF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1622;--grid:#172234;--panel:#152030;--ink:#E8EDF5;--muted:#9AA7BC;--line:#2A3A52;--edge:#6F819C;
  --accent:#FFD84D;--accent-ink:#14213A;--result-bg:#E8EDF5;--result-ink:#14213A;--pos:#4CC9A8;--neg:#FF8078;--focus:#8DAAFF;
  color-scheme:dark;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 120px)}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{
  margin:0;background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;color:var(--ink);font:400 1rem/1.55 var(--body);-webkit-text-size-adjust:100%;
}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.pick{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1rem}
html[lang="hi"]{--display:"Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif;--body:"Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif}
html[lang="ar"]{--display:"Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;--body:"Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif}
html[lang="zh"]{--display:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;--body:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
html[lang="ar"] *,html[lang="hi"] *{letter-spacing:0!important}
/* header + tabs */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.9rem 1rem .6rem;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:.5rem;font:700 1.4rem/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.mark{width:1.15rem;height:1.15rem;background:var(--accent);border:2px solid var(--ink);border-radius:3px;transform:rotate(-8deg)}
.cur{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--muted)}
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;gap:.2rem;overflow-x:auto;padding:0 max(.75rem,calc((100% - 1080px)/2));scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:.85rem .8rem .7rem;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font:600 .95rem var(--body);cursor:pointer}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}

main{max-width:1080px;margin:0 auto;padding:1.25rem 1rem 1.5rem}
.head h1{font:700 clamp(1.75rem,6.4vw,2.7rem)/1.06 var(--display);letter-spacing:-.028em;margin:.2rem 0 .55rem;max-width:18ch}
.head p{max-width:54ch;margin:0 0 1.1rem}

/* form parts */
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem}
.field{display:block;min-width:0;margin:0 0 1rem}
.l{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.hint{display:block;font-size:.82rem;color:var(--muted);margin-top:.3rem}
.mini{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.2rem}
.ctl{width:100%;min-height:2.9rem;border:1px solid var(--edge);border-radius:8px;background:var(--panel);color:var(--ink);padding:.65rem .75rem;font:inherit}
textarea.ctl{resize:vertical}
.inp{display:flex;align-items:center;border:1px solid var(--edge);border-radius:8px;background:var(--panel);min-height:2.9rem}
.inp:focus-within{outline:3px solid var(--focus);outline-offset:1px}
.inp input{flex:1;width:100%;min-width:0;border:0;background:transparent;color:var(--ink);padding:.65rem .75rem;font:inherit;outline:0}
.inp .pre{padding-inline-start:.75rem;color:var(--muted)}
.inp .suf{padding-inline-end:.75rem;color:var(--muted)}
.inp .pre + input{padding-inline-start:.3rem}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem}
.btn{font:600 .95rem var(--body);padding:.7rem 1.05rem;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
.btn.alt{background:transparent;color:var(--ink)}
.btn.sm{padding:.5rem .8rem;font-size:.85rem}
.btnrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}

/* result + stats */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem}
.side{display:contents}
.result{order:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--tabsh));z-index:5;background:var(--result-bg);color:var(--result-ink);border-radius:14px;padding:.75rem 1rem .9rem}
.inputs{order:2}
.stats{order:3}
.lbl{font-size:.88rem;opacity:.88}
.big{font:700 clamp(2.1rem,9.5vw,3.5rem)/1.12 var(--display);letter-spacing:-.03em;margin-top:.25rem;overflow-wrap:anywhere}
.big span{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:.02em .18em .06em;border-radius:4px;transform:rotate(-1.2deg);font-variant-numeric:tabular-nums}
.stats{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.25rem 1rem}
.stats div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line)}
.stats div:last-child{border-bottom:0}
.stats dt{color:var(--muted)}
.stats dd{margin:0;font-weight:600;text-align:end;font-variant-numeric:tabular-nums}
.note{margin:0;font-size:.9rem;color:var(--muted);padding:.2rem 0 .7rem}
@media (min-width:820px){
  .layout{grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:1.25rem;align-items:start}
  .side{display:block;grid-column:2;grid-row:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--tabsh) + 1rem)}
  .inputs{grid-column:1;grid-row:1}
  .result{position:static;margin-bottom:.9rem;padding:1rem 1.2rem 1.2rem}
}

/* about */
.about{margin-top:1.25rem}
.about h2{font:700 1.25rem/1.2 var(--display);margin:0 0 .5rem;letter-spacing:-.01em}
.about p{margin:0 0 .8rem;max-width:64ch}
details{border-top:1px solid var(--line);padding:.7rem 0}
summary{cursor:pointer;font-weight:600}
details p{margin:.5rem 0 0}

/* invoice */
.inv{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media (min-width:900px){.inv{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}}
.item{border:1px solid var(--line);border-radius:10px;padding:.7rem;margin-bottom:.6rem;background:var(--bg)}
.item .row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:.5rem;margin-top:.5rem;align-items:end}
.doc{background:#fff;color:#14213A;border:1px solid var(--line);border-radius:6px;padding:1.25rem;font-size:.9rem}
.doc-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.doc-title{font:700 1.9rem/1 var(--display);letter-spacing:-.02em}
.doc h3{font:600 .8rem var(--body);color:#55627A;margin:0 0 .2rem}
.doc .pl{white-space:pre-line;margin:0;overflow-wrap:anywhere}
.doc .ph{color:#8792A5}
.doc-parties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;margin-bottom:1.1rem}
.doc-scroll{overflow-x:auto}
.doc table{width:100%;border-collapse:collapse;min-width:420px}
.doc th{text-align:start;font-size:.8rem;color:#55627A;border-bottom:2px solid #14213A;padding:.4rem .3rem}
.doc td{padding:.5rem .3rem;border-bottom:1px solid #DCE3EB;vertical-align:top}
.doc .n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-tot{margin-inline-start:auto;width:min(100%,270px);margin-top:.8rem}
.doc-tot div{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0}
.doc-tot .grand{border-top:2px solid #14213A;font-weight:700;font-size:1.05rem;margin-top:.3rem;padding-top:.5rem}
.doc-notes{margin-top:1.1rem}

.share{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin-top:1.25rem}
#toast{font-size:.9rem;color:var(--muted)}
#fallback{margin-top:.6rem}
footer{max-width:1080px;margin:0 auto;padding:0 1rem 2rem;font-size:.85rem;color:var(--muted)}
footer p{max-width:70ch;margin:0}

@media (max-width:420px){.doc-parties{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}}
@media print{
  :root{padding:0}
  body{background:#fff}
  html[data-tool="invoice"] body *{visibility:hidden}
  html[data-tool="invoice"] #doc, html[data-tool="invoice"] #doc *{visibility:visible}
  html[data-tool="invoice"] #doc{position:absolute;left:0;top:0;width:100%;border:0}
}

a.tab{text-decoration:none}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.langs{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0 0 .9rem}
.langs a{color:var(--muted)}
.langs a[aria-current="true"]{color:var(--ink);font-weight:600;text-decoration:none}
:root,:root[data-theme="light"],:root[data-theme="dark"],:root:not([data-theme="light"]){--bg:#03050a;--panel:#0b1220;--ink:#F2F5FA;--muted:#9AA7BE;--line:rgba(255,255,255,.13);--edge:rgba(255,255,255,.24);--grid:rgba(255,255,255,.05);--accent:#FFD84D;--accent-ink:#14213A;--result-bg:#EEF2F9;--result-ink:#14213A;--pos:#4CC9A8;--neg:#FF8078;--focus:#8DAAFF;color-scheme:dark}html{background:#03050a}body{background:transparent;position:relative}body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 90vw 46vh at 50% -14vh,rgba(79,124,255,.5),transparent 70%),radial-gradient(520px 420px at 78% 36%,rgba(255,216,77,.11),transparent 65%),radial-gradient(700px 560px at 8% 92%,rgba(79,124,255,.12),transparent 62%),#03050a}body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 30%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 85% 75% at 50% 30%,#000 15%,transparent 72%)}.mark{width:1.7rem;height:1.7rem;background:url(../logo.svg) center/contain no-repeat;border:0;border-radius:0;transform:none;filter:drop-shadow(0 0 10px rgba(255,216,77,.5))}.brand{letter-spacing:-.01em}.tabs{background:rgba(3,5,10,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.tab[aria-current="page"],.tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--accent)}h1{text-shadow:0 0 44px rgba(79,124,255,.35)}.sheet,.stats{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px -24px rgba(0,0,0,.85)}.ctl,.inp{background:rgba(3,7,16,.7);border-color:var(--edge)}.result{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 44px rgba(255,216,77,.22),0 30px 70px -24px rgba(0,0,0,.9)}select.ctl option{background:#0b1220;color:#F2F5FA}