/* Arbiter Support — base */
body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-family-heading); }
a { color: var(--color-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }
.hidden { display: none !important; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Form primitives ─────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.form-label {
    font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary);
}
.form-input {
    width: 100%; padding: 13px 15px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-family-body); font-size: var(--font-size-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input {
    background: var(--bg-tertiary);
}
.form-input:focus {
    outline: none;
    background: var(--bg-primary);
    border-color: rgba(230, 230, 230, 0.25);
}
.form-input[aria-invalid="true"] { border-color: var(--color-pink); }
textarea.form-input { resize: vertical; min-height: 130px; line-height: 1.6; }
select.form-input { cursor: pointer; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
    padding: 13px 22px; border: none; border-radius: var(--radius-md);
    font-family: var(--font-family-body); font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold); letter-spacing: 0.03em;
    cursor: pointer; transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
    background: #ffffff; color: #111111;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.btn-primary:not(:disabled):hover { background: var(--color-light-gray); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-primary); }
.btn-secondary:not(:disabled):hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-block { width: 100%; }

.alert {
    display: none; align-items: flex-start; gap: var(--spacing-sm);
    padding: 12px 14px; border-radius: var(--radius-md);
    font-size: var(--font-size-sm); line-height: 1.5; margin-bottom: var(--spacing-lg);
}
.alert.show { display: flex; }
.alert-error   { background: rgba(255, 10, 210, 0.06); border: 1px solid rgba(255, 10, 210, 0.25); color: #FFB3EE; }
.alert-success { background: rgba(0, 168, 137, 0.08); border: 1px solid rgba(0, 168, 137, 0.3); color: #6FE3CC; }
.alert-info    { background: rgba(49, 218, 230, 0.08); border: 1px solid rgba(49, 218, 230, 0.3); color: #A5EEF4; }
.field-error { color: #FF7BDD; font-size: var(--font-size-xs); min-height: 1em; }