.page { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: #202b29; }
.story { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 44px clamp(32px, 5vw, 80px) 30px; background: #edf2ee; border-right: 1px solid #e1e8e2; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: #254e43; color: white; font-size: 24px; font-weight: 600; letter-spacing: -2px; }
.brandName { font-size: 23px; font-weight: 650; letter-spacing: -1px; line-height: 1.2; }
.brandName > span { display: block; margin-top: 3px; color: #5f7269; font-size: 10px; font-weight: 500; letter-spacing: .6px; }
.storyContent { width: 100%; max-width: 490px; margin: 60px auto; }
.eyebrow { color: #526d60; font-size: 10px; letter-spacing: 2px; font-weight: 650; }
.story h1 { margin: 22px 0 20px; font-size: clamp(44px, 4.5vw, 68px); font-weight: 500; letter-spacing: -3.3px; line-height: 1.06; }
.storyContent > p { max-width: 355px; color: #617168; font-size: 15px; line-height: 1.8; }
.workspaceIllustration { margin-top: 42px; border: 1px solid #d6e0d9; border-radius: 14px; background: #fafcf9; box-shadow: 0 18px 50px -25px #476d5140; transform: rotate(-2deg); overflow: hidden; }
.illustrationHeader { display: flex; align-items: center; gap: 9px; padding: 13px 17px; border-bottom: 1px solid #e4ebe5; font-size: 10px; color: #5f7269; }
.illustrationMark { display: grid; place-items: center; width: 20px; height: 20px; background: #e4ede6; border-radius: 5px; font-weight: 700; }
.illustrationDots { margin-left: auto; font-size: 20px; line-height: 10px; }
.illustrationBody { display: grid; grid-template-columns: 52px 1fr; min-height: 240px; }
.illustrationNav { border-right: 1px solid #e4ebe5; padding: 20px 15px; display: flex; flex-direction: column; gap: 18px; }
.illustrationNav i { width: 17px; height: 17px; border: 1px solid #dce6de; border-radius: 5px; }
.illustrationNav i:first-child { background: #d3e2d7; border-color: #bfd3c5; }
.illustrationMain { padding: 23px 20px; }
.illustrationTitle { width: 40%; height: 7px; border-radius: 4px; background: #aabfb0; }
.illustrationSubtitle { width: 60%; height: 4px; margin: 8px 0 18px; background: #e2e9e2; }
.illustrationCards { display: flex; gap: 8px; margin-bottom: 14px; }
.illustrationCards span { flex: 1; height: 32px; border-radius: 6px; background: #edf2ec; border: 1px solid #e1e9e1; }
.illustrationCards span:first-child { background: #dbe9df; }
.illustrationRow { display: flex; align-items: center; gap: 10px; min-height: 35px; color: #607468; font-size: 10px; border-bottom: 1px solid #eaf0e9; }
.illustrationRow i { margin-left: auto; width: 22px; height: 5px; border-radius: 4px; background: #dce8de; }
.storyFooter { display: flex; justify-content: space-between; gap: 16px; color: #64766b; font-size: 10px; letter-spacing: .15px; }
.formPanel { min-width: 0; display: flex; flex-direction: column; padding: 45px clamp(28px, 5vw, 80px) 28px; }
.panelCaption { display: flex; justify-content: space-between; align-items: center; color: #728078; font-size: 9px; letter-spacing: 1.6px; }
.card { width: 100%; max-width: 385px; margin: auto; padding: 70px 0; }
.heading { margin-bottom: 30px; }
.heading h2 { margin: 12px 0; font-size: 32px; font-weight: 550; line-height: 1.2; letter-spacing: -1.1px; }
.heading p { margin: 0; color: #6d7972; font-size: 14px; line-height: 1.7; }
.stepLabel { color: #55776a; font-size: 10px; font-weight: 650; letter-spacing: 1.5px; text-transform: uppercase; }
.steps { display: flex; gap: 6px; margin-top: 22px; }
.steps span { width: 28px; height: 3px; border-radius: 2px; background: #e6ece7; }
.steps .stepActive { background: #426e59; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form label { display: flex; flex-direction: column; gap: 9px; color: #3e4b44; font-size: 12px; font-weight: 600; }
.form input { width: 100%; min-width: 0; height: 49px; padding: 0 14px; border: 1px solid #dce3de; border-radius: 9px; background: #fff; color: #223129; font: inherit; font-size: 14px; font-weight: 400; transition: border-color 150ms, box-shadow 150ms; }
.form input::placeholder { color: #8b968f; }
.form input:focus { outline: none; border-color: #688e78; box-shadow: 0 0 0 3px #406c5510; }
.form input:disabled { opacity: .6; cursor: not-allowed; }
.form p, .form small { margin: 0; color: #65736b; font-size: 12px; line-height: 1.7; }
.passwordField { position: relative; }
.passwordField input { padding-right: 49px; }
.revealButton { position: absolute; right: 3px; top: 3px; height: 43px; width: 43px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 6px; color: #738379; cursor: pointer; }
.revealButton:hover { color: #254e43; background: #f3f6f3; }
.forgotLink { align-self: flex-end; margin-top: -7px; color: #466958; font-size: 12px; text-decoration: none; }
.forgotLink:hover { text-decoration: underline; }
.primaryButton, .secondaryButton { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 150ms, border-color 150ms; }
.primaryButton { border: 1px solid #254e43; background: #254e43; color: #fff; }
.primaryButton:hover:not(:disabled) { background: #183d32; border-color: #183d32; }
.secondaryButton { border: 1px solid #dce3de; background: #fff; color: #506358; }
.secondaryButton:hover:not(:disabled) { background: #f3f6f3; }
.primaryButton:disabled, .secondaryButton:disabled { opacity: .55; cursor: not-allowed; }
.security { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin-top: 28px; padding-top: 23px; border-top: 1px solid #edf0ed; color: #758178; font-size: 11px; text-align: center; line-height: 1.7; }
.security svg { flex-shrink: 0; margin-top: 2px; }
.footer { color: #79847d; font-size: 10px; text-align: center; }
.error { padding: 12px 14px; border-radius: 8px; background: #fff3f1; border: 1px solid #f2d4ce; color: #a53829; font-size: 12px; line-height: 1.6; }
.otpInput { text-align: center; letter-spacing: .2em; font-size: 20px !important; }
.qr { display: grid; place-items: center; width: fit-content; max-width: 100%; margin: 0 auto; padding: 12px; border: 1px solid #e2e8e3; border-radius: 12px; background: #fff; }
.qr svg { max-width: 100%; height: auto; }
.manualSetup { border: 1px solid #e1e7e2; border-radius: 9px; padding: 13px; font-size: 12px; }
.manualSetup summary { cursor: pointer; font-weight: 600; }
.manualSetup > div { margin-top: 14px; display: grid; gap: 10px; }
.manualSetup code { padding: 10px; background: #f1f5f1; border-radius: 5px; overflow-wrap: anywhere; user-select: all; }
.recoveryGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recoveryGrid code { min-width: 0; padding: 11px; background: #f3f6f2; border: 1px solid #e6ebe3; border-radius: 6px; font-size: 12px; overflow-wrap: anywhere; }
.notice { padding: 13px; border: 1px solid #e5dfc6; border-radius: 8px; background: #faf8ee; font-size: 12px; line-height: 1.7; color: #746534; }
@media (min-width: 1600px) { .storyContent { max-width: 540px; } }
@media (max-width: 1000px) { .story { padding-left: 30px; padding-right: 30px; } .formPanel { padding-left: 32px; padding-right: 32px; } .story h1 { font-size: 46px; } .storyFooter > span:last-child { display: none; } }
@media (max-width: 760px) { .page { grid-template-columns: 1fr; } .story { padding: 25px 25px 20px; border-right: 0; border-bottom: 1px solid #e1e8e2; } .storyContent, .storyFooter { display: none; } .formPanel { padding: 28px 25px; } .panelCaption { display: none; } .card { padding: 20px 0 48px; } .heading h2 { font-size: 30px; } .form input { font-size: 16px; } .footer { margin-top: auto; } }
@media (prefers-reduced-motion: reduce) { .page *, .page *::before { transition: none; } }