:root { --bg: #05070c; --fg: #cfe3ff; --muted: #8ba4c7; --accent: #5aa0ff; --glow: 0 0 24px rgba(90,160,255,.45); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; background: var(--bg); color: var(--fg); font: 16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; overflow-x:hidden; }
#stars { position: fixed; inset:0; z-index:0; background: transparent; }
.hud { position: fixed; left:0; right:0; top:0; display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 22px; z-index:2; }
.hud.bottom { top:auto; bottom:0; backdrop-filter: blur(6px); }
.brand { font-weight:800; letter-spacing:.5px; text-shadow: var(--glow); }
.brand span { color: var(--accent); }
.clock, .date { padding:6px 10px; border:1px solid #1a2333; border-radius:10px; box-shadow: var(--glow); font-variant-numeric: tabular-nums; }
.chip { padding:6px 10px; border:1px solid #1a2333; border-radius:999px; }
.wrap { position:relative; z-index:1; padding:120px 20px 80px; max-width:1100px; margin:0 auto; }
.card { background: rgba(10,14,24,.7); border:1px solid #1a2333; border-radius:20px; box-shadow: 0 20px 60px rgba(0,0,0,.45), var(--glow); padding:24px; margin:24px auto; }
.card.center { text-align:center; max-width:820px; }
.card.stats { overflow:auto; }
.avatar { width:72px; height:72px; border-radius:999px; margin:0 auto 10px; background: url('/assets/media/profile.jpg') center/cover no-repeat; filter: grayscale(100%) brightness(.7); box-shadow: var(--glow); border:2px solid #1a2333; }
.subtitle { color: var(--muted); margin-top:4px; }
.form .row { display:flex; gap:10px; margin:10px 0; }
.form input, .form select { flex:1; background:#0b1220; border:1px solid #1a2333; color:var(--fg); border-radius:12px; padding:12px 14px; outline:none; }
.form input::placeholder { color:#6b7da3; }
.hidden { display:none !important; }
details summary { cursor:pointer; color:#a9c8ff; margin-top:4px; }
.btn { background:#0b1220; color:var(--fg); border:1px solid #1a2333; border-radius:12px; padding:10px 14px; cursor:pointer; box-shadow: var(--glow); }
.btn.glow { border-color:#22406b; box-shadow: 0 0 0 2px rgba(90,160,255,.15), 0 0 32px rgba(90,160,255,.35); }
.btn.sm { padding:6px 10px; font-size:.9rem; }
.btn.danger { border-color:#57222b; color:#ff9aa7; }
.btn.outline { background:transparent; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding:10px 8px; border-bottom:1px solid #1a2333; vertical-align: middle; }
.truncate { max-width:440px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result { margin-top:12px; padding:12px; border:1px dashed #1a2333; border-radius:12px; }
dialog { border:0; background:transparent; }
.modal { max-width:720px; margin:auto; }
body.light { --bg:#f7fbff; --fg:#0b1220; --muted:#334155; }
body.light .card { background: #fff; border-color:#cfe3ff; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
body.light .form input, body.light .form select, body.light .btn, body.light .clock, body.light .date, body.light .chip { background:#fff; border-color:#cfe3ff; color:#0b1220; }