input[type=text] {
    width: 100%;
    padding: 12px;
    margin: 12px 0 16px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    box-sizing: border-box; /* 🔥 ini penting */
}

button {
padding:10px 16px;
border-radius:8px;
border:none;
cursor:pointer;
font-weight:600;
}

.btn-primary { background:#2563eb; color:#fff; width:100%; }
.btn-primary:hover { background:#1d4ed8; }

.btn-guide {
background:#10b981;
color:#fff;
width:100%;
margin-top:10px;
}

.btn-guide:hover { background:#059669; }

.alert { border-radius:8px; padding:10px 12px; margin-top:12px; font-size:14px; }

.alert-success { background:#ecfdf3; color:#166534; }

.alert-error { background:#fee2e2; color:#b91c1c; }

.details { margin-top:16px; background:#f9fafb; border-radius:8px; padding:12px 14px; font-size:14px; }

.modal {
display:none;
position:fixed;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
}

.modal-content {
background:#fff;
margin:5% auto;
padding:20px;
border-radius:12px;
width:90%;
max-width:700px;
}

.close {
float:right;
font-size:20px;
cursor:pointer;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(135deg, #eef2ff, #f8fafc);
    margin: 0;
}

.card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.card p {
    text-align: center;
}

h2 {
    font-weight: 700;
    color: #1e293b;
}

.details p {
    margin: 6px 0;
}

.btn-primary {
    transition: 0.2s;
}

.btn-primary:hover {
    transform: translateY(-1px);
}

.alert {
    border-left: 4px solid;
}

.alert-success {
    border-color: #22c55e;
}

.alert-error {
    border-color: #ef4444;
}

.btn-download {
    background: #16a34a;
    color: #fff;
    width: 100%;
    margin-top: 10px;
}

.btn-download:hover {
    background: #15803d;
}

.page {
    max-width: 500px;
    margin: 60px auto;
    padding: 0 20px;
}