/* MissAppy v4 entry screens: a calm, framed application experience. */
:root { --auth-bg: var(--ui-bg, #f5f5f3); --auth-text: var(--ui-ink, #26382c); --auth-muted: var(--ui-muted, #7f897a); --auth-primary: var(--ui-primary, #23483e); --auth-primary-dark: var(--ui-primary-strong, #18382f); --auth-border: var(--ui-line, #e1e8dc); }
body.auth-page { padding: 18px; background: var(--ui-bg, #f5f5f3); font-family: "Segoe UI", Arial, sans-serif; }
.auth-shell { max-width: 1540px; min-height: calc(100dvh - 36px); margin: 0 auto; grid-template-columns: minmax(400px,1fr) minmax(440px,1fr); overflow: hidden; background: var(--ui-surface, #fff); border: 1px solid var(--ui-line, #e5e9e2); border-radius: 20px; }
.auth-panel { padding: 40px 50px; background: var(--ui-surface, #fff); }
.auth-brand img { width: 155px; height: 40px; filter: grayscale(1); }
.auth-content { width: min(100%,380px); padding: 42px 0; }
.auth-eyebrow { padding: 0; color: var(--ui-muted, #8b9c7e); background: none; border: 0; border-radius: 0; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; }
.auth-content h1 { margin-top: 10px; color: var(--ui-ink, #283c2c); font-size: clamp(27px,2.7vw,35px); font-weight: 600; letter-spacing: -1.1px; line-height: 1.18; }
.auth-subtitle { margin: 13px 0 28px; color: var(--ui-muted, #8a9880); font-size: 12px; line-height: 1.75; }
.auth-form { gap: 17px; }
.auth-field { gap: 7px; color: var(--ui-muted, #718365); font-size: 11px; font-weight: 600; }
.auth-input-wrap { min-height: 47px; padding: 0 13px; background: var(--ui-bg, #fbfcf9); border: 1px solid var(--ui-line, #e2e9da); border-radius: 8px; box-shadow: none; }
.auth-input-wrap input { height: 45px !important; font-size: 12px; }
.auth-input-wrap:focus-within { border-color: var(--ui-muted, #88a179); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-ink, #5c8952) 6.3%, transparent); }
.auth-input-wrap > i { color: var(--ui-muted, #9aaa8d); font-size: 15px; }
.auth-options { color: var(--ui-muted, #a0ae94); font-size: 10px; }
.auth-page a { color: var(--ui-ink, #5f7b4f); font-weight: 500; }
.auth-primary-button, .auth-page .login-btn, .auth-page button.sign-up { min-height: 46px; background: var(--ui-primary, #23483e); border-radius: 8px; box-shadow: none; font-size: 12px; font-weight: 600; }
.auth-primary-button:hover, .auth-page .login-btn:hover, .auth-page button.sign-up:hover { background: var(--ui-primary-strong, #18382f); box-shadow: none; }
.auth-switch { margin-top: 20px; color: var(--ui-muted, #94a487); font-size: 11px; line-height: 1.6; }
.auth-switch + .auth-switch { margin-top: 10px; }
.auth-footer { color: var(--ui-muted, #aeb9a2); font-size: 9px; }
.auth-visual { --ui-muted:#ddeafa; --ui-subtle:#f0f5fb; --ui-soft:#fff; min-height: calc(100dvh - 36px); background: var(--ui-primary, #23483e); border-left: 1px solid var(--ui-line, #dfe9d6); }
.auth-visual::before { position: absolute; top: -180px; left: -80px; width: 620px; height: 620px; content: ""; border: 1px solid color-mix(in srgb, var(--ui-subtle, #bed8b8) 8.2%, transparent); border-radius: 50%; box-shadow: 0 0 0 65px color-mix(in srgb, var(--ui-subtle, #bed8b8) 2.7%, transparent),0 0 0 125px color-mix(in srgb, var(--ui-subtle, #bed8b8) 2.7%, transparent); pointer-events: none; }
.auth-visual-content { position: relative; inset: auto; max-width: none; padding: clamp(38px,5vw,76px); }
.auth-visual-badge { padding: 0; color: var(--ui-subtle, #b4d0a7); background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 9px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.auth-visual-content h2 { margin: 28px 0 17px; color: var(--ui-soft, #f0f8e8); font-size: clamp(31px,3.5vw,48px); font-weight: 500; letter-spacing: -1.3px; line-height: 1.15; }
.auth-visual-content p { color: var(--ui-muted, #a2bd9e); font-size: 13px; line-height: 1.75; }
.auth-workspace-preview { margin-top: 40px; padding: 24px; color: var(--ui-subtle, #c6dabc); background: color-mix(in srgb, var(--ui-surface, #ffffff) 2.0%, transparent); border: 1px solid color-mix(in srgb, var(--ui-subtle, #aac99e) 14.5%, transparent); border-radius: 12px; box-shadow: 0 20px 45px color-mix(in srgb, var(--ui-ink, #092519) 12.5%, transparent); }
.auth-workspace-preview > header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; margin-bottom: 7px; border-bottom: 1px solid color-mix(in srgb, var(--ui-subtle, #bed8ad) 8.2%, transparent); }
.auth-workspace-preview > header strong { color: var(--ui-subtle, #d5e4c9); font-size: 12px; font-weight: 500; }
.auth-workspace-preview > header span { color: var(--ui-muted, #7c9e77); font-size: 9px; }
.auth-workspace-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--ui-subtle, #bed8ad) 4.3%, transparent); }
.auth-workspace-row > span:first-child { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: var(--ui-muted, #a9c69b); background: color-mix(in srgb, var(--ui-surface, #ffffff) 3.1%, transparent); border: 1px solid color-mix(in srgb, var(--ui-subtle, #b6d3ac) 8.2%, transparent); border-radius: 8px; font-size: 13px; }
.auth-workspace-row div { flex: 1; }
.auth-workspace-row strong { display: block; color: var(--ui-subtle, #c4d8b9); font-size: 11px; font-weight: 500; }
.auth-workspace-row small { display: block; margin-top: 3px; color: var(--ui-muted, #7c9e74); font-size: 9px; }
.auth-workspace-row > span:last-child { color: var(--ui-muted, #80a173); font-size: 15px; }
.auth-feature-grid { gap: 9px; margin-top: 26px; }
.auth-feature-grid span { padding: 7px 0; color: var(--ui-muted, #9dbd91); background: transparent; border: 0; box-shadow: none; font-size: 10px; }
.auth-feature-grid span + span { margin-left: 11px; padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--ui-subtle, #b8d5ac) 12.5%, transparent); border-radius: 0; }
.auth-page > .container { min-height: calc(100dvh - 36px); border: 1px solid var(--ui-line, #e5e9e2); border-radius: 20px; overflow: hidden !important; }
.auth-page > .container .form-sign-up, .auth-page > .container .form-login { min-height: calc(100dvh - 36px); background: var(--ui-surface, #fff); }
.auth-page > .container .admin-login-video { min-height: calc(100dvh - 36px); background: var(--ui-primary, #23483e); }
.auth-page > .container .admin-login-video video { min-height: calc(100dvh - 36px); filter: grayscale(1); opacity: .22; }
.auth-page > .container .admin-login-video::after { background: linear-gradient(0deg,var(--ui-primary, #23483e),color-mix(in srgb, var(--ui-primary, #23483e) 25.1%, transparent)); }
.auth-page .form-sign-up input:not([type="checkbox"]), .auth-page .form-login-item input:not([type="button"]):not([type="submit"]) { min-height: 46px; background: var(--ui-bg, #fbfcf9); border-color: var(--ui-line, #e2e9da); border-radius: 8px; font-size: 12px; }
.auth-secondary-button { min-height: 46px; color: var(--ui-muted, #7c926b); border-color: var(--ui-line, #e1e9d9); border-radius: 8px; font-size: 12px; }
@media (max-width: 980px) { body.auth-page { padding: 0; } .auth-shell { min-height: 100dvh; grid-template-columns: 1fr; border: 0; border-radius: 0; } .auth-panel { min-height: 100dvh; padding: 30px 24px; } .auth-page > .container { border: 0; border-radius: 0; } }
@media (max-width: 560px) { .auth-panel { padding: 27px 22px; } .auth-content { padding: 40px 0; } .auth-content h1 { font-size: 29px; } .auth-options { flex-direction: row; align-items: center; } }