*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--n:#00ffaa;--c:#00d4ff;--p:#b44aff;--pk:#ff2d8a;--bg:#06060f;--r:16px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
html{font-size:16px;-webkit-text-size-adjust:100%;height:-webkit-fill-available}
body{min-height:100dvh;min-height:-webkit-fill-available;display:flex;align-items:center;justify-content:center;font-family:'Exo 2',sans-serif;color:#fff;background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle 600px at 18% 32%,rgba(0,255,170,.04),transparent),radial-gradient(circle 500px at 82% 18%,rgba(0,212,255,.03),transparent),radial-gradient(circle 500px at 50% 88%,rgba(180,74,255,.03),transparent)}
#cbg{position:fixed;inset:0;z-index:0;pointer-events:none}
#cft{position:fixed;inset:0;z-index:300;pointer-events:none}

/* RESPONSIVE CONTAINER */
.wr{position:relative;z-index:2;width:100%;max-width:430px;padding:12px;opacity:0;transform:translateY(20px);animation:mI .5s ease-out .06s forwards}
@media(min-width:375px){.wr{padding:14px}}
@media(min-width:414px){.wr{padding:16px}}
@media(min-width:768px){.wr{max-width:460px;padding:20px}}
@media(min-width:1024px){.wr{max-width:480px;padding:24px}}
@media(max-width:320px){.wr{padding:8px}}

/* LOGO */
.la{text-align:center;margin-bottom:clamp(14px,4vw,20px);animation:sD .4s ease-out .08s both}
.lr{display:inline-flex;align-items:center;gap:clamp(8px,2.5vw,12px);margin-bottom:4px}
.li{width:clamp(42px,12vw,56px);height:clamp(42px,12vw,56px);flex-shrink:0;animation:lP 4s ease-in-out infinite}
.ln{font-family:'Orbitron',monospace;font-size:clamp(24px,7vw,32px);font-weight:900;letter-spacing:-.5px}
.ln .a{background:linear-gradient(135deg,#00ffaa,#00d4ff,#b44aff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gS 4s ease-in-out infinite}
.ln .b{background:linear-gradient(135deg,#ff2d8a,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lt{font-family:'Fira Code',monospace;font-size:clamp(7px,2vw,9px);letter-spacing:3px;color:rgba(255,255,255,.15);text-transform:uppercase}

/* CLOCK */
.cb{text-align:center;margin-bottom:clamp(10px,3vw,14px);animation:sD .4s ease-out .12s both}
.ck{display:inline-flex;align-items:center;gap:6px;padding:4px clamp(10px,3vw,14px);border-radius:22px;background:rgba(0,255,170,.02);border:1px solid rgba(0,255,170,.04)}
.cdd{width:5px;height:5px;border-radius:50%;background:var(--n);box-shadow:0 0 4px var(--n);animation:bl 1s step-end infinite}
.ct{font-family:'Orbitron',monospace;font-size:clamp(9px,2.8vw,11px);font-weight:600;color:var(--n);letter-spacing:1.5px}
.cap{font-family:'Orbitron',monospace;font-size:clamp(6px,2vw,8px);font-weight:700;color:var(--c)}
.cdt{font-family:'Fira Code',monospace;font-size:clamp(6px,2vw,8px);color:rgba(0,212,255,.3)}

/* CARD */
.card{background:rgba(10,10,30,.94);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:clamp(18px,5vw,24px);padding:clamp(18px,5vw,26px) clamp(14px,4vw,22px);border:1px solid rgba(255,255,255,.04);box-shadow:0 20px 45px rgba(0,0,0,.4);animation:sU .45s ease-out .1s both;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,#00ffaa44,#00d4ff33,#b44aff22,transparent)}

/* INPUT */
.iw{position:relative;margin-bottom:10px}
.ii{position:relative}
.iico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.13);display:flex;transition:color .2s}
.iw.foc .iico{color:var(--c)}
#ui{width:100%;padding:clamp(12px,3.5vw,15px) 14px clamp(12px,3.5vw,15px) 40px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);color:#ccc;font-size:clamp(12px,3.5vw,13px);font-family:'Fira Code',monospace;outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none}
#ui::placeholder{color:rgba(255,255,255,.1);font-size:clamp(10px,3vw,12px)}
.iw.foc #ui{background:rgba(255,255,255,.04);border-color:rgba(0,212,255,.12)}
.iw.err #ui{border-color:rgba(255,70,70,.2);animation:shk .25s ease-out}
.em{display:none;align-items:center;gap:4px;margin:0 0 6px 4px;font-family:'Fira Code',monospace;font-size:clamp(8px,2.5vw,9px);color:#ff6b6b}
.em.sh{display:flex}

/* CUSTOM CODE */
.ccr{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ccp{font-family:'Fira Code',monospace;font-size:clamp(10px,3vw,11px);color:rgba(0,255,170,.35);white-space:nowrap}
#cc{flex:1;padding:clamp(8px,2.5vw,10px) 12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:12px;color:var(--c);font-size:clamp(11px,3vw,12px);font-family:'Fira Code',monospace;outline:none;transition:border-color .2s;-webkit-appearance:none;min-width:0}
#cc::placeholder{color:rgba(255,255,255,.08);font-size:clamp(9px,2.5vw,10px)}
#cc:focus{border-color:rgba(0,212,255,.1)}
.cch{font-family:'Fira Code',monospace;font-size:clamp(6px,1.8vw,7px);color:rgba(255,255,255,.06);margin:-4px 0 8px 4px}

/* SHORTEN BTN */
.bgo{width:100%;padding:clamp(13px,3.8vw,15px);border:none;border-radius:var(--r);cursor:pointer;background:linear-gradient(135deg,#00ffaa,#00d4ff,#b44aff,#ff2d8a);background-size:300% 300%;animation:rbS 6s ease-in-out infinite;color:#fff;font-size:clamp(13px,3.8vw,14px);font-weight:800;font-family:'Exo 2',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .1s;box-shadow:0 4px 16px rgba(0,0,0,.25);text-shadow:0 1px 2px rgba(0,0,0,.25);touch-action:manipulation}
.bgo:active{transform:scale(.97)}
.bgo.ld{background:rgba(0,255,170,.05);animation:none;cursor:wait;color:var(--n);box-shadow:none;text-shadow:none}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.1);transform:scale(0);animation:rpO .3s ease-out forwards;pointer-events:none}
.spn{width:14px;height:14px;border:2px solid rgba(0,255,170,.12);border-top-color:var(--n);border-radius:50%;animation:sp .35s linear infinite;flex-shrink:0}

/* RESULT */
.rs{display:none}.rs.sh{display:block;animation:rsI .35s cubic-bezier(.34,1.56,.64,1)}
.ro{padding:clamp(7px,2vw,9px) clamp(10px,3vw,12px);border-radius:12px;margin-bottom:10px;background:rgba(255,255,255,.008);border:1px solid rgba(255,255,255,.015)}
.ro .lb{font-family:'Fira Code',monospace;font-size:clamp(6px,1.8vw,7px);color:rgba(255,255,255,.07);text-transform:uppercase;letter-spacing:1.5px}
.ro .ur{font-family:'Fira Code',monospace;font-size:clamp(9px,2.8vw,10px);color:rgba(255,255,255,.18);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsh{padding:clamp(14px,4vw,18px) clamp(12px,3.5vw,16px);border-radius:18px;margin-bottom:12px;text-align:center;background:linear-gradient(160deg,rgba(0,255,170,.02),rgba(0,212,255,.012),rgba(180,74,255,.01));border:1px solid rgba(0,255,170,.04)}
.rsh .lb{font-family:'Fira Code',monospace;font-size:clamp(5.5px,1.6vw,6.5px);color:rgba(0,255,170,.15);text-transform:uppercase;letter-spacing:2.5px;display:block;margin-bottom:8px}
.rsh .rw{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.ck2{animation:sPp .35s cubic-bezier(.34,1.56,.64,1)}
.stx{font-family:'Orbitron',monospace;font-size:clamp(14px,4.5vw,19px);font-weight:900;background:linear-gradient(135deg,var(--n),var(--c));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;word-break:break-all}
.crc{text-align:center;margin-bottom:12px}
.crc span{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;background:rgba(255,255,255,.005);border:1px solid rgba(255,255,255,.015);font-family:'Fira Code',monospace;font-size:clamp(7px,2.2vw,8px);color:rgba(255,255,255,.1)}
.crc .tv{color:var(--n);font-weight:600}

/* BUTTONS */
.btns{display:flex;gap:8px;margin-bottom:12px}
.cpb{flex:1;padding:clamp(11px,3.2vw,13px) 10px;border:none;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;font-size:clamp(11px,3.2vw,12.5px);font-weight:700;font-family:'Exo 2',sans-serif;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:all .25s;touch-action:manipulation}
.cpb.idle{background:rgba(0,255,170,.04);border:1px solid rgba(0,255,170,.06);color:var(--n)}
.cpb.idle:hover{background:rgba(0,255,170,.07);border-color:rgba(0,255,170,.12);color:#fff}
.cpb.idle:active{transform:scale(.96)}
.cpb.done{background:linear-gradient(135deg,#00ffaa,#00d4ff);border:1px solid var(--n);color:#06060f;box-shadow:0 0 18px rgba(0,255,170,.1)}
.cpbar{position:absolute;bottom:0;left:0;height:2.5px;background:linear-gradient(90deg,var(--p),var(--pk));width:0;border-radius:0 0 14px 14px}
.cpb.done .cpbar{animation:cpP 2.2s linear forwards}
.bnw{flex:1;padding:clamp(11px,3.2vw,13px) 10px;border:none;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-size:clamp(11px,3.2vw,12.5px);font-weight:700;font-family:'Exo 2',sans-serif;-webkit-tap-highlight-color:transparent;transition:all .2s;background:rgba(180,74,255,.04);border:1px solid rgba(180,74,255,.05);color:rgba(180,74,255,.55);touch-action:manipulation}
.bnw:hover{background:rgba(180,74,255,.07);color:rgba(255,255,255,.45)}
.bnw:active{transform:scale(.96)}

/* SHARE */
.shr{display:flex;gap:clamp(5px,1.5vw,6px);margin-bottom:16px;justify-content:center}
.shb{width:clamp(36px,10vw,42px);height:clamp(36px,10vw,42px);border-radius:12px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.shb:active{transform:scale(.88)}
.sw{background:#25d366}.st{background:#2aabee}.sx{background:#222}
.shb svg{width:clamp(18px,5vw,20px);height:clamp(18px,5vw,20px)}

/* QR */
.qs{display:flex;flex-direction:column;align-items:center;padding-top:16px;border-top:1px solid rgba(255,255,255,.015);gap:12px}
.qc{background:#fff;border-radius:16px;padding:clamp(10px,3vw,14px) clamp(10px,3vw,14px) clamp(8px,2.5vw,10px);box-shadow:0 6px 24px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;animation:qI .4s cubic-bezier(.34,1.56,.64,1)}
.qh{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.qhl{width:22px;height:22px;flex-shrink:0}
.qht{font-family:'Exo 2',sans-serif;font-size:clamp(9px,2.5vw,10px);font-weight:800;color:#111}
#qrc{width:clamp(150px,45vw,185px);height:clamp(150px,45vw,185px);image-rendering:pixelated;image-rendering:-webkit-optimize-contrast}
.qf{margin-top:6px;font-family:'Fira Code',monospace;font-size:clamp(5.5px,1.8vw,6.5px);color:#aaa;letter-spacing:2px;text-transform:uppercase}

/* DOWNLOAD BTN */
.dlb{display:flex;align-items:center;justify-content:center;gap:8px;padding:clamp(10px,3vw,12px) clamp(22px,6vw,28px);border:none;border-radius:14px;cursor:pointer;font-family:'Exo 2',sans-serif;font-size:clamp(11px,3.2vw,12.5px);font-weight:800;-webkit-tap-highlight-color:transparent;transition:all .25s;touch-action:manipulation}
.dlb.idle{background:linear-gradient(135deg,#00ffaa,#00d4ff,#b44aff);background-size:250% 250%;animation:rbS 6s ease-in-out infinite;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);text-shadow:0 1px 2px rgba(0,0,0,.15)}
.dlb.idle:active{transform:scale(.96)}
.dlb.done{background:linear-gradient(135deg,#00ffaa,#00d4ff);animation:none;color:#06060f;box-shadow:0 4px 14px rgba(0,255,170,.1)}

/* TICK OVERLAY */
.tov{display:none;position:fixed;inset:0;z-index:200;background:rgba(6,6,15,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center;flex-direction:column;gap:11px;padding:20px}
.tov.sh{display:flex;animation:fI .1s ease-out}
.tcr{width:clamp(70px,20vw,84px);height:clamp(70px,20vw,84px);border-radius:50%;background:linear-gradient(135deg,#00ffaa,#00d4ff,#b44aff);background-size:200% 200%;animation:tB .35s cubic-bezier(.34,1.56,.64,1),gS 3s ease-in-out infinite;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(0,255,170,.15),0 0 30px rgba(180,74,255,.08)}
.tcr svg{width:clamp(34px,10vw,42px);height:clamp(34px,10vw,42px)}
.ttx{font-family:'Exo 2',sans-serif;font-size:clamp(13px,4vw,15px);font-weight:700;color:#fff;animation:fI .15s ease-out .05s both;text-align:center}
.turl{font-family:'Fira Code',monospace;font-size:clamp(8px,2.5vw,10px);color:rgba(255,255,255,.18);animation:fI .15s ease-out .08s both;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

/* HISTORY */
#hs{display:none}
.hl{display:flex;flex-direction:column;gap:3px;max-height:clamp(180px,40vh,220px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.hi{padding:clamp(7px,2vw,9px) clamp(9px,2.5vw,11px);border-radius:12px;cursor:pointer;background:rgba(255,255,255,.004);border:1px solid rgba(255,255,255,.01);display:flex;justify-content:space-between;align-items:center;transition:all .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hi:active{background:rgba(0,255,170,.012);transform:translateX(2px)}
.hhs{font-family:'Fira Code',monospace;font-size:clamp(10px,3vw,11px);font-weight:700;color:var(--n)}
.hho{font-family:'Fira Code',monospace;font-size:clamp(6px,1.8vw,7px);color:rgba(255,255,255,.06);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:clamp(140px,40vw,200px)}
.hhm{flex-shrink:0;margin-left:6px;font-family:'Fira Code',monospace;font-size:clamp(6px,1.8vw,7px);color:rgba(255,255,255,.04)}
.he{text-align:center;padding:22px}
.he p{font-family:'Fira Code',monospace;font-size:clamp(8px,2.5vw,9px);color:rgba(255,255,255,.05)}
.ft{text-align:center;margin-top:14px;padding-bottom:var(--safe-b);animation:fI .4s ease-out .3s both}
.ft p{font-family:'Fira Code',monospace;font-size:clamp(5px,1.5vw,6px);letter-spacing:3px;background:linear-gradient(90deg,#00ffaa,#00d4ff,#b44aff,#ff2d8a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.25}

/* QR SAVE POPUP (for iOS) */
.qr-save{display:none;position:fixed;inset:0;z-index:250;background:rgba(6,6,15,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:20px}
.qr-save.sh{display:flex;animation:fI .15s ease-out}
.qr-save img{max-width:min(280px,80vw);max-height:min(280px,80vw);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.qr-save p{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);text-align:center;line-height:1.5}
.qr-save .close-btn{padding:10px 28px;border:none;border-radius:12px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .2s}
.qr-save .close-btn:active{background:rgba(255,255,255,.12)}

@keyframes mI{to{opacity:1;transform:translateY(0)}}
@keyframes sD{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes sU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fI{from{opacity:0}to{opacity:1}}
@keyframes gS{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes rbS{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes lP{0%,100%{filter:drop-shadow(0 0 10px rgba(0,255,170,.18))}50%{filter:drop-shadow(0 0 16px rgba(0,255,170,.3))}}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.06}}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes rpO{to{transform:scale(3);opacity:0}}
@keyframes rsI{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sPp{0%{transform:scale(0) rotate(-180deg)}60%{transform:scale(1.06) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes qI{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes tB{0%{transform:scale(0) rotate(-40deg)}55%{transform:scale(1.06) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes cpP{from{width:0}to{width:100%}}