*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#0A0F1E;--card:#111827;--card2:#1a2236;--blue:#4F8EF7;--cyan:#00D4FF;--green:#00E676;--orange:#FF9800;--red:#FF5252;--white:#F0F4FF;--muted:#8892A4;--border:#1E2D45}
body{background:var(--navy);color:var(--white);font-family:'DM Sans',sans-serif;min-height:100vh}
.header{background:#0d1628;border-bottom:1px solid var(--border);padding:.8rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:.5rem}
.logo{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,#F0F4FF,#00D4FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav-btn{background:none;border:none;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.82rem;padding:.45rem .9rem;border-radius:8px;cursor:pointer;transition:all .2s;white-space:nowrap;text-decoration:none;display:inline-block}
.nav-btn:hover{color:var(--white);background:#1a2845}
.nav-btn.active{color:var(--cyan);background:#0d1f3c;border:1px solid #1a3560}
.premium-badge{display:flex;align-items:center;background:linear-gradient(135deg,#4F8EF7,#00D4FF);border:none;border-radius:20px;padding:.4rem 1rem;color:#fff;font-family:'Syne',sans-serif;font-size:.75rem;font-weight:700;cursor:pointer}
.wrap{max-width:900px;margin:0 auto;padding:2rem 1.5rem}
.hero{text-align:center;padding:1.5rem 0 1rem}
.badge{display:inline-flex;align-items:center;gap:6px;background:#0d1f3c;border:1px solid #1a3560;border-radius:20px;padding:5px 14px;font-size:12px;color:var(--cyan);margin-bottom:1rem}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
h1{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:700;line-height:1.2;margin-bottom:.7rem;background:linear-gradient(135deg,#F0F4FF 0%,#00D4FF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sub{color:var(--muted);font-size:.95rem;max-width:480px;margin:0 auto}
.input-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.2rem;display:flex;align-items:center;gap:12px;transition:border .2s;margin-top:1.5rem}
.input-box:focus-within{border-color:var(--blue)}
.input-box input{flex:1;background:none;border:none;outline:none;color:var(--white);font-family:'DM Sans',sans-serif;font-size:1rem;min-width:0}
.input-box input::placeholder{color:var(--muted)}
.btn{background:linear-gradient(135deg,#4F8EF7,#00D4FF);border:none;border-radius:10px;padding:.7rem 1.4rem;color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:opacity .2s;letter-spacing:.5px}
.btn:hover{opacity:.85}.btn:disabled{opacity:.5;cursor:not-allowed}
.usage-bar-wrap{margin-top:.8rem;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.8rem 1.2rem;display:flex;align-items:center;gap:14px}
.usage-label{font-size:.78rem;color:var(--muted);white-space:nowrap}
.usage-track{flex:1;height:5px;background:var(--border);border-radius:3px}
.usage-fill{height:100%;border-radius:3px;transition:width .5s ease}
.usage-count{font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;white-space:nowrap}
.loading{display:none;text-align:center;padding:2.5rem 0}
.spin-ring{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--cyan);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-text{color:var(--cyan);font-size:.85rem;font-family:'Syne',sans-serif;animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.section{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1rem}
.sec-title{font-family:'Syne',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:1rem}
.check-row{display:flex;align-items:flex-start;gap:10px;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.check-row:last-child{border-bottom:none}
.ic{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;margin-top:1px}
.ic.ok{background:#00e67622;color:#00E676}.ic.warn{background:#ff980022;color:#FF9800}.ic.fail{background:#ff525222;color:#FF5252}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.score-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:1.2rem}
.score-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1rem;text-align:center}
.score-num{font-family:'Syne',sans-serif;font-size:1.9rem;font-weight:700;line-height:1}
.score-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-top:.4rem}
.score-bar{height:4px;border-radius:2px;margin-top:.7rem;background:var(--border)}
.score-fill{height:100%;border-radius:2px;transition:width 1s ease}
.overall-row{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.2rem}
.grade-ring{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:3px solid;font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:700;flex-shrink:0}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:500;margin-left:6px}
.tag-good{background:#00e67622;color:#00E676}.tag-warn{background:#ff980022;color:#FF9800}.tag-bad{background:#ff525222;color:#FF5252}
.improve-item{display:flex;align-items:flex-start;gap:14px;padding:.9rem 0;border-bottom:1px solid var(--border)}
.improve-item:last-child{border-bottom:none}
.priority-badge{flex-shrink:0;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:700;font-family:'Syne',sans-serif;text-transform:uppercase;margin-top:2px}
.p-high{background:#ff525222;color:#FF5252;border:1px solid #ff525244}
.p-med{background:#ff980022;color:#FF9800;border:1px solid #ff980044}
.p-low{background:#4f8ef722;color:#4F8EF7;border:1px solid #4f8ef744}
.improve-content h4{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--white);margin-bottom:.25rem}
.improve-content p{font-size:.82rem;color:var(--muted);line-height:1.5}
.improve-content .impact{font-size:.75rem;color:var(--cyan);margin-top:.3rem}
.improve-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1rem}
.istat{background:var(--card2);border-radius:8px;padding:.6rem .8rem;text-align:center}
.istat-val{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700}
.istat-label{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.kw-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;padding:.5rem .8rem;background:var(--card2);border-radius:8px;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:.5rem}
.kw-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;padding:.7rem .8rem;background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:.4rem;align-items:center;transition:border .2s}
.kw-row:hover{border-color:var(--blue)}
.diff-bar{height:6px;border-radius:3px;background:var(--border);margin-top:3px}
.diff-fill{height:100%;border-radius:3px}
.comp-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1rem}
.comp-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1rem}
.comp-score{background:var(--card2);border-radius:8px;padding:.6rem .8rem;text-align:center}
.comp-score-val{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700}
.comp-score-label{font-size:.65rem;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.kw-overlap{display:flex;flex-wrap:wrap;gap:6px;margin-top:.8rem}
.kw-chip{background:#4f8ef711;border:1px solid #4f8ef733;border-radius:20px;padding:3px 10px;font-size:.75rem;color:#4F8EF7}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(6px);padding:1rem}
.popup{background:#0e1628;border:1px solid #1e3560;border-radius:20px;padding:2rem;max-width:400px;width:100%;text-align:center;animation:popIn .3s ease}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.popup-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#4F8EF7,#00D4FF);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.4rem;color:#fff;font-family:'Syne',sans-serif;font-weight:700}
.popup h2{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:.5rem;color:var(--white)}
.popup-sub{color:var(--muted);font-size:.85rem;line-height:1.5;margin-bottom:1.2rem}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.4rem}
.plan-card{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:1rem;text-align:center;position:relative}
.plan-card.recommended{border-color:var(--cyan)}
.plan-save{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--cyan);color:#000;font-family:'Syne',sans-serif;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.plan-name{font-family:'Syne',sans-serif;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.plan-price{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;color:var(--white);margin:.3rem 0}
.plan-period{font-size:.72rem;color:var(--muted)}
.features{text-align:left;margin-bottom:1.4rem;display:flex;flex-direction:column;gap:.45rem}
.feat-row{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--white)}
.feat-check{width:16px;height:16px;border-radius:50%;background:#00e67622;color:#00E676;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
.btn-premium{width:100%;background:linear-gradient(135deg,#4F8EF7,#00D4FF);border:none;border-radius:12px;padding:.85rem;color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;margin-bottom:.6rem}
.btn-premium:hover{opacity:.85}
.btn-later{background:none;border:none;color:var(--muted);font-size:.8rem;cursor:pointer;text-decoration:underline}
.key-row{display:flex;gap:8px;margin-top:.8rem}
.key-input{flex:1;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:.55rem .9rem;color:var(--white);font-family:'DM Sans',sans-serif;font-size:.85rem;outline:none}
.key-input:focus{border-color:var(--blue)}
.btn-activate{background:#4F8EF7;border:none;border-radius:8px;padding:.55rem 1rem;color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.8rem;cursor:pointer}
.key-err{font-size:.75rem;color:#FF5252;margin-top:.4rem;display:none}
@media(max-width:600px){.score-row{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}.comp-scores{grid-template-columns:1fr 1fr}.kw-header,.kw-row{grid-template-columns:2fr 1fr 1fr}.nav-btn{font-size:.75rem;padding:.4rem .7rem}}