:root{--bg-color: #121212;--surface-color: #1A1A1A;--border-color: #2A2A2A;--text-primary: #EDEDED;--text-secondary: #999999;--gold: #D4AF37;--purple: #9D4EDD;--green-accent: #81C784;--green-dark: #388E3C;--font-sans: "Inter", sans-serif;--font-display: "Chakra Petch", sans-serif;--header-height: clamp(60px, 8vh, 80px);--card-padding: clamp(1rem, 4vw, 2rem);--gap-small: clamp(.5rem, 2vw, 1rem);--gap-medium: clamp(1rem, 3vw, 1.5rem);--gap-large: clamp(1.5rem, 4vw, 2rem);--text-xs: clamp(.7rem, 2.5vw, .75rem);--text-sm: clamp(.8rem, 3vw, .875rem);--text-base: clamp(.9rem, 3.5vw, 1rem);--text-lg: clamp(1.1rem, 4vw, 1.25rem);--text-xl: clamp(1.3rem, 5vw, 1.75rem);--text-2xl: clamp(1.5rem, 6vw, 2rem)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;font-size:clamp(14px,2.5vw,16px)}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-primary);overflow:hidden}#app{height:100%;position:relative;z-index:2}.hidden{display:none!important}#background-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);display:flex;flex-direction:column;height:100%}.header{position:fixed;top:clamp(.5rem,2vh,1rem);left:50%;transform:translate(-50%);width:clamp(95%,95vw,1200px);height:var(--header-height);display:flex;justify-content:space-between;align-items:center;padding:clamp(.5rem,2vw,.75rem) clamp(1rem,4vw,1.5rem);background:#1a1a1a99;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:clamp(.5rem,2vw,.75rem);z-index:10;box-shadow:0 8px 32px #0000004d}main.content{flex-grow:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--header-height) + clamp(1rem,3vh,2rem)) 0 clamp(1rem,3vh,2rem) 0}h3{background:linear-gradient(90deg,var(--gold),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:var(--text-xl);margin-bottom:var(--gap-small);line-height:1.2}p{color:var(--text-secondary);line-height:1.6;font-size:var(--text-sm);max-width:clamp(300px,80vw,400px);margin:0 auto}.logo{display:flex;align-items:center;gap:clamp(.5rem,2vw,1rem)}.logo-mark{width:clamp(32px,8vw,48px);height:clamp(32px,8vw,48px);display:flex;align-items:center;justify-content:center;position:relative}.logo-svg{width:clamp(20px,5vw,26px);height:clamp(20px,5vw,26px);z-index:2;filter:drop-shadow(0 0 10px rgba(212,175,55,.5))}h1{font-family:var(--font-display);font-size:clamp(1rem,4vw,1.75rem);font-weight:600;letter-spacing:clamp(1px,.5vw,4px);text-transform:uppercase;position:relative;color:var(--text-primary);text-shadow:0 0 10px rgba(212,175,55,.5),0 0 20px rgba(157,78,221,.3);cursor:default;user-select:none;transition:text-shadow .3s cubic-bezier(.23,1,.32,1)}h1:before,h1:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}h1:before{color:#d4af37;animation:quantum-1 4s ease-in-out infinite;opacity:.7;mix-blend-mode:screen}h1:after{color:#9d4edd;animation:quantum-2 4s ease-in-out infinite;opacity:.7;mix-blend-mode:screen}@keyframes quantum-1{0%,to{clip-path:polygon(0 0,100% 0,100% 45%,0 45%);transform:translate(0)}33%{clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);transform:translate(-1px)}66%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:translate(1px)}}@keyframes quantum-2{0%,to{clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);transform:translate(0)}33%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:translate(1px)}66%{clip-path:polygon(0 0,100% 0,100% 45%,0 45%);transform:translate(-1px)}}.logo-mark:before,.logo-mark:after{content:"";position:absolute;width:100%;height:100%;border:1px solid;border-radius:50%;animation:energy-field 3s linear infinite}.logo-mark:before{border-color:#d4af3780;animation-delay:0s}.logo-mark:after{border-color:#9d4edd80;animation-delay:1.5s}@keyframes energy-field{0%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}.access-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:clamp(.75rem,3vw,1rem);padding:var(--card-padding);width:100%;max-width:clamp(350px,90vw,600px);max-height:calc(100vh - var(--header-height) - clamp(2rem,6vh,4rem));box-shadow:0 20px 50px #0000004d;transition:all .5s ease-in-out;position:relative;overflow:hidden;display:flex;flex-direction:column}.access-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(212,175,55,.03) 0%,transparent 70%);animation:rotate-glow 20s linear infinite;pointer-events:none}@keyframes rotate-glow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.access-state{animation:fadeIn .5s ease-out;position:relative;z-index:1;flex:1;display:flex;flex-direction:column;min-height:0}#accessGranted .access-codes-container{flex:1;min-height:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.state-icon{width:clamp(40px,10vw,50px);height:clamp(40px,10vw,50px);margin:0 auto var(--gap-medium);color:var(--gold)}.state-icon.denied{color:#e57373}.state-icon.granted{color:var(--green-accent)}.loading-spinner{width:clamp(30px,8vw,36px);height:clamp(30px,8vw,36px);border:clamp(3px,1vw,4px) solid var(--border-color);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto var(--gap-medium)}@keyframes spin{to{transform:rotate(360deg)}}.btn{width:100%;padding:clamp(.75rem,3vw,.875rem) clamp(1rem,4vw,1.5rem);border:none;border-radius:clamp(.375rem,2vw,.5rem);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;margin:var(--gap-small) 0}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff1a;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:hover:before{width:300px;height:300px}.btn-primary{background:linear-gradient(135deg,var(--gold),#B8860B);color:#000;box-shadow:0 4px 15px #d4af374d;border:none}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #d4af3766}.btn-secondary{background:var(--border-color);color:var(--text-primary)}.btn-secondary:hover{background:#333;transform:translateY(-2px)}.wallet-indicator{display:flex;align-items:center;gap:clamp(.5rem,2vw,.75rem);background:#0003;border:1px solid var(--border-color);border-radius:100px;padding:clamp(.25rem,1vw,.3rem) clamp(.25rem,1vw,.3rem) clamp(.25rem,1vw,.3rem) clamp(.75rem,3vw,1rem)}.wallet-address{font-family:monospace;font-size:var(--text-xs);color:var(--text-secondary)}.btn-icon{width:clamp(28px,7vw,32px);height:clamp(28px,7vw,32px);border:none;background:var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-secondary)}.btn-icon:hover{background:#e57373;color:#fff;transform:rotate(90deg) scale(1.1)}.access-codes-container{margin-top:var(--gap-large);display:flex;flex-direction:column;gap:var(--gap-medium);text-align:left;max-height:calc(100vh - var(--header-height) - clamp(200px,40vh,300px));min-height:clamp(150px,30vh,200px);overflow-y:auto;overflow-x:hidden;padding:0 clamp(.25rem,1vw,.5rem) var(--gap-medium) 0}.access-codes-container::-webkit-scrollbar{width:clamp(4px,1.5vw,6px)}.access-codes-container::-webkit-scrollbar-track{background:var(--border-color);border-radius:clamp(2px,1vw,3px)}.access-codes-container::-webkit-scrollbar-thumb{background:var(--gold);border-radius:clamp(2px,1vw,3px)}.access-codes-container::-webkit-scrollbar-thumb:hover{background:#b8860b}.access-code-card{background:var(--bg-color);border:1px solid var(--border-color);border-left:clamp(2px,1vw,3px) solid transparent;border-radius:clamp(.375rem,2vw,.5rem);padding:clamp(.75rem,3vw,1rem);display:flex;justify-content:space-between;align-items:flex-start;transition:all .3s ease;position:relative;overflow:hidden;min-height:clamp(50px,12vw,60px);flex-shrink:0}.access-code-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(129,199,132,.1),transparent);transition:left .5s}.access-code-card:hover:before{left:100%}.access-code-card:hover{border-left-color:var(--green-accent);transform:translate(clamp(2px,1vw,5px));background:var(--surface-color)}.subscription-info{border-left-color:var(--green-accent)!important;background:linear-gradient(135deg,var(--surface-color),rgba(129,199,132,.05))}.refresh-section{border-left-color:var(--gold)!important;background:linear-gradient(135deg,var(--surface-color),rgba(212,175,55,.05))}.access-code-info{flex:1;min-width:0;margin-right:var(--gap-small)}.access-code-info h4{font-size:var(--text-base);font-weight:500;color:var(--text-primary);background:none;margin:0 0 clamp(.125rem,1vw,.25rem) 0;word-wrap:break-word;line-height:1.3}.access-code-info p{font-size:var(--text-sm);margin:0 0 clamp(.25rem,1vw,.5rem) 0;color:var(--text-secondary);line-height:1.4;word-wrap:break-word}.item-link{display:block;margin-top:clamp(.25rem,1vw,.5rem);font-size:var(--text-xs)}.item-link a{color:var(--gold);text-decoration:none;word-break:break-all}.item-link a:hover{text-decoration:underline}.access-code-action{font-family:monospace;font-size:var(--text-xs);background:var(--surface-color);padding:clamp(.375rem,2vw,.5rem) clamp(.5rem,2vw,.75rem);border-radius:clamp(.25rem,1vw,.25rem);cursor:pointer;border:1px solid var(--border-color);transition:all .2s ease;text-decoration:none;color:var(--text-secondary);white-space:nowrap;max-width:clamp(150px,40vw,200px);overflow:hidden;text-overflow:ellipsis;align-self:flex-start;text-align:center}.access-code-action:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px #d4af3733}.link-action{background:linear-gradient(135deg,var(--purple),#7B1FA2);color:#fff!important;border-color:var(--purple)}.link-action:hover{background:linear-gradient(135deg,#7B1FA2,var(--purple));border-color:#7b1fa2;color:#fff!important;box-shadow:0 0 10px #9d4edd4d}.subscription-active{background:var(--green-accent)!important;color:#000!important;font-weight:600;cursor:pointer;transition:all .2s ease;border:none!important}.subscription-active:hover{background:var(--green-dark)!important;transform:scale(1.05);box-shadow:0 0 15px #81c78466}.refresh-btn{background:var(--gold)!important;color:#000!important;font-weight:600;border-color:var(--gold)!important}.refresh-btn:hover{background:#b8860b!important;box-shadow:0 0 15px #d4af3766}.coming-soon{background:linear-gradient(135deg,var(--border-color),#333)!important;color:var(--text-secondary)!important;cursor:default!important;font-style:italic;opacity:.7;border-color:var(--border-color)!important}.coming-soon:hover{border-color:var(--border-color)!important;color:var(--text-secondary)!important;box-shadow:none!important;transform:none!important;background:linear-gradient(135deg,var(--border-color),#333)!important}.toast-container{position:fixed;bottom:clamp(1rem,3vh,1.5rem);right:clamp(1rem,3vw,1.5rem);z-index:100;max-width:clamp(250px,80vw,350px)}.toast{background:var(--surface-color);border:1px solid var(--border-color);border-left:clamp(3px,1vw,4px) solid var(--gold);border-radius:clamp(.375rem,2vw,.5rem);padding:clamp(.75rem,3vw,1rem);box-shadow:0 5px 15px #0000004d;animation:toastIn .3s ease;display:flex;align-items:center;gap:var(--gap-small);backdrop-filter:blur(10px);margin-bottom:var(--gap-small);font-size:var(--text-sm)}.toast.success{border-left-color:var(--green-accent)}.toast.error{border-left-color:#e57373}@keyframes toastIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOut{to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.access-code-card{flex-direction:column;align-items:stretch;gap:var(--gap-small)}.access-code-info{margin-right:0;margin-bottom:var(--gap-small)}.access-code-action{width:100%;max-width:none;font-size:var(--text-sm)}}@media (max-width: 360px){:root{--card-padding: clamp(.75rem, 3vw, 1rem)}.access-codes-container{gap:clamp(.5rem,2vw,.75rem)}}