:root { --bg:#0b0f14; --card:#121825; --text:#e8eef7; --muted:#9fb0c3; --accent:#4ea1ff; --border:#243044; --ok:#31d0aa; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(11,15,20,.9); backdrop-filter: blur(8px); z-index:10; }
.brand { font-weight:800; letter-spacing:.5px; color:var(--text); }
.nav a { margin-left:14px; color:var(--muted); }
.nav a:hover { color:var(--text); }
.wrap { max-width: 1180px; margin: 22px auto; padding: 0 16px; }
.hero { margin-bottom: 14px; }
.muted { color: var(--muted); }
.searchrow { display:flex; gap:10px; margin-top: 12px; }
.searchrow input { flex:1; padding: 12px 14px; border-radius: 12px; border:1px solid var(--border); background: #0e1420; color: var(--text); outline:none; }
.searchrow button { padding: 12px 14px; border-radius: 12px; border:1px solid var(--border); background: #122033; color: var(--text); cursor:pointer; }
.searchrow button:hover { border-color: #36537a; }
.status { margin-top: 10px; font-size: 12px; color: var(--muted); }
.layout { display:grid; grid-template-columns: 1.65fr .75fr; gap:16px; align-items:start; }
.main { min-width: 0; }
.results .item { background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.item .url { color: var(--muted); font-size: 12px; margin: 4px 0 8px; word-break: break-all; }
.item .badge { display:inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border:1px solid #3a4c6e; color: var(--muted); margin-right: 8px; }
.sponsored .item { border-color: #3a4c6e; box-shadow: 0 0 0 1px rgba(78,161,255,.12) inset; }
.answerbox { margin-top: 14px; background: var(--card); border:1px solid var(--border); border-radius: 14px; overflow:hidden; }
.answerhead { padding: 10px 14px; border-bottom:1px solid var(--border); color: var(--muted); font-size: 12px; }
.answer { margin:0; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; min-height: 90px; }
.rail { position: sticky; top: 78px; }
.adbox { background: rgba(18,32,51,.65); border:1px dashed #3a4c6e; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.adhead { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.adcta { display:inline-block; padding: 9px 10px; border-radius: 10px; border:1px solid var(--border); background: #0e1420; color: var(--text); }
.adcta:hover { border-color:#36537a; }
.form { display:grid; gap:10px; max-width: 720px; margin-top: 12px; }
.form label { display:grid; gap:6px; color: var(--muted); font-size: 12px; }
.form input, .form textarea, .form select {
  padding: 10px 12px; border-radius: 12px; border:1px solid var(--border); background: #0e1420; color: var(--text); outline:none;
}
.form button { width: fit-content; padding: 10px 14px; border-radius: 12px; border:1px solid var(--border); background: #122033; color: var(--text); cursor:pointer; }
.form button:hover { border-color: #36537a; }
.ok { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border:1px solid rgba(49,208,170,.35); color: var(--ok); background: rgba(49,208,170,.08); }
.footer { padding: 18px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; color: var(--muted); }