:root{--navy:#093C5D;--mid:#3B7597;--teal:#6FD1D7;--mint:#5DF8D8;--dark:#062B44;--light:#0d4f7a;--fg:rgba(255,255,255,0.9);--muted:rgba(255,255,255,0.5);--card:rgba(255,255,255,0.06);--border:rgba(111,209,215,0.15);--r:20px;--rs:12px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:'Plus Jakarta Sans',sans-serif;background:var(--dark);color:var(--fg);overflow:hidden}
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Orb 1 — Mint, top-left */
.aurora-orb-1 {
    position: absolute;
    width: 800px; height: 800px;
    top: -300px; left: -200px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(93, 248, 216, 0.08) 0%,
        rgba(93, 248, 216, 0.02) 50%,
        transparent 70%);
    animation: aurora-drift-1 28s ease-in-out infinite;
    filter: blur(60px);
    will-change: transform;
}
/* Orb 2 — Teal, bottom-right */
.aurora-orb-2 {
    position: absolute;
    width: 900px; height: 700px;
    bottom: -300px; right: -250px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(111, 209, 215, 0.08) 0%,
        rgba(111, 209, 215, 0.03) 50%,
        transparent 70%);
    animation: aurora-drift-2 35s ease-in-out infinite;
    filter: blur(80px);
    will-change: transform;
}
/* Orb 3 — Mid Blue, center breathing */
.aurora-orb-3 {
    position: absolute;
    width: 600px; height: 500px;
    top: 40%; left: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(59, 117, 151, 0.05) 0%,
        rgba(93, 248, 216, 0.02) 40%,
        transparent 65%);
    animation: aurora-drift-3 40s ease-in-out infinite;
    filter: blur(90px);
    will-change: transform;
}

@keyframes aurora-drift-1 {
    0%,100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(60px, 40px) scale(1.05); }
    66%      { transform: translate(-30px, 80px) scale(0.97); }
}
@keyframes aurora-drift-2 {
    0%,100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(-80px, -60px) scale(1.08); }
    70%      { transform: translate(50px, -30px) scale(0.95); }
}
@keyframes aurora-drift-3 {
    0%,100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    25%      { transform: translate(-55%, -45%) scale(1.1); opacity: 1; }
    75%      { transform: translate(-45%, -55%) scale(0.9); opacity: 0.6; }
}

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.shooting-star {
    position: fixed;
    width: 140px;
    height: 1.5px;
    background: linear-gradient(to left,
        transparent 0%,
        rgba(93, 248, 216, 0.8) 50%,
        rgba(255, 255, 255, 0.9) 100%);
    border-radius: 999px;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 8px 1px rgba(93, 248, 216, 0.4);
    animation: shooting-star-trail 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    will-change: transform;
}

@keyframes shooting-star-trail {
    0%   { transform: rotate(-30deg) translateX(0px);    opacity: 0; }
    5%   { opacity: 1; }
    100% { transform: rotate(-30deg) translateX(-800px); opacity: 0; }
}

@keyframes firefly-drift {
    0%   { transform: translate(0px, 0px);      opacity: 0; }
    10%  { opacity: 0.75; }
    30%  { transform: translate(-40px, -60px); }
    55%  { transform: translate(-80px, -30px); opacity: 0.6; }
    80%  { transform: translate(-50px, -120px); opacity: 0.4; }
    100% { transform: translate(-10px, -180px); opacity: 0; }
}

#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:430px;margin:0 auto}
.hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;flex-shrink:0}
.logo{font-family:'Amiri',serif;font-size:26px;color:var(--mint)}.logo span{color:var(--teal)}
.hdr-r{display:flex;gap:8px;align-items:center}
.lang-btn{background:var(--card);border:1px solid var(--border);color:var(--teal);font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;cursor:pointer;letter-spacing:.5px}
.mbtn{background:none;border:none;color:var(--fg);cursor:pointer;width:36px;height:36px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px}
.mbtn span{display:block;height:2px;background:var(--fg);border-radius:2px}
.screens{flex:1;overflow:hidden;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;padding:0 20px 100px;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .35s,transform .35s}
.screen.active{opacity:1;transform:none;pointer-events:all}
.screen::-webkit-scrollbar{width:3px}.screen::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.slbl{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin:24px 0 12px;display:flex;align-items:center;justify-content:space-between}
.btn-shuf{background:none;border:none;color:var(--teal);cursor:pointer;padding:4px;display:flex;align-items:center;transition:transform .3s}
.btn-shuf:active{transform:rotate(180deg)}
.btn-shuf svg{width:14px;height:14px}
.hero{background:linear-gradient(135deg,rgba(59,117,151,.3),rgba(9,60,93,.5));border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;margin-top:8px;position:relative;overflow:hidden}
.hero::before{content:'🕌';position:absolute;font-size:100px;right:-15px;top:-10px;opacity:.12;pointer-events:none}
.hdate{font-family:'Amiri',serif;font-size:13px;color:var(--teal);margin-bottom:6px}
.mname{font-family:'Amiri',serif;font-size:26px;font-weight:700;line-height:1.2;margin-bottom:4px}
.mloc{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-bottom:20px}
.mloc svg{width:12px;height:12px}
.btn-i{background:linear-gradient(135deg,var(--mint),var(--teal));color:var(--dark);border:none;padding:14px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;width:100%;box-shadow:0 4px 20px rgba(93,248,216,.3);animation:pulse 3s infinite;transition:transform .15s}
.btn-i:active{transform:scale(.97)}
@keyframes pulse{0%,100%{box-shadow:0 4px 20px rgba(93,248,216,.3)}50%{box-shadow:0 4px 32px rgba(93,248,216,.55)}}
.arow{display:flex;gap:10px;margin-top:10px}
.btn-s{flex:1;background:var(--card);border:1px solid var(--border);color:var(--fg);padding:11px;border-radius:var(--rs);font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s}
.btn-s:active{transform:scale(.96)}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.scard{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:16px}
.snum{font-size:22px;font-weight:700;color:var(--mint)}.slb{font-size:11px;color:var(--muted);margin-top:2px}
.kov{position:fixed;inset:0;z-index:100;background:rgba(6,43,68,.92);backdrop-filter:blur(12px);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .3s}
.kov.open{opacity:1;pointer-events:all}
.ksh{background:var(--navy);border:1px solid var(--border);border-bottom:none;border-radius:28px 28px 0 0;padding:28px 24px 48px;width:100%;transform:translateY(100%);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.kov.open .ksh{transform:none}
.khdl{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px}
.ktit{font-family:'Amiri',serif;font-size:22px;font-weight:700;text-align:center;margin-bottom:4px}
.ksub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:24px}
#qrc{background:#fff;border-radius:16px;padding:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;width:fit-content;min-height:240px}
.dbadge{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(93,248,216,.1);border:1px solid rgba(93,248,216,.2);border-radius:50px;padding:10px 20px;margin-bottom:20px}
.dbadge span{font-size:13px;color:var(--mint);font-weight:500}
.btn-db{background:linear-gradient(135deg,var(--mint),var(--teal));color:var(--dark);border:none;padding:16px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;width:100%}
.kcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:12px;cursor:pointer;transition:all .2s}
.kcard:hover{border-color:rgba(111,209,215,.35);transform:translateY(-1px)}
.kbadge{display:inline-block;background:rgba(93,248,216,.15);color:var(--mint);font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:10px}
.ktitle{font-family:'Amiri',serif;font-size:19px;font-weight:700;margin-bottom:6px;line-height:1.3}
.kmsj{font-size:12px;color:var(--muted);margin-bottom:14px}
.pbar{background:rgba(255,255,255,.08);border-radius:50px;height:6px;margin-bottom:8px;overflow:hidden}
.pfill{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--teal),var(--mint))}
.plbls{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.plbls strong{color:var(--mint)}.kdl{font-size:11px;color:var(--muted);margin-top:10px}
.empty{text-align:center;padding:60px 20px}
.eico{font-size:64px;margin-bottom:16px;opacity:.5}
.etit{font-family:'Amiri',serif;font-size:22px;margin-bottom:8px;color:var(--teal)}
.edesc{font-size:14px;color:var(--muted);line-height:1.6}
.fcard{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;position:relative}
.btn-rm{background:none;border:none;color:var(--muted);padding:8px;cursor:pointer;opacity:0.5;transition:all .2s;flex-shrink:0}
.btn-rm:hover{color:#ff4d4d;opacity:1}

/* Collapsible Sections */
.coll-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.coll-hdr span{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal)}
.coll-hdr svg{width:16px;height:16px;color:var(--muted);transition:transform .3s}
.coll-hdr.open svg{transform:rotate(180deg)}
.coll-cnt{display:none;padding-bottom:12px}
.coll-cnt.open{display:block}

.hi{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(111,209,215,.08);position:relative}
.hdot{width:8px;height:8px;background:var(--mint);border-radius:50%;flex-shrink:0}
.hinfo{flex:1}.hname{font-size:14px;font-weight:500}.hdate2{font-size:11px;color:var(--muted);margin-top:2px}
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;padding:10px 24px 24px;background:linear-gradient(to top,var(--dark) 80%,transparent);display:flex;justify-content:space-around;z-index:50}
.ni{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;border:none;background:none;color:var(--muted);padding:4px 16px;position:relative;transition:color .2s}
.ni.active{color:var(--mint)}.ni svg{width:22px;height:22px}
.nlbl{font-size:10px;font-weight:600;letter-spacing:.3px}
.ndot{position:absolute;top:0;right:12px;width:6px;height:6px;background:var(--mint);border-radius:50%;display:none}
.ni.notif .ndot{display:block}
.smenu{position:fixed;inset:0;z-index:200;pointer-events:none}
.smenu.open{pointer-events:all}
.sov{position:absolute;inset:0;background:rgba(6,43,68,.7);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.smenu.open .sov{opacity:1}
.spnl{position:absolute;top:0;right:0;width:280px;height:100%;background:var(--navy);border-left:1px solid var(--border);padding:60px 28px 40px;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.smenu.open .spnl{transform:none}
.mst{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin:28px 0 12px}
.mst:first-child{margin-top:0}
.mit{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(111,209,215,.08);cursor:pointer;font-size:15px;font-weight:500;color:var(--fg);transition:color .2s}
.mit:hover{color:var(--mint)}.mit svg{width:18px;height:18px;color:var(--teal);flex-shrink:0}
.mft{margin-top:auto;font-size:11px;color:var(--muted);text-align:center;line-height:1.8}
.mft strong{color:var(--teal)}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--mint);color:var(--dark);padding:12px 24px;border-radius:50px;font-size:14px;font-weight:700;z-index:300;opacity:0;transition:all .3s;white-space:nowrap;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.screen.active>*{animation:fu .4s ease both}
.screen.active>*:nth-child(1){animation-delay:.05s}.screen.active>*:nth-child(2){animation-delay:.1s}
.screen.active>*:nth-child(3){animation-delay:.15s}.screen.active>*:nth-child(4){animation-delay:.2s}