/* === Mobile-first modern UI for Miljonas === */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root{
  --bg:#f7f7f8; --card:#fff; --text:#131418; --muted:#6b7280;
  --brand:#0b6cff; --brand-weak:#e8f0ff; --border:#e5e7eb; --ok:#22c55e; --err:#ef4444;
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45; font-size:16px; /* >=16px to avoid iOS zoom */
  -webkit-text-size-adjust:100%;
}
.container{ width:100%; max-width:960px; margin:0 auto; padding:16px; }
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:16px; box-shadow:0 6px 20px rgba(0,0,0,.06);
}
h1,h2,h3{ margin:0 0 12px; }
p{ margin:0 0 10px; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Forms */
form{ margin: 14px 0; }
label{ display:block; margin:10px 0 6px; font-weight:600; }
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="date"],select,textarea{
  width:100%; padding:14px 12px; border:1px solid var(--border);
  border-radius:12px; background:#fff; font-size:16px; outline:none;
}
textarea{ min-height:110px; }
.row{ display:grid; grid-template-columns:1fr; gap:12px; }

button,.btn,input[type="submit"]{
  display:inline-block; width:100%; padding:14px 16px; border:0; border-radius:12px;
  background:var(--brand); color:#fff; font-weight:700; font-size:16px; cursor:pointer;
}
button:hover,.btn:hover,input[type="submit"]:hover{ filter:brightness(.96); }
.btn.secondary{ background:#eef2f7; color:#0f172a; }
.btn.link{ background:transparent; color:var(--brand); padding:0; }

.notice{ padding:12px; border-radius:10px; border:1px solid var(--border); background:#fff; }
.notice.ok{ background:#ecfdf5; border-color:#bbf7d0; }
.notice.err{ background:#fef2f2; border-color:#fecaca; }

ul.reset{ list-style:none; padding:0; margin:0; }
.item{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:12px; margin:10px 0;
}

@media (min-width:768px){
  .row{ grid-template-columns:1fr 1fr; }
  .actions{ display:flex; gap:10px; flex-wrap:wrap; }
  button,.btn,input[type="submit"]{ width:auto; min-width:180px; }
}

.header{ margin:0 0 12px; }
.header h2{ margin-bottom:4px; }
.subtle{ color:var(--muted); font-size:14px; }