:root{ --bg:#0b0f17; --card:#121826; --text:#eef2ff; --muted:#9aa4b2; --accent:#6ee7b7; }
*{ box-sizing: border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font: 400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.wrap{ width:min(1100px, 92vw); margin: 24px auto; }
header h1{ margin:0; font: 800 28px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing:.5px }
.sub{ color: var(--muted); margin-top:6px }
.card{ background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 20px; margin: 18px 0; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
h2{ margin:0 0 8px 0; font:700 18px/1.2 Inter, system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif }
.muted{ color: var(--muted); }
.grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
input{ background: #0a1220; color: var(--text); border: 1px solid rgba(255,255,255,.08); padding: 12px 12px; border-radius: 10px; outline: none; }
input:focus{ border-color: var(--accent); }
.actions{ display:flex; justify-content:flex-start; }
button{ background: var(--accent); color:#052e2b; font: 700 14px/1 Inter, system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; border:0; border-radius: 12px; padding: 12px 16px; cursor:pointer; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.small{ font-size: 13px; }
.scroll{ max-height: 220px; overflow:auto; background:#0a1220; padding:10px; border-radius: 12px; border:1px solid rgba(255,255,255,.06) }
.portraits{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.portraits figure{ margin:0; text-align:center }
.portraits img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; border: 1px dashed #334155; background:#0b1220 }
.foot{ color:#94a3b8; text-align:center; margin-bottom:40px }
@media (max-width: 800px){ .grid{ grid-template-columns: 1fr 1fr; } }