:root {
    --ink: #181a17;
    --paper: #f4f1ea;
    --copper: #c9792d;
    --copper-light: #eba75e;
    --white: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: "Segoe UI", Arial, sans-serif; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-brand { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 8vw, 8rem); color: var(--white); background: linear-gradient(135deg, rgba(16,18,15,.98), rgba(40,43,35,.94)); overflow: hidden; }
.login-brand::after { content: ""; position: absolute; inset: 0; opacity: .13; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #fff 25%); pointer-events: none; }
.brand-mark { position: relative; z-index: 1; width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 4rem; border: 1px solid var(--copper-light); color: var(--copper-light); font-weight: 700; transform: rotate(45deg); }
.brand-mark > span { transform: rotate(-45deg); }
.login-brand p, .login-brand h1, .brand-detail { position: relative; z-index: 1; }
.login-brand p, .eyebrow { margin: 0 0 1rem; color: var(--copper); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.login-brand h1 { margin: 0 0 2rem; font-size: clamp(4.5rem, 9vw, 8.5rem); line-height: .82; letter-spacing: -.055em; text-transform: uppercase; }
.login-brand h1 em { color: var(--copper-light); font-weight: 500; }
.brand-detail { color: rgba(255,255,255,.65); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; }
.login-panel { display: grid; place-items: center; padding: 2rem; }
.login-box { width: min(430px, 100%); }
.login-box h2 { margin: 0 0 1rem; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; text-transform: uppercase; }
.intro { margin: 0 0 2rem; color: #64675f; line-height: 1.7; }
.login-box label { display: block; margin: 1.1rem 0 .45rem; font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.login-box input { width: 100%; min-height: 52px; padding: .8rem 1rem; border: 1px solid #b8b9b3; border-radius: 0; background: var(--white); font: inherit; }
.login-box input:focus { outline: 2px solid var(--copper); outline-offset: 2px; }
.login-box button, .primary-link { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding: .85rem 1.2rem; border: 0; color: var(--white); background: var(--copper); font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.login-box button:hover, .primary-link:hover { background: #a95f20; }
.public-link { display: inline-block; margin-top: 1.7rem; color: #5c5f57; font-size: .86rem; }
.alert { padding: .85rem 1rem; border-left: 4px solid #b43b32; color: #7b241d; background: #f9e8e6; }
.message-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(135deg, #232620, #111310); }
.message-box { width: min(560px, 100%); padding: clamp(2rem, 6vw, 4rem); background: var(--paper); }
.message-box h1 { margin: 0 0 1rem; font-size: clamp(2.8rem, 7vw, 4.8rem); line-height: .95; text-transform: uppercase; }
.message-box p:not(.eyebrow) { color: #5c5f57; line-height: 1.7; }
.message-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 2rem; border: 2px solid var(--copper); border-radius: 50%; color: var(--copper); font-size: 1.8rem; font-weight: 700; }

@media (max-width: 760px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-brand { min-height: 36vh; padding: 2.5rem 1.5rem; }
    .brand-mark { width: 46px; height: 46px; margin-bottom: 2rem; }
    .login-brand h1 { font-size: 4rem; }
    .login-panel { padding: 3rem 1.5rem; }
}