:root{
  --bg:#09090b;--bg2:#111115;--panel:#141419;--border:#23232b;
  --text:#f3f3f4;--muted:#8b8b95;--lime:#c8f04a;--teal:#4af0c0;
  --rose:#f0506a;--amber:#f0b84a;--purple:#9a6af0;
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,sans-serif;--serif:'Instrument Serif',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6}
.container{max-width:1280px;margin:auto;padding:40px 20px 80px}
.nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.logo{font-family:var(--serif);font-size:32px;font-weight:400}.logo em{color:var(--lime);font-style:italic}
.nav-links{display:flex;gap:20px}.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .15s}.nav-links a:hover,.nav-links a.active{color:var(--lime)}
.hero{text-align:center;margin-bottom:30px}.hero h1{font-family:var(--serif);font-size:clamp(32px,5vw,48px);line-height:1.1;margin-bottom:12px}
.hero p{max-width:620px;margin:auto;color:var(--muted);font-size:16px}
.search-box{max-width:760px;margin:20px auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search-box input{flex:1;min-width:200px;height:52px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:0 18px;font-size:16px;outline:none;transition:border-color .2s}.search-box input:focus{border-color:var(--lime)}
.search-box button{height:52px;border:none;border-radius:12px;background:var(--lime);color:#09090b;font-weight:600;padding:0 28px;cursor:pointer;font-size:15px;transition:opacity .15s,transform .1s}.search-box button:hover{opacity:.93;transform:translateY(-1px)}.search-box button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.api-key-wrap{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:0 12px;height:52px;transition:border-color .2s}
.api-key-wrap:focus-within{border-color:var(--lime)}
.api-key-wrap input{background:transparent;border:none;color:var(--text);font-size:14px;width:160px;outline:none}
.api-key-wrap input::placeholder{color:var(--muted)}
.api-key-wrap .icon{color:var(--muted);font-size:16px}
.results{display:none}.results.on{display:block}
.score-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:32px;margin-top:30px}
.score-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:16px}
.score-number{font-size:64px;font-weight:700;line-height:1}.score-label{color:var(--muted);font-size:14px;margin-top:4px}
.buy-signal{padding:10px 20px;border-radius:999px;background:rgba(200,240,74,.12);color:var(--lime);font-weight:700;font-size:14px;letter-spacing:.04em}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:12px}
.metric{background:#1a1a21;border-radius:14px;padding:16px 12px;text-align:center;position:relative}
.metric-label{color:var(--muted);font-size:11px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.metric-value{font-size:28px;font-weight:700}
.metric-bar{height:3px;border-radius:2px;margin-top:8px;background:#2a2a33}
.metric-bar-fill{height:100%;border-radius:2px;background:var(--lime);transition:width .6s ease}
.metric-tooltip{font-size:10px;color:var(--muted);margin-top:4px}
.sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px;margin-top:20px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px}.panel h3{margin-bottom:14px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.panel h3 .icon{font-size:16px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#1a1a21;margin:3px;font-size:12px;border:1px solid transparent;transition:border-color .15s}
.tag:hover{border-color:var(--border)}
.tag strong{color:var(--lime)}.tag a{color:var(--lime);text-decoration:none;margin-left:4px}
.tag.positive{background:rgba(74,240,192,.08);color:var(--teal)}
.tag.warning{background:rgba(240,184,74,.08);color:var(--amber)}
.tag.danger{background:rgba(240,80,106,.08);color:var(--rose)}
.reasoning{color:#d0d0d7;line-height:1.75;font-size:14px}
.action-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.btn{padding:10px 18px;border-radius:10px;border:none;font-weight:600;font-size:14px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--lime);color:#09090b}.btn-primary:hover{opacity:.93;transform:translateY(-1px)}
.btn-secondary{background:var(--bg2);border:1px solid var(--border);color:var(--text)}.btn-secondary:hover{border-color:var(--lime)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.loading{display:none;text-align:center;padding:50px;color:var(--muted)}.loading.on{display:block}
.spinner{width:28px;height:28px;border:3px solid rgba(200,240,74,.2);border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite;margin:auto}
.loading-text{margin-top:14px;font-size:15px}.loading-sub{margin-top:6px;font-size:12px;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
.error{background:rgba(240,80,106,.1);border:1px solid rgba(240,80,106,.3);color:#ff9b9b;padding:12px 16px;border-radius:10px;margin:16px 0;font-size:14px}
.premium-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;background:rgba(200,240,74,.15);color:var(--lime);font-size:12px;font-weight:600;margin-bottom:16px;border:1px solid rgba(200,240,74,.25)}
.ai-toggle{display:none;align-items:center;gap:10px;margin:16px auto;padding:12px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;max-width:760px}
.ai-toggle.on{display:flex}
.ai-toggle input{accent-color:var(--lime);width:16px;height:16px}
.ai-toggle label{font-size:14px;color:var(--text);cursor:pointer}
.ai-note{font-size:12px;color:var(--muted);margin-left:4px}
.similar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.panel-content{min-height:40px}
.empty-msg{color:var(--muted);font-size:14px;font-style:italic}
.signal-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px}
.signal-row:last-child{border-bottom:none}
.signal-label{color:var(--muted)}
.signal-value{font-weight:600;font-size:13px}
.signal-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;flex-shrink:0}
.green{color:var(--lime)}.teal{color:var(--teal)}.amber{color:var(--amber)}.rose{color:var(--rose)}.purple{color:var(--purple)}
.dot-green{background:var(--lime)}.dot-teal{background:var(--teal)}.dot-amber{background:var(--amber)}.dot-rose{background:var(--rose)}.dot-purple{background:var(--purple)}
.score-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}
.risk-meter{display:flex;gap:4px;margin-top:10px}
.risk-block{flex:1;height:6px;border-radius:3px}
.phonetic-check{background:#1a1a21;border-radius:10px;padding:12px;margin-top:8px;font-size:13px}
.pattern-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fit-bar{display:flex;align-items:center;gap:10px;margin:8px 0}
.fit-bar-label{width:110px;font-size:13px;color:var(--muted);flex-shrink:0}
.fit-bar-track{flex:1;height:6px;background:#2a2a33;border-radius:3px;overflow:hidden}
.fit-bar-fill{height:100%;border-radius:3px;background:var(--lime);transition:width .6s ease}
.fit-bar-score{width:32px;text-align:right;font-size:13px;font-weight:600}
.section-divider{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.tld-grid{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tld-chip{padding:3px 10px;border-radius:6px;font-size:12px;border:1px solid var(--border);background:#1a1a21}
.tld-chip.premium{border-color:rgba(200,240,74,.3);color:var(--lime)}
.history-list{list-style:none}
.history-list li{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,.04)}
.history-list li:last-child{border-bottom:none}
.seo-indicator{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:12px;margin-right:4px;margin-top:4px;background:#1a1a21;border:1px solid var(--border)}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.summary-cell{background:#1a1a21;border-radius:10px;padding:10px 12px;font-size:13px}
.summary-cell-label{color:var(--muted);font-size:11px;margin-bottom:4px}
.summary-cell-value{font-weight:600}
@media (max-width: 768px) {

.container{
  padding:15px;
}

.search-box{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:100%;
  gap:8px;
}

.search-box input{
  /* Was width:100% + min-width:100% + flex:none, so the input could not shrink
     to share .api-key-wrap with the icon and ran 2px past the viewport.
     Letting it flex with min-width:0 is what actually fits. */
  min-width:0 !important;
  max-width:100%;
  flex:1 1 auto !important;
  font-size:16px;
}

.search-box button{
  width:100%;
}

.api-key-wrap{
  width:100%;
}

.api-key-wrap input{
  width:100%;
}
.metrics{
   grid-template-columns:1fr !important;
}

.metric{
   width:100%;
}
.summary-grid{
   grid-template-columns:1fr !important;
}
.similar-grid{
   grid-template-columns:1fr !important;
}
.panel{
   padding:14px;
   overflow:hidden;
}
.panel[style*="grid-column"]{
   grid-column:auto !important;
}
}
/* ===== FOOTER ===== */