:root{
  --bg:#0b1220; --card:#111a2b; --muted:#9bb1d4; --text:#e8eefc;
  --primary:#5aa9ff; --success:#15c47e; --danger:#ff5a7a; --warning:#ffc857;
  --border:#25324a; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  background:linear-gradient(160deg,#0b1220,#0d1730 60%,#0b1220);
  color:var(--text);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.25); backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; letter-spacing:.3px}
.container{max-width:940px; margin:32px auto; padding:0 16px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:var(--shadow)
}
h1,h2{margin:8px 0 12px}
.grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
label{display:flex; flex-direction:column; gap:6px; font-size:.95rem}
label.full{grid-column: 1 / -1}
input,textarea{
  background:#0b1424; color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; outline:none;
}
input:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 2px rgba(90,169,255,.15)}
.actions{margin-top:12px; display:flex; gap:10px; justify-content:flex-end}
.btn{
  background:var(--primary); color:#06101f; border:none; border-radius:999px; padding:10px 16px; font-weight:700; cursor:pointer
}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-secondary{background:#1b2b48; color:var(--text); border:1px solid var(--border)}
dialog{
  border:none; border-radius:16px; padding:18px; background:var(--card); color:var(--text); box-shadow:var(--shadow); width:min(520px, 92%)
}
dialog::backdrop{background:rgba(0,0,0,.5)}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px}
.toast{
  position:fixed; bottom:18px; right:18px; min-width:220px; max-width:70vw;
  padding:10px 12px; border-radius:10px; background:#0b1424; border:1px solid var(--border);
  box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:.25s ease; pointer-events:none
}
.toast.show{opacity:1; transform:translateY(0)}
.toast.success{border-color:rgba(21,196,126,.5)}
.toast.error{border-color:rgba(255,90,122,.5)}
.toast.warn{border-color:rgba(255,200,87,.5)}
@media (max-width:720px){
  .grid{grid-template-columns: 1fr}
}