:root{--bg:#011627;--card:#0B2433;--muted:#979dad;--text:#e9ecf1;--primary:#2EC4B6;--primary-ink:#083c2e;--border:#00111B }*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial}.container{max-width:1100px;margin:0 auto;padding:24px}a{color:var(--primary);text-decoration:none}a:visited{color:var(--primary)}.header{border-bottom:1px solid var(--border);position:sticky;top:0;background:#011627cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10}.header-inner{display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--text);font-size:32px;font-family:Fredoka,Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial}.brand .brand-logo{height:32px;width:auto;display:block}.brand .brand-merch{color:#fdfffc}.brand .brand-mock{color:#2ec4b6}.nav{display:flex;gap:16px;align-items:center}.nav a{color:var(--muted);text-decoration:none}.nav a:hover{color:var(--text)}.mobile-menu-toggle{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px;align-items:center;justify-content:center;position:relative}.hamburger-line{width:20px;height:2px;background:var(--text);transition:all .3s cubic-bezier(.25,.46,.45,.94);border-radius:2px;position:absolute;left:50%;transform-origin:center}.hamburger-line:nth-child(1){top:14px;transform:translate(-50%)}.hamburger-line:nth-child(2){top:19px;transform:translate(-50%)}.hamburger-line:nth-child(3){top:24px;transform:translate(-50%)}.hamburger-line.open:nth-child(1){top:19px;transform:translate(-50%) rotate(45deg)}.hamburger-line.open:nth-child(2){opacity:0;transform:translate(-50%) scale(0)}.hamburger-line.open:nth-child(3){top:19px;transform:translate(-50%) rotate(-45deg)}.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-top:1px solid var(--border);padding:16px 24px;flex-direction:column;gap:16px;box-shadow:0 4px 20px #0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mobile-nav.open{display:flex}.mobile-nav a{color:var(--muted);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}.mobile-nav a.btn{padding:12px 16px;border-radius:8px;text-align:center}.mobile-nav a:hover{color:var(--text)}.mobile-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;z-index:5}@media (max-width: 768px){.desktop-nav{display:none}.mobile-menu-toggle{display:flex}}.btn{background:var(--card);color:var(--text);padding:10px 14px;border-radius:8px;border:1px solid var(--border);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.btn.primary{background:var(--primary);color:var(--primary-ink);border-color:transparent;font-weight:600}.btn.secondary{background:transparent}.btn.danger{background:#e71d3633;color:#e9a3a8;border:1px solid rgba(231,29,54,.3);font-weight:600}.btn.danger:hover{background:#e71d364d;color:#f0b3b8;border-color:#e71d3680}.btn.small{padding:6px 10px;font-size:12px}.hero{padding:64px 24px;text-align:center}.hero h1{font-size:48px;margin:0 0 12px}.hero p{color:var(--muted);max-width:740px;margin:0 auto 24px}.cta{display:flex;gap:12px;justify-content:center}.grid{display:grid;gap:16px}.examples-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.price-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.mocks-grid{grid-template-columns:repeat(5,1fr)}@media (max-width: 1100px){.mocks-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 900px){.mocks-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 640px){.mocks-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 380px){.mocks-grid{grid-template-columns:1fr}}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}.card.price{text-align:center}.price-amt{font-size:32px;margin:8px 0}.placeholder{height:120px;background:var(--card);border:1px dashed var(--border);border-radius:8px;margin:8px 0}.auth{text-align:center}.auth-card{max-width:420px;margin:16px auto;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}.auth h1{font-size:28px;margin:24px 0 8px;background:linear-gradient(135deg,var(--text) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.auth .fade-text{transition:opacity .2s ease;opacity:1}.auth .fade-out{opacity:0}.auth-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;background:#ffffff0d;border:1px solid var(--border);border-radius:999px;padding:6px;margin:20px auto 8px;width:max-content}.auth-toggle .toggle-thumb{position:absolute;top:6px;left:6px;height:calc(100% - 12px);width:calc(50% - 6px);background:linear-gradient(135deg,#2ec4b6,#1aa39a);border-radius:999px;transition:transform .25s ease;will-change:transform;z-index:0}.auth-toggle[data-view=sign_up] .toggle-thumb{transform:translate(100%)}.auth-toggle button{position:relative;z-index:1;background:transparent;border:none;color:var(--muted);padding:10px 18px;border-radius:999px;cursor:pointer;font-weight:800;font-size:16px;letter-spacing:.2px}.auth-toggle button.active{color:var(--primary-ink)}.auth-toggle button:hover{color:var(--text)}.auth-card{position:relative;background:linear-gradient(135deg,#ffffff0a,#ffffff05);border-radius:16px;padding:22px;border:1px solid var(--border);box-shadow:0 20px 60px #00000059;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auth-card:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:16px;pointer-events:none;background:radial-gradient(120% 100% at 50% 0%,rgba(46,196,182,.08),transparent 60%)}.auth-card button,.auth-card .button,.auth-card [type=submit]{background:linear-gradient(135deg,#2ec4b6,#1aa39a);color:var(--primary-ink);border:1px solid transparent;border-radius:12px;font-weight:700;transition:background-position .3s ease,box-shadow .3s ease,transform .15s ease;background-size:200% 200%}.auth-card button:hover,.auth-card .button:hover,.auth-card [type=submit]:hover{background-position:100% 50%;box-shadow:0 8px 20px #2ec4b640;transform:translateY(-1px)}.auth-card input{background:var(--card);border:1px solid var(--border);border-radius:10px}.auth-card .supabase-auth-ui_ui-message{color:var(--muted)}.auth-card input,.auth-card textarea,.auth-card select{color:var(--text)!important}.auth-card input::placeholder,.auth-card textarea::placeholder{color:var(--muted)}.app-page h1{margin-top:0}.app-page h1+p{display:none}.app-page .headline-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.app-page .headline-left{display:flex;flex-direction:column}.app-page .headline-art{height:84px;width:auto;display:block}.app-page .headline-art{filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}.app-page .headline-art.mask{aspect-ratio:471/421;background-color:#fdfffc;-webkit-mask:url(/mockmike_comp.svg?v=fdfffc) no-repeat center / contain;mask:url(/mockmike_comp.svg?v=fdfffc) no-repeat center / contain}.app-page .credits-row{display:flex;align-items:center;gap:12px;margin:8px 0 16px}.app-page .credits-label{color:var(--muted)}.credits-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-weight:700;border:1px solid var(--border);min-width:40px}.credits-pill.zero{background:#e71d36;color:#fdfffc;border-color:transparent}.credits-pill.nonzero{background:#fdfffc;color:#011627}.subscription-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-weight:700;border:1px solid var(--border);min-width:40px}.subscription-pill.starter{color:#22c55e;background:#22c55e1f;border-color:#22c55e33}.subscription-pill.creator{color:#2ec4b6;background:#2ec4b61f;border-color:#2ec4b633}.subscription-pill.pro{color:#f4d35e;background:#f4d35e1f;border-color:#f4d35e33}.subscription-pill.no-plan{color:var(--muted);background:var(--card);border-color:var(--border)}.subscription-pill .tier-icon{width:20px;height:20px;margin-right:6px;background:transparent;border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.subscription-pill .tier-icon svg{width:14px;height:14px}.subscription-section{display:flex;align-items:center;gap:12px}.subscription-controls{display:flex;align-items:center;min-height:32px}.change-btn{background:none;border:none;color:var(--primary);text-decoration:underline;cursor:pointer;font-size:14px;padding:0;transition:color .2s ease}.change-btn:hover{color:#c2f2ed}.change-btn:disabled{color:var(--muted);cursor:not-allowed}.change-options{display:flex;gap:8px;align-items:center;animation:fade-in .3s ease-out}.change-options button{background:none;border:none;cursor:pointer;font-size:14px;padding:4px 8px;border-radius:6px;transition:all .2s ease}.adjust-btn{color:var(--primary);text-decoration:underline}.adjust-btn:hover{background:#2ec4b61a;text-decoration:none}.cancel-btn{color:#ff6961;text-decoration:underline}.cancel-btn:hover{background:#ff69611a;text-decoration:none}.change-options button:disabled{color:var(--muted);cursor:not-allowed}@keyframes fade-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.app-page .add-link{margin-left:4px;color:var(--text);text-decoration:underline}.uploader-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.dropbox{border:2px dashed var(--border);border-radius:12px;min-height:260px;display:flex;align-items:center;justify-content:center;background:var(--card);padding:12px;text-align:center}.file-input>span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted);background:transparent;font-size:14px}.file-input>span svg{color:var(--muted)}.preview img{max-width:100%;border-radius:8px;display:block;margin-bottom:8px}.action-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.file-action{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted);background:transparent;font-size:14px}.file-action:hover,.file-input>span:hover{border-color:#173956}.file-action svg{color:var(--muted)}.camera-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#ffffff0a;border:1px solid var(--border);min-height:420px}.camera-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.camera-skeleton{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#ffffff0a,#ffffff14,#ffffff0a);background-size:200% 100%;animation:shimmer 1.2s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.controls{margin-top:16px;display:grid;gap:12px}.controls textarea{width:100%;min-height:90px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px}.error{color:#ff6961}.result{margin-top:24px}.app-page .controls .btn.primary{justify-self:start;width:auto;padding:12px 20px;border-radius:12px;font-weight:700;background:linear-gradient(135deg,#2ec4b6,#1aa39a);background-size:200% 200%;transition:background-position .3s ease,box-shadow .3s ease,transform .15s ease;border-color:transparent}.app-page .controls .btn.primary:hover{background-position:100% 50%;box-shadow:0 8px 20px #2ec4b640;transform:translateY(-1px)}.footer{margin-top:48px;border-top:1px solid var(--border)}.footer .container{padding:24px}.footer a{color:var(--text);text-decoration:none}.footer a:hover{color:var(--text)}.example-triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.example-label{color:var(--muted);font-size:12px;margin-bottom:6px}.example-col img{width:100%;height:auto;display:block;border-radius:8px}.example-two-row{display:grid;gap:12px}.example-top{display:grid;grid-template-columns:1fr 1fr;gap:12px}.example-tile,.example-bottom{position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#ffffff05}.square{aspect-ratio:1/1}.rect{aspect-ratio:3/2}.example-tile img,.example-bottom img{width:100%;height:100%;display:block;object-fit:cover}.example-chip{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:999px;font-weight:700;font-size:12px;color:var(--text);background:#011627b3;border:1px solid var(--border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mock-tile{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#ffffff05}.mock-tile:after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(0deg,#0116278c,#01162700);pointer-events:none;z-index:1}.mock-img{width:100%;height:100%;display:block;object-fit:cover}.mock-chip.time{position:absolute;left:50%;bottom:8px;transform:translate(-50%);padding:0 6px;border-radius:0;font-weight:700;font-size:12px;color:#fdfffc;background:transparent;border:0;text-shadow:0 1px 2px rgba(0,0,0,.35);z-index:2;white-space:nowrap}.mock-hover{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0116278c;border:0;color:#fdfffc;font-weight:700;opacity:0;transition:opacity .2s ease;cursor:pointer;z-index:3;text-decoration:none}.mock-tile:hover .mock-hover{opacity:1}.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}.pager-status{color:var(--muted)}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100}.lightbox img{max-width:92vw;max-height:92vh;border-radius:8px}.lightbox-close{position:absolute;top:16px;right:16px;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:6px 10px;cursor:pointer}.lightbox-close:hover{background:#ffffff40}.examples-viewport{position:relative;overflow-x:hidden;overflow-y:hidden;margin-left:-48px;margin-right:-48px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.examples-track{display:inline-flex;gap:16px;align-items:stretch;min-width:max-content;overflow:visible;padding:4px;will-change:transform}.example-card{flex:0 0 min(520px,90vw)}.fade-left,.fade-right{display:none}.examples-viewport{scrollbar-width:none}.examples-viewport::-webkit-scrollbar{display:none}.merge-grid{position:relative;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}@media (max-width: 768px){.merge-grid{grid-template-columns:1fr}}.merge-grid .merge-col{min-width:0;transition:transform .35s ease,opacity .35s ease,filter .35s ease}.merge-grid.merged .merge-col{transform:scale(.96);filter:blur(1px);opacity:0}.merge-grid.has-result{grid-template-columns:1fr}.merge-grid.has-result .merge-col{display:none}.dropbox{position:relative;border:2px dashed var(--border);border-radius:12px;height:320px;display:flex;align-items:center;justify-content:center;background:var(--card);padding:12px;text-align:center;overflow:hidden}.dropbox.hover{border-color:var(--primary)}.dropbox .dropbox-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.center-cta{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center}.dropbox .dropbox-label{font-weight:600;margin-bottom:8px}.dropbox-hint{color:var(--muted);font-size:12px;margin:0 0 8px}.file-input input{display:none}.file-input>span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted)}.preview{position:relative;flex:1;width:100%;border-radius:8px;overflow:hidden}.preview img{width:100%;height:100%;object-fit:cover;display:block}.overlay-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px}.icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#01162799;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover{background:#011627cc}.icon-btn svg{display:block}.full-popover{position:absolute;left:50%;top:-12px;transform:translate(-50%,-100%);background:#011627f2;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px #00000059;overflow:hidden;z-index:5;max-width:min(80vw,720px)}.full-popover img{display:block;max-width:min(80vw,720px);height:auto}.merge-panel{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--card);border:1px solid var(--border);border-radius:12px;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;transform:scale(.98);transition:opacity .35s ease,transform .35s ease;pointer-events:none}.merge-panel.visible{opacity:1;transform:scale(1);pointer-events:auto}.merge-grid.has-result .merge-panel{position:static;opacity:1;transform:none;pointer-events:auto;min-height:auto;overflow:visible}.siri-loader{position:relative;width:100%;height:100%;background:radial-gradient(120% 80% at 50% 100%,rgba(46,196,182,.08),transparent 60%)}.siri-loader .wave{position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%,-50%);filter:blur(18px);opacity:.9;mix-blend-mode:screen;border-radius:40% 60% 70% 30%/40% 40% 60% 60%;animation:blob 5s ease-in-out infinite}.siri-loader .w1{background:radial-gradient(circle at 30% 30%,#2EC4B6,transparent 60%);animation-delay:0s}.siri-loader .w2{background:radial-gradient(circle at 70% 40%,#7b61ff,transparent 60%);animation-delay:.8s}.siri-loader .w3{background:radial-gradient(circle at 40% 70%,#ff6ec7,transparent 60%);animation-delay:1.6s}.siri-loader .w4{background:radial-gradient(circle at 60% 60%,#00e1ff,transparent 60%);animation-delay:2.4s}@keyframes blob{0%,to{transform:translate(-50%,-50%) scale(1) rotate(0)}50%{transform:translate(-50%,-50%) scale(1.15) rotate(20deg)}}.gif-loader{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;flex-direction:column}.gif-loader img{display:block;max-width:220px;width:40%;height:auto}.loader-caption{position:static;margin-top:-15px;padding:0 8px;font-weight:700;text-align:center;letter-spacing:.2px}.loader-caption{background:linear-gradient(115deg,#fdfffc,#fdfffc 35%,#0c2433,#fdfffc 65%,#fdfffc);background-size:200% 100%;background-position:200% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sweep 1.8s linear infinite}@keyframes sweep{to{background-position:-200% 0}}.app-page .headline-left .credits-row{display:none}.merge-result{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:12px}.merge-result img{max-width:100%;height:auto;border-radius:10px;display:block}.result-actions{margin-top:12px;display:flex;gap:12px;justify-content:center}.result-actions .btn{padding:12px 18px;border-radius:12px;font-weight:700}.result-actions .btn.primary{background:linear-gradient(135deg,#2ec4b6,#1aa39a);color:var(--primary-ink);border-color:transparent;box-shadow:0 6px 16px #2ec4b638;background-size:200% 200%;transition:background-position .3s ease,box-shadow .3s ease,transform .15s ease}.result-actions .btn.primary:hover{background-position:100% 50%;box-shadow:0 10px 26px #2ec4b647;transform:translateY(-1px)}.result-actions .btn.secondary{background:#ffffff05;color:var(--text);border:1px solid var(--border);transition:border-color .2s ease,background-color .2s ease}.result-actions .btn.secondary:hover{border-color:#173956;background:#ffffff0a}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.lightbox-content{position:relative;max-width:min(92vw,1200px);max-height:92vh}.lightbox-content.camera-modal{max-width:min(92vw,1200px);width:min(92vw,960px)}.lightbox-content img{display:block;max-width:100%;max-height:92vh;width:auto;height:auto;border-radius:12px}.lightbox-close{position:absolute;top:-14px;right:-14px}.credits-card .balance-row{display:flex;align-items:center;gap:10px;margin:4px 0 12px}.credits-card .coin{display:inline-flex;align-items:center;justify-content:center;color:#f4d35e;background:#f4d35e26;border:1px solid var(--border);border-radius:999px;width:36px;height:36px}.credits-card .credits-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:999px;font-weight:800;background:#fdfffc;color:#011627;border:1px solid var(--border);min-width:52px}.credits-card .buy-row{display:flex;gap:10px;margin:8px 0 6px}.credits-card .buy-row .btn{transition:transform .1s ease,box-shadow .2s ease}.credits-card .buy-row .btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px #0000002e}.credits-card .credits-hint{color:var(--muted);margin:6px 0 4px}.credits-card .last-purchase{position:relative;margin-top:8px;color:var(--muted);font-size:14px}.credits-card .see-all{background:none;border:0;color:#9fded8;text-decoration:underline;cursor:pointer;padding:0}.credits-card .see-all:hover{color:#c2f2ed}.credits-card .credits-line{display:flex;align-items:center;gap:12px;margin:4px 0 12px}.credits-card .coin,.credits-card .credits-badge{display:none}.legacy-hide{display:none!important}.tier-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:10px;width:32px;height:32px;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tier-icon.leaf{color:#22c55e;background:#22c55e1f;border-color:#22c55e33}.tier-icon.heart{color:#2ec4b6;background:#2ec4b61f;border-color:#2ec4b633}.tier-icon.crown{color:#f4d35e;background:#f4d35e1f;border-color:#f4d35e33}.tier-icon svg{width:18px;height:18px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:modal-fade-in .2s ease-out}.modal{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:28px;max-width:min(92vw,900px);width:100%;box-shadow:0 20px 60px #0006;animation:modal-slide-in .25s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.modal h3{margin:0 0 8px;font-size:24px;font-weight:700;text-align:center;background:linear-gradient(135deg,var(--text) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-slide-in{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}.plan-card{position:relative;border:1px solid var(--border);background:linear-gradient(135deg,#ffffff08,#ffffff03);border-radius:16px;padding:20px;text-align:left;cursor:pointer;transition:all .25s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.plan-card .plan-header{font-weight:700;display:flex;align-items:center;font-size:18px;margin-bottom:12px;color:var(--text)}.plan-card .plan-price{font-size:28px;font-weight:800;margin:0 0 4px;background:linear-gradient(135deg,var(--text) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.plan-card .plan-credits{color:var(--muted);font-size:14px;font-weight:500}.plan-card:hover{border-color:#2ec4b64d;box-shadow:0 8px 32px #00000040,inset 0 1px #ffffff1a;transform:translateY(-2px)}.plan-card.popular{border-color:#2ec4b6;box-shadow:0 12px 40px #2ec4b633,inset 0 1px #ffffff1a;background:linear-gradient(135deg,#2ec4b614,#2ec4b605)}.plan-card.popular:hover{box-shadow:0 16px 48px #2ec4b64d,inset 0 1px #ffffff26}.plan-card .badge{position:absolute;top:-6px;right:16px;background:linear-gradient(135deg,#2ec4b6,#1aa39a);color:#fff;font-weight:700;border-radius:12px;padding:6px 12px;font-size:11px;box-shadow:0 4px 12px #2ec4b64d;border:1px solid rgba(255,255,255,.2)}.modal-actions{margin-top:24px;display:flex;justify-content:center}.modal-actions .btn{padding:10px 20px;border-radius:12px;font-weight:600;transition:all .2s ease}.modal-actions .btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.pack-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:10px;border-radius:10px;background:#f4d35e1f;border:1px solid rgba(244,211,94,.2);color:#f4d35e}.pack-icon svg{width:16px;height:16px}.credits-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:14px}.credits-meta .meta-item{display:flex;align-items:center;gap:6px}.credits-meta .meta-sep{opacity:.6}.purchase-popover{position:absolute;left:0;top:calc(100% + 8px);background:#011627fa;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px #00000059;width:min(92vw,460px);z-index:20;padding:10px}.purchase-list{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:6px}.purchase-row{display:flex;align-items:flex-start;gap:10px;padding:8px;border-radius:10px;border:1px solid transparent}.purchase-row:hover{background:#ffffff05;border-color:#173956}.purchase-row .left{display:flex;align-items:center}.purchase-row .chip{display:inline-flex;align-items:center;justify-content:center;background:#0d3a4f;border:1px solid #173956;color:#c8f3ef;border-radius:999px;padding:4px 10px;font-weight:700}.purchase-row .right{display:flex;flex-direction:column}.purchase-row .date{font-weight:600}.purchase-row .amt{color:#9fb3c8;font-size:13px}.admin-dashboard{padding:24px 0}.admin-dashboard h1{font-size:32px;margin:0 0 24px;background:linear-gradient(135deg,var(--text) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.admin-loading,.admin-unauthorized{text-align:center;padding:64px 24px}.admin-unauthorized h1{color:var(--text);margin-bottom:16px}.error-banner,.success-banner{padding:16px;border-radius:12px;margin-bottom:24px;font-weight:600}.error-banner{background:#e71d3633;color:#e9a3a8;border:1px solid rgba(231,29,54,.3)}.success-banner{background:#22c55e33;color:#86efac;border:1px solid rgba(34,197,94,.3)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:32px}.metric-card{background:linear-gradient(135deg,#ffffff0a,#ffffff05);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.metric-card:hover{border-color:#2ec4b64d;box-shadow:0 8px 32px #00000040;transform:translateY(-2px)}.metric-icon{font-size:32px;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;background:#2ec4b61a;border:1px solid rgba(46,196,182,.2)}.metric-content h3{font-size:28px;font-weight:800;margin:0 0 4px;color:var(--text)}.metric-content p{margin:0;color:var(--muted);font-weight:500}.subscription-breakdown{margin-bottom:32px}.subscription-breakdown h2{font-size:24px;margin:0 0 16px;color:var(--text)}.plan-stats{display:flex;gap:16px;flex-wrap:wrap}.plan-stat{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 16px}.plan-name{text-transform:capitalize;font-weight:600;color:var(--text)}.plan-count{background:var(--primary);color:var(--primary-ink);border-radius:8px;padding:4px 8px;font-weight:800;font-size:14px}.user-management,.recent-subscriptions{margin-bottom:32px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.section-header h2{font-size:24px;margin:0;color:var(--text)}.search-box input{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 16px;color:var(--text);font-size:14px;width:300px}.search-box input::placeholder{color:var(--muted)}.users-table,.subscriptions-table{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}.table-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:16px;padding:16px 20px;background:#ffffff05;border-bottom:1px solid var(--border);font-weight:600;color:var(--text);font-size:14px;text-transform:uppercase;letter-spacing:.5px}.subscriptions-table .table-header{grid-template-columns:2fr 1fr 1fr 1fr 1fr}.table-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:16px;padding:16px 20px;border-bottom:1px solid var(--border);transition:background-color .2s ease}.subscriptions-table .table-row{grid-template-columns:2fr 1fr 1fr 1fr 1fr}.table-row:hover{background:#ffffff05}.table-row:last-child{border-bottom:none}.plan-badge,.status-badge{display:inline-block;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.plan-badge.starter{background:#22c55e33;color:#86efac}.plan-badge.creator{background:#2ec4b633;color:#7dd3fc}.plan-badge.pro{background:#f4d35e33;color:#fbbf24}.status-badge.active{background:#22c55e33;color:#86efac}.status-badge.canceled{background:#e71d3633;color:#fca5a5}.status-badge.trialing{background:#3b82f633;color:#93c5fd}.admin-modal{max-width:600px}.user-details{background:#ffffff05;border:1px solid var(--border);border-radius:12px;padding:16px;margin:16px 0}.user-details p{margin:8px 0;color:var(--text)}.user-details strong{color:var(--muted)}.admin-actions{margin:24px 0}.action-group{margin-bottom:24px}.action-group h4{margin:0 0 12px;color:var(--text);font-size:16px}.input-group{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.input-group input,.input-group select{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:14px;min-width:120px}.input-group input::placeholder{color:var(--muted)}@media (max-width: 768px){.metrics-grid{grid-template-columns:1fr}.table-header,.table-row{grid-template-columns:1fr;gap:8px}.section-header{flex-direction:column;align-items:flex-start;gap:16px}.search-box input{width:100%}.input-group{flex-direction:column;align-items:stretch}.plan-stats{flex-direction:column}}.announcements{background:var(--bg);position:sticky;top:72px;z-index:9;border-bottom:1px solid var(--border);transform:translateZ(0);will-change:transform}.announcement{padding:16px 24px;position:relative;border-left:4px solid transparent;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:slideDown .3s ease-out}.announcement.green{background:linear-gradient(135deg,#2ec4b626,#2ec4b60d);border-left-color:#2ec4b6;color:#e9f8f7}.announcement.yellow{background:linear-gradient(135deg,#ffc10726,#ffc1070d);border-left-color:#ffc107;color:#fff8e1}.announcement.red{background:linear-gradient(135deg,#e71d3626,#e71d360d);border-left-color:#e71d36;color:#fdeaec}.announcement-content{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:8px}.announcement-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.announcement-title{margin:0;font-size:18px;font-weight:600;line-height:1.2}.announcement-text{line-height:1.5;opacity:.95}.announcement-text p{margin:0 0 8px}.announcement-text p:last-child{margin-bottom:0}.announcement-text strong{font-weight:600}.announcement-text em{font-style:italic}.announcement-text a{color:inherit;text-decoration:underline;opacity:.9}.announcement-text a:hover{opacity:1}.announcement-dismiss{background:none;border:none;color:currentColor;cursor:pointer;font-size:24px;line-height:1;padding:4px;opacity:.7;transition:opacity .2s ease;flex-shrink:0;border-radius:4px}.announcement-dismiss:hover{opacity:1;background:#ffffff1a}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 768px){.announcement{padding:12px 16px}.announcement-title{font-size:16px}.announcement-header{gap:12px}}.announcement-management .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.announcements-table .table-actions{display:flex;gap:8px}.color-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase}.color-badge.green{background:#2ec4b633;color:#2ec4b6}.color-badge.yellow{background:#ffc10733;color:#ffc107}.color-badge.red{background:#e71d3633;color:#e71d36}.status-badge.active{background:#2ec4b633;color:#2ec4b6}.status-badge.inactive{background:#979dad33;color:var(--muted)}.announcement-modal{max-width:600px;width:90vw}.announcement-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:var(--text)}.form-group input,.form-group textarea,.form-group select{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--text);font-family:inherit;resize:vertical}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #2ec4b633}.color-options{display:flex;gap:12px}.color-option{display:flex;align-items:center;gap:8px;cursor:pointer}.color-option input[type=radio]{margin:0}.color-preview{padding:6px 12px;border-radius:6px;font-size:14px;font-weight:600;border:2px solid transparent}.color-preview.green{background:#2ec4b633;color:#2ec4b6}.color-preview.yellow{background:#ffc10733;color:#ffc107}.color-preview.red{background:#e71d3633;color:#e71d36}.color-option input[type=radio]:checked+.color-preview{border-color:currentColor}.checkbox-label{flex-direction:row!important;align-items:center;gap:8px;cursor:pointer}.checkbox-label input[type=checkbox]{margin:0}.announcement-preview{border-radius:8px;padding:16px;border-left:4px solid transparent;margin-top:8px}.announcement-preview.green{background:#2ec4b626;border-left-color:#2ec4b6;color:var(--text)}.announcement-preview.yellow{background:#ffc10726;border-left-color:#ffc107;color:var(--text)}.announcement-preview.red{background:#e71d3626;border-left-color:#e71d36;color:var(--text)}.announcement-preview .announcement-title{font-weight:600;margin-bottom:8px}.announcement-preview .announcement-content{opacity:.9}.form-note{font-size:14px;color:var(--muted);font-style:italic;margin-top:4px}