*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:32px;background:radial-gradient(ellipse at 8% 10%,#e1e9df,transparent 50%),radial-gradient(ellipse at 90% 90%,#ead9bf,transparent 50%),#f3efe6;color:#243d35;font-family:"Segoe UI",Arial,sans-serif}
.auth-shell{width:100%;max-width:1120px;display:grid;grid-template-columns:1.12fr 1fr;background:#fffdf9;border-radius:26px;overflow:hidden;box-shadow:0 24px 80px #263c3020;border:1px solid #ffffff;animation:arrive .8s ease-out backwards}
.restaurant-story{position:relative;overflow:hidden;background:linear-gradient(145deg,#123c32,#234d3c 65%,#34543b);padding:36px 42px 26px;color:#fff6e8;display:flex;flex-direction:column}
.restaurant-story::before{content:"";position:absolute;width:440px;height:440px;right:-300px;top:-240px;border:1px solid #ffffff17;border-radius:50%;box-shadow:0 0 0 45px #ffffff03,0 0 0 90px #ffffff03;pointer-events:none}
.story-brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px;overflow-wrap:anywhere}
.brand-mark{display:grid;place-items:center;width:43px;height:43px;background:#ffffff0c;border:1px solid #ffffff26;border-radius:13px;color:#eac28b;flex-shrink:0;font-size:22px}
.story-brand small{display:block;font-size:9px;letter-spacing:2px;color:#b4c9b9;margin-top:4px;font-weight:500}
.story-brand .brand-mark{width:58px;height:58px;background:#fff8e9;border:1px solid #e7dcc4;border-radius:14px;box-shadow:0 4px 14px #071e3430;overflow:hidden}
.story-brand .brand-mark img{transform:scale(1.28)}
@media(max-width:680px){.story-brand .brand-mark{width:46px;height:46px;border-radius:11px}}
.story-copy{margin-top:44px;position:relative;z-index:1}
.eyebrow{font-size:9px;letter-spacing:1.65px;color:#e1c89f;font-weight:600}
.story-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,4.5vw,60px);font-weight:400;letter-spacing:-2px;line-height:1.06;margin:15px 0 17px}
.story-copy h1 em{color:#edbe7b;font-weight:400}
.story-copy p{font-size:13px;line-height:1.8;color:#c1d0c2;margin:0}
.dining-scene{position:relative;min-height:285px;margin:8px -12px 2px;display:grid;place-items:center}
.scene-ring{position:absolute;width:263px;height:263px;border:1px dashed #ffffff20;border-radius:50%;transform:rotate(-15deg)}
.plate{width:224px;height:224px;border-radius:50%;padding:29px;background:radial-gradient(circle,#faf0dd 60%,#dfd3bd 61%,#fff8e9 64%,#efe4cf 100%);box-shadow:12px 25px 30px #071e3440,inset 0 0 0 9px #ffffff40;transform:rotate(-15deg);animation:plate-arrive 1s ease-out backwards}
.dish{position:relative;width:100%;height:100%;border-radius:50%;background:repeating-conic-gradient(from 12deg,#e9b953 0deg 12deg,#f6d982 12deg 18deg,#d8a044 18deg 26deg);box-shadow:inset 0 0 15px #92632440;transform:rotate(12deg)}
.leaf{position:absolute;width:58px;height:34px;border-radius:80% 8% 80% 8%;background:linear-gradient(25deg,#41672f 45%,#8fa64c 48%,#547d36 51%);box-shadow:3px 4px 6px #28492830}
.leaf-one{top:16px;left:22px;transform:rotate(-20deg)}.leaf-two{bottom:20px;right:12px;transform:rotate(30deg)}.leaf-three{bottom:28px;left:9px;transform:rotate(-60deg)}
.tomato{position:absolute;width:31px;height:31px;border-radius:50%;background:radial-gradient(circle at 33% 29%,#f9955b,#d44b2e 60%,#9d3f23);border:2px solid #ef8650;box-shadow:2px 4px 5px #6f372338}
.tomato-one{right:18px;top:25px}.tomato-two{left:55px;bottom:23px}.tomato-three{left:21px;top:62px}
.garnish{position:absolute;inset:54px 40px 57px 54px;border:7px solid #f3e8b5;border-radius:40%;transform:rotate(35deg);box-shadow:5px 3px 0 #b88c44}
.scene-note{position:absolute;display:flex;align-items:center;gap:9px;border:1px solid #ffffff30;background:#fdf8ee;color:#314b3c;border-radius:12px;padding:12px 14px;box-shadow:0 12px 24px #08281f33;font-size:11px;font-weight:600;animation:float-note 5s ease-in-out 1s 3}
.scene-note i{font-size:20px;color:#35785c}.scene-note small{display:block;font-size:9px;color:#7f8c7e;font-weight:400;margin-top:3px}
.note-order{left:0;top:54px;transform:rotate(-5deg)}.note-bill{right:0;bottom:28px;animation-delay:1.8s;transform:rotate(4deg)}
.scene-spark{position:absolute;color:#ddbb7a;font-size:24px;font-weight:300}.spark-one{right:25px;top:40px}.spark-two{left:57px;bottom:27px}
.story-features{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #ffffff1a;padding-top:19px;margin-top:auto;font-size:10px;color:#cbd4bf}.story-features i{margin-right:5px;color:#e3bc80}
.auth-panel{display:flex;flex-direction:column;padding:32px 48px 24px;min-width:0}
.auth-topline{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.5px;font-weight:600;color:#8a958b}.auth-topline i{color:#54836b;margin-right:4px}.auth-dot{width:6px;height:6px;border-radius:50%;background:#a8bb9e}
.login-content{margin:auto 0;padding:40px 0}
.welcome-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#f5ecdb;color:#b48b4b;font-size:25px;margin-bottom:23px}
.login-eyebrow{font-size:9px;letter-spacing:1.4px;color:#8c997f;font-weight:600}
.login-content h2{font-family:Georgia,"Times New Roman",serif;font-size:36px;letter-spacing:-1px;margin:9px 0 10px;color:#233f32;font-weight:400}
.login-intro{font-size:13px;color:#849086;margin-bottom:28px}
label{font-size:12px;font-weight:600;color:#405347;margin-bottom:8px}
.login-field{display:flex;align-items:center;border:1px solid #e1e6dc;background:#fafbf7;border-radius:10px;padding:0 14px;margin-bottom:20px;transition:box-shadow .2s,border-color .2s}.login-field>i{color:#97a28e;font-size:17px}
.login-field input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:14px 12px;font-size:13px;color:#243d35}.login-field input::placeholder{color:#9aa297}
.login-field:focus-within{border-color:#749b7c;box-shadow:0 0 0 3px #63977218;background:#fff}
.password-toggle{border:0;background:none;color:#8a9787;padding:5px;display:grid;place-items:center}
.btn-login{width:100%;display:flex;justify-content:center;align-items:center;gap:14px;border:0;border-radius:10px;padding:15px;background:linear-gradient(110deg,#214d3a,#346548);color:#fff;font-size:13px;font-weight:600;box-shadow:0 7px 15px #244f3b20;transition:transform .2s,box-shadow .2s;margin-top:8px}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 10px 22px #244f3b35}.btn-login i{transition:transform .2s}.btn-login:hover i{transform:translateX(4px)}
button:focus-visible{outline:3px solid #ba904d;outline-offset:4px}
.login-caption{display:flex;align-items:center;gap:12px;color:#a0a795;font-size:10px;margin-top:25px;white-space:nowrap}.login-caption span{flex:1;height:1px;background:#e9ece3}
.auth-footer{font-size:10px;color:#929e8e;line-height:1.9;text-align:center;overflow-wrap:anywhere}.auth-footer>div{margin-bottom:3px;color:#7d8c78}
.login-error{display:flex;gap:10px;align-items:center;color:#994d39;background:#fff0e9;border:1px solid #f0d9cb;border-radius:9px;padding:12px;font-size:12px;margin-bottom:20px}
@keyframes arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes plate-arrive{from{opacity:0;transform:rotate(-35deg) scale(.85)}to{opacity:1;transform:rotate(-15deg) scale(1)}}
@keyframes float-note{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(max-width:900px){body{padding:20px}.restaurant-story{padding:28px}.auth-panel{padding:28px}.scene-note{padding:9px;font-size:10px}.note-order{left:-9px}.note-bill{right:-9px}.story-features{font-size:9px;gap:10px}}
@media(max-width:680px){body{padding:14px}.auth-shell{grid-template-columns:1fr;border-radius:20px}.restaurant-story{padding:24px}.story-copy{margin-top:24px}.story-copy h1{font-size:37px;letter-spacing:-1px}.story-copy p{font-size:12px}.story-copy p br{display:none}.dining-scene{display:none}.story-features{margin-top:22px;padding-top:15px;justify-content:flex-start;gap:20px}.auth-panel{padding:24px}.login-content{padding:25px 0}.welcome-icon{display:none}.login-content h2{font-size:31px}.login-intro{margin-bottom:23px}.brand-mark{width:36px;height:36px}.story-brand{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Fit the available viewport, including mobile browser controls. */
html{height:100%}
body{height:100vh;height:100dvh;min-height:0;padding:clamp(8px,2vh,24px);overflow:hidden}
.auth-shell{height:100%;max-height:760px;min-height:0}
.restaurant-story,.auth-panel{min-height:0}
.restaurant-story{padding:clamp(20px,4vh,36px) 32px}
.story-copy{margin-top:clamp(18px,4vh,40px)}
.dining-scene{flex:1;min-height:0;margin:8px -12px;overflow:hidden}
.story-features{flex-shrink:0}
.auth-panel{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:clamp(18px,4vh,32px) clamp(24px,4vw,48px)}
.auth-topline,.auth-footer{flex-shrink:0}
.login-content{flex-shrink:0;padding:clamp(12px,3vh,32px) 0}
.welcome-icon{margin-bottom:clamp(10px,2vh,23px)}
@media(min-width:681px) and (max-height:720px){
    .story-copy h1{font-size:44px}
    .story-copy p{font-size:12px}
    .plate{width:180px;height:180px;padding:24px}
    .scene-ring{width:210px;height:210px}
    .scene-note{padding:9px;font-size:10px}
    .note-order{top:22px}.note-bill{bottom:12px}
    .welcome-icon{display:none}
    .login-content h2{font-size:31px}
    .login-intro{margin-bottom:18px}
    .login-field{margin-bottom:15px}
    .login-caption{margin-top:16px}
}
@media(max-width:680px){
    .auth-shell{grid-template-rows:auto minmax(0,1fr);max-width:480px;max-height:820px}
    .restaurant-story{padding:18px 24px}
    .story-copy{margin-top:14px}
    .story-copy h1{font-size:29px;margin:8px 0}
    .story-copy h1 br{display:none}
    .story-copy p,.story-features,.eyebrow{display:none}
    .auth-panel{padding:18px 24px}
    .login-content{padding:16px 0}
    .login-content h2{font-size:29px}
    .login-intro{margin-bottom:20px}
    .login-field{margin-bottom:16px}
    .login-caption{margin-top:18px}
}
@media(max-width:680px) and (max-height:740px){
    .story-copy{display:none}
    .restaurant-story{padding:14px 22px}
    .auth-panel{padding:16px 22px}
    .login-content{padding:12px 0}
    .login-content h2{font-size:27px}
    .login-intro{margin-bottom:16px}
    .login-field input{padding:12px}
}
@media(max-height:560px){
    .story-copy,.dining-scene,.story-features,.welcome-icon,.auth-topline,.login-eyebrow,.login-caption{display:none}
    .restaurant-story{justify-content:center;padding:12px 20px}
    .auth-panel{padding:12px 22px}
    .login-content{padding:4px 0}
    .login-content h2{font-size:24px;margin:0 0 5px}
    .login-intro{font-size:12px;margin-bottom:12px}
    label{margin-bottom:4px}
    .login-field{margin-bottom:10px}
    .login-field input{padding:9px 10px}
    .btn-login{padding:10px;margin-top:4px}
    .auth-footer{font-size:9px;line-height:1.5;margin-top:8px}
    .login-error{padding:8px;margin-bottom:10px}
}
@media(min-width:681px) and (max-height:560px){
    .auth-shell{grid-template-columns:.8fr 1.2fr}
    .restaurant-story .story-brand{flex-direction:column;text-align:center}
}