:root { --bg:#f4f6f9; --card:#fff; --ink:#1b2430; --muted:#6b7280; --line:#e3e7ee; --brand:#2b4c7e; --brand-2:#1f3a63; --ok:#1a7f4b; --warn:#b45309; --bad:#b91c1c; }
* { box-sizing:border-box }
body { margin:0; font:15px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; background:var(--bg); color:var(--ink) }
nav.top { display:flex; align-items:center; gap:18px; padding:10px 22px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5 }
nav .brand { font-weight:800; font-size:18px; color:var(--ink); text-decoration:none; margin-right:10px }
nav .brand span { color:var(--brand) }
nav a { color:var(--muted); text-decoration:none; padding:6px 2px; border-bottom:2px solid transparent }
nav a.on { color:var(--ink); border-color:var(--brand) }
nav .spacer { flex:1 }
main { max-width:1200px; margin:22px auto; padding:0 16px }
.cols { display:grid; grid-template-columns: 1fr 340px; gap:18px; align-items:start }
.cols .side { order:2 }
@media (max-width: 900px) { .cols { grid-template-columns:1fr } .cols .side { order:0 } }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px }
.card.narrow { max-width:420px; margin:60px auto }
h1 { font-size:22px; margin:0 0 6px } h2 { font-size:18px; margin:0 0 8px } h3 { font-size:15px; margin:18px 0 6px; display:flex; align-items:center; gap:10px }
.muted { color:var(--muted) } .center { text-align:center; margin:6px 0 }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 }
label.inline { display:flex; align-items:center; gap:8px; color:var(--ink) }
input, textarea, select { width:100%; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); margin-top:4px }
label.inline input[type=checkbox], label.inline input[type=number] { width:auto; margin:0 }
textarea { resize:vertical; font-family: inherit }
#profile-json, pre { font: 12.5px/1.4 Consolas, "Courier New", monospace }
pre { background:#f8fafc; border:1px solid var(--line); border-radius:6px; padding:10px; white-space:pre-wrap; max-height:340px; overflow:auto }
button { font:inherit; padding:8px 14px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:6px; cursor:pointer }
button:hover { border-color:#c5ccd8 } button:disabled { opacity:.55; cursor:progress }
button.primary { background:var(--brand); border-color:var(--brand); color:#fff } button.primary:hover { background:var(--brand-2) }
button.small { padding:2px 8px; font-size:12px } button.link { border:none; background:none; color:var(--brand); padding:4px 6px }
.actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px }
.actions.sticky { position:sticky; bottom:0; background:#fff; padding:12px 0; border-top:1px solid var(--line) }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px } @media (max-width:700px){ .grid2{grid-template-columns:1fr} }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:8px 0 }
.tab { border:none; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--muted) } .tab.on { color:var(--ink); border-color:var(--brand) }
.entry { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:8px 0; background:#fbfcfe }
.entry .grid2 label { margin:4px 0 } .entry textarea { margin-top:2px }
.entry .head { display:flex; justify-content:space-between; align-items:center; gap:8px }
.list { display:flex; flex-direction:column; gap:10px; margin-top:12px }
.match { display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; border:1px solid var(--line); border-radius:8px; padding:12px; cursor:pointer; background:#fff }
.match:hover { border-color:#b9c3d3 }
.score { font-weight:800; font-size:20px; text-align:center; border-radius:8px; padding:8px 0; color:#fff; background:var(--muted) }
.score.hi { background:var(--ok) } .score.mid { background:var(--warn) } .score.lo { background:var(--bad) }
.match .t { font-weight:600 } .match .m { color:var(--muted); font-size:13px }
.badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; background:#eef2f8; color:var(--brand); margin-left:6px; vertical-align:middle }
dialog { border:none; border-radius:12px; padding:0; width:min(860px, 94vw); max-height:92vh; box-shadow:0 20px 60px rgba(0,0,0,.25) }
dialog::backdrop { background:rgba(15,23,42,.45) }
.dialog-body { padding:22px; overflow:auto; max-height:92vh } .dialog-body.wide { width:min(1000px,94vw) }
ul.plain { margin:4px 0 8px; padding-left:18px }
.checks { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:6px } .checks label { display:flex; gap:6px; align-items:center; margin:0; color:var(--ink) } .checks input { width:auto; margin:0 }
.preview { width:100%; height:70vh; border:1px solid var(--line); border-radius:8px; background:#fff }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1b2430; color:#fff; padding:10px 16px; border-radius:8px; z-index:20; max-width:90vw }
#toast.err { background:var(--bad) }
.kv div { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dashed var(--line); font-size:13px }
.ok { color:var(--ok) } .bad { color:var(--bad) }