*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Arial,sans-serif;background:#f5f6f7;color:#222;line-height:1.4;overflow-x:hidden}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;background:#fff;border-bottom:1px solid #ddd}
header>span{text-align:right}
main{width:100%;max-width:1050px;margin:35px auto;padding:0 20px}
h1,h2,h3{line-height:1.2}
h1{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:24px;box-shadow:0 2px 8px #0000000a;min-width:0}
.login-body{display:grid;place-items:center;min-height:100vh;padding:18px}
.login-card{width:min(440px,92vw)}
label{display:block;font-weight:700;margin:16px 0}
input,select,textarea{display:block;width:100%;max-width:100%;padding:12px;margin-top:7px;border:1px solid #bbb;border-radius:6px;font:inherit;font-size:16px;background:#fff;color:#222}
input[type="checkbox"],input[type="radio"]{display:inline-block;width:auto;margin:0}
button,.button{min-height:44px;padding:11px 14px;border:0;border-radius:6px;background:#222;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation}
button{width:100%}
button:disabled{opacity:.6;cursor:not-allowed}
a{color:inherit;overflow-wrap:anywhere}
.muted{color:#666}
.error{padding:10px;background:#fee;border:1px solid #d99;border-radius:6px}
table{max-width:100%}
img,svg{max-width:100%;height:auto}

@media(max-width:700px){
  header{align-items:flex-start;flex-direction:column;padding:14px 16px}
  header>span{text-align:left;font-size:14px}
  main{margin:22px auto;padding:0 14px}
  .grid{grid-template-columns:1fr;gap:12px}
  .card{padding:18px}
  h1{font-size:28px}
  h2{font-size:21px}
}

@media(max-width:420px){
  main{padding:0 10px}
  .card{padding:15px;border-radius:8px}
  h1{font-size:25px}
  input,select,textarea{padding:11px}
}