:root { --bg:#0a1124; --panel:#111a36; --line:#24315e; --ink:#eef2ff; --dim:#a8b3d6; --cobalt:#0346f3; --warn:#ffd27a; --bad:#ff8a9b; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 48px 20px; }
h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 32px 0 12px; }
p { color: var(--dim); margin: 0 0 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin-top: 24px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
button, .btn { font: inherit; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding: 10px 18px; border-radius: 9px; border: 1px solid #6a7bb3; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; }
.primary { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
button[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--warn); outline-offset: 3px; }
.msg { min-height: 24px; margin-top: 16px; color: var(--warn); }
.msg.bad { color: var(--bad); }
ul.list { list-style:none; padding:0; margin:0; }
ul.list li { display:flex; justify-content:space-between; gap:12px; padding: 12px 0; border-top:1px solid var(--line); }
.tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; }
.tile { display:block; background: var(--panel); border:1px solid var(--line); border-radius: 14px; padding: 20px; color: var(--ink); text-decoration:none; }
.tile:hover { border-color: #6a7bb3; }
.tile strong { display:block; font-size: 18px; margin-bottom: 4px; }
.tile span { color: var(--dim); font-size: 14px; }
.top { display:flex; justify-content:space-between; align-items:center; gap: 12px; flex-wrap: wrap; }
table { width:100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align:left; padding:6px 8px; border-top:1px solid var(--line); vertical-align: top; word-break: break-word; }
.mark { width: 40px; height: 40px; }
input { min-height:44px; padding:8px 12px; border-radius:9px; border:1px solid #6a7bb3; background:#0a1124; color:var(--ink); font:inherit; }
label { color: var(--dim); }