:root{
  --desk:#E7EAF0; --panel:#FFFFFF; --panel-2:#F3F5F9; --ink:#1A1F2C; --muted:#586074; --line:#D3D8E2;
  --accent:#2B3D9C; --accent-ink:#FFFFFF; --accent-soft:#E1E6F7; --ok:#1D7447; --warn:#94520A; --warn-soft:#FBEFD8;
  --seller:#2B3D9C; --seller-soft:#E1E6F7; --buyer:#8A4B08; --buyer-soft:#FBEFD8;
  --f-ui:"Archivo","Noto Sans","IBM Plex Sans KR","Noto Sans Arabic","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans SC","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark; --desk:#0E1119; --panel:#161A24; --panel-2:#1C212D; --ink:#E2E5EE; --muted:#98A0B4; --line:#2A3142;
    --accent:#93A6FF; --accent-ink:#0A1030; --accent-soft:#1E2747; --ok:#5CC98E; --warn:#E6A650; --warn-soft:#33270F;
    --seller:#93A6FF; --seller-soft:#1E2747; --buyer:#E6A650; --buyer-soft:#33270F}
}
html[lang="ar"],html[lang="ur"]{--f-ui:"Noto Sans Arabic","Archivo",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--desk); color:var(--ink); font:16px/1.6 var(--f-ui); -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.wrap{max-width:980px; margin:0 auto; padding-inline:20px}
@media (max-width:420px){.wrap{padding-inline:16px}}
.top{background:var(--panel); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; min-height:60px; padding-block:8px}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.brand svg{flex:none}
.top nav{display:flex; gap:10px 16px; align-items:center; flex-wrap:wrap; margin-inline-start:auto; font-size:14px}
.top nav a{text-decoration:none; font-weight:600}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 16px; border-radius:10px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink)!important; font:600 15px/1.2 var(--f-ui); text-decoration:none; cursor:pointer}
.btn.ghost{background:transparent; color:var(--accent)!important}
.top select{font:14px var(--f-ui); padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); max-width:150px}
main{padding-block:24px 56px}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:10px}
.crumbs a{text-decoration:none}
h1{font-size:clamp(28px,5vw,40px); line-height:1.15; margin:0 0 10px; letter-spacing:-.02em; text-wrap:balance}
.lead{font-size:17px; color:var(--muted); margin:0 0 24px; max-width:68ch}
h2{font-size:22px; line-height:1.25; margin:40px 0 12px; letter-spacing:-.01em; text-wrap:balance}
h3{font-size:16px; margin:20px 0 8px}
p{max-width:70ch}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px}
label{font-size:13px; font-weight:600; color:var(--muted)}
input,select{font:16px var(--f-ui); color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 10px; width:100%; min-height:42px}
input[type=radio],input[type=checkbox]{width:auto; min-height:0; accent-color:var(--accent)}
.opts{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:4px 0 14px}
.opts label{display:inline-flex; gap:6px; align-items:center; color:var(--ink); font-weight:500; font-size:15px}
.opts .k{font-size:13px; font-weight:700; color:var(--muted)}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px}
@media (max-width:640px){.grid2{grid-template-columns:minmax(0,1fr)}}
.field{display:flex; flex-direction:column; gap:4px}
.num{font-family:var(--f-mono); direction:ltr; text-align:start}
html[dir=rtl] .num{text-align:right}
/* CBM rows */
.crow{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:10px; align-items:end; padding:12px 0; border-top:1px dashed var(--line)}
.crow:first-child{border-top:0; padding-top:0}
@media (max-width:640px){.crow{grid-template-columns:repeat(3,minmax(0,1fr))} .crow .del{grid-column:span 3; justify-self:end}}
.del{background:none; border:0; color:var(--muted); font:14px var(--f-ui); cursor:pointer; padding:8px; min-height:42px}
.add{background:none; border:1px dashed var(--accent); color:var(--accent); border-radius:10px; padding:10px 14px; font:600 14px var(--f-ui); cursor:pointer; margin-top:6px}
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media (max-width:560px){.kpis{grid-template-columns:minmax(0,1fr)}}
.kpi{background:var(--panel-2); border-radius:10px; padding:12px 14px}
.kpi span{display:block; font-size:13px; color:var(--muted); font-weight:600}
.kpi b{display:block; font:700 22px/1.3 var(--f-mono); direction:ltr; unicode-bidi:isolate}
html[dir=rtl] .kpi b{text-align:right}
.bar{margin:10px 0 14px}
.bar .lbl{display:flex; justify-content:space-between; gap:12px; font-size:14px; flex-wrap:wrap}
.bar .lbl b{font-weight:700}
.bar .track{height:12px; border-radius:6px; background:var(--panel-2); overflow:hidden; margin-top:6px}
.bar .fill{height:100%; background:var(--accent); border-radius:6px; width:0; transition:width .25s}
.bar.over .fill{background:var(--warn)}
.charge{display:grid; gap:10px}
.charge div{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; background:var(--panel-2); border-radius:10px}
.charge b{font-family:var(--f-mono); direction:ltr; unicode-bidi:isolate}
.charge small{display:block; width:100%; color:var(--muted); font-size:13px}
.note{font-size:13px; color:var(--muted); margin:14px 0 0}
.warn{background:var(--warn-soft); color:var(--warn); border-radius:10px; padding:8px 12px; font-size:14px; margin:8px 0}
/* words */
.out{display:block; font:600 17px/1.55 var(--f-mono); direction:ltr; text-align:left; background:var(--panel-2); border-radius:10px; padding:14px; margin:8px 0 10px; word-break:break-word; min-height:56px}
/* incoterms */
.ttable{width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:14px}
.ttable th,.ttable td{padding:10px 12px; text-align:start; vertical-align:top; border-bottom:1px solid var(--line)}
.ttable thead th{background:var(--panel-2); font-size:13px; color:var(--muted)}
.ttable tbody tr:last-child td,.ttable tbody tr:last-child th{border-bottom:0}
.ttable .code{font:800 17px var(--f-mono); color:var(--accent); display:block}
.ttable .nm{font-size:13px; color:var(--muted); font-weight:500}
.ttable tr.grp td{background:var(--accent-soft); font-weight:700; color:var(--accent); font-size:13px}
.who{display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:13px; white-space:nowrap}
.who.s{background:var(--seller-soft); color:var(--seller)}
.who.b{background:var(--buyer-soft); color:var(--buyer)}
.who.n{color:var(--muted); font-weight:500; padding-inline:0}
@media (max-width:760px){
  .ttable thead{display:none}
  .ttable, .ttable tbody, .ttable tr, .ttable td, .ttable th{display:block; width:100%}
  .ttable tr{border-bottom:1px solid var(--line); padding:6px 0}
  .ttable td,.ttable th{border:0; padding:4px 14px}
  .ttable td[data-h]{display:flex; justify-content:space-between; align-items:baseline; gap:12px; text-align:end}
  .ttable td[data-h]::before{content:attr(data-h); font-size:12px; color:var(--muted); font-weight:600; text-align:start; flex:0 1 45%}
  .ttable td.dl{display:block; text-align:start}
  .ttable td.dl::before{display:block}
}
/* templates */
.tcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:760px){.tcards{grid-template-columns:minmax(0,1fr)}}
.tcard{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px}
.tcard h3{margin:0; font-size:18px}
.tcard p{margin:0; color:var(--muted); font-size:15px; flex:1}
.hub{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:640px){.hub{grid-template-columns:minmax(0,1fr)}}
.hub a{display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; text-decoration:none; color:var(--ink)}
.hub a b{display:block; font-size:18px; margin-bottom:4px; color:var(--accent)}
.hub a span{color:var(--muted); font-size:15px}
/* cta, guide, faq */
.cta{background:var(--accent); color:var(--accent-ink); border-radius:16px; padding:22px; margin:32px 0 8px}
.cta h2{margin:0 0 6px; color:inherit; font-size:20px}
.cta p{margin:0 0 14px; opacity:.9}
.cta .btn{background:var(--accent-ink); color:var(--accent)!important; border-color:var(--accent-ink)}
.guide p{color:var(--muted)}
details{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:10px}
summary{font-weight:700; cursor:pointer}
details p{color:var(--muted); margin:8px 0 0}
.related{display:flex; flex-wrap:wrap; gap:10px}
.related a{background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 14px; text-decoration:none; font-weight:600; font-size:14px}
footer.site{border-top:1px solid var(--line); padding-block:20px 40px; font-size:13px; color:var(--muted)}
footer.site .langs{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px}
.copyrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.copied{color:var(--ok); font-size:14px; font-weight:600}