:root{
  --bg:#070503; --panel:#100d09; --panel2:#171109; --panel3:#0c0906;
  --gold:#d7a65d; --gold2:#f0c87b; --gold3:#93602a;
  --cream:#ead6ad; --muted:#b49a70; --line:#6b431e; --line2:#3c2715;
  --red:#8e3525;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#060402;color:var(--cream);font-family:Georgia,"Times New Roman",serif}
body{
  background:
    linear-gradient(rgba(3,2,1,.76),rgba(3,2,1,.82)),
    url("/static/ghosthost-ui-reference.png") center center/cover fixed no-repeat;
}
a{color:var(--gold2);text-decoration:none}
a:hover{color:#fff0c8}
button,.btn{
  appearance:none;border:1px solid #e0ad62;border-radius:4px;
  background:linear-gradient(#c98f42,#87501f);
  color:#1a0c04;padding:10px 15px;font-family:inherit;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;cursor:pointer;
  box-shadow:inset 0 1px #ffe0a0,0 2px 0 #3b1d0b,0 5px 14px #0008;
}
button:hover,.btn:hover{filter:brightness(1.1);color:#160a03}
.danger{background:linear-gradient(#a94e3b,#67271c);color:#ffe8dc;border-color:#cb7359}
input,textarea,select{
  width:100%;background:#080705;color:#f3dfb8;border:1px solid #68451f;
  border-radius:4px;padding:11px 12px;margin:6px 0 14px;font-family:inherit;
  box-shadow:inset 0 2px 8px #000
}
input:focus,textarea:focus,select:focus{outline:1px solid #d7a65d;box-shadow:0 0 0 3px #b77a2c22,inset 0 2px 8px #000}
textarea{min-height:115px}
label{color:#c9a86f;font-size:13px;letter-spacing:.4px}
.muted{color:var(--muted)}
.small{font-size:12px}
.badge{display:inline-block;padding:6px 10px;border:1px solid #74502a;border-radius:20px;background:#130e08;color:#dab16d;font-size:12px}
.icon{width:58px;height:58px;object-fit:cover;border-radius:6px;border:1px solid #8b5a28;background:#090705}

.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;padding:20px 16px;
  background:
    linear-gradient(rgba(12,9,6,.94),rgba(8,6,4,.97)),
    url("/static/ghosthost-ui-reference.png") left bottom/850px auto no-repeat;
  border-right:1px solid #6e481f;
  box-shadow:12px 0 32px #000b;z-index:30
}
.logo-box{
  text-align:center;padding:18px 10px 22px;margin-bottom:16px;
  border:1px solid #744923;box-shadow:inset 0 0 0 2px #090604,inset 0 0 0 3px #3e2815;
  background:linear-gradient(#151008,#0b0805)
}
.logo-main{font-size:30px;font-weight:900;color:#e7ba70;letter-spacing:1px;text-shadow:0 3px 0 #2f1507}
.logo-sub{font-size:10px;letter-spacing:4px;color:#b18046;margin-top:5px}
.nav-title{color:#80572d;font-size:10px;letter-spacing:2px;margin:18px 10px 8px}
.side-nav{display:flex;flex-direction:column;gap:6px}
.side-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid transparent;border-radius:3px;
  color:#d3bd97;font-size:13px
}
.side-nav a:hover,.side-nav a.active{background:#171009;border-color:#4f341a;color:#efc77b}
.side-icon{width:20px;text-align:center;color:#c58a43}
.side-gears{
  height:100px;margin-top:28px;position:relative;overflow:hidden;
}
.gsmall,.glarge{
  position:absolute;border:7px dotted #8d5d2c;border-radius:50%;opacity:.7
}
.gsmall{width:55px;height:55px;left:24px;top:25px;animation:spin 14s linear infinite}
.glarge{width:82px;height:82px;right:8px;top:2px;animation:spinR 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}} @keyframes spinR{to{transform:rotate(-360deg)}}

.content{min-width:0;background:linear-gradient(rgba(5,4,3,.68),rgba(5,4,3,.78))}
.topbar{
  height:66px;display:flex;justify-content:flex-end;align-items:center;padding:0 28px;
  background:#0c0906e8;border-bottom:1px solid #5a381c;box-shadow:0 7px 24px #0008
}
.user-chip{display:flex;align-items:center;gap:10px;border:1px solid #69451f;padding:7px 10px;background:#12100b;border-radius:4px}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#4d2e16;border:1px solid #aa7739}
.page{max-width:1180px;margin:0 auto;padding:28px}
.frame{
  position:relative;background:linear-gradient(180deg,rgba(20,15,10,.97),rgba(9,7,5,.98));
  border:1px solid #74502a;padding:20px;box-shadow:inset 0 0 0 2px #080503,inset 0 0 0 3px #3a2514,0 15px 40px #000a
}
.frame:before,.frame:after{content:"⚙";position:absolute;color:#8d5b28;font-size:18px}
.frame:before{top:5px;left:8px}.frame:after{bottom:4px;right:8px}
.page-title{display:flex;align-items:start;justify-content:space-between;gap:18px;margin-bottom:22px}
.page-title h1{margin:0;color:#e8bb70;font-size:31px;font-weight:500}
.page-title p{margin:7px 0 0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:13px;margin:17px 0 22px}
.stat-card{
  min-height:88px;padding:13px;border:1px solid #68451f;background:#0d0a07;
  box-shadow:inset 0 0 0 1px #24170d;position:relative
}
.stat-label{font-size:10px;color:#bd9a63;letter-spacing:1px;text-transform:uppercase}
.stat-value{font-size:25px;color:#e2b86e;margin-top:8px}
.stat-glyph{position:absolute;right:12px;bottom:12px;color:#9b6a32;font-size:24px}
.meter{height:7px;border:1px solid #493018;background:#050403;margin-top:8px}
.meter span{display:block;height:100%;background:linear-gradient(90deg,#98602a,#d69d4f)}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px}
.section-head h2{font-size:20px;font-weight:500;color:#e5b76d;margin:0}
.table-wrap{overflow:auto;border:1px solid #573719;background:#090705}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #3e2916;font-size:12px}
th{font-size:10px;color:#bd9560;letter-spacing:.6px;text-transform:uppercase;background:#0f0c08}
td{color:#d8c5a5}
.action-link{color:#d09248;margin-right:9px}

.auth-bg{
  min-height:100vh;display:grid;place-items:center;padding:28px;
  background:
    linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.18)),
    url("/static/ghosthost-ui-reference.png") center center/cover no-repeat fixed;
}
.auth-panel{
  width:min(440px,92vw);padding:28px 30px;text-align:center;
  background:linear-gradient(180deg,rgba(20,16,11,.94),rgba(8,7,5,.96));
  border:1px solid #9c6a30;box-shadow:inset 0 0 0 2px #080604,inset 0 0 0 4px #35210f,0 24px 80px #000d;
  position:relative
}
.auth-panel:before,.auth-panel:after{content:"⚙";position:absolute;color:#855729;font-size:22px}
.auth-panel:before{top:8px;left:10px}.auth-panel:after{right:10px;bottom:8px}
.auth-logo{font-size:39px;color:#e1b169;font-weight:900;letter-spacing:2px;text-shadow:0 3px 0 #351707}
.auth-logo-sub{font-size:12px;letter-spacing:5px;color:#aa7b40;margin-bottom:24px}
.auth-panel h1{font-size:24px;color:#efc679;font-weight:500;margin:0 0 5px}
.auth-panel .sub{font-size:11px;color:#b18b55;letter-spacing:3px;margin-bottom:18px}
.auth-panel button{width:100%;font-size:18px}
.auth-links{margin-top:16px;font-size:13px}

.upload-drop{
  min-height:320px;display:grid;place-items:center;text-align:center;border:1px dashed #8a5b28;background:#0a0806;padding:30px
}
.upload-cloud{font-size:58px;color:#b77a37;margin-bottom:12px}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.vault-scene{
  position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;
  background:
    linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.35)),
    url("/static/ghosthost-ui-reference.png") center center/cover no-repeat
}
.vault-stage{width:min(780px,86vw);aspect-ratio:1;position:relative;perspective:1350px}
.vault-message{
  position:absolute;inset:13%;display:grid;place-items:center;text-align:center;border-radius:50%;
  background:radial-gradient(circle,#25170d,#080604 70%);border:2px solid #80552a;z-index:1;padding:12%
}
.vault-message-box{width:min(90%,520px);padding:22px;background:#0a0705cc;border:1px solid #60401f}
.vault-message h1{font-size:clamp(30px,5vw,54px);margin:7px 0;color:#e9bd72;overflow-wrap:anywhere}
.vault-door{
  position:absolute;inset:0;border-radius:50%;z-index:4;transform-origin:8% 50%;
  background:
    repeating-radial-gradient(circle at center,transparent 0 18%,#6d461f 19% 20%,transparent 21% 31%),
    radial-gradient(circle at 45% 35%,#aa7337,#3c210f 27%,#171008 55%,#7b5229 56% 60%,#160e08 61%);
  border:14px solid #1a1008;
  box-shadow:0 0 0 6px #8e5e2c,0 0 0 18px #1c1109,0 0 0 23px #5f3e20,0 30px 100px #000,inset -25px -20px 60px #000;
  animation:vaultOpen 2.6s cubic-bezier(.62,.03,.16,1) .7s forwards
}
.vault-door:before{
  content:"";position:absolute;width:35%;aspect-ratio:1;left:32.5%;top:32.5%;border-radius:50%;
  border:13px solid #9b642d;box-shadow:inset 0 0 0 14px #160d07,0 0 0 4px #2b190c
}
.vault-door:after{
  content:"";position:absolute;left:49%;top:22%;width:10px;height:56%;background:#9e682f;
  box-shadow:-125px 0 #74451e,125px 0 #74451e;transform:rotate(45deg)
}
@keyframes vaultOpen{to{transform:rotateY(-116deg) translateX(-22%);filter:brightness(.48)}}

.public-page{max-width:1180px;margin:0 auto;padding:34px 22px}
.hero-public{
  min-height:360px;display:grid;place-items:center;text-align:center;padding:35px;
  background:linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,.64)),url("/static/ghosthost-ui-reference.png") center 12%/cover no-repeat;
  border:1px solid #6e481f;box-shadow:0 20px 55px #000b
}
.hero-public h1{font-size:clamp(42px,7vw,76px);color:#e8b96e;margin:0;text-shadow:0 3px #321607}
.public-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-top:20px}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.side-gears{display:none}
  .stats{grid-template-columns:1fr 1fr}.topbar{display:none}.account-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .stats{grid-template-columns:1fr}.page{padding:18px}.auth-bg{background-position:32% center}
}


/* ===== Full-page gear opening transition ===== */
.gear-transition{
  position:fixed; inset:0; overflow:hidden; background:#070503; color:#ead7b0;
  z-index:9999; perspective:1600px;
}
.gear-transition .dashboard-underlay{
  position:absolute; inset:0; z-index:0; overflow:auto;
  opacity:.35; transform:scale(.985);
  filter:blur(1px) brightness(.72);
  animation:dashReveal 3.25s cubic-bezier(.22,.78,.22,1) .45s forwards;
}
.mechanism{
  position:absolute; inset:0; z-index:10; pointer-events:none;
}
.mechanism-panel{
  position:absolute;
  background:
    linear-gradient(rgba(7,5,3,.16),rgba(7,5,3,.25)),
    url("/static/gear-opening-scene.png") center center/cover no-repeat;
  will-change:transform,filter,opacity;
}
.mech-left{
  left:0; top:0; width:50.5%; height:100%;
  background-position:left center;
  clip-path:polygon(0 0,100% 0,93% 14%,98% 28%,92% 45%,100% 62%,94% 79%,100% 100%,0 100%);
  animation:leftOpen 3.15s cubic-bezier(.68,.01,.17,1) .35s forwards;
}
.mech-right{
  right:0; top:0; width:50.5%; height:100%;
  background-position:right center;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6% 82%,1% 65%,7% 47%,2% 29%,7% 13%);
  animation:rightOpen 3.15s cubic-bezier(.68,.01,.17,1) .35s forwards;
}
.mech-top{
  left:22%; top:0; width:56%; height:21%;
  background-position:center top;
  box-shadow:0 15px 45px #000b;
  clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);
  animation:topOpen 2.7s cubic-bezier(.7,.02,.18,1) .55s forwards;
}
.mech-bottom{
  left:17%; bottom:0; width:66%; height:20%;
  background-position:center bottom;
  box-shadow:0 -15px 45px #000b;
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);
  animation:bottomOpen 2.7s cubic-bezier(.7,.02,.18,1) .55s forwards;
}
.login-retractor{
  position:absolute; left:50%; top:49%; z-index:14;
  transform:translate(-50%,-50%);
  width:min(420px,86vw);
  padding:26px 28px;
  border:1px solid #a36c31;
  background:linear-gradient(180deg,rgba(20,15,10,.97),rgba(8,6,4,.98));
  box-shadow:inset 0 0 0 2px #080503,inset 0 0 0 4px #3c2512,0 25px 70px #000d;
  text-align:center;
  animation:panelRetract 2.25s cubic-bezier(.71,-.02,.23,1) .45s forwards;
}
.login-retractor .logo-main{
  font-size:39px;color:#e3b46b;text-shadow:0 3px #301606;letter-spacing:2px;
}
.login-retractor .logo-sub{
  color:#af7b3e;letter-spacing:5px;font-size:11px;margin:5px 0 18px;
}
.login-retractor h2{color:#efc57a;font-weight:500;letter-spacing:2px}
.login-retractor p{color:#bea173}
.gear-wheel{
  position:absolute; z-index:18; border-radius:50%;
  border:12px dotted #9b682f;
  box-shadow:inset 0 0 0 10px #1d1109,0 0 0 3px #4b2c13,0 0 28px #000;
  background:radial-gradient(circle,#a76e31 0 9%,#241309 10% 31%,#8b5929 32% 37%,#171008 38%);
}
.gear-wheel:before,.gear-wheel:after{
  content:""; position:absolute; left:50%; top:10%; width:8px; height:80%;
  background:#9a652e; transform:translateX(-50%);
  box-shadow:0 0 0 2px #2b170b;
}
.gear-wheel:after{transform:translateX(-50%) rotate(90deg)}
.gw1{width:250px;height:250px;left:3%;top:11%;animation:spinFast 2.8s linear forwards,leftGearExit 3.15s cubic-bezier(.68,.01,.17,1) .35s forwards}
.gw2{width:175px;height:175px;left:18%;bottom:9%;animation:spinReverseFast 2.8s linear forwards,leftGearExit2 3.15s cubic-bezier(.68,.01,.17,1) .35s forwards}
.gw3{width:260px;height:260px;right:2%;top:9%;animation:spinReverseFast 2.8s linear forwards,rightGearExit 3.15s cubic-bezier(.68,.01,.17,1) .35s forwards}
.gw4{width:165px;height:165px;right:18%;bottom:10%;animation:spinFast 2.8s linear forwards,rightGearExit2 3.15s cubic-bezier(.68,.01,.17,1) .35s forwards}
.gw5{width:125px;height:125px;left:calc(50% - 62px);top:4%;animation:spinFast 2.5s linear forwards,topGearExit 2.7s ease-in .55s forwards}
.gw6{width:135px;height:135px;left:calc(50% - 67px);bottom:3%;animation:spinReverseFast 2.5s linear forwards,bottomGearExit 2.7s ease-in .55s forwards}

.steam-puff{
  position:absolute; z-index:20; width:260px; height:160px;
  background:radial-gradient(ellipse at center,rgba(235,224,197,.52),rgba(170,154,128,.17) 38%,transparent 70%);
  filter:blur(17px); opacity:0; mix-blend-mode:screen;
}
.sp1{left:22%;top:30%;animation:steamBurst 2.2s ease-out .75s forwards}
.sp2{right:20%;top:42%;animation:steamBurst 2.2s ease-out .95s forwards}
.sp3{left:38%;bottom:12%;animation:steamBurst 2.2s ease-out 1.1s forwards}

.spark-field{
  position:absolute; inset:0; z-index:25; pointer-events:none; overflow:hidden;
}
.spark-field i{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:#ffc66d;box-shadow:0 0 8px #ff9e36;
  opacity:0; animation:sparkFly 1.25s linear var(--delay) forwards;
  left:var(--x); top:var(--y);
}

.opening-label{
  position:absolute;left:50%;bottom:5.5%;transform:translateX(-50%);z-index:30;
  color:#e4b96f;letter-spacing:5px;font-size:12px;text-shadow:0 2px 8px #000;
  opacity:0;animation:labelFade 2.4s ease .5s forwards;
}

@keyframes leftOpen{
  0%{transform:translateX(0) rotate(0);filter:brightness(1)}
  100%{transform:translateX(-108%) rotate(-3deg);filter:brightness(.55)}
}
@keyframes rightOpen{
  0%{transform:translateX(0) rotate(0);filter:brightness(1)}
  100%{transform:translateX(108%) rotate(3deg);filter:brightness(.55)}
}
@keyframes topOpen{to{transform:translateY(-120%);filter:brightness(.55)}}
@keyframes bottomOpen{to{transform:translateY(120%);filter:brightness(.55)}}
@keyframes panelRetract{
  0%{transform:translate(-50%,-50%) scale(1) rotateX(0);opacity:1}
  45%{transform:translate(-50%,-50%) scale(.92) rotateX(8deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.18) rotateX(38deg);opacity:0}
}
@keyframes spinFast{to{transform:rotate(540deg)}}
@keyframes spinReverseFast{to{transform:rotate(-540deg)}}
@keyframes leftGearExit{to{translate:-125% 0;opacity:.25}}
@keyframes leftGearExit2{to{translate:-170% 20%;opacity:.2}}
@keyframes rightGearExit{to{translate:125% 0;opacity:.25}}
@keyframes rightGearExit2{to{translate:170% 20%;opacity:.2}}
@keyframes topGearExit{to{translate:0 -170%;opacity:.15}}
@keyframes bottomGearExit{to{translate:0 170%;opacity:.15}}
@keyframes steamBurst{
  0%{opacity:0;transform:scale(.55) translateY(20px)}
  35%{opacity:.62}
  100%{opacity:0;transform:scale(1.7) translateY(-50px)}
}
@keyframes sparkFly{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}
}
@keyframes dashReveal{
  0%{opacity:.25;transform:scale(.985);filter:blur(2px) brightness(.65)}
  65%{opacity:.7;filter:blur(.4px) brightness(.85)}
  100%{opacity:1;transform:scale(1);filter:none}
}
@keyframes labelFade{
  0%{opacity:0}20%{opacity:1}75%{opacity:1}100%{opacity:0}
}

@media(max-width:800px){
  .gw1,.gw3{width:180px;height:180px}
  .gw2,.gw4{width:120px;height:120px}
  .login-retractor{width:min(360px,82vw)}
}


/* ===== Cyber/Steampunk Login Background ===== */
.auth-bg{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.16)),
    url("/static/cyber-steampunk-login.png") center center/cover no-repeat fixed !important;
}
.auth-panel{
  width:min(455px,92vw);
  padding:30px 32px;
  background:linear-gradient(180deg,rgba(14,12,10,.92),rgba(7,6,5,.95));
  border:1px solid #9b6a35;
  box-shadow:
    inset 0 0 0 2px #070503,
    inset 0 0 0 4px #3c2816,
    0 28px 85px rgba(0,0,0,.82);
  backdrop-filter:blur(3px);
}
.auth-panel .auth-logo,
.auth-panel .auth-logo-sub{
  display:none !important;
}
.auth-panel h1{
  margin-top:0;
  font-size:28px;
  letter-spacing:2px;
  color:#efc878;
  text-shadow:0 2px 8px #000;
}
.auth-panel .sub{
  color:#ba965e;
  letter-spacing:3px;
  font-size:11px;
}
.auth-panel input{
  background:rgba(5,7,8,.91);
  border-color:#75512a;
}
.auth-panel button{
  font-size:19px;
  background:linear-gradient(#d49c50,#8d5425);
}
@media(max-width:700px){
  .auth-bg{
    background-position:center center !important;
    padding:16px;
  }
  .auth-panel{
    width:min(430px,94vw);
    padding:24px 20px;
  }
}


/* ===== FINAL CYBER-STEAMPUNK LOGIN ===== */
.auth-bg{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(rgba(0,0,0,.03),rgba(0,0,0,.08)),
    url("/static/final-cyber-login.png") center center/cover no-repeat fixed !important;
}

/* This panel deliberately covers the fake login panel rendered in the artwork,
   replacing it with the real interactive form. */
.auth-panel{
  width:min(565px,90vw);
  padding:34px 38px 32px;
  margin-top:0;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(24,21,17,.985),rgba(9,8,7,.992));
  border:1px solid #9b6a35;
  border-radius:7px;
  box-shadow:
    inset 0 0 0 2px #070503,
    inset 0 0 0 4px #3d2817,
    inset 0 0 45px rgba(0,0,0,.42),
    0 25px 85px rgba(0,0,0,.72);
  backdrop-filter:blur(2px);
  position:relative;
  z-index:5;
}
.auth-panel:before,
.auth-panel:after{
  content:"";
  position:absolute;
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#f0c47a,#8a5727 58%,#1d0f06 60%);
  box-shadow:0 0 0 1px #120905;
}
.auth-panel:before{left:10px;top:10px}
.auth-panel:after{right:10px;bottom:10px}

.auth-panel h1{
  margin:0 0 8px;
  color:#e8bb70;
  font-size:clamp(29px,4vw,43px);
  font-weight:700;
  letter-spacing:1.5px;
  text-shadow:0 3px 0 #351907,0 0 18px rgba(0,0,0,.75);
}
.auth-panel .sub{
  margin-bottom:24px;
  color:#d0aa6e;
  letter-spacing:1.8px;
  font-size:15px;
}
.auth-panel input{
  height:58px;
  font-size:18px;
  background:rgba(5,7,8,.96);
  border:1px solid #7c572c;
  box-shadow:inset 0 3px 12px #000;
}
.auth-panel button{
  width:100%;
  height:62px;
  margin-top:8px;
  font-size:24px;
  letter-spacing:1.5px;
  background:
    linear-gradient(180deg,#d7a04e,#92551f);
  border:1px solid #f0c576;
  box-shadow:
    inset 0 1px #ffe1a0,
    inset 0 -3px #5f3212,
    0 4px 0 #3b1d0b,
    0 12px 28px #0008;
}
.auth-links{
  margin-top:22px;
  color:#d2b27d;
  font-size:17px;
  line-height:1.7;
}
.auth-links a{
  color:#e5b966;
  text-decoration:underline;
  text-underline-offset:3px;
}

.login-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:0 0 8px;
  font-size:14px;
  color:#ceb080;
}
.remember-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.remember-wrap input{
  width:18px;height:18px;margin:0;
}
.fake-forgot{
  opacity:.9;
}

@media(max-width:700px){
  .auth-bg{
    background-position:center center !important;
    padding:14px;
  }
  .auth-panel{
    width:min(520px,95vw);
    padding:28px 22px;
  }
  .login-options{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}


/* ===== CYBER-STEAMPUNK PUBLIC HOMEPAGE ===== */
.public-home{
  min-height:100vh;
  background:
    linear-gradient(rgba(5,4,4,.48),rgba(5,4,4,.82)),
    url("/static/final-cyber-login.png") center center/cover fixed no-repeat;
}
.public-topbar{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 5%;
  background:linear-gradient(180deg,rgba(19,14,10,.97),rgba(8,6,5,.96));
  border-bottom:1px solid #76502a;
  box-shadow:0 10px 30px rgba(0,0,0,.72);
  position:sticky;
  top:0;
  z-index:50;
}
.public-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#ecc477;
  font-size:25px;
  font-weight:900;
  letter-spacing:1.4px;
  text-shadow:0 2px 0 #2d1508;
}
.public-brand-mark{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#e5b765;
  border:2px solid #8d5d2b;
  background:radial-gradient(circle,#24150b 0 37%,#7a4c21 38% 42%,#110a06 43%);
  animation:spin 18s linear infinite;
}
.public-actions{display:flex;gap:10px;flex-wrap:wrap}
.public-shell{max-width:1200px;margin:0 auto;padding:34px 22px 50px}
.home-hero{
  min-height:470px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:46px 28px;
  border:1px solid #7a5128;
  background:
    radial-gradient(circle at 50% 44%,rgba(0,0,0,.18),rgba(0,0,0,.66) 67%),
    linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.22));
  box-shadow:
    inset 0 0 0 2px #080503,
    inset 0 0 0 4px #3a2515,
    0 24px 75px rgba(0,0,0,.72);
  position:relative;
  overflow:hidden;
}
.home-hero:before,.home-hero:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  border:13px dotted #9b682f;
  opacity:.45;
}
.home-hero:before{left:-70px;top:-55px;animation:spin 22s linear infinite}
.home-hero:after{right:-70px;bottom:-55px;animation:spinR 19s linear infinite}
.hero-kicker{
  color:#c69d62;
  letter-spacing:6px;
  font-size:12px;
  text-transform:uppercase;
}
.home-hero h1{
  margin:8px 0 10px;
  color:#efc77a;
  font-size:clamp(48px,8vw,88px);
  line-height:.98;
  text-shadow:0 4px 0 #321707,0 0 24px #000;
}
.home-hero p{
  max-width:760px;
  margin:0 auto 25px;
  color:#d8c4a2;
  font-size:19px;
  line-height:1.55;
}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-cta .btn{font-size:16px;padding:13px 20px}

.feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:18px 0;
}
.feature-tile{
  min-height:128px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:center;
  border:1px solid #69451f;
  background:linear-gradient(180deg,rgba(17,13,9,.96),rgba(8,6,5,.97));
  box-shadow:inset 0 0 0 2px #080503,inset 0 0 0 3px #342113,0 12px 30px #0008;
}
.feature-icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#e3b46a;
  font-size:25px;
  border:2px solid #885a2a;
  background:radial-gradient(circle,#28180d,#0d0805 68%);
}
.feature-tile h3{margin:0 0 5px;color:#e8bb71;font-weight:500}
.feature-tile p{margin:0;color:#bba27d;font-size:13px;line-height:1.45}

.search-console{
  margin-top:20px;
  padding:20px;
  border:1px solid #71491f;
  background:linear-gradient(180deg,rgba(15,11,8,.96),rgba(7,6,4,.98));
  box-shadow:inset 0 0 0 2px #080503,inset 0 0 0 3px #372313,0 16px 38px #0009;
}
.console-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#dbae69;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
}
.console-light{
  width:10px;height:10px;border-radius:50%;
  background:#8ae5ff;
  box-shadow:0 0 12px #47c7ff;
}
.search-row{
  display:grid;
  grid-template-columns:2fr 1fr auto;
  gap:12px;
  align-items:center;
}
.search-row input,.search-row select{margin:0;height:52px}
.search-row button{height:52px}

.apps-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin:30px 0 14px;
}
.apps-heading h2{margin:0;color:#e9bd72;font-size:28px;font-weight:500}
.apps-heading span{color:#a88c64;font-size:13px}
.apk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.apk-card{
  position:relative;
  min-height:220px;
  padding:20px;
  color:#e9d5b1;
  background:
    linear-gradient(180deg,rgba(18,14,10,.96),rgba(8,6,5,.98));
  border:1px solid #69431e;
  box-shadow:inset 0 0 0 2px #080503,inset 0 0 0 3px #332012,0 14px 36px #0009;
  transition:transform .18s ease, border-color .18s ease, filter .18s ease;
}
.apk-card:hover{
  transform:translateY(-4px);
  border-color:#a16d31;
  filter:brightness(1.06);
}
.apk-card:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#744d27,#60ccff,#9a5bff,#744d27,transparent);
  opacity:.75;
}
.apk-card-head{display:flex;align-items:center;gap:14px}
.apk-card .icon{
  width:62px;height:62px;border-radius:8px;
  border:1px solid #8e5c2b;
  background:#090705;
}
.apk-card h3{margin:0;color:#e6b86c;font-size:21px;font-weight:500}
.apk-meta{margin:4px 0 0;color:#a99169;font-size:12px}
.apk-desc{color:#ccb894;line-height:1.5;font-size:14px}
.apk-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid #3d2916;
  color:#987c58;
  font-size:12px;
}

.status-bar{
  margin-top:22px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:12px 16px;
  border:1px solid #553719;
  background:#090705e8;
  color:#997e59;
  font-size:12px;
}
.status-online{
  color:#a4d9c5;
}
.status-online:before{
  content:"";
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  margin-right:7px;
  background:#65d7a7;
  box-shadow:0 0 9px #65d7a7;
}

@media(max-width:900px){
  .feature-strip{grid-template-columns:1fr 1fr}
  .search-row{grid-template-columns:1fr}
  .public-topbar{align-items:flex-start}
}
@media(max-width:600px){
  .feature-strip{grid-template-columns:1fr}
  .public-topbar{flex-direction:column}
  .home-hero{min-height:400px;padding:32px 18px}
  .public-shell{padding:20px 14px 35px}
}