:root {
  --bg:#0d1117; --card:#161b22; --border:#30363d; --text:#e6edf3;
  --muted:#8b949e; --green:#3fb950; --purple:#a371f7; --orange:#d29922;
  --red:#f85149; --accent:#58a6ff; --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
.container{max-width:960px;margin:0 auto;padding:2rem 1rem}

/* Hero */
.hero{text-align:center;padding:2rem 0 1rem}
.hero h1{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,var(--green),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--muted);font-size:1.05rem;margin-top:0.5rem}
.badge-row{display:flex;justify-content:center;gap:0.75rem;margin-top:1rem;flex-wrap:wrap}
.badge{background:rgba(88,166,255,0.1);border:1px solid rgba(88,166,255,0.2);
  padding:0.3rem 0.8rem;border-radius:20px;font-size:0.8rem;color:var(--accent)}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem;margin-bottom:1.5rem}
.card h2{font-size:1.05rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}

/* Textareas */
textarea{width:100%;min-height:120px;padding:0.8rem;background:#0d1117;
  border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:"SF Mono",Consolas,monospace;font-size:0.85rem;resize:vertical}
textarea:focus{outline:none;border-color:var(--accent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.65rem 1.5rem;
  border:none;border-radius:8px;font-weight:600;font-size:0.9rem;cursor:pointer;transition:all 0.2s}
.btn-primary{background:var(--green);color:#000}
.btn-primary:hover{opacity:0.85}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed}
.btn-secondary{background:var(--border);color:var(--text)}
.btn-pro{background:linear-gradient(135deg,var(--purple),#f778ba);color:#fff}
.btn-row{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1rem}

/* Score */

/* Results */
.result-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
/* Mobile: tablets & small screens */
@media(max-width:768px){
  .container{padding:1.2rem 0.8rem}
  .hero h1{font-size:1.6rem}
  .hero p{font-size:0.9rem}
  .card{padding:1rem}
  .btn{font-size:0.82rem;padding:0.55rem 1rem}
  .license-input{flex-direction:column}
  .license-input input{width:100%}
}

/* Mobile: phones */
@media(max-width:480px){
  .container{padding:0.8rem 0.5rem}
  .hero h1{font-size:1.3rem}
  .hero{padding:1rem 0 0.5rem}
  .badge{font-size:0.7rem;padding:0.2rem 0.5rem}
  .result-grid{grid-template-columns:1fr}
  textarea{min-height:100px;font-size:0.78rem}
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%;justify-content:center}
  .score-circle{width:80px;height:80px;font-size:1.5rem}
  .stat{padding:0.5rem}
  .stat .num{font-size:1.2rem}
  .pro-gate{padding:1.2rem}
  footer{padding:1rem 0}
}
.stat{text-align:center;padding:1rem}
.stat .num{font-size:1.5rem;font-weight:700}
.stat .label{font-size:0.8rem;color:var(--muted);margin-top:0.25rem}
.stat.green .num{color:var(--green)}
.stat.purple .num{color:var(--purple)}
.stat.orange .num{color:var(--orange)}
.stat.red .num{color:var(--red)}

.keyword-tag{display:inline-block;padding:0.2rem 0.6rem;border-radius:20px;
  font-size:0.78rem;margin:0.15rem}
.tag-match{background:rgba(63,185,80,0.15);color:var(--green)}
.tag-miss{background:rgba(248,81,73,0.15);color:var(--red)}

.suggestion{padding:0.5rem 0;border-bottom:1px solid var(--border);font-size:0.88rem}
.suggestion:last-child{border-bottom:none}
.suggestion .icon{margin-right:0.5rem}

/* Pro gate */
.pro-gate{text-align:center;padding:2rem;
  background:linear-gradient(135deg,rgba(163,113,247,0.1),rgba(247,120,186,0.1));
  border:1px solid rgba(163,113,247,0.3);border-radius:var(--radius)}
.pro-gate h3{font-size:1.3rem;margin-bottom:0.5rem}
.pro-gate p{color:var(--muted);margin-bottom:1rem}
.checks-used{font-size:0.8rem;color:var(--muted);margin-top:0.5rem}

/* Footer */
footer{text-align:center;color:var(--muted);font-size:0.8rem;
  padding:2rem 0;border-top:1px solid var(--border);margin-top:2rem}
footer a{color:var(--accent);text-decoration:none}
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--green);color:#000;
  padding:0.75rem 1.25rem;border-radius:8px;font-weight:600;display:none;z-index:100}
.locked-section { position: relative; overflow: hidden; }
.locked-section .blur-overlay { position: absolute; inset:0; backdrop-filter: blur(6px); 
  background: rgba(13,17,23,0.5); z-index:2; border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:0.5rem; }
.locked-section .blur-overlay span { font-size:0.85rem; color:var(--muted); }
.locked-section .blur-content { filter: blur(4px); user-select:none; }
.license-input { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.license-input input { flex:1; min-width:180px; padding:0.5rem 0.8rem; background:#0d1117;
  border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:monospace; 
  font-size:0.9rem; text-transform:uppercase; letter-spacing:1px; }
.license-input input:focus { outline:none; border-color:var(--purple); }
.license-input button { padding:0.5rem 1rem; background:var(--purple); color:#fff; 
  border:none; border-radius:8px; font-weight:600; cursor:pointer; font-size:0.85rem; }
.pro-badge { display:inline-block; background:linear-gradient(135deg,var(--purple),#f778ba); 
  color:#fff; padding:0.2rem 0.6rem; border-radius:4px; font-size:0.7rem; font-weight:700; 
  letter-spacing:0.5px; margin-left:0.5rem; }

/* ============================================================
   Print styles 鈥?clean report for saving/sharing
   ============================================================ */
@media print {
  body { background:#fff; color:#000; font-size:11pt; }
  .container { max-width:100%; padding:0; }
  .hero { padding:0.5rem 0; }
  .hero h1 { -webkit-text-fill-color:#000; font-size:1.5rem; }
  .hero p, .badge-row, .btn-row, footer, .pro-gate, .toast,
  #input-card, #pro-gate, .checks-used, .blur-overlay,
  .license-input, #paypal-button-container, script { display:none !important; }
  .card { background:#fff; border:1px solid #ccc; break-inside:avoid; padding:1rem; }
  .score-circle { border-color:#000; color:#000; }
  .keyword-tag { border:1px solid #ccc; }
  .tag-match { background:#e8f5e9; color:#2e7d32; }
  .tag-miss { background:#ffebee; color:#c62828; }
  .locked-section .blur-content { filter:none; }
  #results-card { display:block !important; }
  .stat .num { font-size:1.2rem; }
  @page { margin:1cm; }
}

/* ============================================================
   Copy button styles
   ============================================================ */
.copy-btn { background:var(--border); color:var(--text); border:none; 
  padding:0.35rem 0.75rem; border-radius:6px; cursor:pointer; 
  font-size:0.78rem; transition:all 0.15s; }
.copy-btn:hover { background:var(--accent); color:#fff; }
.copy-btn.copied { background:var(--green); color:#000; }

/* Toast animation */
.toast { transition:opacity 0.3s, transform 0.3s; transform:translateY(10px); }
.toast.show { display:block; opacity:1; transform:translateY(0); }

/* Smooth card appearance */
.card { transition:border-color 0.2s; }
#results-card { animation:fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Loading dots animation */
#loading-dots::after{content:"";animation:dots 1.2s steps(4,infinite)}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}

/* SVG score ring */
.score-ring{display:block;margin:0 auto}
/* Pulse CTA animation */
@keyframes pulse-cta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163,113,247,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(163,113,247,0); }
}
#paypal-button-container { border-radius: 8px; }