:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#03101e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(circle at 50% 45%,rgba(0,116,210,.14),transparent 42%),linear-gradient(180deg,#06182b,#020b15 78%)}body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.18)),radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.42) 100%);pointer-events:none}.app-shell{height:100%;min-height:620px;position:relative}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid rgba(0,130,255,.45);background:rgba(2,12,23,.82)}.brand{display:flex;align-items:center;gap:18px}.mf-logo{width:64px;height:64px;border:3px solid #00a8ff;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:25px;letter-spacing:-2px;box-shadow:0 0 18px rgba(0,154,255,.25),inset 0 0 18px rgba(0,154,255,.12)}.brand-name{font-size:39px;font-weight:800;letter-spacing:-2px}.brand-name b,.welcome-brand b{color:#08a8ff}.clock{font-size:18px;font-weight:700;color:#dce8f5}.login-main{height:calc(100% - 92px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 28px 45px}.welcome{text-align:center;margin-top:-6px}.welcome-small{font-size:39px;font-weight:700;line-height:1.05}.welcome-brand{font-size:74px;font-weight:900;line-height:.98;letter-spacing:-4px;margin-top:2px}.tagline{font-size:19px;letter-spacing:8px;color:#aab8c9;margin-top:18px;font-weight:700}.login-main h1{font-size:42px;margin:52px 0 38px;letter-spacing:1px}.role-grid{display:grid;grid-template-columns:repeat(2,minmax(300px,430px));gap:34px;width:min(900px,94vw)}button{font:inherit;color:inherit}.role-card{height:305px;border-radius:24px;border:2px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,filter .12s,box-shadow .12s;background:#07192b}.role-card:active{transform:scale(.985)}.ordering{border-color:#08a8ff;background:linear-gradient(145deg,#087cff,#0068db);box-shadow:0 0 28px rgba(0,148,255,.3)}.delivering{border-color:#18e55a;background:linear-gradient(145deg,#0bd24c,#00b83c);box-shadow:0 0 28px rgba(18,226,83,.24)}.role-card:hover{filter:brightness(1.06)}.icon{height:112px;width:150px;position:relative;margin-bottom:17px}.clipboard{width:94px;border:7px solid #fff;border-radius:8px;margin-bottom:22px}.clipboard .clip{position:absolute;top:-22px;left:24px;width:40px;height:28px;border:7px solid #fff;border-bottom:0;border-radius:9px 9px 0 0}.paper-lines{position:absolute;left:20px;right:20px;top:42px}.paper-lines i{display:block;height:7px;background:#fff;border-radius:4px;margin:12px 0}.forklift .fork-body{position:absolute;left:38px;bottom:25px;width:76px;height:42px;border:7px solid #fff;border-radius:9px 18px 5px 5px}.forklift .fork-mast{position:absolute;right:25px;bottom:21px;width:8px;height:78px;background:#fff}.forklift .fork-prongs{position:absolute;right:0;bottom:17px;width:49px;height:8px;background:#fff;box-shadow:0 15px 0 -2px #fff}.forklift .fork-person{position:absolute;left:57px;top:5px;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:10px 20px 0 -2px #fff}.forklift .wheel{position:absolute;bottom:3px;width:22px;height:22px;border:6px solid #fff;border-radius:50%;background:transparent}.forklift .w1{left:48px}.forklift .w2{left:103px}.role-title{font-size:33px;font-weight:900;letter-spacing:.5px}.role-subtitle{font-size:16px;letter-spacing:5px;font-weight:700;margin-top:9px}@media(max-width:800px){.topbar{height:74px;padding:0 20px}.mf-logo{width:50px;height:50px;font-size:20px}.brand-name{font-size:28px}.clock{font-size:14px}.login-main{height:calc(100% - 74px);justify-content:flex-start;padding-top:45px;overflow:auto}.welcome-small{font-size:28px}.welcome-brand{font-size:52px}.tagline{font-size:12px;letter-spacing:4px}.login-main h1{font-size:30px;margin:42px 0 24px}.role-grid{grid-template-columns:1fr;max-width:520px;gap:20px}.role-card{height:225px}.icon{transform:scale(.72);margin-bottom:2px}.role-title{font-size:27px}.role-subtitle{font-size:13px;letter-spacing:3px}}@media(max-height:700px) and (min-width:801px){.login-main{padding-top:8px}.welcome-small{font-size:28px}.welcome-brand{font-size:54px}.tagline{font-size:14px;margin-top:8px}.login-main h1{font-size:31px;margin:25px 0 18px}.role-card{height:230px}.icon{transform:scale(.75);margin-bottom:0}}