:root{
  --bg:#070A12;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --accent:#ff3d77;
  --accent2:#7c4dff;
  --ok:#31d0aa;
  --radius:22px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(255,61,119,.25), transparent 60%),
    radial-gradient(800px 600px at 85% 15%, rgba(124,77,255,.25), transparent 60%),
    radial-gradient(800px 600px at 50% 95%, rgba(255,0,102,.12), transparent 55%),
    var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:
    max(0px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  overflow-x:hidden;
}

.shell{width:min(430px,100%); position:relative;}

.logoWrap{
  text-align:center;
  margin-bottom:16px;
}

/* Logo container (keeps same size + glow) */
.logo{
  width:60px;height:60px;border-radius:20px;margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 20px 60px rgba(255,61,119,.22),
    0 10px 35px rgba(124,77,255,.14);
  position:relative;
  overflow:hidden;
}
.logo:before{
  content:"";
  position:absolute; inset:-20px;
  background:
    radial-gradient(40px 40px at 25% 25%, rgba(255,61,119,.28), transparent 60%),
    radial-gradient(40px 40px at 75% 35%, rgba(124,77,255,.22), transparent 60%);
  filter: blur(2px);
}
.logo img{
  position:relative;
  z-index:1;
  width: 46px;
  height: 46px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.logoWrap strong{font-size:16px;letter-spacing:.4px;}
.logoWrap span{display:block;color:var(--muted);font-size:13px;margin-top:4px;}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border-radius:var(--radius);
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
  position:relative;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute; inset:-140px -140px auto auto;
  width: 360px; height: 360px;
  background: radial-gradient(circle at 30% 30%, rgba(255,61,119,.35), rgba(124,77,255,0) 62%);
  pointer-events:none;
  transform: rotate(10deg);
}
.card > *{ position:relative; z-index:1; }

.tabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.tab{
  flex:1;
  text-align:center;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-weight:800;
  cursor:pointer;
  font-size:13px;
  user-select:none;
}
.tab.active{
  border-color:rgba(255,61,119,.6);
  background:linear-gradient(135deg,rgba(255,61,119,.25),rgba(124,77,255,.15));
}

h1{margin:6px 0 8px;font-size:22px; letter-spacing:-.2px;}
p{color:var(--muted);font-size:13.5px;margin:0 0 14px;line-height:1.55;}

.field{margin-bottom:12px;}
.input{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.22);
  transition:border-color .12s ease, transform .12s ease;
}
.input:focus-within{
  border-color: rgba(255,61,119,.55);
  transform: translateY(-1px);
}
input{
  background:none;border:0;outline:none;
  color:white;width:100%;font-size:15px;
}
input::placeholder{ color: rgba(255,255,255,.40); }

.btn{
  width:100%;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,61,119,.6);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 16px 50px rgba(255,61,119,.18);
}
.btn:active{ transform: translateY(1px); }

.quickRegisterBtn{
  margin-top: 10px;
}

.quickRegisterHint{
  margin-top: 9px;
  color: rgba(255,255,255,.56);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
}

.subtext{
  text-align:center;
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
}

/* Branded static background image, kept subtle for performance and readability */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

body::before{
  z-index:0;
  background:
    linear-gradient(180deg, rgba(5,6,13,.70), rgba(5,6,13,.88) 52%, rgba(5,6,13,.96)),
    radial-gradient(820px 620px at 14% 8%, rgba(255,61,119,.24), transparent 62%),
    radial-gradient(760px 560px at 88% 12%, rgba(124,77,255,.18), transparent 58%),
    url('/images/background-image-sl.png') center center / cover no-repeat,
    var(--bg);
}

body::after{
  z-index:0;
  opacity:.15;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent);
}

.shell{
  z-index:1;
}

@media (max-width:640px){
  body::before{
    background-position:center top;
  }

  body::after{
    opacity:.10;
    background-size:72px 72px;
  }
}

.hidden{display:none;}

/* ===== Now Online (keep this, remove feed) ===== */
.liveMini{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(260px 140px at 20% 30%, rgba(49,208,170,.10), transparent 60%),
    rgba(0,0,0,.16);
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.liveMiniLeft{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.liveMiniLeft strong{
  font-size: 13px;
  letter-spacing:.2px;
}
.liveMiniLeft span{
  font-size: 12.3px;
  color: rgba(255,255,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.onlineRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.onlineCount{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.3px;
  color: rgba(255,255,255,.95);
}
.onlineDot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(49,208,170,.95);
  box-shadow: 0 0 0 10px rgba(49,208,170,.08);
  animation: pulseGreen 1.8s ease-in-out infinite;
}
@keyframes pulseGreen{
  0%{ transform: scale(.92); box-shadow: 0 0 0 10px rgba(49,208,170,.06); }
  50%{ transform: scale(1.18); box-shadow: 0 0 0 18px rgba(49,208,170,.02); }
  100%{ transform: scale(.92); box-shadow: 0 0 0 10px rgba(49,208,170,.06); }
}

/* ===== Floating "life" bubbles (top-left) ===== */
.bubbleHost{
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  left: calc(env(safe-area-inset-left) + 14px);
  z-index: 9999;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap: 10px;
  width: min(320px, calc(100vw - 28px));
}
.bubble{
  pointer-events:none;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  transform: translateX(-14px);
  opacity: 0;
  animation: bubbleIn .26s ease-out forwards;
}
@keyframes bubbleIn{
  to{ transform: translateX(0); opacity: 1; }
}
.bubble.out{
  animation: bubbleOut .26s ease-in forwards;
}
@keyframes bubbleOut{
  to{ transform: translateX(-14px); opacity: 0; }
}
.bAva{
  width: 34px; height:34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,61,119,.20), rgba(124,77,255,.16));
  position:relative;
  overflow:hidden;
  flex: 0 0 auto;
}
.bAva:after{
  content:"";
  position:absolute; inset:0;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.10);
}
.bTxt{ min-width:0; }
.bTxt strong{
  display:block;
  font-size: 12.8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bTxt span{
  display:block;
  margin-top:3px;
  font-size: 12.1px;
  color: rgba(255,255,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bTag{
  margin-left:auto;
  font-size: 10.8px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  white-space:nowrap;
}
.bTag.ok{ border-color: rgba(49,208,170,.30); background: rgba(49,208,170,.08); }
.bTag.hot{ border-color: rgba(255,61,119,.35); background: rgba(255,61,119,.10); }

@media (prefers-reduced-motion: reduce){
  .onlineDot{ animation:none !important; }
  .bubble{ animation:none !important; opacity:1 !important; transform:none !important; }
  .bubble.out{ animation:none !important; opacity:0 !important; }
}

/* ===== Select styling (match inputs) ===== */
.input select {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 15px;
  line-height: 52px;
}

.input select:focus {
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

/* Fake arrow */
.input { position: relative; }
.input:has(select)::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.65);
  border-bottom: 2px solid rgba(255,255,255,.65);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
  opacity: .9;
}

/* Placeholder-like first option */
.input select option[disabled] { color: #999; }

/* ===== Keep me signed in alignment ===== */
.fieldRemember {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.fieldRemember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #a855f7; /* optional; remove if you don't want color */
  flex: 0 0 auto;
}

.fieldRemember label {
  margin: 0;
  line-height: 1.2;
  opacity: .9;
}

#notify-container {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: auto;
}

/* Basis toast */
.notify-toast {
  min-width: 260px;
  max-width: 90vw;
  background: #323232;
  color: #fff;
  border-radius: 999px;
  padding: .8rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .18s ease-out, transform .18s ease-out;
  pointer-events: auto;
}

/* Binnenkant */
.notify-icon {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

.notify-message {
  flex: 1;
}

.notify-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* Animatiestatus */
.notify-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Types */
.notify-success {
  background: #1b5e20;
}

.notify-error {
  background: #b00020;
}

.notify-info {
  background: #2962ff;
}

.notify-warning {
  background: #f9a825;
}

@media (max-width: 600px) {

  #notify-container {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    padding: 0 12px;
  }

  .notify-toast {
    width: 100%;
    max-width: none;
    border-radius: 18px; /* minder rond, lijkt meer op moderne Android toasts */
    padding: 1rem 1.2rem;
  }
  
}

/* ===== Select: readable dropdown options ===== */

/* the closed select (inside form) */
.input select{
  color:#fff;
}

/* the dropdown list options (opened) */
.input select option{
  color:#111 !important;      /* IMPORTANT: readable text */
  background:#fff !important; /* readable background */
}

/* placeholder option (disabled) */
.input select option[disabled]{
  color:#666 !important;
}

.formCheck { margin-top: 10px; }
.checkRow { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:rgba(255,255,255,.78); }
.checkRow input { margin-top:3px; transform: scale(1.1); }
.checkRow a { color:#ff4fb3; text-decoration:none; }
.checkRow a:hover { text-decoration:underline; }

.termsRow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  cursor:pointer;
  user-select:none;
}

.termsRow input{
  margin: 3px 0 0;
  width:18px;
  height:18px;
  accent-color:#ff4fb3; /* werkt in moderne browsers */
  flex: 0 0 18px;
}

.termsText{
  display:block;
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  line-height:1.25;
  color: rgba(255,255,255,.78);
}

.termsText a{
  color:#ff4fb3;
  text-decoration:none;
}
.termsText a:hover{
  text-decoration:underline;
}

/* Register wizard */
.regProgress{
  display:flex;
  gap:10px;
  justify-content:center;
  margin: 6px 0 14px;
}
.regDot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.regDot.active{ background: rgba(255,255,255,.85); }
.regTitle{ margin: 6px 0 10px; font-size: 16px; }
.regNav{
  display:flex;
  gap:10px;
  margin-top: 12px;
}
.btnGhost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
.btnGhost:disabled{ opacity:.45; cursor:not-allowed; }

.hintRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  margin-top: 6px;
}
.hint{ font-size: 12px; color: rgba(255,255,255,.65); }
.statusPill{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  white-space: nowrap;
}
.statusPill.ok{ border-color: rgba(60, 210, 120, .35); }
.statusPill.bad{ border-color: rgba(255, 90, 90, .35); }

.avatarPreviewWrap{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.avatarPreviewWrap img{
  width: 54px; height: 54px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
}
.btnSm{ padding: 8px 10px; font-size: 13px; }

.fieldLabel{
  display:block;
  margin: 0 0 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

/* age pill styles (re-use statusPill look) */
#agePill.ok{ border-color: rgba(60, 210, 120, .35); }
#agePill.bad{ border-color: rgba(255, 90, 90, .35); }

.fileHidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

.photoPick{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.photoPickLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

.photoAvatar{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex: 0 0 auto;
}
.photoAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photoPickText{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.photoPickText strong{
  font-size: 13px;
  color: rgba(255,255,255,.92);
}
.photoPickText span{
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.photoActions{
  margin-top: 10px;
  display:flex;
  gap:10px;
}

.regSummary{
  margin: 6px 0 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.sumRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 0;
}
.sumLabel{
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.sumValue{
  font-size: 12px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
}

/* Last step polish */
.regSummary{
  padding: 8px 12px;
}
.sumRow{
  padding: 4px 0;
}
.sumValue{
  font-weight: 700;
}

/* Upload card iets strakker */
.photoPick{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}

/* Remove als compact link/button */
.photoActions{
  margin-top: 8px;
  justify-content: flex-end;
}
#avatarRemove{
  padding: 8px 10px;
  border-radius: 12px;
}

#avatarRemove{
  background: transparent;
  border-color: rgba(255,255,255,.14);
}

/* Lightweight static atmosphere, replaces the old video background */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

body::before{
  z-index:0;
  background:
    linear-gradient(118deg, rgba(255,61,119,.16), transparent 34%),
    linear-gradient(238deg, rgba(124,77,255,.15), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 20%, rgba(0,0,0,.24) 100%),
    #070A12;
}

body::after{
  z-index:0;
  opacity:.36;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 72%, transparent);
}

.shell,
#notify-container,
.bubbleHost{
  position:relative;
  z-index:1;
}

body::before,
body::after{
  content:none !important;
  display:none !important;
}

.appBackdrop{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,0) 22%),
    linear-gradient(124deg, rgba(150,24,83,.34), transparent 32%),
    linear-gradient(248deg, rgba(65,90,96,.20), transparent 34%),
    linear-gradient(180deg, #090913 0%, #060713 52%, #05060d 100%);
}

.appBackdrop::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  background-image:
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent);
}

/* ===== Final auth layout alignment ===== */
html{
  min-height: 100%;
  background: #05060d;
}

body{
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid !important;
  place-items: center !important;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
  overflow-x: hidden !important;
}

.shell{
  width: min(430px, calc(100vw - 32px)) !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  transform: none !important;
}

#notify-container{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  width: min(420px, calc(100vw - 24px)) !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.notify-toast{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: 18px !important;
}

@media (max-width: 520px){
  body{
    align-content: center !important;
  }

  .card{
    padding: 20px !important;
  }

  .tabs{
    gap: 8px !important;
  }

  .tab{
    min-width: 0 !important;
    padding: 12px 9px !important;
  }
}

/* ===== Final branded auth background ===== */
html{
  min-height: 100%;
  background: #05060d !important;
}

html::before,
html::after{
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html::before{
  background:
    linear-gradient(180deg, rgba(5,6,13,.70), rgba(5,6,13,.89) 52%, rgba(5,6,13,.97)),
    radial-gradient(820px 620px at 14% 8%, rgba(255,61,119,.24), transparent 62%),
    radial-gradient(760px 560px at 88% 12%, rgba(124,77,255,.18), transparent 58%),
    url('/images/background-image-sl.png') center center / cover no-repeat,
    #05060d !important;
}

html::after{
  opacity: .14 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) !important;
  background-size: 58px 58px !important;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent) !important;
}

body{
  background: transparent !important;
  min-height: 100svh !important;
}

.appBackdrop{
  background: transparent !important;
}

.appBackdrop::after{
  display: none !important;
}

.shell,
.bubbleHost{
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 640px){
  html::before{
    background-position: center top !important;
  }

  html::after{
    opacity: .10 !important;
    background-size: 72px 72px !important;
  }
}

/* Auth page: keep the card slightly above optical center and keep toasts out of layout */
.shell{
  transform: translateY(-8vh) !important;
}

#notify-container{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: max(18px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  width: min(420px, calc(100vw - 24px)) !important;
  padding: 0 !important;
  pointer-events: none !important;
}

#notify-container .notify-toast,
.notify-toast{
  margin: 0 auto !important;
}

@media (max-height: 760px){
  .shell{
    transform: translateY(-3vh) !important;
  }
}

@media (max-width: 520px){
  .shell{
    transform: translateY(0) !important;
  }
}