:root{
  --aqua:#00d2ff;
  --green:#7CFFB2;
  --bg1:#061a22;
  --bg2:#042b2a;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body.pkr-app-shell{
  background: radial-gradient(1200px 800px at 20% 10%, rgba(0,210,255,.18), transparent 60%),
              radial-gradient(900px 700px at 80% 20%, rgba(124,255,178,.10), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  color:#eafcff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.pkr-shell{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;}
.pkr-brand{text-align:center;margin-bottom:16px;}
.pkr-logo{width:96px;height:96px;border-radius:24px;box-shadow:0 10px 35px rgba(0,210,255,.25);opacity:0;transform:scale(.95);animation:pkrLogoIn .38s ease-out forwards;}
.pkr-appname{margin-top:10px;font-size:22px;font-weight:800;letter-spacing:.5px;opacity:0;transform:translateY(2px);animation:pkrNameIn .38s ease-out .10s forwards;}
@keyframes pkrLogoIn{to{opacity:1;transform:scale(1);}}
@keyframes pkrNameIn{to{opacity:1;transform:translateY(0);}}
.pkr-card{
  width:min(420px, 92vw);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(0,210,255,.20);
  border-radius:22px;
  padding:16px 16px 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
label{display:block;font-size:13px;opacity:.92;margin:10px 0 6px;}
input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:#eafcff;
  outline:none;
  user-select:text;
}
input:focus{border-color:rgba(0,210,255,.55);box-shadow:0 0 0 3px rgba(0,210,255,.12);}
.pkr-select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:#eafcff;
  outline:none;
}
.pkr-select:focus{border-color:rgba(0,210,255,.55);box-shadow:0 0 0 3px rgba(0,210,255,.12);}

/* Themed "select" button (replaces native select UI on mobile) */
.pkr-pick{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:#eafcff;
  text-align:left;
}
.pkr-pick:active{transform:scale(.99);}
.pkr-chev{opacity:.75;font-weight:900;}
.pkr-passwrap{position:relative;}
.pkr-eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:none;background:transparent;padding:6px;border-radius:12px;
}
.pkr-eye img{width:22px;height:22px;opacity:.92;}
.pkr-btn{
  width:100%;
  margin-top:14px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(0,210,255,.35);
  background: linear-gradient(135deg, rgba(0,210,255,.35), rgba(124,255,178,.18));
  color:#062029;
  font-weight:900;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.pkr-btn:active{transform:scale(.97);filter:brightness(1.02);}
.pkr-btn[disabled]{opacity:.65;pointer-events:none;}
.pkr-btn-ghost{
  margin-top:0;
  background: rgba(255,255,255,.06);
  color:#eafcff;
}
.pkr-row{display:flex;align-items:center;gap:10px;margin-top:12px;}
.pkr-row .pkr-btn{flex:1;}
.pkr-timer{min-width:64px;text-align:right;font-weight:800;opacity:.85;}
.pkr-panel.is-hidden{display:none;}
.pkr-links{display:flex;justify-content:space-between;gap:10px;margin-top:14px;}
.pkr-linkbtn{
  border:none;background:transparent;color:#dffbff;font-weight:700;padding:8px 2px;
}
.pkr-linkbtn-strong{font-weight:900;text-decoration:underline;}
.pkr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pkr-check{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;opacity:.95;}
.pkr-check input{width:auto;margin:0;}
.pkr-check a{color:#dffbff;text-decoration:underline;}

/* Modals */
.pkr-modal{position:fixed;inset:0;display:none;z-index:99999;}
.pkr-modal[aria-hidden="false"]{display:block;}
.pkr-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(6px);}
.pkr-modal-card{
  position:relative;
  width:min(440px, 92vw);
  margin:10vh auto 0;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(0,210,255,.22);
  border-radius:22px;
  padding:14px 14px 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.pkr-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.pkr-modal-title{font-weight:900;letter-spacing:.3px;}
.pkr-modal-x{border:none;background:transparent;color:#eafcff;font-size:28px;line-height:1;padding:0 6px;}

.pkr-msg{
  margin:6px 0 10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,210,255,.10);
  border:1px solid rgba(0,210,255,.18);
  font-weight:800;
  font-size:13px;
}
.pkr-otp-reveal{margin-top:10px;animation:pkrReveal .20s ease-out;}
@keyframes pkrReveal{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.pkr-toast{
  /*
   * Global toast must stay ABOVE any modal backdrop/card.
   * Otherwise error/success messages become invisible when Register/Forgot modal is open.
   */
  position:fixed;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:100000;
  width:min(520px, 92vw);
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,210,255,.12);
  border:1px solid rgba(0,210,255,.22);
  font-weight:700;
  font-size:13px;
}

/* Picker */
.pkr-picker{position:fixed;inset:0;display:none;z-index:100001;}
.pkr-picker[aria-hidden="false"]{display:block;}
.pkr-picker-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(6px);}
.pkr-picker-card{
  position:relative;
  width:min(440px, 92vw);
  margin:12vh auto 0;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(0,210,255,.22);
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.pkr-picker-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.10);}
.pkr-picker-title{font-weight:900;letter-spacing:.2px;}
.pkr-picker-x{border:none;background:transparent;color:#eafcff;font-size:28px;line-height:1;padding:0 6px;}
.pkr-picker-list{max-height:52vh;overflow:auto;}
.pkr-picker-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border:none;
  background:transparent;
  color:#eafcff;
  font-weight:800;
  text-align:left;
}
.pkr-picker-item + .pkr-picker-item{border-top:1px solid rgba(255,255,255,.08);}
.pkr-picker-item:active{background:rgba(0,210,255,.10);}