*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;font-family:Poppins,sans-serif}
body{min-height:100vh;color:#fff;background:linear-gradient(rgba(0,15,7,.30),rgba(0,15,7,.48)),url("/static/forest.png") center/cover fixed no-repeat;display:flex;justify-content:center;align-items:center;padding:35px 15px}
body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 10%,rgba(255,220,130,.15),transparent 38%)}
.page{width:min(760px,100%);display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.logo-wrap{margin-bottom:20px;text-align:center}
.logo{width:min(360px,75vw);display:block;filter:drop-shadow(0 15px 18px rgba(0,0,0,.65))}
.card{width:min(700px,96vw);padding:38px 52px 35px;border:1px solid rgba(255,238,180,.65);border-radius:28px;background:linear-gradient(145deg,rgba(13,42,26,.72),rgba(3,23,15,.60));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 35px rgba(255,255,255,.035)}
.small-card{max-width:600px}.dashboard{max-width:650px}
h1{font:500 clamp(30px,5vw,46px) Cinzel,serif;text-align:center;color:#f5e0a5;text-shadow:0 3px 10px rgba(0,0,0,.7);margin-bottom:12px}
.ornament{width:230px;height:1px;margin:0 auto 25px;background:linear-gradient(90deg,transparent,#d8b45a,transparent);position:relative}
.ornament:after{content:"◆";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 9px;background:#163322;color:#d9b55b;font-size:11px}
.input{position:relative;margin:0 0 18px}
.input>span{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:23px;color:#ecd078;z-index:1}
.input input{width:100%;height:66px;border-radius:17px;border:1px solid rgba(226,211,164,.62);outline:0;background:rgba(7,29,18,.66);color:#fff;padding:0 58px 0 58px;font:400 16px Poppins,sans-serif;transition:.25s}
.input input:focus{border-color:#e7c56b;box-shadow:0 0 0 3px rgba(224,185,83,.10)}
.input input::placeholder{color:rgba(255,255,255,.72)}
.eye{position:absolute;right:17px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#ecd078;font-size:22px;cursor:pointer}
.eye.active{color:#fff0ae}
.forgot,.back{display:block;text-align:right;color:#f0d98e;text-decoration:none;font-size:14px;margin:2px 4px 23px}
.forgot:hover,.back:hover{color:#fff}
.back{text-align:center;margin:22px 0 0}
.main-btn{display:block;width:100%;height:62px;border-radius:17px;border:1px solid rgba(241,211,120,.75);font:600 17px Poppins,sans-serif;color:#fff;cursor:pointer;text-align:center;text-decoration:none;line-height:60px;transition:.25s}
.main-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.login{background:linear-gradient(145deg,#1a472e,#082717);box-shadow:0 9px 22px rgba(0,0,0,.35)}
.signup{background:linear-gradient(145deg,#d4aa43,#8b6013);box-shadow:0 9px 25px rgba(80,50,5,.35)}
.divider{display:flex;align-items:center;gap:15px;margin:26px 0 18px;color:rgba(255,255,255,.82);font-size:14px}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(232,207,132,.7))}
.divider:after{background:linear-gradient(90deg,rgba(232,207,132,.7),transparent)}
.socials{display:flex;justify-content:center;gap:22px}
.social{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:bold 27px Arial;cursor:pointer;border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.facebook{background:linear-gradient(145deg,#3d66a8,#153b73);color:#fff}
.google{background:#fff;color:#4285f4}
.alert{padding:12px 15px;border-radius:12px;margin-bottom:18px;text-align:center;font-size:14px}
.alert.error{background:rgba(150,25,25,.35);border:1px solid rgba(255,120,120,.35)}
.alert.success{background:rgba(25,130,75,.35);border:1px solid rgba(120,255,170,.35)}
.copyright{font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.55);margin-top:18px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:20px;z-index:10}
.modal.show{display:flex}
.modal-box{width:min(520px,100%);position:relative;padding:35px;border-radius:24px;border:1px solid rgba(255,238,180,.65);background:linear-gradient(145deg,rgba(13,42,26,.94),rgba(3,23,15,.94));backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.modal-box h2{font:500 30px Cinzel,serif;text-align:center;color:#f5e0a5;margin-bottom:10px}
.close{position:absolute;right:18px;top:13px;background:transparent;border:0;color:#f5e0a5;font-size:30px;cursor:pointer}
.help{text-align:center;color:rgba(255,255,255,.78);font-size:14px;line-height:1.7;margin-bottom:23px}
.profile{display:grid;gap:12px;margin:20px 0 25px}
.profile div{padding:15px 17px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(255,230,160,.16);display:flex;justify-content:space-between;gap:15px}
.profile strong{color:#ecd078}.profile span{color:#fff}
.logout-btn{line-height:62px}
@media(max-width:600px){body{padding:20px 10px}.card{padding:28px 18px 25px;border-radius:22px}.logo{width:260px}.input input{height:60px;font-size:14px}.main-btn{height:58px;line-height:56px;font-size:15px}.modal-box{padding:28px 18px}.profile div{flex-direction:column;gap:4px}}