:root{--bg1:#5b2aa3;--bg2:#240a4f;--card:rgba(0,0,0,.40);--stroke:rgba(255,255,255,.14);--text:rgba(255,255,255,.92);--muted:rgba(255,255,255,.68);--pink:#ff4fd8;--cyan:#4bd4ff;--r:18px;--shadow:0 18px 60px rgba(0,0,0,.35);--ease-expo:cubic-bezier(0.16,1,0.3,1);--ease-sheet:cubic-bezier(0.32,0.72,0,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--dur-micro:120ms;--dur-base:280ms;--dur-sheet:360ms;}
    *{box-sizing:border-box}html,body{height:100%}
    body{margin:0;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;padding:max(18px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom));background:radial-gradient(900px 600px at 18% -10%,rgba(255,79,216,.55),transparent 55%),radial-gradient(850px 620px at 110% 10%,rgba(75,212,255,.42),transparent 55%),radial-gradient(800px 600px at 50% 120%,rgba(255,255,255,.07),transparent 60%),linear-gradient(180deg,var(--bg1),var(--bg2));position:relative;overflow-x:hidden;}
    body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Crect width='220' height='220' fill='none'/%3E%3Cg fill='white' fill-opacity='0.20' font-family='Arial' font-size='34'%3E%3Ctext x='18' y='54'%3E%C2%A5%3C/text%3E%3Ctext x='138' y='115'%3E%C2%A5%3C/text%3E%3Ctext x='70' y='190'%3E%C2%A5%3C/text%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;background-size:220px 220px;filter:blur(.15px);}
    .wrap{max-width:560px;margin:0 auto;position:relative;}
    .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px;}
    .brand{display:flex;align-items:center;gap:10px;}
    .brand img{width:34px;height:34px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);box-shadow:0 10px 30px rgba(0,0,0,.25);}
    h1{margin:0;font-size:18px;letter-spacing:.35px;font-weight:900}.sub{margin-top:3px;font-size:12.5px;color:var(--muted)}
    .payIcons{display:flex;align-items:center;gap:6px;flex-shrink:0;}
    .payIcons img{height:20px;object-fit:contain;opacity:.85;border-radius:4px;}
    .card{border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.07),var(--card));border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;}
    @supports(backdrop-filter:blur(10px)){.card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}}
    .pad{padding:16px}.muted{color:var(--muted);font-size:13px;line-height:1.35}
    .pillRow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
    .pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);padding:6px 10px;border-radius:999px;}
    .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,var(--pink),var(--cyan));box-shadow:0 0 12px rgba(255,79,216,.22),0 0 12px rgba(75,212,255,.18);}
    .infoBox{margin-top:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);border-radius:14px;color:rgba(255,255,255,.84);}
    .importantTitle{font-weight:900;letter-spacing:.25px;margin-bottom:6px;}
    .tabs{display:flex;gap:10px;margin-bottom:12px;}
    .tabBtn{flex:1;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:rgba(255,255,255,.92);font-weight:900;cursor:pointer;text-align:center;}
    .tabBtnActive{background:linear-gradient(90deg,rgba(255,79,216,.20),rgba(75,212,255,.18));border-color:rgba(255,255,255,.18);}
    .badge{font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:rgba(255,255,255,.78);white-space:nowrap;}
    .badgeVip{background:linear-gradient(90deg,rgba(255,79,216,.95),rgba(167,92,255,.90));border:1px solid rgba(255,79,216,.35);box-shadow:0 0 18px rgba(255,79,216,.18);color:rgba(0,0,0,.86);font-weight:900;letter-spacing:.2px;}
    .badgeGeneral{background:linear-gradient(90deg,rgba(75,212,255,.95),rgba(73,255,202,.85));border:1px solid rgba(75,212,255,.35);box-shadow:0 0 18px rgba(75,212,255,.16);color:rgba(0,0,0,.86);font-weight:900;letter-spacing:.2px;}
    .badgeLock{border-color:rgba(75,212,255,.28);background:rgba(75,212,255,.12);color:rgba(255,255,255,.90);font-weight:900;letter-spacing:.2px;}
    .line{height:2px;border-radius:99px;margin-top:10px;background:linear-gradient(90deg,rgba(255,79,216,.9),rgba(75,212,255,.9));opacity:.8;}
    .btn{padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);font-weight:900;cursor:pointer;transition:transform var(--dur-micro) var(--ease-spring),box-shadow var(--dur-base) var(--ease-expo);white-space:nowrap;}
    .btn:active{transform:scale(.99)}.btnPrimary{background:linear-gradient(90deg,rgba(255,79,216,.95),rgba(75,212,255,.85));color:rgba(0,0,0,.85);border-color:rgba(255,255,255,.18);}
    .btnDanger{background:rgba(255,88,114,.14);border-color:rgba(255,88,114,.24);}
    .field{display:flex;gap:8px;align-items:center;margin-top:10px}
    .input{flex:1;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.20);color:rgba(255,255,255,.92);outline:none;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;}
    .status{margin-top:10px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);}
    .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:rgba(255,255,255,.85);animation:sp 1s linear infinite;display:none;}
    @keyframes sp{to{transform:rotate(360deg)}}
    .toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.92);padding:10px 12px;border-radius:999px;font-size:13px;box-shadow:0 14px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:50;}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
    .altPay{margin-top:12px;display:block;text-decoration:none;color:inherit;}
    .altPayCard{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
    .altPayImg{width:100%;height:160px;object-fit:cover;display:block;background:#fff;}
    .altPayBody{padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
    .altPayTitle{font-weight:900;letter-spacing:.2px;font-size:13.5px;}.altPayLink{font-size:12.5px;color:rgba(255,255,255,.72);word-break:break-all;}
    .altPayCta{font-size:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);padding:6px 10px;border-radius:999px;font-weight:900;white-space:nowrap;}
    .refBox{margin-top:12px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);text-align:center;}
    .refTitle{font-size:12.5px;color:rgba(255,255,255,.74);margin-bottom:8px;}
    .refCode{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-weight:900;letter-spacing:3px;font-size:20px;color:rgba(255,255,255,.94);}
    .refHint{margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.76);line-height:1.35;}
    .refActions{margin-top:10px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
    .listItem{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);border-radius:16px;padding:12px;margin-top:10px;}
    .listTop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;}
    .guard{min-height:calc(100vh - 40px);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;}
    .guardCard{max-width:520px;width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);border-radius:18px;box-shadow:var(--shadow);padding:18px;}
    .poolWarn{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,88,114,.28);background:rgba(255,88,114,.12);font-size:12.5px;color:rgba(255,220,220,.90);font-weight:900;letter-spacing:.2px;}
    .wheelWrap{margin-top:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);border-radius:16px;padding:12px;}
    .wheelTitle{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}.wheelTitle b{letter-spacing:.2px}
    .wheelCanvasWrap{margin-top:10px;display:flex;justify-content:center;}canvas{max-width:280px;width:100%;height:auto;}
    .wheelHint{margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.35;text-align:center;}
    .wheelNoteRow{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;}
    .wheelNote{font-size:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.16);padding:8px 10px;border-radius:14px;color:rgba(255,255,255,.78);flex:1;min-width:220px;}
    .easterBox{margin-top:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(90deg,rgba(75,212,255,.10),rgba(167,92,255,.08));color:rgba(255,255,255,.80);font-size:12.5px;line-height:1.35;text-align:center;letter-spacing:.15px;}
    .ticketPageWrap{margin-top:0;}
    .ticketImgWrap{margin-top:12px;display:flex;justify-content:center;}
    .ticketImg{width:100%;max-width:360px;border-radius:16px;background:#fff;padding:10px;box-shadow:0 14px 40px rgba(0,0,0,.35);}
    .ticketImg img{width:100%;height:auto;display:block;border-radius:12px;}
    .mapsCard{margin-top:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);border-radius:16px;overflow:hidden;display:block;text-decoration:none;color:inherit;}
    .mapsTop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;}
    .mapsLeft{display:flex;align-items:center;gap:10px;min-width:0;}
    .mapsIcon{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-weight:900;}
    .mapsTitle{font-weight:900;letter-spacing:.2px;font-size:13.5px;}.mapsAddr{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:3px;line-height:1.25;}
    .mapsCta{font-size:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);padding:6px 10px;border-radius:999px;font-weight:900;white-space:nowrap;}
    .entryNote{margin-top:12px;text-align:center;font-weight:900;letter-spacing:.25px;font-size:12.5px;color:rgba(255,255,255,.88);padding:10px 12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);border-radius:14px;}
    .welcomeTitle{font-weight:900;letter-spacing:.25px;margin-top:14px;margin-bottom:8px;font-size:13.5px;}
    .myTicketCard{margin-top:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);border-radius:16px;overflow:hidden;}
    .myTicketTop{padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
    .myTicketTitle{font-weight:900;letter-spacing:.25px;font-size:13.5px;}.myTicketSub{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:4px;line-height:1.25;}
    .stepList{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px;}
    .stepList li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:rgba(255,255,255,.80);line-height:1.4;}
    .stepNum{font-weight:900;color:rgba(75,212,255,.9);min-width:16px;}
    .warnBox{margin-top:12px;padding:10px 12px;border:1px solid rgba(255,88,114,.28);background:rgba(255,88,114,.10);border-radius:14px;}
    /* Confirm dialog */
    .confirmOverlay{display:flex;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0);align-items:flex-end;justify-content:center;padding-bottom:env(safe-area-inset-bottom);pointer-events:none;transition:background var(--dur-sheet) var(--ease-sheet);}
    .confirmOverlay.show{background:rgba(0,0,0,.7);pointer-events:auto;}
    .confirmSheet{width:100%;max-width:520px;background:linear-gradient(180deg,rgba(91,42,163,.98),rgba(36,10,79,.99));border:1px solid rgba(255,255,255,.16);border-bottom:none;border-radius:24px 24px 0 0;padding:24px 20px max(24px,env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.5);transform:translateY(100%);transition:transform var(--dur-sheet) var(--ease-sheet);}
    .confirmOverlay.show .confirmSheet{transform:translateY(0);}
    .confirmHandle{width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,.2);margin:0 auto 18px;}
    /* Auto-verify highlight */
    .autoVerifyBox{margin-top:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(75,212,255,.10),rgba(73,255,202,.06));border:1px solid rgba(75,212,255,.22);}
    .autoVerifyTitle{font-size:11.5px;font-weight:900;letter-spacing:.6px;color:rgba(75,212,255,.95);margin-bottom:4px;}

/* ── Motion: conic border for VIP ── */
@property --conic-angle{syntax:"<angle>";initial-value:0deg;inherits:false;}
@keyframes conic-spin{to{--conic-angle:360deg;}}
.vipConicWrap{position:relative;border-radius:14px;padding:1px;background:conic-gradient(from var(--conic-angle),rgba(176,38,255,.75),rgba(255,45,168,.75),rgba(0,229,255,.75),rgba(115,255,202,.5),rgba(176,38,255,.75));animation:conic-spin 4s linear infinite;}
.vipConicWrap>div{background:rgba(12,5,28,.97);border-radius:13px;}

/* ── Motion: btnPrimary animated glow ── */
@keyframes primary-glow{0%,100%{box-shadow:0 4px 18px rgba(255,79,216,.22);}50%{box-shadow:0 4px 32px rgba(255,79,216,.50),0 0 22px rgba(75,212,255,.28);}}
.btnPrimary{animation:primary-glow 3s ease-in-out infinite;}

/* ── Skeleton shimmer ── */
@keyframes shimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.05) 75%);background-size:800px 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:10px;display:block;}
.phaseSkeleton{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.phaseSkeletonRow{height:52px;}