#auth-screen{--primary:#b45309;--primary-light:#fff3df;background:radial-gradient(ellipse at 20% 20%,#ffedc8,transparent 65%),#faf8f3!important;color:#17334b}
#auth-screen .landing-container{gap:40px;max-width:1120px}
#auth-screen .auth-box{border:1px solid #eadfcf;box-shadow:0 16px 50px #17334b0b;background:#fff;border-radius:24px}
#auth-screen .auth-box h2{color:#17334b!important;letter-spacing:-.025em}
#auth-screen .auth-subtitle{line-height:1.7}
#auth-screen .auth-input{border:1px solid #dce3e9;border-radius:12px;background:#fbfcfd;font-family:inherit}
#auth-screen .auth-input:focus{border-color:#e99a2e;box-shadow:0 0 0 3px #ffedcb;outline:none}
#auth-screen #authBtn{background:linear-gradient(110deg,#c66a0a,#e99a2e)!important;box-shadow:0 6px 15px #c66a0a22}
#auth-screen .auth-switch span,#auth-screen .auth-link{color:#a85308!important}
.google-auth-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px;border:1px solid #dce3e9;border-radius:12px;background:#fff;color:#17334b;font:700 15px inherit;cursor:pointer;min-height:48px}
.google-auth-btn:hover{background:#f8fafc;border-color:#94a3b8}.google-auth-btn:disabled{opacity:.6;cursor:wait}.google-auth-btn:focus-visible{outline:3px solid #e99a2e;outline-offset:3px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:#64748b;font-size:12px}.auth-divider:before,.auth-divider:after{content:'';height:1px;flex:1;background:#e5e9ec}
#auth-screen .preview-label{color:#a85308!important;letter-spacing:.06em;font-size:11px!important;text-align:center}
#auth-screen .preview-card{border:1px solid #eadfcf;border-radius:20px;overflow:hidden;box-shadow:0 16px 40px #17334b0c}
#auth-screen .preview-body{padding:18px!important}
.preview-session-list{margin:12px 0 16px;padding:12px;background:#f8fafc;border-radius:10px}.preview-session-list>span{font-size:11px;color:#64748b}.preview-session-list>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:7px}.preview-session-list b{padding:5px 1px;border:1px solid #e2e8f0;border-radius:6px;background:white;text-align:center;font-size:11px;font-weight:600}
#auth-screen .preview-qr{width:112px;height:112px;flex-shrink:0;object-fit:contain;background:#fff;padding:5px;border:1px solid #e5e9ec;border-radius:8px}
#auth-screen .dot-indicator.active{background:#c66a0a!important}#auth-screen .dot-indicator{background:#eadfcf}
@media(max-width:600px){#auth-screen .landing-container{gap:24px}#auth-screen .auth-box{padding:26px 22px!important}.google-auth-btn{font-size:14px}#auth-screen .preview-qr{width:105px;height:105px}}
#auth-screen{align-items:flex-start}#auth-screen .landing-container{margin:auto}#auth-screen .preview-slider-box{border:1px solid #eadfcf;box-shadow:0 16px 40px #17334b0b}
@media(max-width:850px){#auth-screen .auth-box{order:-1}#auth-screen .landing-container{padding:12px 0}#auth-screen .preview-slider-box{max-width:100%;width:380px}}

/* Fan of the same three receipt palettes used in the tutor workspace. */
#auth-screen .landing-container{max-width:1280px;gap:54px;flex-wrap:nowrap;justify-content:space-between;padding:36px 24px}
#auth-screen .auth-box{flex:0 0 400px}
#auth-screen .receipt-showcase{width:700px;max-width:calc(100% - 454px);flex:1;padding:0;background:transparent;border:0;box-shadow:none}
#auth-screen .receipt-showcase .preview-label{margin-bottom:28px;color:#9b682c!important;font-weight:600;letter-spacing:.09em}
.receipt-fan{position:relative;width:100%;height:690px;isolation:isolate}
.receipt-demo{--demo-ink:#b96c22;--demo-line:#efd3b5;--demo-tint:#fff9f1;--demo-header:linear-gradient(120deg,#f39430,#f6bd51);position:absolute;left:50%;top:28px;width:320px;background:white;color:#4f4659;border:0;border-radius:16px;overflow:hidden;box-shadow:0 20px 45px #17334b1a;transition:transform .35s ease,filter .35s ease;transform-origin:50% 80%;text-align:left;pointer-events:none}
.receipt-demo.theme-2{--demo-ink:#296caa;--demo-line:#bfd9ee;--demo-tint:#f4f9fd;--demo-header:linear-gradient(120deg,#397dc6,#55b5ce)}
.receipt-demo.theme-3{--demo-ink:#7952a5;--demo-line:#d6c5e8;--demo-tint:#faf7fd;--demo-header:linear-gradient(120deg,#9c62de,#d454a0)}
#auth-screen .receipt-demo,#auth-screen .receipt-demo *{font-family:TeacherNoto,'Segoe UI',sans-serif;letter-spacing:normal}
.receipt-demo[data-position=center]{transform:translateX(-50%);z-index:3;filter:none}
.receipt-demo[data-position=left]{transform:translateX(calc(-50% - 142px)) translateY(22px) rotate(-13deg) scale(.93);z-index:1;filter:brightness(.99)}
.receipt-demo[data-position=right]{transform:translateX(calc(-50% + 142px)) translateY(22px) rotate(13deg) scale(.93);z-index:2;filter:brightness(.99)}
.demo-receipt-header{text-align:center;background:var(--demo-header);color:white;padding:20px 12px}
.demo-receipt-header small{font-size:10px;font-weight:500;letter-spacing:.6px!important}.demo-receipt-header h3{font-size:22px;font-weight:650;margin:6px 0 0}
.demo-receipt-body{padding:20px 18px 14px;font-size:11px;line-height:1.65}
.demo-row{display:flex;gap:12px;justify-content:space-between;padding:4px 0;font-weight:400}.demo-row b{font-weight:600;text-align:right}.demo-row .demo-name{color:var(--demo-ink);font-size:13px}
.demo-total{background:var(--demo-tint);border:1px solid var(--demo-line);border-radius:12px;padding:13px;text-align:center;margin:15px 0;color:var(--demo-ink)}.demo-total small{display:block;font-size:9px;font-weight:500}.demo-total strong{display:block;font-size:27px;font-weight:650;margin-top:3px}
.demo-dates>small{display:block;text-align:center;color:var(--demo-ink);font-size:9px;margin-bottom:8px}.demo-dates>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.demo-dates span{border:1px solid var(--demo-line);background:var(--demo-tint);border-radius:6px;color:var(--demo-ink);font-size:10px;font-weight:500;padding:4px 1px;text-align:center}
.demo-note{font-size:10px;font-weight:400;color:#786953;text-align:center;padding:11px 8px;margin:14px 0;border:1px solid var(--demo-line);background:var(--demo-tint);border-radius:10px;min-height:55px}
.demo-bank{display:flex;align-items:center;gap:10px;justify-content:space-between;padding-top:13px;border-top:1px dashed var(--demo-line);font-size:10px;font-weight:400}.demo-bank b,.demo-bank strong{font-weight:600}.demo-bank strong{color:var(--demo-ink)}.demo-bank img{width:110px;height:110px;object-fit:contain;background:white;flex-shrink:0}.demo-footer{font-size:8px;font-weight:400;color:#87909c;text-align:center;margin:10px 0 0}
.demo-theme-controls{display:flex;justify-content:center;gap:8px;margin:12px 0}.demo-theme-button{padding:8px 20px;border:1px solid #eadfcf;border-radius:99px;background:#fff;color:#627184;font:600 12px TeacherNoto,'Segoe UI',sans-serif;cursor:pointer}.demo-theme-button.active{background:#fff0d4;color:#a85308;border-color:#eab976}.demo-theme-button:nth-child(2).active{background:#f4f9fd;color:#296caa;border-color:#bfd9ee}.demo-theme-button:nth-child(3).active{background:#faf7fd;color:#7952a5;border-color:#d6c5e8}.demo-theme-button:focus-visible{outline:3px solid #e99a2e;outline-offset:3px}#demo-caption{text-align:center;font-size:11px;color:#786953;margin:12px 0 0}
@media(max-width:1100px) and (min-width:851px){#auth-screen .landing-container{gap:24px;padding-inline:10px}#auth-screen .auth-box{flex-basis:360px}#auth-screen .receipt-showcase{max-width:calc(100% - 384px)}.receipt-demo{width:285px}.receipt-demo[data-position=left]{transform:translateX(calc(-50% - 65px)) translateY(22px) rotate(-9deg) scale(.91)}.receipt-demo[data-position=right]{transform:translateX(calc(-50% + 65px)) translateY(22px) rotate(9deg) scale(.91)}}
@media(max-width:850px){#auth-screen .landing-container{flex-wrap:wrap;gap:36px;justify-content:center;padding:14px 0 28px}#auth-screen .auth-box{order:-1;flex:0 1 400px;max-width:100%}#auth-screen .receipt-showcase{width:100%;max-width:100%;flex:0 1 600px}.receipt-fan{height:660px}.receipt-demo{top:0;width:300px}.receipt-demo[data-position=left],.receipt-demo[data-position=right]{visibility:hidden}.receipt-demo[data-position=center]{transform:translateX(-50%)}#auth-screen .receipt-showcase .preview-label{font-size:10px!important;margin-bottom:18px}}
@media(max-width:360px){.receipt-demo{width:280px}.demo-receipt-body{padding:16px 14px}.receipt-fan{height:660px}.demo-theme-button{padding:8px 16px}}
@media(prefers-reduced-motion:reduce){.receipt-demo{transition:none}}
