:root{
  --panel:rgba(30,30,30,0.55);
  --text:#000000;
  --btn-green:#2fb885;
  --btn-gray:rgba(0,0,0,0.35);
}
html, body{
  height:100%;margin:0;font-family:'Segoe UI',Arial,sans-serif;color:var(--text);
  display:flex;justify-content:center;align-items:center;overflow:hidden;
  background:url('icons/color-web.png') no-repeat center center fixed;
  background-size:cover;
}
.container{
  width:100%;max-width:330px;padding:24px 28px;background:var(--panel);
  border:1px solid rgba(0,0,0,0.25);border-radius:14px;text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.45);backdrop-filter:blur(12px);transition:.3s ease;
}
h1{color:#f1f1f1;font-size:22px;font-weight:700;margin-bottom:16px;}
input,select{
  width:100%;padding:7px 10px;margin-top:8px;border:1px solid #000;border-radius:6px;
  background:rgba(255,255,255,0.9);color:#000;font-size:15px;outline:none;
}
input::placeholder{color:rgba(0,0,0,0.7);}
button{
  width:70%;padding:9px;margin-top:8px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;
  transition:transform .12s ease,filter .2s ease,opacity .2s ease;border:1px solid rgba(0,0,0,0.4);
}
button:active{transform:scale(0.98);}
.green{background-color:var(--btn-green);color:#fff;}
.gray{background-color:var(--btn-gray);color:#fff;}
.text-btn{background:none;border:none;color:#000;font-size:12px;margin-top:8px;
  text-decoration:underline;cursor:pointer;opacity:.9;}
.text-btn:hover{opacity:1;}
.error{color:#ff4b4b;font-size:12px;margin-top:6px;}
.hidden{display:none;}
.flex-line{display:flex;justify-content:space-between;gap:10px;margin-top:10px;}
.button-stack{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:28px;}
#loginScreen,#guestScreen,#registerScreen{max-width:235px;padding:26px 20px;min-height:280px;}
#loginScreen input,#registerScreen input{
  width:176px;height:35px;font-size:15px;padding:5px 7px;margin:6px auto;display:block;color:#000;
  box-sizing:border-box;
}

/* Remember me */
.remember-container{display:flex;align-items:center;justify-content:flex-start;margin-top:6px;margin-left:10px;gap:5px;font-size:11px;color:#fff;}
.switch{position:relative;display:inline-block;width:26px;height:14px;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#555;border-radius:14px;transition:.2s;}
.slider:before{position:absolute;content:"";height:10px;width:10px;left:2px;bottom:2px;background-color:white;border-radius:50%;transition:.2s;}
input:checked + .slider{background-color:#2fb885;}
input:checked + .slider:before{transform:translateX(12px);}

/* Eye inside inputs */
.eye-wrap{
  position:relative;
  width:176px;
  margin:6px auto;
  overflow:visible;
}
.eye-wrap input{
  width:100%;
  height:35px;
  font-size:15px;
  padding:5px 36px 5px 10px;
  border:1px solid #000;
  border-radius:6px;
  background:rgba(255,255,255,0.9);
  color:#000;
  box-sizing:border-box;
}
.eye{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  opacity:0.7;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.eye:hover{opacity:1;}
.eye svg{width:20px;height:20px;fill:#777;}

/* Hidden admin button + tap zone */
#adminBtn{
  position:fixed;bottom:20px;right:20px;background:#1f1f1f;color:#fff;font-size:15px;
  border:none;border-radius:8px;padding:8px 14px;cursor:pointer;z-index:9999;display:none;
}
#tapZone{position:fixed;top:0;left:0;width:60px;height:60px;z-index:9998;}

/* ↓↓↓ Adjust inside Guest box only ↓↓↓ */
#guestScreen{
  max-width:250px;
  padding:30px 24px;
  min-height:310px;
}

/* Move Gender/Age and buttons lower inside Guest box */
#guestScreen .flex-line {
  margin-top:45px;
}

#guestScreen .button-stack {
  margin-top:40px;
}
/* ↑↑↑ End inner move adjustments ↑↑↑ */