/* ── Reset & base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #F5F0EB;
    color: #1C1917;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 700; color: #1C1917; }
h2 { font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; color: #1C1917; }
p  { line-height: 1.6; }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Shared form controls ─────────────────────────────────────────────────── */
input[type="text"] {
    font-family: inherit;
    font-size: clamp(15px, 2.2vw, 18px);
    padding: 12px 16px;
    border: 2px solid #E7DDD5;
    border-radius: 12px;
    background: #FFFDF9;
    color: #1C1917;
    outline: none;
    transition: border-color 0.2s;
}
input[type="text"]:focus { border-color: #E86F2C; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    border-radius: 12px;
    transition: all 0.15s ease-out;
}


/* ── Pin form ─────────────────────────────────────────────────────────────── */
.pin-prompt { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.pin-prompt label { font-size: clamp(14px, 2vw, 17px); color: #78716C; font-weight: 500; width: 100%; }
.pin-prompt input { width: 100%; }
.pin-prompt small  { color: #78716C; font-size: 13px; text-align: left; width: 100%; }
.pin-hint { color: #C45D20; font-size: 13px; min-height: 18px; width: 100%; text-align: center; }

/* ── Back button ──────────────────────────────────────────────────────────── */
.back-btn { background: none; border: none; color: #78716C; font-size: 14px; padding: 4px 0; }
.back-btn:hover { color: #E86F2C; }