/* HabeshaBoost Mini App · V21 (agreed design: 4 screens, Amharic + English) */
:root{
  --bg:#0B0F19;--s1:#141A26;--s2:#1B2232;--s3:#252D40;--line:#1B2232;--bd:#2A3245;
  --tx:#F2F4F8;--tx2:#C9CFDB;--mut:#8A93A6;--dim:#6B7487;
  --ac:#7C5CFF;--ac2:#A996FF;--ac-soft:rgba(124,92,255,.16);
  --ok:#34D399;--ok-soft:rgba(52,211,153,.14);--wa:#FBBF24;--wa-soft:rgba(251,191,36,.14);--bad:#FF8F8F;--bad-soft:rgba(248,113,113,.14);--bl:#5CC8FF;--bl-soft:rgba(56,189,248,.14);
  --tgblue:#2AABEE;--r:20px;--safe-b:env(safe-area-inset-bottom,0px);
  --font:'Plus Jakarta Sans','Noto Sans Ethiopic',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overscroll-behavior-y:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;text-align:inherit}
button:disabled{cursor:not-allowed;opacity:.6}
a{color:var(--ac2);text-decoration:none}
svg{flex-shrink:0}
img{display:block}
[hidden]{display:none!important}
#app{max-width:520px;margin:0 auto;min-height:100vh;position:relative}
.screen{display:flex;flex-direction:column;min-height:100vh;animation:in .18s ease-out}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pad{padding-left:18px;padding-right:18px}
.body{flex:1;display:flex;flex-direction:column;gap:18px;padding:0 18px 24px}
.body.nav-space{padding-bottom:104px}
.body.foot-space{padding-bottom:190px}
.center{justify-content:center;align-items:center;text-align:center}
.row{display:flex;align-items:center;gap:12px}.sp{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mu{color:var(--mut)}.s{font-size:12.5px}.h{font-size:17px;font-weight:700;margin:0;letter-spacing:-.2px}
.link{color:var(--ac2);font-size:12.5px;font-weight:600}
.card{background:var(--s1);border-radius:var(--r)}
.card2{background:var(--s2);border-radius:16px}
.ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:14px}
.v{background:var(--ac-soft);color:var(--ac2)}.y{background:var(--wa-soft);color:var(--wa)}.g{background:var(--ok-soft);color:var(--ok)}.r{background:var(--bad-soft);color:var(--bad)}.b{background:var(--bl-soft);color:var(--bl)}
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.btn{height:52px;width:100%;border-radius:16px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;white-space:nowrap}
.bp{background:var(--ac);color:#fff}.bs{background:var(--s2);color:var(--tx)}.bt{background:var(--tgblue);color:#fff}.bw{background:#fff;color:#3B1E8F}
.btn.sm{height:40px;width:auto;border-radius:12px;font-size:13px;padding:0 14px}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:80;max-width:min(92vw,480px);display:flex;align-items:center;gap:10px;background:#1E2638;color:var(--tx);border-radius:14px;padding:12px 16px;font-size:14px;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.toast svg{color:var(--ok)}.toast.bad svg{color:var(--bad)}

/* header */
.head{height:64px;display:flex;align-items:center;gap:10px;padding:0 18px;flex-shrink:0}
.head h1{font-size:16px;font-weight:700;margin:0;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head h1.left{text-align:left}
.ib{width:40px;height:40px;border-radius:12px;background:var(--s1);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.ib.glass{background:rgba(0,0,0,.28);color:#fff}
.ib .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--wa)}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7C5CFF,#C084FC);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.lang{display:inline-flex;height:32px;border-radius:999px;background:var(--s1);padding:3px;gap:2px;font-size:12px;font-weight:700}
.lang button{display:flex;align-items:center;padding:0 10px;border-radius:999px;color:var(--mut)}
.lang button.on{background:var(--ac);color:#fff}
.wchip{display:flex;align-items:center;gap:6px;height:36px;padding:0 4px 0 10px;border-radius:999px;background:var(--s1);font-size:13px;font-weight:700}
.wchip i{width:28px;height:28px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;color:#fff}

/* home */
.search{height:48px;border-radius:16px;background:var(--s1);display:flex;align-items:center;gap:10px;padding:0 16px;color:var(--dim);font-size:14px;width:100%}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font-size:15px}
.hero{position:relative;height:176px;border-radius:24px;overflow:hidden}
.hero .slide{position:absolute;inset:0;padding:20px 140px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;transition:opacity .35s}
.hero .slide.off{opacity:0;pointer-events:none}
.hero .slide b{font-size:23px;font-weight:800;line-height:1.2;margin-top:10px;color:#fff}
.hero .slide small{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:4px}
.hero .slide .btn{height:36px;width:auto;margin-top:auto;border-radius:12px;font-size:13px;padding:0 16px}
.hero .art-r{position:absolute;right:10px;top:22px}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px}
.dots i{width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.45);transition:width .2s}
.dots i.on{width:18px;background:#fff}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.trust div{background:var(--s2);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;font-size:11.5px;font-weight:600;color:var(--tx2);text-align:left;line-height:1.25}
.renew{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:var(--s1);box-shadow:inset 0 0 0 1px rgba(124,92,255,.35);width:100%}
.active-ord{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--s1);width:100%}
.ring{width:26px;height:26px;border-radius:50%;border:3px solid var(--ac-soft);border-top-color:var(--ac);animation:rot 1s linear infinite;flex-shrink:0}
.ring.still{animation:none;border-color:var(--wa-soft);border-top-color:var(--wa)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat{position:relative;border-radius:18px;overflow:hidden;height:76px}
.cat b{position:absolute;left:12px;bottom:10px;font-size:13.5px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.hs{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px 4px;scroll-snap-type:x mandatory;scroll-padding:0 18px}
.hs::-webkit-scrollbar{display:none}
.pcard{width:158px;flex-shrink:0;border-radius:20px;background:var(--s1);overflow:hidden;scroll-snap-align:start}
.pcard .t{padding:10px 12px 12px;display:flex;flex-direction:column}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcard{border-radius:18px;background:var(--s1);overflow:hidden;position:relative;display:flex;flex-direction:column}
.gcard .t{padding:9px 12px 12px;display:flex;flex-direction:column}
.gcard .new{position:absolute;left:8px;top:8px;background:#fff;color:#111}
.nm{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr{font-size:13.5px;font-weight:700;margin-top:6px}
.ask{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:var(--s1);width:100%}
.art{position:relative;overflow:hidden;flex-shrink:0}
.art img,.art svg{position:absolute;inset:0;width:100%;height:100%}
.art img{object-fit:cover}

/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);max-width:520px;margin:0 auto;padding:10px 8px calc(14px + var(--safe-b));background:rgba(11,15,25,.96);border-top:1px solid #161C29;backdrop-filter:blur(10px)}
.nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--dim)}
.nav button.on{color:var(--tx)}
.nav button i{width:4px;height:4px;border-radius:50%;background:transparent}
.nav button.on i{background:var(--ac)}
.nav .badge{position:absolute;top:-4px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:8px;background:var(--wa);color:#1A1200;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* buy */
.buy-hero{position:relative;height:190px;flex-shrink:0}
.buy-top{position:absolute;left:18px;right:18px;top:12px;display:flex;justify-content:space-between;align-items:center}
.buy-card{margin:-24px 18px 0;position:relative;padding:14px 16px;border-radius:22px;background:var(--s1)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plans.two{grid-template-columns:1fr 1fr}
.plan{position:relative;border-radius:16px;padding:12px 8px;text-align:center;background:var(--s1)}
.plan.on{background:var(--ac-soft);box-shadow:inset 0 0 0 2px var(--ac)}
.plan b{font-size:14px;display:block}
.plan span{font-size:12.5px;color:var(--mut);display:block;margin-top:3px}
.plan.on span{color:#D7CEFF}
.plan .tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%)}
.seg{background:var(--s2);border-radius:16px;padding:4px;display:grid;gap:4px}
.seg button{height:40px;border-radius:12px;font-size:13px;font-weight:700;color:var(--mut);display:flex;align-items:center;justify-content:center;gap:6px}
.seg button.on{background:var(--ac);color:#fff}
.fld{height:50px;border-radius:16px;background:var(--s2);display:flex;align-items:center;gap:10px;padding:0 14px}
.fld input,.fld textarea{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font-size:15px}
.fld textarea{resize:none;height:76px;padding:12px 0}
.fld.tall{height:auto}
.fld .pre{color:var(--mut);font-weight:700}
.fld.ok{box-shadow:inset 0 0 0 1.5px var(--ok)}.fld.bad{box-shadow:inset 0 0 0 1.5px var(--bad)}
.lbl{font-size:13px;font-weight:700;margin-bottom:-6px}
.promo{display:flex;align-items:center;gap:8px;font-size:13.5px}
.err{display:flex;gap:8px;align-items:flex-start;color:var(--bad);font-size:13px;margin:0}
.err:empty{display:none}
.note{background:var(--s2);border-radius:14px;padding:12px 14px;font-size:12.5px;color:var(--tx2);line-height:1.5}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:520px;margin:0 auto;padding:14px 18px calc(18px + var(--safe-b));background:#121826;border-radius:24px 24px 0 0;display:flex;flex-direction:column;gap:12px;box-shadow:0 -12px 32px rgba(0,0,0,.35)}
.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.method{height:46px;border-radius:14px;background:var(--s1);display:flex;flex-direction:column;justify-content:center;padding:0 10px;line-height:1.15;text-align:left}
.method.on{background:var(--ac-soft);box-shadow:inset 0 0 0 2px var(--ac)}
.method b{font-size:13px}.method span{font-size:11px;color:var(--mut)}
.method.low span{color:var(--wa)}
.paybtn{justify-content:space-between;padding:0 20px;height:56px;font-size:16px}
.paybtn s{opacity:.6;font-weight:500;font-size:13px;margin-right:8px}

/* pay / receipt / checking */
.kv{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .val{font-size:17px;font-weight:700}.kv .val.big{font-size:24px}
.copy{height:36px;border-radius:10px;background:var(--s2);display:flex;align-items:center;gap:6px;padding:0 12px;font-size:12.5px;font-weight:700;flex-shrink:0}
.copy.done{color:var(--ok)}
.howto{display:flex;flex-direction:column;gap:10px}
.howto div{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--tx2)}
.howto i{width:26px;height:26px;border-radius:9px;background:var(--ac-soft);color:var(--ac2);font-style:normal;font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.drop{position:relative;border:2px dashed var(--bd);border-radius:20px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.drop input,.relink input{position:absolute;inset:0;opacity:0;cursor:pointer}
.shot{display:flex;gap:12px;padding:12px;align-items:center}
.shot img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.relink{position:relative;color:var(--ac2);font-size:12.5px;font-weight:600}
.st{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.st.ok{color:var(--ok)}.st.wa{color:var(--wa)}.st.run{color:var(--ac2)}
.bar{height:5px;border-radius:3px;background:var(--s3);overflow:hidden}.bar i{display:block;height:100%;background:var(--ac);transition:width .3s}
.big-ring{width:84px;height:84px;border-radius:50%;border:7px solid var(--ac-soft);border-top-color:var(--ac);animation:rot 1s linear infinite}
.checks{padding:6px 16px;align-self:stretch;text-align:left}
.ck{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:14px;color:var(--mut)}
.ck .d{width:24px;height:24px;border-radius:50%;border:2px solid var(--bd);display:flex;align-items:center;justify-content:center}
.ck.done{color:var(--tx)}.ck.done .d{background:var(--ok);border-color:var(--ok);color:#062A1C}
.ck.now{color:var(--tx)}.ck.now .d{border-color:var(--ac);border-top-color:transparent;animation:rot 1s linear infinite}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:520px;margin:0 auto;padding:12px 18px calc(16px + var(--safe-b));background:linear-gradient(180deg,rgba(11,15,25,0),var(--bg) 26%);display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center}
.sum{padding:6px 16px;align-self:stretch}
.sum div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13.5px}
.sum div span{color:var(--mut)}
.result{width:140px;height:140px;position:relative}
.result .tick{position:absolute;right:-8px;bottom:-8px;width:50px;height:50px;border-radius:50%;background:var(--ok);color:#062A1C;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--bg)}
.result .tick.wa{background:var(--wa);color:#1A1200}
.r-title b{display:block;font-size:26px;font-weight:800}
.r-title span{display:block;color:var(--mut);font-size:14.5px;margin-top:6px;line-height:1.5}
.switch{width:46px;height:28px;border-radius:999px;background:var(--s3);position:relative;flex-shrink:0;transition:background .2s}
.switch i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.switch.on{background:var(--ac)}.switch.on i{left:21px}
.giftbox{border-radius:18px;padding:12px 14px;background:rgba(42,171,238,.08);box-shadow:inset 0 0 0 1px rgba(42,171,238,.3);text-align:left;align-self:stretch}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--tx2);word-break:break-all}

/* orders */
.olist{display:flex;flex-direction:column;gap:2px}
.orow{display:flex;align-items:center;gap:12px;padding:11px 0;width:100%}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.wa{background:var(--wa-soft);color:var(--wa)}.chip.bl{background:var(--bl-soft);color:var(--bl)}.chip.bad{background:var(--bad-soft);color:var(--bad)}.chip.mu{background:var(--s2);color:var(--mut)}.chip.vi{background:var(--ac-soft);color:var(--ac2)}
.prog{display:flex;gap:4px;width:100%}.prog i{flex:1;height:4px;border-radius:2px;background:var(--s3)}.prog i.on{background:var(--ac)}
.tl{padding:6px 16px}
.tl-i{display:flex;gap:12px}
.tl-i .rail{display:flex;flex-direction:column;align-items:center}
.tl-i .d{width:24px;height:24px;border-radius:50%;border:2px solid var(--bd);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tl-i .ln{width:2px;flex:1;background:var(--s3);min-height:14px}
.tl-i:last-child .ln{display:none}
.tl-i .t{padding:2px 0 14px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.tl-i.done .d{background:var(--ok);border-color:var(--ok);color:#062A1C}
.tl-i.now .d{border-color:var(--ac);border-top-color:transparent;animation:rot 1s linear infinite}
.tl-i.bad .d{background:var(--bad);border-color:var(--bad);color:#2A0A0D}
.tl-i.todo .t{color:var(--mut)}
.skel{height:76px;border-radius:18px;background:linear-gradient(90deg,var(--s1),var(--s2),var(--s1));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 0;text-align:center}

/* me */
.wallet{position:relative;border-radius:24px;padding:18px;overflow:hidden;background:linear-gradient(135deg,#065F46,#10B981 60%,#6EE7B7);color:#fff}
.wallet .amts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.wallet .amts button{height:44px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;line-height:1.1}
.wallet .amts button.on{background:#fff;color:#065F46}
.wallet .amts b{font-size:13.5px}.wallet .amts span{font-size:10px;font-weight:700}
.shortcuts{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 6px}
.shortcuts button{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:11.5px;font-weight:600;color:var(--tx2)}
.menu button{display:flex;align-items:center;gap:12px;padding:13px 14px;width:100%;border-top:1px solid var(--line)}
.menu button:first-child{border-top:0}
.faq{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
@media (max-width:360px){.hero .slide{padding-right:110px}.hero .slide b{font-size:20px}.trust div{font-size:10.5px}}
/* V21.1 Telebirr only */
.paywith{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--s1);font-size:14px}
.paywith .tb-dot{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#0B7FC1;color:#fff}
.wal-retry{position:relative;margin-top:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;font-size:12.5px;font-weight:600}