/* ZipLine UI kit – custom popups & toasts (replaces browser alert/confirm) */
.ui-ov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:radial-gradient(600px 400px at 50% 30%,rgba(0,230,120,.14),transparent 70%),rgba(6,10,22,.6);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);animation:uiFade .22s ease both;overscroll-behavior:contain}
.ui-ov.out{animation:uiFadeOut .18s ease both}
.ui-dlg{--tone1:#4c9bff;--tone2:#0a66c2;position:relative;width:100%;max-width:420px;max-height:90dvh;overflow:auto;text-align:center;color:var(--ink,#0f1b33);padding:34px 26px 22px;border-radius:30px;background:linear-gradient(180deg,color-mix(in srgb,var(--card,#fff) 94%,transparent),color-mix(in srgb,var(--card,#fff) 84%,transparent));border:1px solid color-mix(in srgb,var(--line,#cfd9ea) 70%,transparent);box-shadow:0 40px 90px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset;animation:uiPop .42s cubic-bezier(.2,1.35,.4,1) both;font-family:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif}
.ui-dlg::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--tone1),var(--tone2))}
.ui-ov.out .ui-dlg{animation:uiPopOut .18s ease both}
.ui-dlg.wide{max-width:640px}.ui-dlg.xl{max-width:900px;text-align:left}
.ui-dlg.success{--tone1:#00e639;--tone2:#00bd8c}.ui-dlg.error{--tone1:#ff5d8f;--tone2:#e11d48}.ui-dlg.warn{--tone1:#ffd23f;--tone2:#ff9f1c}.ui-dlg.info{--tone1:#4c9bff;--tone2:#0a66c2}
.ui-ico{width:68px;height:68px;margin:0 auto 12px;border-radius:22px;display:grid;place-items:center;font-size:32px;color:#fff;background:linear-gradient(135deg,var(--tone1),var(--tone2));box-shadow:0 14px 30px -10px var(--tone2);animation:uiBob 3s ease-in-out infinite}
.ui-dlg h2{margin:4px 0 6px;font-size:26px;font-weight:800;letter-spacing:-.01em}
.ui-msg{margin:0 0 16px;color:var(--mute,#5d6b85);font-size:15.5px;line-height:1.5}
.ui-body{margin:6px 0 14px;text-align:left}
.ui-act{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.ui-act button{flex:1;min-width:110px;min-height:48px;border-radius:16px;border:1px solid var(--line,#cfd9ea);background:transparent;font-weight:700;font-size:15.5px;color:inherit;cursor:pointer;transition:transform .12s,filter .15s,box-shadow .2s}
.ui-act button:hover{transform:translateY(-1px);filter:brightness(1.06)}.ui-act button:active{transform:scale(.97)}
.ui-act button.primary,.ui-act button.danger{border:0;color:#fff;background:linear-gradient(135deg,var(--tone1),var(--tone2));box-shadow:0 10px 24px -10px var(--tone2)}
.ui-act button.danger{background:linear-gradient(135deg,#ff5d8f,#e11d48);box-shadow:0 10px 24px -10px #e11d48}
.ui-x{position:absolute;right:12px;top:14px;width:34px;height:34px;border-radius:12px;border:0;background:color-mix(in srgb,var(--ink,#0f1b33) 8%,transparent);color:inherit;font-size:16px;cursor:pointer}
.ui-x:hover{background:color-mix(in srgb,var(--ink,#0f1b33) 16%,transparent)}
/* toasts */
.ui-toasts{position:fixed;left:0;right:0;top:calc(14px + env(safe-area-inset-top,0px));z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.ui-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:min(92vw,440px);padding:11px 16px 11px 12px;border-radius:18px;font:600 14.5px/1.35 Outfit,system-ui,sans-serif;color:var(--ink,#0f1b33);background:color-mix(in srgb,var(--card,#fff) 90%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line,#cfd9ea);box-shadow:0 18px 40px -14px rgba(0,0,0,.45);animation:uiToast .38s cubic-bezier(.2,1.4,.4,1) both}
.ui-toast.out{animation:uiToastOut .25s ease both}
.ui-toast i{font-style:normal;width:28px;height:28px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(135deg,#4c9bff,#0a66c2)}
.ui-toast.success i{background:linear-gradient(135deg,#00e639,#00bd8c)}.ui-toast.error i{background:linear-gradient(135deg,#ff5d8f,#e11d48)}.ui-toast.warn i{background:linear-gradient(135deg,#ffd23f,#ff9f1c)}
/* form bits shared by popups */
.ui-f{display:grid;gap:10px}.ui-f label{font-size:13px;font-weight:600;color:var(--mute,#5d6b85);display:grid;gap:5px}
.ui-f input,.ui-f select{font:inherit;font-size:16px;color:var(--ink,#0f1b33);padding:12px 14px;border-radius:14px;border:1px solid var(--line,#cfd9ea);background:color-mix(in srgb,var(--cell,#f5f2ee) 60%,transparent);outline:none;-webkit-user-select:text;user-select:text;width:100%}
.ui-f input:focus,.ui-f select:focus{border-color:var(--accent,#0a66c2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#0a66c2) 25%,transparent)}
.ui-f input.code{text-align:center;letter-spacing:.5em;font-size:26px;font-weight:800}
.ui-err{color:#e11d48;font-size:13.5px;font-weight:600;min-height:18px;text-align:center}
.ui-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:14px;border:1px solid var(--line,#cfd9ea);margin-bottom:14px}
.ui-tabs button{border:0;background:none;padding:9px 4px;border-radius:10px;font-weight:700;color:var(--mute,#5d6b85);cursor:pointer;font-family:inherit;font-size:14.5px}
.ui-tabs button[aria-pressed=true]{background:var(--ink,#0f1b33);color:var(--bg,#eaf0fa)}
.ui-tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ui-tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute,#5d6b85);padding:8px 8px;border-bottom:1px solid var(--line,#cfd9ea);position:sticky;top:0;background:color-mix(in srgb,var(--card,#fff) 96%,transparent)}
.ui-tbl td{padding:9px 8px;border-bottom:1px solid color-mix(in srgb,var(--line,#cfd9ea) 60%,transparent)}
.ui-scroll{max-height:46dvh;overflow:auto;border-radius:14px}
.ui-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 14px}
.ui-kpis div{padding:10px 6px;border-radius:16px;border:1px solid var(--line,#cfd9ea);background:color-mix(in srgb,var(--cell,#f5f2ee) 50%,transparent);text-align:center}
.ui-kpis b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.ui-kpis span{font-size:12px;color:var(--mute,#5d6b85)}
.ui-pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--accent,#0a66c2) 16%,transparent);color:var(--accent,#0a66c2)}
.ui-pill.ok{background:rgba(0,200,100,.16);color:#00a36a}.ui-pill.bad{background:rgba(225,29,72,.14);color:#e11d48}
@keyframes uiFade{from{opacity:0}}@keyframes uiFadeOut{to{opacity:0}}
@keyframes uiPop{from{transform:translateY(24px) scale(.88);opacity:0}}@keyframes uiPopOut{to{transform:translateY(10px) scale(.95);opacity:0}}
@keyframes uiBob{50%{transform:translateY(-4px)}}
@keyframes uiToast{from{transform:translateY(-22px) scale(.9);opacity:0}}@keyframes uiToastOut{to{transform:translateY(-12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ui-ov,.ui-dlg,.ui-ico,.ui-toast{animation:none!important}}

/* ---- SVG icons ---- */
.zi{width:1.25em;height:1.25em;display:block;flex:none;overflow:visible}
.zi .f{fill:currentColor;fill-opacity:.17;stroke:none}
.zi-coin{color:#f5b301}.zi-medal.m1{color:#f5b301}.zi-medal.m2{color:#94a3b8}.zi-medal.m3{color:#cd7f32}
.ui-ico .zi{width:34px;height:34px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}.ui-ico .zi .f{fill-opacity:.3}
.ui-ico .zi-coin{color:#fff}
.ui-x .zi{width:16px;height:16px;margin:auto}
.ui-toast i .zi{width:16px;height:16px;color:#fff}.ui-toast i .zi .f{fill-opacity:.3}
.lbl{display:inline-flex;align-items:center;justify-content:center;gap:4px}.lbl .zi{width:13px;height:13px}
.ui-tbl .zi{display:inline-block;vertical-align:middle}
/* ---- password show / hide ---- */
.ui-pw{position:relative;display:block}
.ui-pw input{padding-right:48px}
.ui-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--mute,#5d6b85);cursor:pointer;transition:background .15s,color .15s,transform .12s}
.ui-eye:hover{background:color-mix(in srgb,var(--accent,#0a66c2) 14%,transparent);color:var(--accent,#0a66c2)}
.ui-eye:active{transform:translateY(-50%) scale(.92)}
.ui-eye[aria-pressed=true]{color:var(--accent,#0a66c2)}
.ui-eye .zi{width:20px;height:20px}

/* ---- phones: popups become bottom sheets ---- */
@media (max-width:600px){
  .ui-ov{place-items:end center;padding:0}
  .ui-dlg,.ui-dlg.wide,.ui-dlg.xl{max-width:none;width:100%;max-height:92dvh;border-radius:28px 28px 0 0;padding:30px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:uiSheet .4s cubic-bezier(.2,.9,.25,1) both}
  .ui-ov.out .ui-dlg{animation:uiSheetOut .2s ease both}
  .ui-dlg::after{content:"";position:absolute;top:10px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:color-mix(in srgb,var(--ink,#0f1b33) 22%,transparent)}
  .ui-ico{width:60px;height:60px;border-radius:20px}.ui-ico .zi{width:30px;height:30px}
  .ui-dlg h2{font-size:23px}
  .ui-act{flex-direction:column-reverse}.ui-act button{min-height:52px;width:100%}
  .ui-tbl td,.ui-tbl th{white-space:nowrap}
  .ui-kpis b{font-size:19px}
}
@keyframes uiSheet{from{transform:translateY(100%)}}@keyframes uiSheetOut{to{transform:translateY(100%)}}
.ui-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.ui-steps li{counter-increment:s;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line,#cfd9ea);background:color-mix(in srgb,var(--cell,#f5f2ee) 55%,transparent);font-weight:600;font-size:15px}
.ui-steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent,#0a66c2);color:#fff;font-weight:800;font-size:14px}
.ui-steps .zi{width:22px;height:22px;color:var(--accent,#0a66c2);flex:none;margin-left:auto}

.ui-pill.warn{background:rgba(255,159,28,.18);color:#e08600}
.ui-code{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 16px;margin:0 0 12px;border-radius:16px;border:1.5px dashed var(--accent,#0a66c2);background:color-mix(in srgb,var(--accent,#0a66c2) 9%,transparent)}
.ui-code b{font-size:24px;font-weight:800;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.ui-code button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;border:0;background:var(--accent,#0a66c2);color:#fff;font-weight:700;cursor:pointer;font:inherit;font-weight:700}
.ui-code button .zi{width:16px;height:16px}
.ui-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:6px;padding:8px;border:0;background:none;color:var(--accent,#0a66c2);font:inherit;font-weight:700;cursor:pointer}
.ui-link .zi{width:15px;height:15px}