root {
  --bg #93c5fd;           page background 
  --panel #bfdbfe;        cardpanel background 
  --muted #1e3a8a;        subtle text 
  --text #0f172a;         primary text 
  --brand #1d4ed8;        brand primary 
  --brand-2 #2563eb;      brand secondary 
  --border #3b82f6;       borders 
  --ok #059669;
  --warn #d97706;
  --bad #dc2626;
}

 Global resets 
 { box-sizing border-box; }
html, body { height 100%; }

body {
  margin 0;
  font-family ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
               Cantarell, Noto Sans, Helvetica Neue, Arial;
  color var(--text);
  background var(--bg);
  line-height 1.6;
}

 Links 
a { color var(--brand); text-decoration none; }
ahover { text-decoration underline; }

 Header 
header {
  background #93c5fdee;
  border-bottom 1px solid var(--border);
  position sticky;
  top 0;
  z-index 50;
}
.wrap {
  max-width 980px;
  margin 0 auto;
  padding 16px 20px;
}
.brand {
  display flex;
  align-items center;
  gap 10px;
}
.brand img {
  height 40px;
  width auto;
  border-radius 6px;
}

 Main 
main {
  max-width 600px;
  margin 40px auto;
  padding 0 20px;
}
h1 {
  font-size clamp(28px, 4vw, 40px);
  margin 0 0 6px;
}
.lead { color var(--muted); }

 Card  Forms 
form, .card {
  background var(--panel);
  border 1px solid var(--border);
  border-radius 14px;
  padding 18px;
  box-shadow 0 8px 20px rgba(30, 58, 138, .3);
}
fieldset {
  border 0;
  padding 0;
  margin 0 0 12px;
}
label {
  font-weight 600;
  font-size 14px;
}
input, select, textarea {
  width 100%;
  padding 12px 14px;
  border 1px solid var(--border);
  border-radius 10px;
  background #fff;
  color var(--text);
}
inputfocus, selectfocus, textareafocus {
  outline 3px solid var(--brand-2);
}
.row {
  display grid;
  grid-template-columns 1fr auto;
  gap 10px;
  align-items center;
}
.toggle {
  border 1px solid var(--border);
  background #fff;
  border-radius 10px;
  padding 10px 12px;
  cursor pointer;
}

 Buttons 
.btn {
  display inline-flex;
  align-items center;
  justify-content center;
  gap 10px;
  padding 10px 16px;
  border-radius 12px;
  border 1px solid var(--border);
  background linear-gradient(180deg, #60a5fa, #2563eb);
  color #fff;
  font-weight 700;
  cursor pointer;
}
.btn.primary {
  background linear-gradient(90deg, var(--brand), var(--brand-2));
  border-color transparent;
  color #fff;
}

 Layout helpers 
.split {
  display flex;
  justify-content space-between;
  align-items center;
}
.actions {
  display flex;
  gap 10px;
  align-items center;
  flex-wrap wrap;
  margin-top 8px;
}
.hint {
  font-size 12px;
  color var(--muted);
}

 Footer 
footer {
  margin 36px 0 20px;
  color var(--muted);
  text-align center;
}

 Utility 
.hidden { display none; }
.container { max-width 1200px; margin 0 auto; padding 0 20px; }
.grid { display grid; gap 18px; }