/* A paper studio: expressive editorial canvas, quiet and focused sign-in. */
.app-body--auth { --text: #282a25; --text-muted: #66685f; --accent: #b8442e; --border: #282a2526; background: #eeeae1; color: var(--text); align-items: stretch; color-scheme: light; }
.app-body--auth .app-grain { opacity: .035; }
.app-body--auth .auth-main { width: 100%; max-width: 1520px; margin: auto; padding: 32px 5vw 56px; flex: 1 0 auto; }
.auth-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 25px; border-bottom: 1px solid var(--border); }
.auth-brand { display: flex; align-items: center; gap: 12px; font-size: 25px; letter-spacing: -.06em; }
.auth-brand .app-logo__mark { background: #b8442e; color: #fff8ea; border: 0; border-radius: 50%; width: 38px; height: 38px; font-size: 24px; }
.auth-header > p { margin: 0; font-size: 11px; letter-spacing: .08em; color: #65675f; }
.auth-header > p > span + span { margin: 0 20px; color: #b8442e; }
.auth-scene { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .85fr); align-items: center; gap: clamp(50px, 7vw, 130px); padding-top: 54px; }
.auth-visual { order: -1; min-width: 0; }
.auth-visual__tag { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .12em; margin: 0 0 22px; }
.auth-visual__tag::before { content: ''; width: 7px; height: 7px; background: #b8442e; border-radius: 50%; }
.auth-visual__title { margin: 0; font-family: var(--serif); font-size: clamp(48px, 5.4vw, 80px); font-weight: 400; line-height: 1.22; letter-spacing: -.055em; }
.auth-visual__title > span { color: #b8442e; }
.auth-visual__copy { margin: 22px 0 0; font-size: 13px; line-height: 1.95; color: #66685f; }
.auth-showcase { position: relative; display: flex; align-items: center; height: 310px; margin: 32px 0 0; padding-left: 26px; }
.auth-showcase::before { content: ''; position: absolute; inset: 40px 5px 10px 0; border-radius: 50%; border: 1px solid #b0ac9d; transform: rotate(-12deg); }
.auth-showcase__index { position: absolute; right: 0; top: 0; font-size: 9px; letter-spacing: .16em; color: #737468; writing-mode: vertical-rl; }
.auth-paper { position: relative; width: 52%; max-width: 280px; padding: 20px 24px 16px; background: #faf8f0; color: #303b35; box-shadow: 0 16px 25px #30362a16; transform: rotate(-8deg); transition: transform .5s var(--ease-out); }
.auth-paper__meta { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #303b3540; font-size: 8px; letter-spacing: .12em; }
.auth-paper__title { font-family: var(--serif); font-size: 26px; line-height: 1.4; margin: 15px 0; }
.auth-paper__rule { display: block; height: 2px; width: 22px; background: #b8442e; }
.auth-paper__body { font-size: 10px; line-height: 1.8; color: #75786e; margin: 12px 0; }
.auth-paper__line { display: block; height: 2px; background: #deded2; margin: 6px 0; }
.auth-paper__line--short { width: 65%; }
.auth-paper__caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 10px; border-top: 1px solid #303b3526; font-size: 8px; }
.auth-sticker { position: relative; display: flex; flex-direction: column; width: 43%; max-width: 226px; aspect-ratio: 3/4; margin-left: -10px; margin-top: 15px; padding: 20px; background: #b8432f; color: #fff0d6; box-shadow: 0 18px 32px #4b241725; transform: rotate(9deg); transition: transform .5s var(--ease-out); }
.auth-sticker__meta { margin: 0 0 14px; font-size: 8px; letter-spacing: .14em; line-height: 1.5; }
.auth-sticker__title { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 31px); line-height: 1.3; }
.auth-sticker__flower { align-self: flex-end; font-size: 46px; line-height: 1; margin: 8px 0; }
.auth-sticker__caption { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid #fff0d650; font-size: 8px; }
.auth-capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--border); margin-top: 30px; padding-top: 18px; }
.auth-capabilities > div { display: flex; gap: 12px; }
.auth-capabilities > div > span { color: #b8442e; font-size: 10px; padding-top: 3px; }
.auth-capabilities p { margin: 0; }
.auth-capabilities strong { font-size: 12px; font-weight: 500; }
.auth-capabilities small { display: block; margin-top: 6px; font-size: 10px; line-height: 1.8; color: #66685f; }
.auth-form { --text: #f3efe3; --text-muted: #b2b6a8; --accent: #e2c6a1; width: 100%; max-width: 460px; justify-self: end; padding: 42px 36px 28px; border: 1px solid #424a3d; border-radius: 3px; background: #242d27; color: var(--text); box-shadow: 0 24px 64px #27302616; color-scheme: dark; }
.auth-form__heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 44px; }
.auth-form__kicker { font-size: 9px; letter-spacing: .18em; color: #c7cbbd; margin: 0; }
.auth-form__heading > span { font-size: 24px; color: #e2c6a1; }
.auth-form__title { margin: 0; font-family: var(--serif); font-size: 38px; font-weight: 400; letter-spacing: -.04em; }
.auth-form__intro { margin: 12px 0 36px; color: #b2b6a8; font-size: 12px; line-height: 1.8; }
.auth-form .field { display: grid; gap: 10px; margin: 0 0 23px; }
.auth-form .field > span { font-size: 12px; color: #e0e1d6; }
.auth-form input:not([type=hidden]) { width: 100%; min-width: 0; min-height: 52px; padding: 14px; border: 1px solid #5d665b; border-radius: 2px; background: #ffffff05; color: #f3efe3; font-size: 16px; transition: border-color .2s, background .2s; }
.auth-form input::placeholder { color: #a7ad9f; font-size: 12px; }
.auth-form input:focus-visible { outline: 2px solid #e2c6a1; outline-offset: 3px; background: #ffffff09; }
.auth-form input:autofill { box-shadow: 0 0 0 60px #303b32 inset; -webkit-text-fill-color: #f3efe3; }
.auth-password { position: relative; }
.auth-password input { padding-right: 65px !important; }
.auth-password__toggle { position: absolute; right: 10px; top: 6px; min-height: 40px; min-width: 44px; border: 0; background: transparent; color: #d8d5c4; font-size: 11px; cursor: pointer; }
.auth-password__toggle[hidden] { display: none; }
.auth-submit { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 54px; margin-top: 8px; padding: 14px 18px; border: 1px solid #e2c6a1; border-radius: 2px; background: #e2c6a1; color: #242d27; font-size: 13px; box-shadow: none; transition: background .2s; }
.auth-submit > span { font-size: 21px; transition: transform .25s; }
.auth-submit:hover { background: #f4d9b6; box-shadow: none; transform: none; }
.auth-submit:hover > span { transform: translate(3px,-3px); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: .7; cursor: wait; }
.auth-form button:focus-visible, .auth-brand:focus-visible { outline: 2px solid #b8442e; outline-offset: 5px; }
.auth-form button:focus-visible { outline-color: #e2c6a1; }
.auth-form__note { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid #ffffff20; color: #b2b6a8; font-size: 10px; text-align: center; letter-spacing: .08em; }
.auth-form__error { border-left: 2px solid #efac92; background: #efac9210; padding: 12px; margin-bottom: 24px; color: #ffd0bd; font-size: 13px; line-height: 1.7; }
.app-body--auth .app-footer { background: transparent; color: #66685f; }
.app-body--auth .app-footer__inner { max-width: 1520px; padding-inline: 5vw; }
.app-body--auth .app-footer__base { border-color: #282a2526; }
@media (hover: hover) { .auth-showcase:hover .auth-paper { transform: translateY(-5px) rotate(-11deg); } .auth-showcase:hover .auth-sticker { transform: translate(5px,-6px) rotate(12deg); } }
@keyframes auth-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.auth-visual, .auth-form { animation: auth-reveal .8s var(--ease-out) both; }
.auth-form { animation-delay: .12s; }
@media (min-width: 1600px) { .auth-scene { padding-block: 70px 30px; } }
@media (max-width: 1000px) { .auth-scene { gap: 40px; grid-template-columns: 1fr 1fr; } .auth-form { padding: 32px 24px 24px; } .auth-header__edition { display: none; } .auth-showcase { padding-left: 10px; height: 280px; } .auth-paper { padding: 16px; } .auth-sticker { padding: 16px; } .auth-paper__title { font-size: 23px; } }
@media (max-width: 760px) { .app-body--auth .auth-main { padding: 22px 24px 36px; } .auth-header { padding-bottom: 20px; } .auth-header > p { font-size: 10px; letter-spacing: 0; } .auth-header > p > span + span { display: none; } .auth-scene { display: flex; flex-direction: column; gap: 36px; padding-top: 32px; max-width: 480px; margin-inline: auto; } .auth-form { order: -1; max-width: none; padding: 28px 26px 24px; } .auth-form__heading { margin-bottom: 28px; } .auth-form__title { font-size: 34px; } .auth-form__intro { margin-bottom: 28px; } .auth-visual { width: 100%; } .auth-visual__title { font-size: 48px; } .auth-visual__tag { margin-bottom: 18px; } .auth-showcase { height: 310px; margin-top: 24px; padding-left: 14px; } .auth-sticker__title { font-size: 28px; } .auth-paper__title { font-size: 27px; } .auth-capabilities { margin-top: 20px; } .app-body--auth .app-footer__inner { padding-inline: 24px; } }
@media (max-width: 360px) { .app-body--auth .auth-main { padding-inline: 16px; } .auth-form { padding-inline: 20px; } .auth-brand { font-size: 22px; } .auth-showcase { height: 285px; } .auth-paper__title, .auth-sticker__title { font-size: 23px; } .auth-sticker { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .auth-visual, .auth-form { animation: none; } .app-body--auth *, .app-body--auth *::before { transition: none !important; } }