/* components.css — buttons, inputs, alerts, header */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary); color:#fff; border:0; cursor:pointer;
  padding:10px 14px; border-radius:10px;
  transition:transform .02s ease, background .15s ease;
}
.btn:hover{ background:var(--primary-600) }
.btn:active{ transform:translateY(1px) }
.btn.secondary{ background:#334155 }
.btn.ghost{ background:transparent; border:1px solid var(--border) }

.input, .select{
  width:100%; background:#0e1628; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
}
.input:focus, .select:focus{
  outline:2px solid var(--focus); outline-offset:2px; border-color:transparent;
}

.label{display:block; margin:10px 0 6px}
.row{display:flex; gap:12px; align-items:center}

.alert{padding:10px 12px; border-radius:10px; border:1px solid var(--border)}
.alert.error{border-color:#6b1d1d; background:#1a0f12; color:#fecaca}
.alert.success{border-color:#0f3b2f; background:#0b1f1a; color:#bbf7d0}

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(17,23,38,.75); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}
.header .wrap{
  max-width:1100px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:28px; height:28px}
.nav a{color:var(--text-weak); margin-left:14px}
.nav a.active{color:#fff}


/* Shared footer */
.site-footer{
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color:#fff;
  text-align:center;
  padding:20px;
  margin-top:40px;
}
.site-footer p{ margin:0; font-size:14px; opacity:.9; }
.site-footer a{
  color:#4facfe; text-decoration:none; font-weight:600;
  transition: color .3s ease;
}
.site-footer a:hover{ color:#7cc6ff; }