:root{--bg:#f3eee8;--card:rgba(255,255,255,.72);--tx:#2b1d14;--mu:#7a6a5d;--br:#4a2c1a;--go:#c9a24b;--ok:#2aa88a;--bad:#e2552d;--bd:rgba(255,255,255,.9);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1d1612;--card:rgba(60,45,36,.7);--tx:#f4ebe0;--mu:#b9a894;--bd:rgba(255,255,255,.12)}}
:root[data-theme="dark"]{--bg:#1d1612;--card:rgba(60,45,36,.7);--tx:#f4ebe0;--mu:#b9a894;--bd:rgba(255,255,255,.12)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(circle at 20% 0,#e8d5b5 0,transparent 40%),var(--bg);color:var(--tx);min-height:100vh}
.glass{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--bd);border-radius:20px;box-shadow:0 10px 30px rgba(74,44,26,.12),inset 0 1px 0 rgba(255,255,255,.6)}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:9px 18px;color:#fff;background:linear-gradient(180deg,#e0743f,#c24a1e);box-shadow:0 5px 0 #8f3513,0 8px 14px rgba(0,0,0,.2);transition:.15s;font-weight:600}
button:hover{transform:translateY(-2px)}button:active{transform:translateY(3px);box-shadow:0 1px 0 #8f3513}
button.sec{background:linear-gradient(180deg,#fff,#e8e0d6);color:var(--br);box-shadow:0 4px 0 #cbbfae,0 6px 10px rgba(0,0,0,.12)}
button.ok{background:linear-gradient(180deg,#3cc4a2,#1f8f75);box-shadow:0 4px 0 #166b58}
button.sm{padding:5px 11px;font-size:12px;box-shadow:0 3px 0 #8f3513;margin:2px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(120,100,80,.3);background:rgba(255,255,255,.85);color:#2b1d14;font:inherit}
label{font-size:12px;color:var(--mu);font-weight:600;display:block;margin-bottom:3px}
#login{display:flex;min-height:100vh}#login .hero{flex:1.2;background:linear-gradient(135deg,rgba(74,44,26,.92),rgba(201,162,75,.7));color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:40px}
.hero h1{font-size:40px;margin:0 0 8px}.hero .ph{border:2px dashed #fff8;border-radius:20px;padding:30px;margin-bottom:20px;text-align:center;font-size:13px}
#login .box{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}#login .glass{width:100%;max-width:380px;padding:28px}
.tabs{display:flex;gap:6px;margin:12px 0}.tabs button{flex:1;padding:7px 4px;font-size:12px}
#app{display:none}aside{position:fixed;left:0;top:0;bottom:0;width:230px;padding:18px 12px;overflow:auto;background:linear-gradient(180deg,#4a2c1a,#2e1a0f);color:#f4ebe0;z-index:20;transition:.25s}
aside h2{font-size:16px;margin:0 0 16px;color:var(--go)}aside a{display:block;padding:10px 12px;border-radius:12px;color:#f4ebe0;cursor:pointer;font-size:14px;margin-bottom:3px}aside a.on,aside a:hover{background:rgba(201,162,75,.25)}
main{margin-left:230px;padding:16px}header{display:flex;align-items:center;gap:10px;padding:10px 16px;margin-bottom:14px;flex-wrap:wrap}
header .sp{flex:1}#ham{display:none}#gs{max-width:260px}
.banner{padding:24px;margin-bottom:14px;background:linear-gradient(120deg,rgba(74,44,26,.9),rgba(201,162,75,.8));color:#fff;border-radius:20px}.banner h2{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.stat{padding:16px;transition:.2s}.stat:hover{transform:translateY(-4px) rotateX(4deg)}.stat b{font-size:26px;display:block}.stat span{color:var(--mu);font-size:12px}
.tw{overflow-x:auto;padding:6px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px 8px;text-align:left;border-bottom:1px solid rgba(120,100,80,.15);white-space:nowrap}th{color:var(--mu);font-size:11px;text-transform:uppercase}
.bd{padding:2px 10px;border-radius:99px;font-size:11px;font-weight:700;color:#fff}.PAID,.Available,.Active{background:var(--ok)}.PARTIAL,.Partial{background:#e0a02d}.PENDING,.Full,.Inactive,.Maintenance{background:var(--bad)}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.room{padding:14px}.room h3{margin:0 0 6px}
.bar{height:8px;background:#0001;border-radius:9px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--go),var(--ok))}
.mod{position:fixed;inset:0;background:#0007;display:none;align-items:center;justify-content:center;z-index:50;padding:12px}.mod .glass{background:var(--bg);width:100%;max-width:640px;max-height:92vh;overflow:auto;padding:20px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
#toast{position:fixed;right:16px;top:calc(16px + env(safe-area-inset-top,0px));background:linear-gradient(180deg,#3cc4a2,#1f8f75);color:#fff;padding:12px 20px;border-radius:99px;box-shadow:0 8px 20px #0004;z-index:99;display:none}
.bars{display:flex;align-items:flex-end;gap:8px;height:140px;padding:10px}.bars div{flex:1;background:linear-gradient(180deg,var(--go),var(--br));border-radius:8px 8px 0 0;font-size:10px;color:#fff;text-align:center;min-height:4px}
.empty{padding:30px;text-align:center;color:var(--mu)}
@media(max-width:800px){aside{transform:translateX(-100%)}aside.open{transform:none}main{margin-left:0}#ham{display:inline-block}#login .hero{display:none}}
@media print{aside,header,.row,button{display:none!important}main{margin:0}}
/* ===== 3D LOOK ===== */
body{perspective:1400px}
.glass{transform-style:preserve-3d;box-shadow:0 1px 0 #fff inset,0 -3px 0 rgba(74,44,26,.08) inset,0 6px 0 rgba(201,162,75,.35),0 18px 30px rgba(74,44,26,.25),0 30px 60px rgba(74,44,26,.12);background-image:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
.stat{transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffe9a8,var(--go) 60%,#8a6a1f);box-shadow:0 8px 14px rgba(0,0,0,.25);opacity:.9}
.stat b{text-shadow:0 2px 0 #fff,0 5px 8px rgba(74,44,26,.3);font-size:30px;color:var(--br);transform:translateZ(30px)}
.stat:hover{box-shadow:0 1px 0 #fff inset,0 10px 0 rgba(201,162,75,.4),0 30px 50px rgba(74,44,26,.35)}
.room,.glass.tw{transition:transform .2s}.room:hover{transform:translateY(-6px) rotateX(5deg) rotateY(-4deg)}
button{background-image:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 50%),linear-gradient(180deg,#e0743f,#c24a1e);text-shadow:0 1px 1px rgba(0,0,0,.35);border-top:1px solid rgba(255,255,255,.6)}
button.sec{background-image:linear-gradient(180deg,#fff,#e8e0d6);text-shadow:none}
button.ok{background-image:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 50%),linear-gradient(180deg,#3cc4a2,#1f8f75)}
button:hover{transform:translateY(-3px) scale(1.03)}
aside a{transition:.2s;box-shadow:0 3px 0 rgba(0,0,0,.35);background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.12)}
aside a:hover,aside a.on{transform:translateX(6px) translateZ(10px);background:linear-gradient(90deg,rgba(201,162,75,.55),rgba(201,162,75,.15));box-shadow:0 5px 0 rgba(0,0,0,.4)}
.banner{box-shadow:0 8px 0 #7a5a1c,0 24px 40px rgba(74,44,26,.4);transform:rotateX(2deg);position:relative;overflow:hidden}
.banner::after{content:"🏨";position:absolute;right:20px;top:-6px;font-size:90px;opacity:.25;transform:rotate(-8deg)}
input,select{box-shadow:inset 0 3px 6px rgba(74,44,26,.18),0 1px 0 #fff}
.bars div{box-shadow:6px 0 0 rgba(74,44,26,.35),0 6px 10px rgba(0,0,0,.25);transform:skewY(-3deg)}
.bd{box-shadow:0 2px 0 rgba(0,0,0,.3)}
tr:hover td{background:rgba(201,162,75,.15)}
#login .glass{transition:transform .15s}
/* ===== GLASS LOOK ===== */
body{background:radial-gradient(circle at 12% 15%,rgba(255,140,80,.55),transparent 32%),radial-gradient(circle at 85% 20%,rgba(60,190,230,.5),transparent 34%),radial-gradient(circle at 70% 85%,rgba(60,200,160,.45),transparent 35%),radial-gradient(circle at 20% 90%,rgba(201,162,75,.5),transparent 35%),linear-gradient(135deg,#f6f1ea,#e9eef2);background-attachment:fixed}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,rgba(255,255,255,.4));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1.5px solid rgba(255,255,255,.75);position:relative;box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset 0 -8px 18px rgba(255,255,255,.25),inset 6px 0 14px rgba(120,200,255,.18),inset -6px 0 14px rgba(255,150,90,.18),0 14px 34px rgba(60,50,80,.22)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 70%,rgba(255,255,255,.35) 100%)}
.stat::after{background:radial-gradient(circle at 30% 30%,#fff,rgba(255,220,140,.7) 55%,rgba(201,162,75,.5));backdrop-filter:blur(4px)}
button{background-image:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.05) 55%),linear-gradient(180deg,rgba(255,130,70,.9),rgba(210,70,25,.9));border:1.5px solid rgba(255,255,255,.7);backdrop-filter:blur(8px);box-shadow:inset 0 2px 3px rgba(255,255,255,.9),inset 0 -3px 6px rgba(0,0,0,.15),0 5px 0 rgba(143,53,19,.7),0 10px 18px rgba(0,0,0,.2)}
button.sec{background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.35));box-shadow:inset 0 2px 3px #fff,0 4px 0 rgba(203,191,174,.8),0 8px 14px rgba(0,0,0,.12)}
button.ok{background-image:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.05) 55%),linear-gradient(180deg,rgba(60,196,162,.92),rgba(31,143,117,.92));box-shadow:inset 0 2px 3px rgba(255,255,255,.9),0 4px 0 rgba(22,107,88,.8),0 8px 16px rgba(0,0,0,.2)}
input,select,textarea{background:rgba(255,255,255,.45);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.8);box-shadow:inset 0 2px 5px rgba(60,50,80,.15),0 0 0 1px rgba(120,200,255,.2)}
input:focus,select:focus{outline:0;box-shadow:inset 0 2px 5px rgba(60,50,80,.15),0 0 0 3px rgba(60,190,230,.4)}
aside{background:linear-gradient(180deg,rgba(74,44,26,.72),rgba(46,26,15,.82));backdrop-filter:blur(20px) saturate(160%);border-right:1.5px solid rgba(255,255,255,.3)}
aside a{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
#login .hero{background:linear-gradient(135deg,rgba(74,44,26,.8),rgba(201,162,75,.55))}
.banner{background:linear-gradient(120deg,rgba(74,44,26,.78),rgba(201,162,75,.6));backdrop-filter:blur(16px);border:1.5px solid rgba(255,255,255,.5);box-shadow:inset 0 2px 2px rgba(255,255,255,.6),0 8px 0 rgba(122,90,28,.5),0 24px 40px rgba(74,44,26,.3)}
.mod{backdrop-filter:blur(6px)}.mod .glass{background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.45))}
.bars div{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(201,162,75,.75) 30%,rgba(74,44,26,.8));border:1px solid rgba(255,255,255,.6)}
th{background:rgba(255,255,255,.35)}
#toast{background:linear-gradient(180deg,rgba(60,196,162,.9),rgba(31,143,117,.9));backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.7)}
/* ===== FULL GLASS BUTTONS ===== */
button{position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 2px rgba(120,40,10,.6);border:1.5px solid rgba(255,255,255,.85);border-radius:999px;
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.12) 48%,rgba(255,255,255,0) 52%),linear-gradient(135deg,rgba(255,120,60,.78),rgba(255,170,90,.55) 55%,rgba(226,85,45,.75));
backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);
box-shadow:inset 0 2px 3px rgba(255,255,255,.95),inset 0 -4px 8px rgba(255,255,255,.25),inset 5px 0 10px rgba(80,190,255,.3),inset -5px 0 10px rgba(255,200,80,.3),0 8px 18px rgba(226,85,45,.35),0 2px 0 rgba(255,255,255,.6)}
button::after{content:"";position:absolute;left:8%;right:8%;top:3px;height:42%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
button:hover{transform:translateY(-3px) scale(1.04);box-shadow:inset 0 2px 3px #fff,inset 5px 0 12px rgba(80,190,255,.45),inset -5px 0 12px rgba(255,200,80,.45),0 14px 26px rgba(226,85,45,.45)}
button:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 3px 8px rgba(0,0,0,.25),0 3px 8px rgba(226,85,45,.3)}
button.sec{color:var(--br);text-shadow:none;background:linear-gradient(180deg,rgba(255,255,255,.8) 0,rgba(255,255,255,.2) 50%,rgba(255,255,255,.08) 52%),linear-gradient(135deg,rgba(160,210,255,.35),rgba(255,255,255,.25),rgba(255,200,150,.35));box-shadow:inset 0 2px 3px #fff,inset 5px 0 10px rgba(80,190,255,.3),inset -5px 0 10px rgba(255,160,100,.3),0 8px 16px rgba(60,50,80,.18)}
button.ok{text-shadow:0 1px 2px rgba(10,80,60,.6);background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.12) 48%,rgba(255,255,255,0) 52%),linear-gradient(135deg,rgba(60,200,165,.8),rgba(120,230,200,.5) 55%,rgba(25,140,115,.8));box-shadow:inset 0 2px 3px rgba(255,255,255,.95),inset 5px 0 10px rgba(80,190,255,.3),inset -5px 0 10px rgba(255,200,80,.25),0 8px 18px rgba(31,143,117,.35)}
button.sm{box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset 4px 0 8px rgba(80,190,255,.3),inset -4px 0 8px rgba(255,200,80,.3),0 4px 10px rgba(226,85,45,.3)}
button.sm.sec{box-shadow:inset 0 2px 2px #fff,0 4px 10px rgba(60,50,80,.15)}
/* ===== ANIMATIONS ===== */
body::before,body::after{content:"";position:fixed;z-index:-1;width:380px;height:380px;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
body::before{background:rgba(255,140,80,.6);left:-80px;top:10%;animation:fl1 14s ease-in-out infinite alternate}
body::after{background:rgba(60,190,230,.55);right:-80px;bottom:5%;animation:fl2 17s ease-in-out infinite alternate}
@keyframes fl1{to{transform:translate(45vw,30vh) scale(1.3)}}@keyframes fl2{to{transform:translate(-40vw,-35vh) scale(1.25)}}
@keyframes up{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0) skewY(-3deg)}to{transform:scaleY(1) skewY(-3deg)}}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shine{from{left:-60%}to{left:140%}}
@keyframes slideIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(42,168,138,.5)}50%{box-shadow:0 0 0 10px rgba(42,168,138,0)}}
#pg>*{animation:up .5s cubic-bezier(.2,.8,.2,1) both}
.grid>.stat{animation:up .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*60ms)}
.rooms>.room{animation:up .6s both;animation-delay:calc(var(--i,0)*70ms)}
.stat::after{animation:fl 4s ease-in-out infinite}
.bars div{transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*100ms)}
.bar i{animation:wd 1s ease both}@keyframes wd{from{width:0!important}}
aside a{animation:slideIn .5s both;animation-delay:calc(var(--i,0)*60ms)}
.banner::before{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:shine 4s ease-in-out infinite}
#login .hero h1{animation:up .9s both}#login .glass{animation:up .9s .15s both,fl 6s 1s ease-in-out infinite}
#login .hero .ph{animation:fl 5s ease-in-out infinite}
button::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);pointer-events:none}
button:hover::before{animation:shine .8s ease}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.7);transform:scale(0);animation:rp .6s ease-out forwards;pointer-events:none}@keyframes rp{to{transform:scale(4);opacity:0}}
#toast{animation:up .4s both}.bd.PAID,.bd.Active,.bd.Available{animation:pulse 2.2s infinite}
tbody tr,table tr{animation:up .4s both}
.mod .glass{animation:pop .35s cubic-bezier(.2,.9,.3,1.3)}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none!important}}
/* ===== DARK GLASS BUTTONS ===== */
button{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);border:1.5px solid rgba(255,255,255,.35);
background:linear-gradient(180deg,rgba(255,255,255,.28) 0,rgba(255,255,255,.04) 48%,rgba(0,0,0,.12) 52%),linear-gradient(135deg,rgba(140,45,15,.95),rgba(95,28,8,.92) 55%,rgba(60,15,5,.95));
box-shadow:inset 0 2px 3px rgba(255,255,255,.45),inset 0 -4px 8px rgba(0,0,0,.35),inset 5px 0 10px rgba(80,190,255,.18),inset -5px 0 10px rgba(255,180,60,.2),0 8px 18px rgba(60,15,5,.5)}
button:hover{box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 5px 0 12px rgba(80,190,255,.3),inset -5px 0 12px rgba(255,180,60,.35),0 14px 26px rgba(60,15,5,.6)}
button::after{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
button.sec{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);border:1.5px solid rgba(255,255,255,.3);background:linear-gradient(180deg,rgba(255,255,255,.25) 0,rgba(255,255,255,.03) 48%,rgba(0,0,0,.15) 52%),linear-gradient(135deg,rgba(55,40,35,.95),rgba(30,22,20,.95));box-shadow:inset 0 2px 3px rgba(255,255,255,.4),inset 0 -4px 8px rgba(0,0,0,.4),inset 5px 0 10px rgba(80,190,255,.18),0 8px 16px rgba(20,12,8,.45)}
button.ok{text-shadow:0 1px 2px rgba(0,0,0,.7);background:linear-gradient(180deg,rgba(255,255,255,.28) 0,rgba(255,255,255,.04) 48%,rgba(0,0,0,.12) 52%),linear-gradient(135deg,rgba(15,100,80,.96),rgba(8,68,55,.95));box-shadow:inset 0 2px 3px rgba(255,255,255,.45),inset 0 -4px 8px rgba(0,0,0,.35),inset 5px 0 10px rgba(80,190,255,.18),0 8px 18px rgba(8,68,55,.5)}
button.sm,button.sm.sec{box-shadow:inset 0 2px 2px rgba(255,255,255,.4),inset 0 -3px 6px rgba(0,0,0,.35),0 4px 10px rgba(40,15,5,.4)}
/* ===== MORE UI ANIMATION ===== */
@keyframes drop{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes grad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(201,162,75,.0)}50%{box-shadow:0 0 22px 4px rgba(201,162,75,.45)}}
@keyframes fieldIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
header.glass{animation:drop .6s cubic-bezier(.2,.8,.2,1) both}
aside h2{background:linear-gradient(90deg,#c9a24b,#fff,#c9a24b);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:grad 4s linear infinite}
.banner{background-size:200% 200%;animation:grad 8s linear infinite alternate}
.stat:hover::after{animation:wig .6s ease}
.stat:hover{animation:glow 1.4s ease-in-out infinite}
.room:hover{animation:glow 1.4s ease-in-out infinite}
.mod .fg>div,.mod h3{animation:fieldIn .45s both}
.mod .fg>div:nth-child(1){animation-delay:.05s}.mod .fg>div:nth-child(2){animation-delay:.1s}.mod .fg>div:nth-child(3){animation-delay:.15s}.mod .fg>div:nth-child(4){animation-delay:.2s}.mod .fg>div:nth-child(5){animation-delay:.25s}.mod .fg>div:nth-child(n+6){animation-delay:.3s}
input,select{transition:box-shadow .25s,transform .25s}input:focus,select:focus{transform:translateY(-2px) scale(1.01)}
table tr{animation:up .45s both;animation-delay:calc(var(--r,0)*40ms)}
tr td{transition:background .25s,transform .25s}tr:hover td{transform:translateX(3px)}
aside a{transition:transform .25s,background .25s,box-shadow .25s}
aside a.on{animation:glow 2.4s ease-in-out infinite}
#toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.8);transform-origin:left;animation:bar 2.2s linear forwards}#toast{overflow:hidden}
.glass:not(.stat):not(.room):not(#login .glass):hover{transform:translateY(-2px);transition:transform .25s}
h2{animation:fieldIn .5s both}
.row button{animation:up .5s both}.row button:nth-child(2){animation-delay:.07s}.row button:nth-child(3){animation-delay:.14s}.row button:nth-child(4){animation-delay:.21s}.row button:nth-child(5){animation-delay:.28s}.row button:nth-child(n+6){animation-delay:.35s}
.empty{animation:fl 3s ease-in-out infinite}
.mod .glass{animation:pop .3s ease}@keyframes pop{from{transform:scale(.85) rotateX(15deg);opacity:0}}