:root {
    color-scheme: dark;
    --green: #17211d;
    --panel: #202b25;
    --gold: #d5ad63;
    --text: #f5f1e8;
    --muted: #a9b0a9;
    --line: #465149;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(ellipse at top left, #34443a, transparent 55%), var(--green);
    color: var(--text);
    font-family: Inter, sans-serif;
}

.site-tabs {
    position: absolute;
    top: 24px;
    right: max(28px, calc((100% - 920px) / 2));
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 70%;
}

.site-tabs a {
    padding: 10px 13px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .08);
    color: var(--text);
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}

.site-tabs a:hover, .site-tabs a.active {
    background: var(--gold);
    color: #1c211c;
}

@media (max-width: 760px) {
    .site-tabs { position: relative; top: auto; right: auto; max-width: none; justify-content: center; padding: 14px 12px 0; }
    .brand { top: 70px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
    .login-layout { padding-top: 90px; }
}

.login-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 18px;
}

.brand {
    position: absolute;
    top: 28px;
    left: max(28px, calc((100% - 920px) / 2));
    color: var(--text);
    font-family: Cinzel, serif;
    font-size: 18px;
    text-decoration: none;
}

.brand span { color: var(--gold); }

.login-card {
    width: min(100%, 440px);
    padding: 38px;
    border: 1px solid rgba(213, 173, 99, .22);
    border-radius: 18px;
    background: rgba(32, 43, 37, .96);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}

.back-link { color: var(--muted); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--gold); }
.eyebrow { margin: 32px 0 8px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .15em; }
h1 { margin: 0; font-family: Cinzel, serif; font-size: 32px; font-weight: 600; }
.intro { margin: 10px 0 26px; color: var(--muted); font-size: 14px; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tab { padding: 12px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.tab.active { border-color: var(--gold); color: var(--gold); }

form { display: grid; gap: 10px; }
label { margin-top: 8px; color: #e4e5dd; font-size: 13px; }
input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: #17211d; color: var(--text); font: inherit; }
textarea { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: #17211d; color: var(--text); font: inherit; resize: vertical; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213, 173, 99, .13); }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213, 173, 99, .13); }
.submit-button, .secondary-button { min-height: 46px; margin-top: 12px; border: 0; border-radius: 8px; background: var(--gold); color: #1c211c; cursor: pointer; font: inherit; font-weight: 600; }
.submit-button:disabled { cursor: wait; opacity: .65; }
.message { min-height: 20px; margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.message.error { color: #ffaaa0; }
.message.success { color: #a9d7ad; }
.signed-in-panel { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #17211d; font-size: 14px; overflow-wrap: anywhere; }
.signed-in-heading { margin: 0 0 8px; color: var(--gold); font-family: Cinzel, serif; font-size: 20px; }
.account-email { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.signed-in-panel form { display: grid; gap: 10px; }
.signed-in-panel .message { margin-top: 8px; }
.continue-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin-top: 12px; border-radius: 8px; background: var(--gold); color: #1c211c; font-weight: 600; text-decoration: none; }
.continue-button:hover { background: #e1bd78; }
.secondary-button { width: 100%; background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.privacy-note { margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.hidden { display: none !important; }

@media (max-width: 480px) {
    .brand { position: static; margin-bottom: 22px; }
    .login-layout { display: flex; flex-direction: column; justify-content: center; }
    .login-card { padding: 28px 22px; }
}

@media (max-width: 360px) {
    .login-layout { padding: 18px 10px; }
    .login-card { padding: 22px 16px; }
    h1 { font-size: 28px; }
}