:root {
  --bg: #0b0f12;
  --panel: #12171c;
  --muted: #8aa0b3;
  --text: #e6eef5;
  --primary: #4da3ff;
  --primary-2: #2a7bd9;
  --danger: #ff5d5d;
  --ok: #29d17e;
  --border: #1e242b;
}
* { 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; }

.app-header { 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,18,.9); backdrop-filter: blur(6px); z-index:10; }
.brand { display:flex; gap:12px; align-items:center; }
.logo { display:block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.titles { display:flex; flex-direction:column; }
.titles strong { font-weight:700; letter-spacing:.2px; }
.subtle { color:var(--muted); font-size:12px; }
.actions { display:flex; gap:8px; align-items:center; }

.split { display:grid; grid-template-columns: 1fr 1.1fr; gap:16px; padding:16px; max-width:1200px; margin:0 auto; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }

.left, .right { display:flex; flex-direction:column; gap:16px; }

.card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.row { display:flex; align-items:center; gap:10px; }
.grow { flex:1; min-width:0; }
.gap { gap:8px; }

label { display:block; margin:10px 0 6px; color:#cdd9e5; font-weight:600; }
input[type="text"], input[type="url"], input[type="number"], select, textarea {
  width:100%; background:#0e1317; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; outline:none; transition: border .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(77,163,255,.15); }
textarea { resize:vertical; }

.grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:720px){ .grid { grid-template-columns: 1fr; } }

.btn, .pill { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border-radius:999px; border:1px solid transparent; background:linear-gradient(180deg, var(--primary), var(--primary-2)); color:#fff; cursor:pointer; text-decoration:none; font-weight:650; }
.pill { background:transparent; border-color:var(--border); color:var(--text); }
.pill.small { padding:6px 10px; font-size:12px; }
.pill:hover { border-color:var(--primary); color:var(--primary); }
.btn:hover { filter:brightness(1.05); }

.callout { padding:12px 14px; border-radius:10px; border:1px solid var(--border); margin-bottom:10px; }
.callout.error { background: rgba(255,93,93,.08); border-color: rgba(255,93,93,.25); color:#ffb3b3; }
.callout.info { background: rgba(77,163,255,.08); border-color: rgba(77,163,255,.25); color:#b6d7ff; }

.form-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.note { color: var(--muted); font-size:12px; }

.history .list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.list-item { display:flex; gap:12px; align-items:center; padding:10px; border:1px dashed var(--border); border-radius:10px; }
.list-item .meta { display:flex; gap:8px; align-items:center; }
.badge { display:inline-flex; align-items:center; gap:6px; background:#0d141a; border:1px solid var(--border); color:#c7d4df; padding:4px 8px; border-radius:999px; font-size:12px; }
.small { font-size:12px; }

.empty { color:var(--muted); padding:10px; border:1px dashed var(--border); border-radius:10px; text-align:center; }

.stats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.suggestions { list-style:decimal inside; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.sug { padding:10px; border:1px solid var(--border); border-radius:10px; background:#0e1419; }
.url { color:#dff0ff; text-decoration:none; font-weight:600; }
.url:hover { color:#fff; text-decoration:underline; }
.anchor { margin-top:6px; color:#b9c9d6; }
.score { background: linear-gradient(180deg, #43d17a, #2ca361); color:#062d17; border-radius:8px; padding:4px 6px; font-weight:700; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width: 52vw; }

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

.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }