.templates-page { max-width: 1140px; }
.template-filter { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; }
.template-filter button { padding: 8px 13px; border: 1px solid #e0e4eb; border-radius: 999px; background: #fff; color: #667085; font-size: .78rem; font-weight: 650; white-space: nowrap; }
.template-filter button:hover,.template-filter button.active { border-color: #70112f; background: #f8eef2; color: #70112f; }
.template-detail-info { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; }
.template-detail-note { width: 100%; padding: 14px; border-radius: 10px; background: #f6f7f9; }
.template-detail-note strong,.template-detail-note span { display: block; }
.template-detail-note strong { margin-bottom: 4px; font-size: .8rem; }
.template-detail-note span { color: #667085; font-size: .76rem; }
.template-detail-preview { display: flex; min-height: 680px; flex-direction: column; }
.template-detail-preview>header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px; border-bottom: 1px solid #e5e8ee; }
.template-detail-preview>header strong,.template-detail-preview>header small { display: block; }
.template-detail-preview>header small { color: #7a8495; font-size: .72rem; }
.template-detail-stage { display: flex; flex: 1; justify-content: center; padding: 24px; overflow: auto; background: #e9edf3; }
.template-detail-stage iframe { width: 100%; max-width: 760px; min-height: 600px; border: 0; background: #fff; box-shadow: 0 8px 28px #17203318; transition: width .2s; }
.template-detail-stage iframe.mobile { width: 390px; }
.auth-shell { display: grid; grid-template-columns: minmax(360px,1fr) minmax(440px,.8fr); padding: 0; }
.auth-intro { display: flex; flex-direction: column; padding: 42px clamp(35px,7vw,100px); background: linear-gradient(145deg,#fff 25%,#f4e8ed); }
.auth-brand { align-self: flex-start; }
.auth-intro-copy { max-width: 590px; margin: auto 0; }
.auth-intro-copy h1 { margin: 12px 0 18px; font-size: clamp(2.5rem,5vw,4.3rem); line-height: 1.05; letter-spacing: -.04em; }
.auth-intro-copy>p:last-child { max-width: 520px; color: #667085; font-size: 1.08rem; }
.auth-intro>small { color: #8a92a0; }
.auth-form-side { display: grid; place-items: center; padding: 35px; background: #f7f8fa; }
.auth-card { width: min(430px,100%); padding: 36px; border: 1px solid #e1e5ec; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px #1720330d; }
@media(max-width:850px){.auth-shell{display:block}.auth-intro{display:none}.auth-form-side{min-height:100vh;padding:20px}.auth-card{padding:28px}.template-detail-preview{min-height:570px}.template-detail-stage{padding:10px}}