:root {
    --primary: #FF6600;
    --primary-hover: #e55a00;
    --bg-body: #0f0f0f;
    --bg-card: #1e1e1e;
    --text-main: #e8e8e8;
    --text-muted: #999;
    --border: #2e2e2e;
    --error-bg: rgba(239,68,68,.15);
    --error-text: #f87171;
    --success-bg: rgba(34,197,94,.15);
    --success-text: #4ade80;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg-body);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 400px;
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    animation: slideUp .4s ease-out;
}

h2 { font-size: 1.75rem; font-weight: 800; color: var(--primary); margin-bottom: .4rem; }

p { color: var(--text-muted); font-size: .95rem; margin-bottom: 1.8rem; line-height: 1.5; }

input {
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: #0f0f0f;
    color: var(--text-main);
    outline: none;
    transition: border-color .2s;
}

input:focus { border-color: var(--primary); }

button {
    width: 100%;
    padding: 13px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
}

button:hover { opacity: .88; }

.msg {
    padding: 11px 14px;
    border-radius: 9px;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 1.4rem;
}

.error { background: var(--error-bg); color: var(--error-text); }
.success { background: var(--success-bg); color: var(--success-text); }

.code-input {
    letter-spacing: 12px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
}

.btn-back {
    display: inline-block;
    margin-top: 1rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .85rem;
    transition: color .2s;
}

.btn-back:hover { color: var(--primary); }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}