* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: #0f172a;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    min-height: 100vh;
    color: #1e293b;
    padding: 20px;
}
.wrap { max-width: 900px; margin: 0 auto; }
.card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    margin-bottom: 20px;
}
.header { text-align: center; color: #fff; padding: 24px 0; }
.header h1 { font-size: 26px; margin-bottom: 6px; }
.header p { opacity: 0.8; font-size: 14px; }
.logo-badge {
    display:inline-block; background:#f97316; color:#fff; font-weight:700;
    padding:6px 16px; border-radius:999px; font-size:13px; margin-bottom:10px;
    letter-spacing: 0.5px;
}
label { display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:#334155;}
input[type=text], input[type=tel], input[type=password], select {
    width:100%; padding:12px 14px; border:1.5px solid #e2e8f0; border-radius:10px;
    font-size:15px; margin-bottom:16px; outline:none; transition: border 0.15s;
}
input:focus, select:focus { border-color:#f97316; }
button, .btn {
    background:#f97316; color:#fff; border:none; padding:12px 22px;
    border-radius:10px; font-size:15px; font-weight:600; cursor:pointer;
    text-decoration:none; display:inline-block; transition: background 0.15s;
}
button:hover, .btn:hover { background:#ea580c; }
.btn-secondary { background:#334155; }
.btn-secondary:hover { background:#1e293b; }
.btn-small { padding:7px 14px; font-size:13px; border-radius:8px; }
.alert { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.alert-error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert-info { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

.stamp-category {
    border:1.5px solid #e2e8f0; border-radius:14px; padding:18px; margin-bottom:14px;
}
.stamp-category-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.stamp-category-head .name { font-weight:700; font-size:16px; }
.stamp-category-head .count { font-size:13px; color:#64748b; font-weight:600; }
.progress-bar { background:#f1f5f9; border-radius:999px; height:12px; overflow:hidden; margin-bottom:8px; }
.progress-fill { background:linear-gradient(90deg,#f97316,#fb923c); height:100%; transition: width 0.3s; }
.reward-text { font-size:13px; color:#64748b; }
.reward-ready { color:#16a34a; font-weight:700; }
.stamp-dots { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.dot { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
.dot-filled { background:#f97316; color:#fff; }
.dot-empty { background:#f1f5f9; border:1.5px dashed #cbd5e1; }

table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid #f1f5f9; }
th { color:#64748b; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
tr:hover td { background:#f8fafc; }
.badge { display:inline-block; background:#f1f5f9; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; margin:2px; }
.top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.top-bar h2 { color:#fff; font-size:20px; }
.search-box { display:flex; gap:8px; margin-bottom:20px; }
.search-box input { margin-bottom:0; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .grid-2 { grid-template-columns:1fr; } }