:root{
  --bg:#0b1020;
  --card:#121a33;
  --muted:#8ea0c6;
  --text:#e6ecff;
  --accent:#60a5fa;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background:linear-gradient(180deg, #0b1020 0%, #0e152b 100%); color:var(--text); }
a{ color: var(--accent); text-decoration: none; }
.container{ max-width: 1100px; margin: 0 auto; padding: 24px; }

.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; background: rgba(18,26,51,0.7); border: 1px solid rgba(255,255,255,0.06);
  border-radius:14px; backdrop-filter: blur(6px); box-shadow: var(--shadow);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:36px; height:36px; border-radius:8px; }
.brand h1{ font-size:20px; margin:0; letter-spacing:0.3px; }
.actions{ display:flex; gap:10px; }
.btn{
  background:#1b2650; border:1px solid rgba(255,255,255,0.08); color:var(--text);
  padding:10px 14px; border-radius:10px; cursor:pointer; transition: transform .06s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); background:#233063; }
.btn.primary{ background: #1e3a8a; border-color: #3654aa; }
.btn.primary:hover{ background:#2343a0; }
.btn.ghost{ background: transparent; border-color: rgba(255,255,255,0.14); }
.btn.danger{ background:#7f1d1d; border-color:#a11e1e; }
.badge{ font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); color: var(--muted); }

.grid{
  display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top:20px;
}
.card{
  background:linear-gradient(180deg, rgba(18,26,51,0.9), rgba(14,20,40,0.9));
  border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:18px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:10px; min-height: 140px; transition: transform .08s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.card .title{ font-weight:700; letter-spacing:.3px; }
.card .desc{ color: var(--muted); font-size: 14px; }

.pill{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; color:white; }
.pill.blue{ background:#2563eb; } .pill.cyan{ background:#0ea5e9; } .pill.green{ background:#16a34a; }
.pill.amber{ background:#f59e0b; } .pill.red{ background:#ef4444; } .pill.purple{ background:#9333ea; } .pill.slate{ background:#64748b; }

.view{ margin-top:22px; }
.step{
  background: rgba(18,26,51,0.84); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:18px; margin-bottom:14px;
}
.step h3{ margin-top:0; }
.step .label{ font-weight:600; margin-bottom:6px; }
.input, .select, textarea{
  width:100%; padding:12px 14px; border-radius:10px; background:#0e142b;
  border:1px solid rgba(255,255,255,0.12); color:var(--text); outline:none;
}
textarea{ min-height: 90px; resize: vertical; }

.checklist{ display:flex; flex-direction:column; gap:8px; }
.checklist label{ display:flex; gap:10px; align-items:center; }
.checklist input{ transform: scale(1.2); }

.toolbar{ display:flex; gap:10px; flex-wrap: wrap; align-items:center; }

footer{ margin: 30px 0; color: var(--muted); font-size: 13px; text-align:center; }
.toast{
  position:fixed; bottom:20px; right:20px; background:#1b2650; color:var(--text);
  padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.12);
  display:none; z-index: 999;
}

.small{ font-size: 12px; color: var(--muted); }
.separator{ height:1px; background: rgba(255,255,255,0.06); margin: 12px 0; }

.kbd{ padding:2px 6px; border:1px solid rgba(255,255,255,0.3); border-radius:6px; font-size:12px; }