*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%;font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at top,#111,#000 60%);color:#fff}input{width:100%;padding:12px;border-radius:8px;background:#0b0b0b;border:1px solid #333;color:#fff}input::placeholder{color:#666}button{font-family:inherit}.primary-btn{width:100%;padding:12px;border-radius:8px;border:none;background:linear-gradient(135deg,#4fc3f7,#1976d2);color:#fff;font-weight:600;cursor:pointer}.primary-btn:hover{opacity:.9}.auth-container{min-height:100vh;display:grid;place-items:center}.auth-card{width:360px;padding:32px;border-radius:14px;background:linear-gradient(180deg,#0f0f0f,#050505);box-shadow:0 30px 80px #000c;text-align:center}.auth-card h2{margin-bottom:6px}.subtext{font-size:13px;color:#aaa;margin-bottom:20px}.divider{margin:16px 0;font-size:12px;color:#666}.btn-google{width:100%;padding:10px;border-radius:8px;background:#111;border:1px solid #333;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;cursor:pointer}.btn-google img{width:18px}.link{margin-top:14px;font-size:13px;color:#4da3ff;cursor:pointer}.landing{min-height:100vh}.nav{display:flex;justify-content:space-between;padding:20px 40px;align-items:center}.logo{height:40px}.hero{text-align:center;margin-top:80px}.tagline{color:#a0a0a0;margin-bottom:30px}.features{list-style:none;padding:0;margin:30px 0}.features li{margin:8px 0}.avatar-area{position:relative}.avatar{background:#1e90ff;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer}.dropdown{position:absolute;right:0;top:45px;background:#111;padding:10px;border-radius:6px}.fade-in{animation:fade .6s ease}@keyframes fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .6s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.verify-container{min-height:100vh;display:grid;place-items:center;text-align:center}.checkmark{font-size:96px;color:#4caf50;animation:pop .6s ease}@keyframes pop{0%{transform:scale(0)}80%{transform:scale(1.2)}to{transform:scale(1)}}.auth-card input{margin-bottom:16px}.btn-gradient{margin-top:10px;transition:transform .2s ease,box-shadow .2s ease}.btn-gradient:hover{transform:translateY(-1px);box-shadow:0 10px 30px #00c6ff59}.btn-google:hover{background:#161616}.error-box{background:#ff50501f;color:#ff6b6b;padding:10px;border-radius:8px;font-size:13px;margin-bottom:12px}.loader{width:48px;height:48px;border:4px solid #222;border-top:4px solid #4fc3f7;border-radius:50%;animation:spin 1s linear infinite}.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 40px}.logo{height:36px;width:36px}.brand-name{font-size:18px;font-weight:600;letter-spacing:.3px}.nav-right{display:flex;align-items:center;gap:16px}.user-email{font-size:13px;color:#aaa}.btn-primary{background:linear-gradient(135deg,#4fc3f7,#1976d2);border:none;padding:14px 28px;font-size:15px;color:#fff;border-radius:10px;cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 40px #4fc3f759}.btn-outline{background:transparent;border:1px solid #333;color:#fff;padding:10px 20px;border-radius:10px;cursor:pointer;transition:background .2s ease,border .2s ease}.btn-outline:hover{background:#111;border-color:#555}.btn-ghost{background:transparent;border:none;color:#ff6b6b;font-size:14px;cursor:pointer;transition:opacity .2s ease}.btn-ghost:hover{opacity:.7}.hero h1{font-size:48px;margin-bottom:10px}.hero h2{font-size:20px;font-weight:400}.features{margin:32px 0}.features li{font-size:15px;opacity:.9}.link{margin-top:18px;font-size:13px;color:#8a7cff;cursor:pointer;transition:opacity .2s ease}.link:hover{opacity:.8}.btn-auth{width:100%;margin-top:18px;padding:14px;border-radius:10px;border:none;background:linear-gradient(135deg,#6d5dfc,#8a7cff);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.btn-auth:hover{transform:translateY(-1px);box-shadow:0 14px 40px #6d5dfc73}.btn-auth:active{transform:translateY(0);box-shadow:none}.btn-google{margin-top:10px;padding:12px;border-radius:10px;border:1px solid #2a2a2a;background:#0f0f0f;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-size:14px;cursor:pointer;transition:background .2s ease,border .2s ease}.btn-google:hover{background:#151515;border-color:#444}.password-wrapper{position:relative}.password-wrapper input{padding-right:42px}.eye-btn{position:absolute;right:3px;top:40%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;opacity:.6}.eye-btn:hover{opacity:1}.btn-auth{width:100%;margin-top:20px;padding:14px 0;border-radius:10px;border:none;background:linear-gradient(135deg,#6d5dfc,#7b6cff 40%,#8a7cff);color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px;cursor:pointer;box-shadow:0 10px 30px #6d5dfc59,inset 0 1px #ffffff26;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.btn-auth:hover{transform:translateY(-1px);box-shadow:0 16px 44px #6d5dfc80,inset 0 1px #fff3;filter:brightness(1.05)}.btn-auth:active{transform:translateY(0);box-shadow:0 8px 20px #6d5dfc59,inset 0 2px 6px #0006}.btn-auth:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:1000}.modal-card{width:340px;background:linear-gradient(180deg,#0f0f0f,#050505);border-radius:14px;padding:26px;box-shadow:0 30px 80px #000000e6;text-align:center}.modal-card h3{margin:0 0 8px}.modal-card p{font-size:14px;color:#aaa;margin-bottom:22px}.modal-actions{display:flex;gap:12px;justify-content:space-between}.btn-outline{flex:1;background:transparent;border:1px solid #333;color:#ccc;padding:10px;border-radius:8px;cursor:pointer}.btn-outline:hover{background:#111}.btn-danger{flex:1;background:linear-gradient(135deg,#ff5252,#ff1744);border:none;color:#fff;padding:10px;border-radius:8px;font-weight:600;cursor:pointer}.btn-danger:hover{opacity:.9}.btn-ghost{background:transparent;border:1px solid #333;color:#ccc;padding:6px 14px;border-radius:8px;cursor:pointer}.btn-ghost:hover{background:#111}.verify-card{width:380px;padding:42px 34px;border-radius:18px;background:linear-gradient(180deg,#0f0f0f,#050505);box-shadow:0 40px 120px #000000e6;text-align:center}.verify-text{font-size:14px;color:#aaa;margin:16px 0}.verify-text strong{color:#fff}.verify-sub{font-size:13px;color:#666;margin-top:12px}.loader{width:44px;height:44px;border:4px solid #222;border-top:4px solid #4fc3f7;border-radius:50%;margin:24px auto;animation:spin 1s linear infinite}.checkmark-glow{font-size:96px;color:#4caf50;margin-bottom:12px;text-shadow:0 0 20px rgba(76,175,80,.8),0 0 60px rgba(76,175,80,.4);animation:glowPop .8s ease}.btn-resend{width:100%;margin-top:20px;padding:12px;border-radius:10px;border:1px solid #333;background:#111;color:#ddd;cursor:pointer}.btn-resend:disabled{opacity:.4;cursor:not-allowed}.success{border:1px solid rgba(76,175,80,.3)}@keyframes glowPop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#4fc3f7,#1976d2);display:grid;place-items:center;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.dropdown{position:absolute;right:0;top:48px;background:#0f0f0f;border:1px solid #222;border-radius:12px;min-width:220px;padding:10px;box-shadow:0 25px 60px #000000e6;z-index:100}.dropdown-email{font-size:13px;color:#aaa;padding:8px 10px;border-bottom:1px solid #222;margin-bottom:6px}.dropdown-item{width:100%;background:none;border:none;color:#fff;padding:10px;text-align:left;border-radius:8px;cursor:pointer;font-size:14px}.dropdown-item:hover{background:#1a1a1a}.dropdown-item.danger{color:#ff6b6b}.landing-header{display:flex;justify-content:space-between;align-items:center;padding:24px 40px}.landing-header .brand{display:flex;align-items:center;gap:10px}.landing-header .logo{height:34px}.landing-header .brand-name{font-size:20px;font-weight:600}.btn-outline{background:transparent;border:1px solid #333;color:#fff;padding:10px 18px;border-radius:8px;cursor:pointer}.btn-outline:hover{border-color:#1e90ff;color:#1e90ff}.nav{position:sticky;top:0;z-index:50;height:64px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:#0a0a0abf;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #1a1a1a}.brand{display:flex;align-items:center;gap:10px}.logo{width:28px;height:28px}.brand-name{font-size:18px;font-weight:600;letter-spacing:.2px}.nav-right{display:flex;align-items:center}.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#4fc3f7,#1976d2);display:grid;place-items:center;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .2s ease,box-shadow .2s ease}.avatar:hover{transform:scale(1.05);box-shadow:0 0 0 3px #4fc3f740}.dropdown{position:absolute;top:70px;right:32px;width:220px;background:linear-gradient(180deg,#121212,#0a0a0a);border-radius:12px;padding:14px;box-shadow:0 30px 80px #000000d9;border:1px solid #1f1f1f;animation:dropdownFade .18s ease}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.dropdown-email{font-size:13px;color:#aaa;margin-bottom:10px;word-break:break-all}.dropdown-btn{width:100%;padding:10px 12px;margin-top:6px;border-radius:8px;border:none;background:#151515;color:#fff;text-align:left;font-size:14px;cursor:pointer;transition:background .2s ease}.dropdown-btn:hover{background:#1e1e1e}.dropdown-btn.danger{margin-top:10px;background:#2a1212;color:#ff6b6b}.dropdown-btn.danger:hover{background:#3a1717}.dashboard{padding:48px 40px;max-width:1200px;margin:0 auto;color:#fff}.dashboard-header h2{font-size:22px;font-weight:600}.dashboard-header .btn-primary{padding:10px 18px;font-size:14px;border-radius:8px}.docs{max-width:900px;line-height:1.7}.docs h1{font-size:28px;margin-bottom:10px}.docs h2{margin-top:36px;font-size:20px}.docs p{color:#cfcfcf;margin-top:10px}.docs ul{margin-top:12px;padding-left:18px}.docs li{margin:8px 0;color:#ddd}.docs pre{background:linear-gradient(180deg,#0f0f0f,#050505);padding:18px;border-radius:10px;margin-top:14px;font-size:14px;overflow-x:auto;border:1px solid #222}.final-note{margin-top:50px;font-size:18px;color:#fff}.dashboard-access{margin-top:80px;padding:40px;max-width:900px;border-radius:16px;background:linear-gradient(180deg,#0f0f0f,#070707);box-shadow:0 30px 80px #000000b3}.dashboard-access h1{font-size:26px;margin-bottom:8px}.dashboard-access p{color:#aaa;margin-bottom:24px}.dashboard-access .primary{padding:14px 28px;font-size:16px;font-weight:600;border-radius:10px;border:none;cursor:pointer;background:linear-gradient(135deg,#4fc3f7,#1976d2);color:#fff;transition:transform .15s ease,box-shadow .15s ease}.dashboard-access .primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px #4fc3f766}.dashboard-access .note{margin-top:14px;font-size:13px;color:#777}.dashboard{padding:40px;max-width:1100px;margin:auto}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.dashboard-header h2{font-size:28px}.dashboard-header button{padding:12px 22px;border-radius:10px;background:linear-gradient(135deg,#1e90ff,#00c6ff);border:none;color:#fff;font-weight:600;cursor:pointer}.docs{line-height:1.7}.docs h1{font-size:36px}.docs h2{margin-top:40px}.docs pre{background:#0d0d0d;padding:18px;border-radius:12px;overflow-x:auto;margin-top:16px}.final-note{margin-top:50px;font-size:20px;color:#4fc3f7}.api-card{margin-top:50px;background:#111;padding:30px;border-radius:16px;box-shadow:0 30px 80px #000000b3;position:relative}.api-card code{display:block;margin-top:10px;background:#000;padding:10px;border-radius:8px;overflow-x:auto}.key-row{display:flex;align-items:center;gap:12px}.icon-btn{background:transparent;border:none;cursor:pointer}.copied{position:absolute;top:10px;right:16px;font-size:12px;color:#4caf50}.pricing-page{min-height:100vh;padding:80px 20px;text-align:center}.pricing-page h1{font-size:42px;margin-bottom:8px}.pricing-page .subtitle{font-size:16px;color:#aaa;margin-bottom:50px}.plans{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}.plan{width:300px;background:linear-gradient(180deg,#101010,#060606);border-radius:18px;padding:34px 26px;border:1px solid rgba(79,195,247,.45);box-shadow:0 0 0 1px #4fc3f726,0 30px 80px #000000e6,0 0 60px #4fc3f72e;transition:transform .25s ease,box-shadow .25s ease}.plan:hover{transform:translateY(-6px);box-shadow:0 0 0 1px #4fc3f759,0 40px 110px #000000f2,0 0 90px #4fc3f759}.plan h2{font-size:22px;margin-bottom:12px}.price{font-size:44px;font-weight:700;margin-top:6px}.period{font-size:14px;color:#9a9a9a;margin-bottom:22px}.plan ul{list-style:none;padding:0;margin:26px 0 30px}.plan ul li{font-size:14px;margin:10px 0;color:#ddd}.plan button{width:100%;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,#4fc3f7,#1976d2);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.plan button:hover{transform:translateY(-1px);box-shadow:0 16px 46px #4fc3f78c}.footnote{margin-top:40px;font-size:13px;color:#666}@media (max-width: 768px){.pricing-page h1{font-size:34px}.plan{width:100%;max-width:360px}}.payment-page{min-height:100vh;background:radial-gradient(circle at top,#111,#000 70%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 20px}.payment-page h1{font-size:42px;margin-bottom:12px}.payment-page .subtitle{color:#aaa;max-width:480px;margin-bottom:40px;line-height:1.6}.btn-primary{padding:14px 32px;font-size:16px;border-radius:12px;border:none;background:linear-gradient(135deg,#4fc3f7,#1976d2);color:#fff;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 50px #4fc3f759}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.fade-in{animation:fadeIn .6s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.api-page{min-height:100vh;padding:80px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}.api-page h1{font-size:36px;margin-bottom:8px}.api-page .subtitle{color:#fff;margin-bottom:40px;max-width:520px}.api-card{background:linear-gradient(180deg,#111,#070707);border-radius:16px;padding:28px;box-shadow:0 25px 70px #000c;width:100%;max-width:520px;position:relative}.api-card h3{margin-bottom:14px}.api-card .key{background:#000;padding:14px;border-radius:10px;font-family:monospace;font-size:14px;margin-bottom:14px;word-break:break-all}.api-card button{margin-top:12px;padding:12px 18px;border-radius:100px;border:none;background:linear-gradient(135deg,#4fc3f7,#276ac2);color:#fff;font-weight:600;cursor:pointer}.empty-api{margin-top:40px;opacity:.9}.empty-face{font-size:48px;margin-bottom:10px}.api-card.expired{border:1px solid #f44336;opacity:.8}.renew-btn{margin-top:12px;background:transparent;border:1px solid #f44336;color:#f44336}.api-page{min-height:100vh;padding:80px 20px;text-align:center}.empty-api{margin-top:80px;opacity:.9}.sad-face{font-size:96px;margin-bottom:16px;animation:floatSad 2.8s ease-in-out infinite}.animate-sad h3{margin-top:10px;font-size:22px}.animate-sad p{color:#888;margin-top:8px}@keyframes floatSad{0%{transform:translateY(0)}50%{transform:translateY(-14px)}to{transform:translateY(0)}}.key-once-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:transparent;display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .4s ease}.key-once-box{background:#111;padding:40px;border-radius:18px;max-width:540px;width:100%;text-align:center;box-shadow:0 0 90px #000000e6}.key-once-box h1{color:#ff5252;margin-bottom:12px}.key-once-box p{color:#ddd;line-height:1.6}.full-key{display:block;margin:24px 0;padding:14px;background:#000;border-radius:10px;font-family:monospace;font-size:14px;word-break:break-all;color:#4fc3f7}.key-once-box .btn-primary{width:100%;margin-bottom:12px}.btn-danger{width:100%;padding:12px;border-radius:10px;border:none;background:#ff5252;color:#fff;font-weight:600;cursor:pointer}.btn-danger:hover{background:#ff1744}