/* Warnoes OS v5.3.0 — environment-safe demo authentication */
.demo-auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 18px;padding:5px;
  border:1px solid rgba(45,31,24,.1);border-radius:16px;background:rgba(43,29,21,.055)
}
.demo-auth-tabs button{
  min-width:0;min-height:43px;padding:9px 12px;border:0;border-radius:12px;background:transparent;
  color:#70635c;font:800 11px/1.15 inherit;letter-spacing:.01em;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s
}
.demo-auth-tabs button.is-active{background:#fff;color:#1e1511;box-shadow:0 5px 17px rgba(42,27,19,.11)}
.demo-auth-tabs button:focus-visible{outline:3px solid rgba(255,193,18,.38);outline-offset:2px}
.demo-auth-tabs i{display:inline-flex;margin-left:5px;padding:3px 5px;border-radius:5px;background:#ffe39a;color:#7a4b00;font:900 7px/1 inherit;letter-spacing:.09em;vertical-align:1px}
.demo-auth-notice{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid #f0d784;border-radius:13px;background:linear-gradient(115deg,#fff9df,#fffdf7);color:#685a50}
.demo-auth-notice b{flex:0 0 auto;padding:5px 7px;border-radius:7px;background:#17100d;color:#ffd21c;font-size:8px;letter-spacing:.1em}
.demo-auth-notice span{margin:0!important;font-size:10px!important;line-height:1.4}
.demo-password-field{position:relative;display:flex!important;align-items:center;width:100%;margin:0!important}
.demo-password-field input{padding-right:82px!important}
.demo-password-field button{
  position:absolute;right:9px;z-index:2;min-width:58px;height:36px;padding:0 9px;border:1px solid rgba(44,30,23,.1);border-radius:10px;
  background:#f5f0eb;color:#4d4038;font:850 9px/1 inherit;cursor:pointer
}
.demo-password-field button:hover{background:#eee5dd}

.wx-demo-auth-tabs{margin-top:-5px}
.wx-gate-security [data-auth-security]{font:inherit;letter-spacing:inherit}
.wx-auth-gate[data-auth-flow="password"] .wx-gate-security i{background:#ffb800;box-shadow:0 0 0 4px rgba(255,184,0,.14)}
.wx-auth-gate[data-auth-flow="password"] .wx-gate-security{color:#7a4b00}
.wx-auth-gate .demo-password-login{gap:10px}
.wx-auth-gate .demo-password-login .demo-auth-notice{margin-bottom:2px}
.wx-auth-gate .demo-password-field>button{display:grid;place-items:center;width:auto;color:#4d4038}

.eo-demo-auth-tabs{margin:2px 0 19px}
.eo-auth-panel [data-organizer-auth-panel][hidden]{display:none!important}
.eo-auth-panel .demo-auth-notice{margin-bottom:2px}
.eo-auth-panel .demo-password-field input{height:62px}
.eo-auth-panel .demo-password-field button{display:block;width:auto;min-height:36px;padding:0 10px;background:#f5f0eb;color:#4d4038;box-shadow:none}

.demo-staff-login-note{margin:-4px 0 20px;padding:13px 15px;border:1px solid #ecd172;border-radius:14px;background:#fff8d9}
.demo-staff-login-note span{display:inline-flex;padding:5px 7px;border-radius:6px;background:#17100d;color:#ffd21c;font-size:8px;font-weight:900;letter-spacing:.12em}
.demo-staff-login-note p{margin:8px 0 0;color:#65574f;font-size:11px;line-height:1.5}
.demo-environment-bar{display:flex;align-items:center;justify-content:center;gap:9px;min-height:35px;padding:7px 16px;background:#2a1d18;color:#fff4d0;font-size:10px;letter-spacing:.015em}
.demo-environment-bar b{padding:4px 7px;border-radius:6px;background:#ffd21c;color:#21140d;font-size:8px;letter-spacing:.12em}

@media(max-width:680px){
  .demo-auth-tabs{margin-bottom:15px}
  .demo-auth-tabs button{min-height:40px;padding-inline:8px;font-size:10px}
  .demo-auth-notice{align-items:flex-start;flex-direction:column;gap:7px}
  .demo-auth-notice span{font-size:9px!important}
  .demo-environment-bar{align-items:flex-start;justify-content:flex-start;font-size:9px;line-height:1.35}
}
@media(min-width:901px) and (max-height:780px){
  .eo-auth-panel{padding-block:24px}
  .eo-auth-kicker{margin-bottom:20px}
  .eo-auth-panel h2{font-size:44px}
  .eo-lead{margin-bottom:17px}
  .eo-auth-panel input,.eo-auth-panel .demo-password-field input{height:54px}
  .eo-auth-panel form>button{min-height:54px}
  .eo-auth-foot{margin-top:14px;padding-block:10px}
}
@media(max-width:380px){.demo-auth-tabs i{display:none}.demo-auth-tabs button{font-size:9px}}
@media(prefers-reduced-motion:reduce){.demo-auth-tabs button{transition:none}}
