/* =====================================================================
   The Marketeer — pocket calculator for marketers
   Dark premium theme, Omar Elattar brand family (green/gold)
   ===================================================================== */
:root{
  --bg:#0F1713; --bg2:#141F19; --card:#182620; --card2:#1E2F27;
  --line:rgba(109,191,138,.14); --line2:rgba(109,191,138,.25);
  --text:#E9F2EC; --muted:#8FA89A; --faint:#5E7568;
  --green:#2E8B57; --green-soft:#6DBF8A; --g700:#1A5C35;
  --gold:#D4B25A; --gold-deep:#B8962E;
  --red:#E5766A; --redbg:rgba(229,118,106,.12);
  --amber:#E0B45C; --amberbg:rgba(224,180,92,.12);
  --okbg:rgba(109,191,138,.12);
  --r:16px; --r-sm:12px;
  --ar:'Tajawal',sans-serif; --en:'DM Sans',sans-serif; --disp:'Playfair Display',serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ar);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
html[lang="en"] body{font-family:var(--en)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
#app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:0 16px env(safe-area-inset-bottom)}

/* ---------- header ---------- */
.hdr{display:flex;align-items:center;gap:10px;padding:14px 0 12px;position:sticky;top:0;z-index:50;background:linear-gradient(180deg,var(--bg) 82%,transparent)}
.hdr-back{background:var(--card);border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;transition:background .15s}
.hdr-back:active{background:var(--card2)}
html[dir="ltr"] .hdr-back svg{transform:rotate(180deg)}
.brand{display:flex;align-items:center;gap:10px;margin-inline-end:auto}
.brand-ico{width:38px;height:38px;border-radius:12px;background:linear-gradient(150deg,var(--g700),#0c3a20);border:1px solid var(--line2);color:var(--gold);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:19px;flex-shrink:0}
.brand-tx{display:flex;flex-direction:column;line-height:1.15}
.brand-tx b{font-size:15.5px;font-family:var(--en);letter-spacing:.2px}
.brand-tx small{font-size:11px;color:var(--muted)}
.hdr-actions{display:flex;gap:7px}
.pill{background:var(--card);border:1px solid var(--line);color:var(--muted);padding:8px 13px;border-radius:20px;font-size:12px;font-weight:700;transition:all .15s}
.pill:active,.pill.on{background:var(--g700);color:#fff;border-color:var(--g700)}

/* ---------- home ---------- */
.home-intro{padding:10px 2px 18px}
.home-intro h1{font-size:22px;font-weight:800;line-height:1.4}
html[lang="en"] .home-intro h1{font-weight:700}
.home-intro h1 em{color:var(--gold);font-style:normal}
.home-intro p{color:var(--muted);font-size:13.5px;margin-top:4px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:20px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 15px;display:flex;flex-direction:column;gap:8px;text-align:start;color:var(--text);transition:transform .12s,border-color .15s,background .15s;position:relative;overflow:hidden}
.tcard:active{transform:scale(.97);background:var(--card2)}
.tcard .ti{width:40px;height:40px;border-radius:11px;background:rgba(109,191,138,.1);color:var(--green-soft);display:grid;place-items:center}
.tcard .ti svg{width:21px;height:21px}
.tcard .tnum{position:absolute;top:12px;inset-inline-end:13px;font-family:var(--disp);font-size:13px;color:var(--faint)}
.tcard h3{font-size:14.5px;font-weight:800;line-height:1.35}
html[lang="en"] .tcard h3{font-weight:700}
.tcard p{font-size:11.5px;color:var(--muted);line-height:1.55}

/* ---------- tool screen ---------- */
.tool-head{padding:6px 2px 14px}
.tool-head h2{font-size:20px;font-weight:800;display:flex;align-items:center;gap:9px}
.tool-head h2 .ti{width:34px;height:34px;border-radius:10px;background:rgba(109,191,138,.1);color:var(--green-soft);display:grid;place-items:center;flex-shrink:0}
.tool-head h2 .ti svg{width:18px;height:18px}
.tool-head p{color:var(--muted);font-size:12.5px;margin-top:6px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.f{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px 8px;transition:border-color .15s}
.f:focus-within{border-color:var(--green-soft)}
.f.full{grid-column:1/-1}
.f label{display:block;font-size:11px;color:var(--muted);margin-bottom:2px;line-height:1.4}
.f .fw{display:flex;align-items:center;gap:6px}
.f input,.f select{width:100%;background:transparent;border:0;outline:none;color:var(--text);font-size:17px;font-weight:700;font-family:var(--en);padding:2px 0}
.f select{font-family:inherit;font-size:14px;-webkit-appearance:none;appearance:none}
.f select option{background:var(--card);color:var(--text)}
.f .suf{font-size:11px;color:var(--faint);font-weight:700;flex-shrink:0}
.f input::-webkit-outer-spin-button,.f input::-webkit-inner-spin-button{-webkit-appearance:none}
.f input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* results */
.verdict{border-radius:var(--r);padding:14px 16px;display:flex;gap:12px;align-items:center;margin-bottom:12px}
.verdict .vi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.verdict .vt{font-size:15.5px;font-weight:800;line-height:1.3}
.verdict .vs{font-size:12px;opacity:.85;margin-top:1px}
.v-ok{background:var(--okbg);color:var(--green-soft)} .v-ok .vi{background:var(--green);color:#fff}
.v-warn{background:var(--amberbg);color:var(--amber)} .v-warn .vi{background:var(--amber);color:#12100a}
.v-bad{background:var(--redbg);color:var(--red)} .v-bad .vi{background:var(--red);color:#fff}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.m{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px}
.m .ml{font-size:10.5px;color:var(--muted);line-height:1.4;margin-bottom:3px}
.m .mv{font-family:var(--en);font-size:19px;font-weight:700;color:var(--text);line-height:1.1;word-break:break-word}
.m.hl{background:linear-gradient(150deg,rgba(26,92,53,.5),rgba(15,35,24,.6));border-color:var(--line2)}
.m.hl .mv{color:var(--gold)}
.note{background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--gold-deep);border-radius:var(--r-sm);padding:12px 14px;font-size:13px;color:var(--text);line-height:1.75;margin-bottom:14px}
.note b{color:var(--gold)}

/* budget table */
.btable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px;font-size:13px}
.btable th{font-size:10.5px;color:var(--muted);text-align:start;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:700}
.btable td{padding:10px 12px;border-bottom:1px solid var(--line)}
.btable tr:last-child td{border-bottom:0}
.btable .amt{font-family:var(--en);font-weight:700}
.btable .pct{color:var(--green-soft);font-family:var(--en);font-weight:700;font-size:12px}
.btable .tr-total td{background:rgba(109,191,138,.07);font-weight:800;color:var(--gold)}

/* funnel mini bars */
.fmini{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fmini .fr{display:flex;align-items:center;gap:9px}
.fmini .fl{width:86px;flex-shrink:0;font-size:11px;color:var(--muted);line-height:1.3}
.fmini .ft{flex:1;height:26px;background:var(--card);border-radius:7px;overflow:hidden}
.fmini .ff{height:100%;border-radius:7px;display:flex;align-items:center;padding:0 8px;font-family:var(--en);font-size:11px;font-weight:700;color:#fff;min-width:34px;transition:width .5s}
.fmini .fp{width:44px;flex-shrink:0;text-align:end;font-family:var(--en);font-size:11px;font-weight:700}

/* actions */
.acts{display:flex;gap:10px;margin:4px 0 22px}
.abtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:14px;font-size:13.5px;font-weight:800;border:0;transition:transform .12s}
.abtn:active{transform:scale(.97)}
.abtn.share{background:#25D366;color:#07140b}
.abtn.copy{background:var(--card);border:1px solid var(--line2);color:var(--text)}
.abtn svg{width:17px;height:17px;flex-shrink:0}

/* footer */
.ftr{margin-top:auto;padding:14px 2px 22px;font-size:11.5px;color:var(--faint);text-align:center}
.ftr b{color:var(--muted)}
.ftr a:active b{color:var(--gold)}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--card2);border:1px solid var(--line2);color:var(--text);padding:11px 20px;border-radius:24px;font-size:13px;opacity:0;pointer-events:none;transition:all .25s;z-index:100;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* screen transition */
#screen{animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(min-width:480px){
  .tgrid{grid-template-columns:1fr 1fr 1fr}
}