:root{
  --gold:#f0c040;--gold2:#e08000;--green:#22c55e;--red:#ef4444;
  --blue:#3b82f6;--purple:#a855f7;--radius:16px;
}
[data-theme="dark"]{
  --bg:#0f0f1a;--card:#1a1a2e;--card2:#16162a;--border:#2a2a40;
  --text:#fff;--text2:#e0e0f0;--muted:#9aa0b2;--shadow:rgba(0,0,0,.45);
  --header-bg:rgba(26,26,46,.96);--input-bg:#0f0f1a;
}
[data-theme="light"]{
  --bg:#f2f3fb;--card:#fff;--card2:#f7f8ff;--border:#d8daea;
  --text:#14162a;--text2:#2a2a4e;--muted:#667085;--shadow:rgba(0,0,0,.10);
  --header-bg:rgba(255,255,255,.96);--input-bg:#fbfbff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  overflow:hidden;transition:background .3s,color .3s;
}
.app-wrapper{
  width:100%;max-width:430px;height:100dvh;
  margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
}

/* ── Topbar ── */
.topbar{
  padding:10px 14px;display:flex;align-items:center;justify-content:space-between;
  background:var(--header-bg);border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-title{font-size:14px;font-weight:900;color:var(--text);line-height:1.1}
.topbar-sub{font-size:10px;color:var(--muted);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:8px}
.currency-pill{
  padding:4px 10px;border-radius:999px;
  border:1px solid rgba(240,192,64,.5);background:rgba(240,192,64,.1);
  font-size:11px;font-weight:900;color:var(--gold);
}
.icon-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:var(--card2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn svg{width:18px;height:18px;fill:var(--text)}
.theme-btn{position:relative;overflow:hidden}
.theme-btn .sun,.theme-btn .moon{
  position:absolute;transition:.25s transform,.25s opacity;
  width:17px;height:17px;
}
.theme-btn .sun{opacity:0;transform:rotate(-90deg) scale(.6);fill:var(--gold)}
.theme-btn .moon{opacity:1;transform:rotate(0) scale(1);fill:var(--gold)}
[data-theme="light"] .theme-btn .sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-btn .moon{opacity:0;transform:rotate(90deg) scale(.6)}

/* ── Toast ── */
.toast{
  position:fixed;z-index:9999;top:16px;left:50%;
  transform:translateX(-50%) translateY(-140%);
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-radius:14px;border:1px solid var(--border);background:var(--card);
  box-shadow:0 10px 32px var(--shadow);font-size:13px;
  min-width:240px;max-width:90%;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;flex-shrink:0}
.toast.success{border-color:rgba(34,197,94,.5)}.toast.success svg{fill:var(--green)}
.toast.error{border-color:rgba(239,68,68,.5)}.toast.error svg{fill:var(--red)}
.toast.info{border-color:rgba(59,130,246,.5)}.toast.info svg{fill:var(--blue)}

/* ── Page ── */
.page{
  flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;padding:10px 12px 100px;
}
.page::-webkit-scrollbar{display:none}

/* ── Search ── */
.search-wrap{
  position:relative;display:flex;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  margin-bottom:10px;padding:0 12px;
}
.search-icon{width:16px;height:16px;fill:var(--muted);flex-shrink:0}
.search-input{
  flex:1;border:none;background:transparent;color:var(--text);
  font-size:13px;padding:11px 8px;outline:none;
}
.search-input::placeholder{color:var(--muted);font-size:12px}
.search-clear{
  width:22px;height:22px;border-radius:50%;border:none;
  background:var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.search-clear svg{width:12px;height:12px;fill:var(--muted)}

/* ── Tab bar ── */
.tab-bar{
  display:flex;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:4px;gap:3px;margin-bottom:10px;flex-shrink:0;
}
.tab-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 4px;border:none;background:transparent;
  font-size:11px;font-weight:900;color:var(--muted);border-radius:9px;cursor:pointer;
  transition:all .22s;
}
.tab-btn svg{width:14px;height:14px;fill:currentColor}
.tab-btn.active{
  background:linear-gradient(135deg,var(--green),#16a34a);color:#fff;
  box-shadow:0 4px 14px rgba(34,197,94,.28);
}

/* ── Tab panels ── */
.tab-panel{display:none;animation:fadeUp .3s ease both}
.tab-panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── Hero card ── */
.hero-card{
  position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;padding:16px 14px 14px;
  margin-bottom:10px;
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(240,192,64,.07) 0%,rgba(34,197,94,.05) 100%);
}
.hero-logos{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}
.hero-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.hero-logo-box{
  width:50px;height:50px;border-radius:13px;overflow:hidden;
  border:1px solid var(--border);background:var(--card2);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.hero-logo-box img{width:100%;height:100%;object-fit:cover;display:block}
.hero-logo-lbl{font-size:8px;color:var(--muted);text-align:center;max-width:60px;line-height:1.2}
.hero-sep{display:flex;flex-direction:column;align-items:center;gap:4px}
.hero-ring{
  width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--gold);background:rgba(240,192,64,.08);
  display:flex;align-items:center;justify-content:center;
}
.hero-ring svg{width:14px;height:14px;fill:var(--green)}
.hero-sep-lbl{font-size:12px;font-weight:900;color:var(--muted)}
.hero-title{
  font-size:13px;font-weight:900;text-align:center;margin-bottom:6px;
  background:linear-gradient(135deg,var(--gold),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:10px;color:var(--muted);text-align:center;line-height:1.5}

/* ── Status banner ── */
.status-banner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 13px;border-radius:12px;border:1px solid;
  margin-bottom:10px;gap:10px;transition:all .3s;
}
.status-banner.open{
  background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.4);
}
.status-banner.closed{
  background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.35);
}
.status-banner-left{display:flex;align-items:center;gap:9px}
.status-dot-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.status-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
}
.status-dot.open{background:var(--green);animation:liveDot 1.4s ease-in-out infinite}
.status-dot.closed{background:var(--red)}
@keyframes liveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.status-main{font-size:12px;font-weight:900;color:var(--text2)}
.status-hours{font-size:10px;color:var(--muted);margin-top:1px}
.status-countdown{
  font-size:13px;font-weight:900;font-family:ui-monospace,monospace;
  flex-shrink:0;
}
.status-banner.open .status-countdown{color:var(--green)}
.status-banner.closed .status-countdown{color:var(--red)}

/* ── Section header ── */
.section-hdr{
  display:flex;align-items:center;gap:8px;margin:12px 0 8px;
}
.section-icon-box{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.section-icon-box svg{width:14px;height:14px;fill:#fff}
.section-hdr-lbl{font-size:12px;font-weight:900;color:var(--text);white-space:nowrap}
.section-hdr-line{flex:1;height:1px;background:var(--border)}

/* ── Email card ── */
.email-card{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:12px 13px;margin-bottom:10px;
  border-left:3px solid var(--green);gap:10px;
  transition:opacity .3s;
}
.email-card.disabled{opacity:.5;pointer-events:none}
.email-card-left{display:flex;align-items:center;gap:9px}
.email-status-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.email-status-dot.online{background:var(--green);animation:liveDot 1.4s ease-in-out infinite}
.email-status-dot.offline{background:var(--red)}
.email-status-lbl{font-size:12px;font-weight:700;color:var(--text2)}
.email-addr{font-size:10px;color:var(--muted);margin-top:1px}
.mail-btn{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--red),#b91c1c);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.mail-btn svg{width:18px;height:18px;fill:#fff}

/* ── Support grid ── */
.support-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;
}
.support-tile{
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:12px 10px;display:flex;flex-direction:column;align-items:center;
  text-align:center;cursor:pointer;position:relative;
  transition:transform .18s,box-shadow .18s,opacity .3s;
  overflow:hidden;
}
.support-tile:active{transform:scale(.97)}
.support-tile.disabled{opacity:.5;pointer-events:none}
.tile-img-wrap{
  width:44px;height:44px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:var(--card2);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:7px;flex-shrink:0;
}
.tile-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.tile-name{font-size:12px;font-weight:900;color:var(--text2);margin-bottom:2px}
.tile-sub{font-size:10px;color:var(--muted);margin-bottom:6px}
.tile-badge{
  font-size:8px;font-weight:900;letter-spacing:.3px;
  padding:3px 8px;border-radius:999px;
  background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3);
}
.tile-badge.closed-badge{
  background:rgba(239,68,68,.1);color:var(--red);border-color:rgba(239,68,68,.25);
}
.tile-badge.always{
  background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3);
}

/* ── Accordion ── */
.acc-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:13px;overflow:hidden;margin-bottom:8px;
}
.acc-hdr{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:12px 13px;border:none;background:transparent;
  cursor:pointer;text-align:left;
}
.acc-hdr:hover{background:rgba(255,255,255,.02)}
[data-theme="light"] .acc-hdr:hover{background:rgba(0,0,0,.02)}
.acc-icon-box{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.acc-title{flex:1;font-size:13px;font-weight:900;color:var(--text)}
.acc-chevron{
  width:18px;height:18px;fill:var(--muted);flex-shrink:0;
  transition:transform .28s ease;
}
.acc-hdr.open .acc-chevron{transform:rotate(180deg)}
.acc-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .25s;
  padding:0 13px;
}
.acc-body.open{max-height:2000px;padding:0 13px 14px}

/* ── Steps ── */
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:10px;position:relative}
.step-num{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--green),#16a34a);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;margin-top:2px;
}
.warn-num{
  background:linear-gradient(135deg,var(--red),#b91c1c) !important;
}
.step-line{
  position:absolute;left:11px;top:28px;
  width:2px;bottom:-14px;
  background:linear-gradient(to bottom,var(--green),rgba(34,197,94,.1));
  pointer-events:none;
}
.step-content{flex:1;padding-bottom:18px}
.step:last-child .step-content{padding-bottom:0}
.step:last-child .step-line{display:none}
.step-title{font-size:12px;font-weight:900;color:var(--text2);margin-bottom:4px}
.red-title{color:var(--red) !important}
.step-desc{font-size:11px;color:var(--muted);line-height:1.5}

/* Note boxes */
.note-box{
  margin-top:7px;padding:8px 10px;border-radius:10px;
  font-size:11px;line-height:1.5;
}
.gold-note{
  background:rgba(240,192,64,.08);border:1px solid rgba(240,192,64,.25);color:var(--text2);
}
.red-note{
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:var(--text2);
}
.blue-note{
  background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.25);color:var(--text2);
}

/* ── Video grid ── */
.video-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;
}
.video-card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;cursor:pointer;
  transition:transform .18s,box-shadow .18s;
}
.video-card:active{transform:scale(.97)}
.video-thumb{
  aspect-ratio:16/9;background:var(--card2);
  display:flex;align-items:center;justify-content:center;
}
.play-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--purple);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(168,85,247,.4);
}
.play-btn svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.video-name{font-size:10px;font-weight:900;color:var(--text2);padding:7px 8px 2px}
.video-dur{font-size:9px;color:var(--muted);padding:0 8px 8px}

/* ── FAQ ── */
.faq-cat-lbl{
  font-size:9px;font-weight:900;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  margin:12px 0 6px;
}
.faq-item{
  background:var(--card);border:1px solid var(--border);
  border-radius:11px;overflow:hidden;margin-bottom:6px;
}
.faq-hdr{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:11px 12px;border:none;background:transparent;
  cursor:pointer;text-align:left;
}
.faq-q-icon{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#000;
}
.faq-hdr span{flex:1;font-size:12px;font-weight:700;color:var(--text2)}
.faq-body{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .22s;
  padding:0 12px;
}
.faq-body.open{max-height:600px;padding:0 12px 12px}
.faq-body p{font-size:12px;color:var(--muted);line-height:1.6;margin:0}

/* ── Floating chat ── */
.float-chat{
  position:fixed;bottom:90px;right:16px;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(240,192,64,.45);z-index:1000;
  transition:transform .18s;
}
.float-chat:active{transform:scale(.92)}
.float-chat svg{width:22px;height:22px;fill:#000}

/* ── Footer ── */
.footer{text-align:center;font-size:10px;color:var(--muted);padding:10px 0 4px}