/* static/mobile.css */
:root { --fg:#111; --muted:#666; --bg:#fff; --accent:#0a7; --danger:#e33; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
.container{max-width:680px;margin:0 auto;padding:16px}
h1,h2{font-size:clamp(1.25rem, 4vw, 1.75rem);margin:0 0 12px}
p,label,button,input,select{font-size:clamp(1rem, 3.5vw, 1.125rem)}
.card{background:#fff; border:1px solid #eee; border-radius:16px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.05)}
.grid{display:grid; gap:12px}
@media (min-width:640px){ .grid-2{grid-template-columns:1fr 1fr} }
label{display:block; font-weight:600; margin:6px 0}
input[type="text"], input[type="email"], input[type="tel"], input[type="time"], select, input[type="file"]{
  width:100%; padding:14px 12px; border:1px solid #ddd; border-radius:12px
}
.btn{display:block; width:100%; padding:14px 16px; border:0; border-radius:14px; background:var(--accent); color:#fff; font-weight:700}
.btn:active{transform:translateY(1px)}
.note{color:var(--muted); font-size:.95em}
.kv{display:grid; grid-template-columns:10ch 1fr; gap:6px 12px}
.kv span:first-child{color:var(--muted)}
.alert{background:#fff7f7;border:1px solid #ffdede;color:#831; padding:10px 12px; border-radius:10px}