/* Page-level variable overrides */
:root {
}

body { font-family: var(--font-serif); font-style: italic; font-weight: 300; background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.box    { background: var(--bg-card); border: 1px solid var(--border-accent); border-radius: 6px; padding: 2.2rem; width: 100%; max-width: 340px; text-align: center; }
.script { font-family: var(--font-script); font-style: normal; font-size: 2rem; color: var(--accent); display: block; }
.sub    { font-family: var(--font-sans); font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--text-muted); display: block; margin: .2rem 0 1.8rem; }
label   { display: block; font-family: var(--font-sans); font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem; text-align: left; }
input   { width: 100%; padding: .6rem .8rem; background: var(--bg-input); color: var(--text); border: 1px solid var(--border-input); border-radius: 4px; font-size: .95rem; font-family: var(--font-serif); font-style: italic; }
input:focus { outline: none; border-color: var(--accent); }
.btn    { width: 100%; background: var(--accent); color: var(--on-accent); border: none; border-radius: 4px; padding: .75rem; font-family: var(--font-sans); font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; margin-top: .9rem; transition: opacity .2s; }
.btn:hover { opacity: .85; }
.err    { background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.35); border-radius: 4px; padding: .55rem .8rem; font-family: var(--font-sans); font-style: normal; font-size: .82rem; color: #fca5a5; margin-bottom: 1rem; }
a.back  { display: block; margin-top: 1rem; font-family: var(--font-serif); font-style: italic; font-size: .8rem; color: var(--text-muted); text-decoration: none; }
a.back:hover { color: var(--accent); }

/* Mobile */
@media (max-width: 400px) {
    .box  { padding: 1.6rem 1.2rem; }
    input { font-size: 1rem; }
}