/* Title & Meta Optimizer — Dark theme, green accent, responsive */
:root{
  --bg:#0f1216; --bg-elev:#151a21; --text:#e6edf3; --muted:#9aa4ad; --accent:#22c55e; --accent-2:#16a34a; --danger:#ef4444; --info:#60a5fa; --border:#252a33;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:var(--text)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.brand{display:flex;gap:12px;align-items:center}
.app-title{margin:0;font-size:20px}
.app-sub{margin:2px 0 0;color:var(--muted);font-size:13px}
.btn{background:var(--accent);color:#07110a;border:none;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:600;transition:transform .02s ease,background .2s}
.btn:hover{background:var(--accent-2)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:6px}
.btn.copied{outline:2px solid var(--accent)}

.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px;margin:16px 0}
.card h2{margin:0 0 12px;font-size:16px}

.grid{display:grid;gap:12px;grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width: 760px){.grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
label{font-weight:600}
input[type="text"],input[type="url"],input[type="number"],select,textarea{background:#0c0f13;border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text)}
input::placeholder,textarea::placeholder{color:#6b7280}
small{color:var(--muted)}
.form-actions{margin-top:12px;display:flex;gap:8px}

.columns{display:grid;gap:16px;grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width: 960px){.columns{grid-template-columns:1fr}}

.alert{border-radius:10px;padding:12px 14px;margin:12px 0;border:1px solid}
.alert.info{border-color:#1d4ed8;background:rgba(29,78,216,.12)}
.alert.error{border-color:var(--danger);background:rgba(239,68,68,.12)}

.extracted{display:grid;gap:8px}
.badge{display:inline-block;background:#2a3039;color:#a0aec0;border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:12px}
.badge.ai{background:rgba(34,197,94,.12);color:#86efac;border-color:#14532d}

.suggestions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.suggestion{border:1px solid var(--border);border-radius:10px;padding:12px}
.suggestion .row{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.suggestion .row.pair{justify-content:flex-end}
.suggestion .w{flex:1 1 auto}
.suggestion .label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.suggestion .text{white-space:pre-wrap;word-wrap:break-word}
.chip{display:inline-block;border-radius:999px;border:1px solid var(--border);padding:2px 8px;font-size:11px}
.chip.ok{background:rgba(34,197,94,.1);color:#86efac;border-color:#14532d}
.chip.over{background:rgba(239,68,68,.1);color:#fecaca;border-color:#7f1d1d}
.chip.under{background:rgba(59,130,246,.1);color:#bfdbfe;border-color:#1e3a8a}

.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.history li{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#0c1015;border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.history .dt{color:var(--muted);font-size:12px}
.history .sum{flex:1 1 auto}
.history .meta{color:var(--muted);font-size:12px;margin-right:8px}

.app-footer{border-top:1px solid var(--border);padding:16px;color:var(--muted);text-align:center}
.muted{color:var(--muted)}