* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; color: #18221f; background: #f7f8f5; font: 16px system-ui, sans-serif; }
.card { width: min(calc(100% - 32px), 460px); padding: 32px; border: 1px solid #dce3dc; border-radius: 16px; background: #fff; box-shadow: 0 12px 36px #17351a12; }
h1 { margin: 0 0 8px; font-size: 28px; }
p { color: #4a5b50; line-height: 1.5; }
label { display: block; margin: 18px 0 6px; font-weight: 600; }
input { width: 100%; padding: 12px; border: 1px solid #9eaaa0; border-radius: 8px; font: inherit; }
button { width: 100%; margin-top: 20px; padding: 12px; border: 0; border-radius: 8px; color: white; background: #12604a; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .6; }
#status { min-height: 24px; font-size: 14px; }
#sessionBar { position: fixed; z-index: 1001; inset: 0 0 auto; height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 16px; color: #f4f6f7; background: #101113; border-bottom: 1px solid #292c30; font-size: 13px; }
#logout { width: auto; min-height: 32px; margin: 0; padding: 6px 12px; font-size: 13px; }
#frameHost.active { position: fixed; z-index: 1000; inset: 48px 0 0; background: #fff; }
iframe { display: block; width: 100%; height: 100%; border: 0; }
[hidden] { display: none !important; }