@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Marcellus&display=swap";*{box-sizing:border-box}body{margin:0;background:#061521;color:#eef2f3;font:14px DM Sans,sans-serif}button,input{font:inherit}.center{display:grid;min-height:100vh;place-items:center;color:#d9ad57}.login{display:grid;min-height:100vh;grid-template-columns:1.1fr .9fr}.login>section{display:grid;place-content:center;gap:13px;padding:60px;background:#071a28;border-right:1px solid #725f38}.brand{display:flex;align-items:center;gap:10px;color:#e6b95e;font:22px Marcellus;letter-spacing:.16em}.brand img{width:38px;height:38px;object-fit:contain}.login h1,.title h1{margin:0;font:40px Marcellus;color:#f0d193}.login p,.title p{color:#91a1ab}.login form{display:grid;width:min(390px,calc(100% - 40px));align-content:center;justify-self:center;gap:16px}.login form small,.title small{color:#d9ad57;letter-spacing:.13em}.login h2{margin:0;font:35px Marcellus;color:#f0d193}.login label{display:grid;gap:7px}.login input{height:44px;padding:0 12px;border:1px solid #385164;background:#081c2a;color:#fff}.login button,.actions button{display:flex;min-height:42px;align-items:center;justify-content:center;gap:8px;border:1px solid #9b7a3d;background:transparent;color:#f3d38f;cursor:pointer}.login form>button,.actions .primary{background:#e3b45b;color:#07141e}.error{color:#ff9da1}.shell header{display:flex;height:72px;align-items:center;gap:28px;padding:0 30px;border-bottom:1px solid #765f34;background:#04111b}.shell header>div:nth-child(2){display:flex;gap:15px;margin-left:auto}.shell header span{color:#d9ad57}.icon,.logout{display:flex;align-items:center;gap:7px;border:1px solid #385164;background:transparent;color:#fff;padding:10px 13px}.icon svg,.logout svg,.actions svg,.role svg{width:17px}.shell main{padding:38px 4vw}.title{display:flex;align-items:flex-end;justify-content:space-between}.title h1{margin-top:8px}.role{display:flex;align-items:center;gap:8px;color:#d9ad57}.banner{margin-top:20px;padding:12px;border:1px solid #793d45;background:#2d171e}.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin:30px 0;border:1px solid #6f5b35}.metrics>div{display:flex;align-items:center;gap:14px;padding:20px;border-right:1px solid #6f5b35;color:#d9ad57}.metrics>div:last-child{border:0}.metrics span{display:grid;color:#a7b2b8}.metrics strong{font-size:24px;color:#fff}.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:15px}.rooms article{min-height:250px;padding:20px;border:1px solid #344d5d;background:#091d2b}.rooms article.cleaning{border-color:#b98838}.rooms article.maintenance{border-color:#93434a}.room-number{display:grid;grid-template-columns:32px 1fr;align-items:center}.room-number svg{grid-row:1/3;color:#d9ad57}.room-number strong{font:30px Marcellus}.room-number small{color:#91a1ab}.status{display:flex;align-items:center;gap:8px;margin-top:20px;color:#c6d0d4}.status i{width:8px;height:8px;border-radius:50%;background:#64bd75}.cleaning .status i{background:#d79b38}.maintenance .status i{background:#df5e66}.occupied .status i{background:#d9ad57}.rooms article p{color:#91a1ab}.actions{display:grid;gap:8px;margin-top:25px}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.login{grid-template-columns:1fr}.login>section{display:none}.metrics{grid-template-columns:1fr 1fr}.metrics>div:nth-child(2){border-right:0}.title{align-items:flex-start;flex-direction:column;gap:15px}.shell header{padding:0 14px}.shell header>div:nth-child(2){display:none}.shell main{padding:25px 16px}}