:root{
  color-scheme:light;
  --page:#f6f7f9;--surface:#ffffff;--soft:#f2f5f8;--text:#192637;--muted:#627184;--line:#dee5ec;
  --accent:#1468d4;--accent-soft:#eaf2ff;--positive:#167e5f;--positive-bg:#eaf7f1;--negative:#c34c4c;--negative-bg:#fff0ef;
  --shadow:0 12px 36px rgba(31,53,78,.055);--radius:20px;--focus:0 0 0 3px rgba(20,104,212,.18);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --page:#0d1521;--surface:#172334;--soft:#1e3044;--text:#ebf2fa;--muted:#a8b8c9;--line:#34465a;
  --accent:#78b1ff;--accent-soft:#193659;--positive:#78d9b1;--positive-bg:#193d36;--negative:#ff9a96;--negative-bg:#482a34;
  --shadow:0 12px 36px rgba(0,0,0,.16);--focus:0 0 0 3px rgba(120,177,255,.27);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);font:400 15px/1.65 system-ui,-apple-system,"Segoe UI","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:var(--accent)}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input,select{color:var(--text);background:var(--surface)}
[hidden]{display:none!important}
.skip{position:absolute;top:-80px;inset-inline-start:12px;background:var(--surface);padding:8px 14px;z-index:90}
.skip:focus{top:12px}
.shell{max-width:1160px;padding:0 28px;margin:auto}
.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.identity{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand-symbol{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-weight:850;font-size:15px;letter-spacing:-.07em}
.brand-name{font-weight:760;font-size:.94rem;line-height:1.2}
.brand-name small{display:block;color:var(--muted);font-weight:450;margin-top:4px;font-size:.73rem}
.header-actions{display:flex;align-items:center;gap:7px}
.icon-action{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font-weight:750}
.icon-action:hover,.btn-secondary:hover{background:var(--soft)}
.icon-action svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 17px;border:1px solid transparent;border-radius:12px;font-weight:680;transition:background-color .16s ease,border-color .16s ease}
.btn-primary{background:var(--accent);color:var(--page);border-color:var(--accent)}
html:not([data-theme="dark"]) .btn-primary{color:white}
.btn-primary:hover{filter:brightness(.96)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn-link{background:none;color:var(--muted);border:0;padding:7px 10px;min-height:42px;font-weight:620}
.btn-link:hover{color:var(--accent)}
main{padding-bottom:72px}
.intro{padding:52px 0 27px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.eyebrow{font-size:.76rem;letter-spacing:.055em;text-transform:uppercase;color:var(--accent);font-weight:850}
.intro h1{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.035em;line-height:1.25;margin:9px 0 11px;font-weight:850}
.intro p{max-width:650px;margin:0;color:var(--muted);line-height:1.9;font-size:.99rem}
.hero-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.section-head{display:flex;align-items:center;gap:11px;margin:26px 0 15px}
.step{display:grid;place-items:center;min-width:33px;height:33px;border-radius:11px;color:var(--accent);font-size:.78rem;font-weight:850;background:var(--accent-soft);font-variant-numeric:tabular-nums}
.section-head h2{font-size:1.13rem;line-height:1.3;margin:0;font-weight:800}
.section-head p{margin:5px 0 0;color:var(--muted);font-size:.81rem;line-height:1.5}
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;align-items:start}
.offer-card,.panel,.result-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.offer-card{padding:24px;min-width:0}
.offer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}
.offer-top h3{margin:0;font-size:1.03rem;font-weight:820}
.offer-side-tag{font-size:.7rem;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--muted);font-weight:700;white-space:nowrap}
.offer-side-tag.new{background:var(--accent-soft);color:var(--accent)}
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-field>label,.field-label{color:var(--text);font-size:.84rem;font-weight:690}
.help{font-size:.73rem;line-height:1.55;color:var(--muted)}
.text-input,.number-input,.select-input{height:47px;width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.text-input:focus,.number-input:focus,.select-input:focus{border-color:var(--accent);box-shadow:var(--focus)}
.number-input{font-size:1rem;font-weight:720;text-align:start;direction:ltr;font-variant-numeric:tabular-nums}
.text-input::placeholder,.number-input::placeholder{color:var(--muted);opacity:.72;font-weight:420}
.value-wrap{position:relative;min-width:0}
.value-wrap .number-input{padding-inline-end:42px}
.unit{position:absolute;inset-inline-end:11px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:.75rem;color:var(--muted);font-weight:700}
.subhead{margin:23px 0 12px;padding-top:15px;border-top:1px solid var(--line);font-size:.8rem;font-weight:810;color:var(--muted)}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 13px}
.field-grid .wide{grid-column:1/-1}
.amount-mode{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:6px;align-items:start}
.amount-mode select{padding:6px;height:47px;font-size:.78rem;font-weight:760}
.inline-note{color:var(--muted);font-size:.75rem;margin:6px 0 0;line-height:1.6}
.gosi-select{margin-top:2px}
.gosi-detail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:.77rem;color:var(--muted)}
.gosi-detail strong{color:var(--text)}
.gosi-custom{margin-top:11px;max-width:190px}
.net-preview{border-top:1px solid var(--line);background:var(--soft);margin:22px -24px -24px;padding:18px 24px;border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);display:flex;align-items:center;justify-content:space-between;gap:14px}
.net-preview span{font-size:.81rem;color:var(--muted);font-weight:690}
.net-preview strong{font-size:1.34rem;font-variant-numeric:tabular-nums;font-weight:840}
.net-preview small{font-size:.72rem;color:var(--muted);font-weight:500}
.number{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap;display:inline-block}
.advanced{margin-top:17px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.advanced>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:18px 23px;font-weight:820}
.advanced>summary::-webkit-details-marker{display:none}
.advanced>summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--muted)}
.advanced[open]>summary::after{content:"−"}
.advanced>summary .summary-copy{display:block}
.advanced>summary .summary-copy small{display:block;font-weight:420;font-size:.78rem;color:var(--muted);margin-top:2px}
.advanced-content{padding:2px 22px 23px;border-top:1px solid var(--line)}
.advanced-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding-top:20px}
.advanced-side{min-width:0}
.advanced-side h3{margin:0 0 14px;font-size:.98rem}
.advanced-side .field-grid{row-gap:16px}
.note{margin:15px 0 0;font-size:.78rem;color:var(--muted);line-height:1.8}
.results{scroll-margin-top:24px}
.result-block{padding:27px}
.result-empty{text-align:center;padding:44px 20px}
.result-empty .empty-mark{width:54px;height:54px;margin:0 auto 14px;display:grid;place-items:center;background:var(--soft);border-radius:15px;font-size:1.6rem;color:var(--muted)}
.result-empty h3{margin:0 0 7px;font-size:1.04rem}
.result-empty p{margin:0 auto;max-width:410px;color:var(--muted);font-size:.88rem}
.verdict{display:flex;align-items:center;justify-content:space-between;gap:22px;border:1px solid var(--line);border-radius:15px;background:var(--soft);padding:22px}
.verdict-kicker{color:var(--muted);font-size:.77rem;font-weight:760;margin-bottom:4px}
.verdict h3{margin:0;font-size:1.19rem;font-weight:870;line-height:1.5}
.verdict p{font-size:.82rem;color:var(--muted);margin:5px 0 0}
.verdict-delta{text-align:end;min-width:120px}
.verdict-delta strong{font-size:1.45rem;line-height:1.3}
.positive{color:var(--positive)!important}
.negative{color:var(--negative)!important}
.neutral{color:var(--muted)!important}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:17px;min-width:0}
.metric h4{margin:0 0 13px;color:var(--muted);font-size:.79rem;font-weight:750;line-height:1.5}
.metric-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:7px;font-size:.81rem}
.metric-line span{color:var(--muted);min-width:0}
.metric-line strong{font-size:.93rem;font-weight:800}
.metric-line.difference{border-top:1px solid var(--line);padding-top:9px;margin-top:11px;font-size:.84rem;font-weight:760}
.explain{margin-top:18px;font-size:.8rem;color:var(--muted);line-height:1.8}
.result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}
.breakdown{margin-top:16px}
.breakdown summary{font-weight:760;cursor:pointer;padding:13px 0;color:var(--accent)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:480px;font-variant-numeric:tabular-nums;font-size:.85rem}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start}
thead th{background:var(--soft);color:var(--muted);font-size:.74rem;white-space:nowrap}
td:not(:first-child),th:not(:first-child){text-align:end;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr.emphasis{background:var(--soft);font-weight:770}
tbody tr.section-row td{padding-top:18px;color:var(--muted);font-weight:740}
.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.mini-stat{padding:14px;background:var(--soft);border-radius:14px}
.mini-stat span{display:block;color:var(--muted);font-size:.76rem}
.mini-stat strong{font-size:1rem}
.privacy{margin:23px 0 0;color:var(--muted);font-size:.76rem;text-align:center;line-height:1.8}
.footer{padding:23px 0;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.toast{position:fixed;inset-inline-end:20px;bottom:22px;z-index:150;background:var(--text);color:var(--page);padding:11px 17px;border-radius:12px;box-shadow:var(--shadow);max-width:340px;font-size:.84rem}
.only-en{display:none}
html[lang="en"] .only-ar{display:none}
html[lang="en"] .only-en{display:initial}
@media(max-width:850px){
 .intro{flex-direction:column;align-items:start;padding-top:37px}
 .offer-grid,.advanced-grid{grid-template-columns:1fr}
 .advanced-side + .advanced-side{border-top:1px solid var(--line);padding-top:20px}
 .metrics{grid-template-columns:1fr}
 .metric{display:grid;grid-template-columns:1fr 1.2fr;align-items:start;gap:10px}
 .metric h4{margin:3px 0}
 .metric .metric-rows{min-width:0}
}
@media(max-width:560px){
 body{font-size:14px}
 .shell{padding:0 15px}
 .topbar-inner{min-height:68px}
 .brand-name{font-size:.84rem}
 .brand-name small{font-size:.7rem}
 .intro{padding-top:27px;padding-bottom:10px}
 .intro h1{font-size:2rem}
 .intro p{font-size:.9rem}
 .hero-actions{width:100%}
 .hero-actions .btn{flex:1}
 .offer-card{padding:17px;border-radius:17px}
 .offer-top{margin-bottom:13px}
 .field-grid{gap:13px 10px}
 .form-field>label,.field-label{font-size:.8rem}
 .amount-mode{grid-template-columns:minmax(0,1fr) 66px}
 .net-preview{margin:19px -17px -17px;padding:15px 17px}
 .advanced>summary{padding:16px}
 .advanced-content{padding:0 15px 19px}
 .advanced-grid{gap:18px}
 .result-block{padding:17px}
 .verdict{flex-direction:column;align-items:stretch;padding:17px}
 .verdict-delta{text-align:start}
 .verdict-delta strong{font-size:1.25rem}
 .metric{grid-template-columns:1fr}
 .metric h4{margin-bottom:5px}
 .metric-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
 .metric-line.difference{grid-column:1/-1}
 .mini-grid{grid-template-columns:1fr}
 .footer{justify-content:center;text-align:center}
 .header-actions{gap:4px}
 .icon-action{width:39px;height:39px}
}
@media print{
 :root{--page:#fff;--surface:#fff;--soft:#f7f7f7;--text:#000;--muted:#444;--line:#ddd;--shadow:none}
 .topbar,.intro .hero-actions,.advanced,.result-actions,.footer,.privacy,.toast,.breakdown summary{display:none!important}
 .intro{padding:10px 0}.shell{max-width:none}.result-block,.offer-card{break-inside:avoid}
 .breakdown[open] .table-wrap{display:block}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Final polish: make the bilingual language switch readable on narrow screens. */
#langBtn{width:auto;min-width:78px;padding-inline:12px;white-space:nowrap;font-size:.81rem}
@media(max-width:560px){#langBtn{min-width:70px;padding-inline:8px}}

/* v2: polished, restrained glass surfaces and genuinely usable mobile fields */
:root{
  --page:#f1f5fb;--surface:rgba(255,255,255,.88);--soft:rgba(235,242,251,.74);
  --line:rgba(146,168,195,.30);--text:#172337;--muted:#617187;
  --shadow:0 16px 46px rgba(33,59,91,.075),0 2px 9px rgba(33,59,91,.025);
}
html[data-theme="dark"]{
  --page:#101926;--surface:rgba(28,41,59,.90);--soft:rgba(39,56,78,.83);
  --line:rgba(157,176,199,.23);--text:#f0f5fb;--muted:#b3c1d0;
  --shadow:0 18px 50px rgba(0,0,0,.21);
}
body{
  background:
    radial-gradient(ellipse 820px 580px at 91% -100px,rgba(132,180,245,.22),transparent 73%),
    radial-gradient(ellipse 780px 490px at -15% 52%,rgba(135,208,203,.11),transparent 75%),
    var(--page);
}
.topbar{position:relative;z-index:2;background:var(--surface);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand-symbol{box-shadow:inset 0 1px 0 rgba(255,255,255,.36)}
.intro{padding-top:44px}
.intro h1{letter-spacing:-.025em}
.intro p{max-width:610px}
.offer-card,.result-block,.advanced{
  background:var(--surface);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}
.offer-card{border-top:3px solid rgba(92,112,138,.38)}
.offer-card:nth-child(2){border-top-color:var(--accent)}
.offer-top h3{font-size:1.09rem}
.text-input,.number-input,.select-input{background:rgba(255,255,255,.4)}
html[data-theme="dark"] .text-input,html[data-theme="dark"] .number-input,html[data-theme="dark"] .select-input{background:rgba(13,22,35,.38)}
.net-preview{background:var(--soft)}
.metric{background:var(--soft);border-color:transparent}
.metric h4{font-size:.81rem}
.verdict{background:linear-gradient(130deg,var(--accent-soft),var(--soft));border-color:var(--line)}
.verdict h3{font-size:1.27rem}
.advanced>summary:hover{background:var(--soft)}
.btn-primary{box-shadow:0 6px 15px rgba(30,104,195,.14)}
/* No cramped numeric fields at narrow viewport widths, especially RTL on iPhone */
@media(max-width:640px){
  .field-grid{grid-template-columns:1fr}
  .amount-mode{grid-template-columns:minmax(0,1fr) 106px;gap:9px}
  .amount-mode select{font-size:.88rem}
  .field-grid .wide{grid-column:auto}
  .form-field>label{font-size:.83rem}
  .number-input{font-size:1.05rem}
  .intro{padding-top:26px}
  .offer-grid{gap:13px}
  .metric-rows{display:block}
  .metric-line{margin-top:8px}
}
@media(max-width:365px){
 .shell{padding-inline:12px}
 .offer-card{padding:15px}
 .net-preview{margin:18px -15px -15px;padding:15px}
 .brand-name{font-size:.79rem}
}

/* Compact navigation: preserve the full page width at 320px in RTL. */
@media(max-width:365px){
  .topbar-inner{gap:5px}
  .identity{gap:6px;min-width:0}
  .brand-symbol{width:30px;height:30px;flex:none;font-size:11px;border-radius:9px}
  .brand-name{font-size:.72rem;letter-spacing:-.03em}
  .brand-name small{font-size:.61rem}
  .header-actions{gap:3px;flex:none}
  #langBtn{min-width:60px;padding-inline:5px;font-size:.72rem}
  #themeBtn{width:34px;height:36px}
}