:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #18352e; background: #eef3ef; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 10% 10%, #dbeadf 0, transparent 45%), #eef3ef; }
.shell { width: min(1080px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; padding: 3rem 0; }
.brand-panel, .login-panel { border: 1px solid #d2dfd5; border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 18px 60px rgba(25,55,40,.10); }
.brand-panel { padding: clamp(2rem, 5vw, 4rem); background: linear-gradient(145deg, #173d32, #236049); color: #f7fbf7; border-color: transparent; }
.login-panel { padding: clamp(2rem, 5vw, 3rem); }
.mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 16px; font-weight: 800; letter-spacing: .06em; margin-bottom: 3rem; }
.eyebrow { margin: 0 0 .75rem; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; opacity: .76; }
h1, h2 { margin: 0; letter-spacing: -.03em; line-height: 1.05; }
h1 { font-size: clamp(2.5rem, 8vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
.intro { max-width: 27rem; margin: 1.5rem 0 0; font-size: 1.2rem; line-height: 1.5; color: #d6e8d9; }
.notice { margin: 4rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.25); color: #c4ddc9; line-height: 1.55; }
.panel-head > p:last-child { max-width: 30rem; color: #597066; line-height: 1.55; }
.login-form { display: grid; gap: .65rem; margin-top: 2rem; }
label { font-weight: 700; font-size: .9rem; }
input, button { width: 100%; border: 1px solid #cbd9cf; border-radius: 12px; padding: .85rem 1rem; font: inherit; }
input { margin-bottom: .75rem; background: #f5f8f5; }
button { margin-top: .5rem; background: #b8c8bc; color: #496052; border-color: #b8c8bc; font-weight: 750; cursor: not-allowed; }
.status { color: #6c7d71; font-size: .9rem; line-height: 1.45; }
@media (max-width: 760px) { .shell { width: calc(100vw - 32px); max-width: calc(100vw - 32px); grid-template-columns: 1fr; align-items: start; padding: 1.25rem 0 2rem; } .brand-panel, .login-panel { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; border-radius: 18px; } .brand-panel { padding: 2rem; } .login-panel { padding: 2rem; } .mark { margin-bottom: 2rem; } .notice { margin-top: 2.5rem; } .intro, .notice, .panel-head > p:last-child { overflow-wrap: anywhere; word-break: break-word; } }