* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

body {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    min-height: 100vh;
    padding: 20px;
    color: #333;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

header h1 { color: #1d4ed8; font-size: 28px; margin-bottom: 8px; }
header p { color: #64748b; font-size: 15px; margin-bottom: 25px; }

.search-box { display: flex; gap: 10px; margin-bottom: 20px; }
input { flex: 1; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; transition: 0.3s; }
input:focus { outline: none; border-color: #2563eb; }
button { padding: 14px 24px; background: #2563eb; color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.3s; }
button:hover { background: #1d4ed8; }

.hasil-box { background: #f8fafc; border-radius: 10px; padding: 20px; margin: 20px 0; border-left: 4px solid #22c55e; }
.hasil-box h3 { color: #1e293b; margin-bottom: 12px; }
.status-item { padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
.status-item:last-child { border-bottom: none; }

.notif-btn { background: #f59e0b; margin-top: 15px; width: 100%; }
.notif-btn:hover { background: #d97706; }

.info { margin-top: 25px; padding: 15px; background: #f0f9ff; border-radius: 10px; font-size: 14px; line-height: 1.6; }
a { color: #2563eb; text-decoration: none; font-weight: 500; }