/* assets/css/style.css */
body { font-family: Arial, sans-serif; margin: 0; background: #f5f6f7; color: #111; }
.container { max-width: 520px; margin: 0 auto; padding: 18px; }
.card { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 14px; }
h1,h2 { margin: 0 0 10px; }
.small { color: #555; font-size: 13px; }
label { display:block; margin: 10px 0 6px; }
input, select, textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #ccc; border-radius: 8px; }
button { width: 100%; padding: 12px; border: 0; border-radius: 10px; font-size: 16px; cursor: pointer; }
.btn-in { background: #1aa34a; color: #fff; margin-top: 10px; }
.btn-out { background: #d33; color: #fff; margin-top: 10px; }
.btn { background: #111; color: #fff; margin-top: 10px; }
.nav { display:flex; gap:10px; }
.nav a { flex:1; text-align:center; text-decoration:none; padding:10px; background:#111; color:#fff; border-radius:10px; }
.alert { padding: 10px; border-radius: 10px; margin: 10px 0; }
.alert.ok { background: #e8fff0; border: 1px solid #b8f0c7; }
.alert.err { background: #fff1f1; border: 1px solid #ffcccc; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding: 8px; border-bottom: 1px solid #eee; font-size: 14px; text-align:left; }
.badge { display:inline-block; padding:3px 8px; border-radius: 999px; font-size: 12px; background:#eee; }
.badge.in { background:#e8fff0; }
.badge.out { background:#fff1f1; }