/* Shared mobile-first styles for user-facing pages */
:root{
  --primary:#14b8a6;
  --muted:#64748b;
  --card-bg:#ffffff;
  --page-bg:#f7fafc;
}
html,body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--page-bg);
  color:#0f172a;
}
.container, .card {
  max-width:720px;
  width:100%;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius:12px;
  padding:18px;
  box-sizing:border-box;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 16px;
  border-radius:12px;
  border:0;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
}
.btn:disabled{ opacity:0.65; cursor:not-allowed; }
.hint, .subtitle { color:var(--muted); font-size:14px; }
label{ font-weight:600; color:#334155; margin-top:12px; display:block; }
input, select, textarea{ width:100%; padding:12px; border-radius:10px; border:1px solid #e2e8f0; box-sizing:border-box; }
/* Mobile adjustments */
@media (max-width: 640px) {
  .container, .card { padding:18px; border-radius:14px; margin:12px; }
  h1{ font-size:20px; margin:0 0 8px; text-align:center;}
  .btn{ padding:14px; font-size:17px; border-radius:12px; }
  .row{ display:block; }
}
/* Desktop adjustments keep look */
@media (min-width: 641px) {
  .card { max-width:720px; padding:28px; }
}