@font-face{font-family:IBMPlexSansArabicSAR-Medium;src:url(/assets/fonts/IBMPlexSansArabicSAR-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:IBMPlexSansArabicSAR-Bold;src:url(/assets/fonts/IBMPlexSansArabicSAR-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}:root,[data-theme=light]{--page-bg: #f6f7f8;--card-bg: #ffffff;--text-base: #000000;--text-details: rgba(60, 60, 67, .72);--stroke: rgba(0, 0, 0, .12);--accent: #4f0af5;--dot-inactive: rgba(0, 0, 0, .2)}[data-theme=dark]{--page-bg: #121212;--card-bg: #1b2229;--text-base: #ffffff;--text-details: rgba(235, 235, 245, .6);--stroke: rgba(235, 235, 245, .18);--accent: #8a5df6;--dot-inactive: rgba(255, 255, 255, .25)}:root{--hero-text: #ffffff;--hero-text-details: rgba(255, 255, 255, .72);--hero-fill: rgba(255, 255, 255, .14);--hero-stroke: rgba(255, 255, 255, .22);--hero-positive: #7ee0a3}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:var(--page-bg)}body{font-family:IBMPlexSansArabicSAR-Medium,system-ui,sans-serif;background:var(--page-bg);color:var(--text-base);-webkit-font-smoothing:antialiased}body.is-browser-preview{background:#d8dbe0}.browser-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px;gap:16px}.phone-frame{width:100%;max-width:390px;min-height:780px;border-radius:24px;overflow:hidden;background:var(--page-bg);box-shadow:0 0 0 1px #00000014,0 18px 40px #0000002e}.page{width:100%;min-height:100%;margin:0;padding:16px 16px 48px;background:var(--page-bg)}html.is-webview,html.is-webview body,html.is-webview #root{min-height:0;height:auto;background:var(--page-bg)}html.is-webview .page{min-height:0;height:auto}.config-panel{width:100%;max-width:390px;background:#111827;color:#f9fafb;border-radius:16px;padding:14px;font-family:ui-sans-serif,system-ui,sans-serif;box-shadow:0 10px 30px #0000002e}.config-panel__header{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}.config-panel__header strong{font-size:14px}.config-panel__header span{font-size:12px;color:#9ca3af}.config-panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.config-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#d1d5db}.config-field select{appearance:none;border:1px solid #374151;background:#1f2937;color:#f9fafb;border-radius:8px;padding:8px 10px;font-size:12px}.config-field select:focus{outline:2px solid #8a5df6;outline-offset:1px}.stack{display:flex;flex-direction:column;gap:16px;margin-top:16px}.hero{height:230px;border-radius:12px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}.hero__image{width:180px;height:auto;margin-top:16px;object-fit:contain;object-position:top}.hero--detailed{position:relative;display:block;height:auto;min-height:230px;padding:16px;color:var(--hero-text)}.hero__art{position:absolute;z-index:2;inset-block-start:100px;inset-inline-end:16px;width:130px;height:auto;pointer-events:none}.hero__content{position:relative;z-index:1}.hero__title{margin:0;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:13px;font-weight:700;line-height:1.2}.hero__description{margin:8px 0 0;font-size:11px;line-height:1.2;color:var(--hero-text-details)}.hero__stats{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.hero__stats-row{display:flex;gap:6px}.hero-stat{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%;border:1.4px solid var(--hero-stroke);border-radius:12px;padding:16px 12px;background:var(--hero-fill);text-align:center}.hero-stat__label{font-size:13px;line-height:1.5;color:var(--hero-text)}.hero-stat__value{direction:ltr;unicode-bidi:isolate;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:16px;font-weight:700;line-height:1.1}.hero-stat__value--positive{color:var(--hero-positive)}.hero__period{margin:8px 0 0;font-size:11px;line-height:1.1;color:var(--hero-text-details)}.tabs{display:flex;gap:8px}.tab{display:inline-flex;flex-direction:column;align-items:center;border:none;border-radius:8px;padding:8px 12px;background:var(--card-bg);color:var(--text-base);font-family:IBMPlexSansArabicSAR-Medium,system-ui,sans-serif;font-size:13px;line-height:1.2;cursor:pointer}.tab:after{content:attr(data-label);display:block;height:0;overflow:hidden;visibility:hidden;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-weight:700}.tab--active{background:var(--accent);color:#fff;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-weight:700}.card{background:var(--card-bg);border-radius:12px;padding:16px}.card__title{margin:0 0 16px;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:13px;font-weight:700;line-height:1.2}.card__description{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--text-details);text-align:center}.allocation{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.allocation__row{display:flex;align-items:center;gap:8px}.allocation__avatar{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1.4px solid var(--stroke);border-radius:12px;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:13px;font-weight:700;direction:ltr;unicode-bidi:isolate}.allocation__info{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px}.allocation__bar{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--fill) + 10%);border-radius:8px;background:#aebbcb3d;animation:allocation-fill .6s ease-out both}@keyframes allocation-fill{0%{width:0}}.allocation__name{position:relative;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:13px;font-weight:700;line-height:1.5}.allocation__subtitle{position:relative;font-size:11px;line-height:1.5;color:var(--text-details)}.allocation__percent{flex-shrink:0;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:16px;font-weight:700;direction:ltr;unicode-bidi:isolate}.benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}.benefits__item{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4}.check-icon{flex-shrink:0;color:var(--accent);display:inline-flex}.chip-grid{display:flex;flex-wrap:wrap;gap:4px}.chip{display:inline-flex;align-items:center;gap:8px;border:1.4px solid var(--stroke);border-radius:8px;padding:8px 10px;background:transparent}.chip--logo{padding:10px 12px;min-height:44px}.chip__icon{width:20px;height:20px;object-fit:contain;border-radius:4px}.chip__label{font-size:12px;line-height:1.3}.chip__logo{height:22px;width:auto;max-width:96px;object-fit:contain}.chart-image,.map-image{width:100%;height:auto;display:block;border-radius:8px}.map-image{aspect-ratio:2 / 1;object-fit:contain}.empty{margin:48px 16px;text-align:center;color:var(--text-details);font-size:14px}.waqf-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}.waqf-benefits__item{display:flex;flex-direction:column;gap:4px}.waqf-benefits__item strong{font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:14px}.waqf-benefits__item span{font-size:12px;line-height:1.45;color:var(--text-details)}.warning-box{border-radius:12px;padding:14px 16px;background:var(--card-bg);border:1.4px solid var(--stroke);color:var(--text-details);font-size:13px;line-height:1.45}.cashback-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px;color:var(--text-details)}.cashback-levels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.cashback-levels__item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.4px solid var(--stroke);border-radius:12px;padding:12px}.cashback-levels__name{font-size:12px;color:var(--text-details);margin-bottom:2px}.cashback-levels__range{font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:13px}.cashback-levels__rate{flex-shrink:0;font-family:IBMPlexSansArabicSAR-Bold,system-ui,sans-serif;font-size:13px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:999px;padding:6px 10px}
