/* e-OCI Wallet — OCI Guide + eligibility checker (full-screen overlay) */
#guideScreen{
  position:fixed; inset:0; z-index:9250; display:none; flex-direction:column;
  background:
    radial-gradient(1200px 700px at 50% -12%, #0d2043 0%, transparent 60%),
    var(--app-bg,#060F22);
  font-family:"Space Grotesk",system-ui,sans-serif; color:var(--txt,#EAF0FA);
}
body.guide-open #guideScreen{ display:flex; }
body.guide-open .app{ filter:blur(3px); pointer-events:none; }

#guideScreen .g-top{ display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top) + 18px) 18px 12px;
  position:sticky; top:0; background:linear-gradient(180deg, rgba(8,17,38,.96) 62%, rgba(8,17,38,0)); backdrop-filter:blur(8px); z-index:2; }
#guideScreen .g-back{ display:flex; align-items:center; gap:7px; font-size:15px; font-weight:500; padding:9px 13px 9px 10px;
  border-radius:12px; background:var(--surface,rgba(255,255,255,.06)); border:1px solid var(--line,rgba(255,255,255,.1)); }
#guideScreen .g-title{ font-size:18px; font-weight:600; }
#guideScreen .g-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 18px calc(env(safe-area-inset-bottom) + 40px); }

.g-hero{ text-align:center; padding:8px 6px 18px; }
.g-hero .g-mark{ width:56px; height:56px; border-radius:15px; margin:0 auto 12px; display:block; }
.g-hero h2{ font-size:22px; font-weight:600; margin:0 0 6px; letter-spacing:-.3px; }
.g-hero p{ color:var(--muted,#7C8BA5); font-size:14px; line-height:1.5; margin:0; }

.g-card{ background:var(--panel,#0C1A34); border:1px solid var(--line,rgba(255,255,255,.1)); border-radius:18px; padding:18px 17px; margin-bottom:14px; }
.g-card h3{ margin:0 0 10px; font-size:16px; font-weight:600; display:flex; align-items:center; gap:9px; }
.g-card h3 .g-ic{ color:var(--saffron,#FF9933); flex:0 0 auto; }
.g-card p{ margin:0 0 10px; font-size:13.8px; line-height:1.55; color:var(--head,#B9C7E0); }
.g-list{ list-style:none; margin:0; padding:0; }
.g-list li{ position:relative; padding:7px 0 7px 24px; font-size:13.8px; line-height:1.5; color:var(--head,#B9C7E0); border-bottom:1px solid var(--line,rgba(255,255,255,.06)); }
.g-list li:last-child{ border-bottom:none; }
.g-list li::before{ content:""; position:absolute; left:4px; top:13px; width:7px; height:7px; border-radius:50%; background:var(--saffron,#FF9933); }
.g-list.no li::before{ background:var(--danger,#E5484D); }
.g-list.num{ counter-reset:s; }
.g-list.num li::before{ content:counter(s); counter-increment:s; width:20px; height:20px; border-radius:50%; background:var(--navy-2,#0E3A73);
  color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; left:0; top:8px; }
.g-list.num li{ padding-left:30px; }

.g-links{ display:flex; flex-direction:column; gap:9px; }
.g-link{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:13px; text-decoration:none;
  background:var(--surface,rgba(255,255,255,.05)); border:1px solid var(--line,rgba(255,255,255,.1)); color:var(--txt,#EAF0FA); }
.g-link:active{ background:var(--surface-h,rgba(255,255,255,.1)); }
.g-link .g-lmeta{ flex:1; min-width:0; }
.g-link b{ display:block; font-size:14px; font-weight:600; }
.g-link span{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted,#7C8BA5); }
.g-link .g-ext{ color:var(--saffron-soft,#FFB865); flex:0 0 auto; }

.g-note{ font-size:11.5px; line-height:1.55; color:var(--muted,#7C8BA5); text-align:center; padding:6px 10px 0; }
.g-cta{ display:block; width:100%; text-align:center; padding:15px; border-radius:15px; font-size:15.5px; font-weight:600; color:#241200;
  background:linear-gradient(135deg,var(--saffron-soft,#FFB865),var(--saffron,#FF9933)); border:none; margin:2px 0 14px; text-decoration:none; }
.g-cta:active{ transform:scale(.99); }

/* eligibility checker */
.g-quiz .g-q{ font-size:16px; font-weight:600; line-height:1.45; margin:0 0 4px; }
.g-quiz .g-qsub{ font-size:13px; color:var(--muted,#7C8BA5); margin:0 0 18px; line-height:1.5; }
.g-opts{ display:flex; flex-direction:column; gap:10px; }
.g-opt{ padding:15px 16px; border-radius:14px; font-size:15px; font-weight:500; text-align:left;
  background:var(--surface,rgba(255,255,255,.05)); border:1px solid var(--line,rgba(255,255,255,.12)); color:var(--txt); }
.g-opt:active{ background:var(--surface-h,rgba(255,255,255,.1)); }
.g-prog{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:14px; }
.g-result{ text-align:center; padding:10px 4px; }
.g-result .g-badge{ width:76px; height:76px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; }
.g-result .g-badge.yes{ background:rgba(19,136,8,.16); border:2px solid rgba(120,220,110,.5); }
.g-result .g-badge.no{ background:rgba(229,72,77,.14); border:2px solid rgba(229,72,77,.5); }
.g-result .g-badge.maybe{ background:rgba(255,153,51,.14); border:2px solid rgba(255,153,51,.5); }
.g-result h3{ font-size:20px; font-weight:600; margin:0 0 8px; }
.g-result p{ font-size:14px; color:var(--head,#B9C7E0); line-height:1.55; margin:0 0 18px; }