* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; font-family: system-ui, sans-serif; }
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Login */
.login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 0.75rem; }
.login input, .login button { padding: 0.75rem; font-size: 1rem; border-radius: 8px; border: 1px solid #ccc; }
.login button { background: #222; color: #fff; border: none; cursor: pointer; }
.login button:disabled { opacity: 0.6; }
.error { color: #c0392b; min-height: 1.2em; font-size: 0.9rem; }

/* App */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
header, footer { padding: 1rem; background: #222; color: #fff; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
header .right { display: flex; align-items: center; gap: 0.75rem; }
header button { padding: 0.4rem 0.8rem; border-radius: 6px; border: none; cursor: pointer; }

main { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.box { flex: 1; min-height: 100px; border: 1px solid #ccc; border-radius: 8px; padding: 1rem; }

@media (min-width: 768px) { main { flex-direction: row; } }