:root {
    --noir-black: #08090c;
    --anthracite: #17191f;
    --bordeaux: #4b1e2a;
    --bottle-green: #18322d;
    --aged-gold: #c2a46d;
    --fog: #e6dfd2;
    --panel-bg: rgba(22, 24, 29, 0.92);
    --border-soft: rgba(194, 164, 109, 0.22);

    --error: #d36b81;
    --success: #62c1a8;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 18%, rgba(194, 164, 109, 0.16), transparent 28%),
        radial-gradient(circle at 85% 14%, rgba(24, 50, 45, 0.5), transparent 35%),
        linear-gradient(180deg, #101015 0%, #07080d 100%);
    color: var(--fog);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.17'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
    opacity: 0.18;
    z-index: 1;
}

body::after {
    content: "";
    position: fixed;
    inset: -8vmax;
    pointer-events: none;
    background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.74) 100%);
    z-index: 1;
}

.app-shell {
    position: relative;
    z-index: 2;
}

.brand-title,
.panel-title,
.section-title,
.eyebrow {
    font-family: "Cinzel", serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    backdrop-filter: blur(2px);
    background: rgba(8, 9, 12, 0.85);
    border-bottom: 1px solid var(--border-soft);
}

.register-shell {
    position: relative;
    z-index: 2;
}

.register-panel {
    max-width: 620px;
    padding: 1.1rem;
    background: linear-gradient(145deg, rgba(75, 30, 42, 0.13), transparent 40%),
                linear-gradient(180deg, var(--panel-bg) 0%, rgba(14, 16, 21, 0.95) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    box-shadow: 0 1.2rem 2.3rem rgba(0, 0, 0, 0.45);
}

.eyebrow {
    font-size: .8rem;
    color: var(--aged-gold);
}

.panel-title {
    color: #f4ead5;
}

.panel-subtitle {
    color: rgba(230, 223, 210, .8);
}

.sub-panel {
    border-radius: .95rem;
    border: 1px solid rgba(194, 164, 109, 0.22);
    background: rgba(8, 9, 12, 0.45);
    padding: 1rem;
}

.section-title {
    color: var(--aged-gold);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-label {
    color: rgba(230, 223, 210, .9);
    font-weight: 600;
    margin-bottom: .4rem;
}

.form-control {
    background-color: rgba(7, 9, 12, 0.78);
    border: 1px solid rgba(194, 164, 109, 0.3);
    color: var(--fog);
    border-radius: .8rem;
    padding: .7rem .85rem;
}

.form-control::placeholder {
    color: rgba(230, 223, 210, .5);
}

.form-control:focus {
    background-color: rgba(7, 9, 12, 0.95);
    border-color: rgba(194, 164, 109, 0.72);
    box-shadow: 0 0 0 0.22rem rgba(194, 164, 109, 0.13);
    color: var(--fog);
}

.form-control.is-invalid {
    border-color: rgba(211, 107, 129, 0.85);
    box-shadow: 0 0 0 0.22rem rgba(211, 107, 129, 0.2);
}

.form-control.is-valid {
    border-color: rgba(98, 193, 168, 0.75);
    box-shadow: 0 0 0 0.22rem rgba(98, 193, 168, 0.12);
}

.field-error {
    min-height: 1.1rem;
    margin-top: .38rem;
    font-size: .78rem;
    color: var(--error);
}

.btn {
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-weight: 600;
    font-size: .82rem;
    min-height: 2.75rem;
}

.btn-primary,
.btn-outline-light:hover {
    background: linear-gradient(110deg, #18322d, #245146);
    border-color: rgba(194, 164, 109, 0.5);
    color: #f5f0e4;
}

.btn-outline-light {
    border-color: rgba(194, 164, 109, 0.55);
    color: var(--aged-gold);
    background: transparent;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

.btn-loader {
    width: 1rem;
    height: 1rem;
    margin-left: .5rem;
    border: 2px solid rgba(245, 240, 228, .25);
    border-top-color: rgba(245, 240, 228, .95);
    border-radius: 50%;
    display: inline-block;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ui-feedback {
    border-radius: .8rem;
    border: 1px solid transparent;
    padding: .65rem .8rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.ui-feedback.state-error {
    color: #ffd6df;
    border-color: rgba(211, 107, 129, 0.45);
    background: rgba(75, 30, 42, 0.45);
}

.ui-feedback.state-success {
    color: #ddfff6;
    border-color: rgba(98, 193, 168, 0.5);
    background: rgba(24, 50, 45, 0.45);
}

.ui-feedback.state-loading {
    color: #f5e9d0;
    border-color: rgba(194, 164, 109, 0.5);
    background: rgba(194, 164, 109, 0.12);
}

.link-action {
    margin-top: .9rem;
    background: transparent;
    border: 0;
    color: var(--aged-gold);
    text-decoration: underline;
    padding: 0;
}

.link-action:hover {
    color: #f5e9d0;
}

.helper-text {
    color: rgba(230, 223, 210, .75);
    font-size: .85rem;
}

.helper-link {
    color: var(--aged-gold);
    text-decoration: underline;
}

.helper-link:hover {
    color: #f5e9d0;
}

@media (min-width: 768px) {
    .register-panel { padding: 1.5rem; }
    .sub-panel { padding: 1.2rem; }
}