:root { --bg:#0b1020; --card:#121a33; --text:#e7ecff; --muted:#9aa6d6; --line:#23305e; --accent:#7aa2ff; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }
a{ color:inherit; text-decoration:none; }
#app{ min-height:100vh; display:flex; align-items:stretch; justify-content:center; padding:24px; }

.shell{ width:min(1100px, 100%); }
.topbar{ display:flex; gap:12px; align-items:center; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.spacer{ flex:1; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.grid{ margin-top:16px; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.tile{ display:block; padding:16px; border-radius:14px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(122,162,255,.12), rgba(18,26,51,0)); }
.tile:hover{ border-color:rgba(122,162,255,.45); }
.tileTitle{ font-weight:700; }
.tileMeta{ margin-top:6px; color:var(--muted); font-size:13px; }

form{ display:grid; gap:12px; }
label{ display:grid; gap:6px; color:var(--muted); font-size:13px; }
input{ padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#0f1630; color:var(--text); }
button{ padding:10px 12px; margin-top: 20px; border-radius:10px; border:1px solid rgba(122,162,255,.5); background:rgba(122,162,255,.18); color:var(--text); cursor:pointer; }
button:hover{ background:rgba(122,162,255,.26); }

.notice{ color:var(--muted); font-size:13px; line-height:1.35; }
.error{ color:#ffb4b4; font-size:13px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }