/* Base Resets */
* { box-sizing: border-box; }
:root {
  --bg-color: #030711;
  --accent-cyan: #27d4ff;
  --accent-blue: #2e7bff;
  --accent-gradient: linear-gradient(90deg,#09d6ff,#2e7bff 60%,#4482ff);
  --card-glass: rgba(10,18,30,0.72);
  --card-border: rgba(255,255,255,0.08);
  --radius-lg: 18px;
  --focus-ring: 0 0 0 2px #0a1e33,0 0 0 4px #1aa9ff;
  --font-display: 'Exo 2','Chakra Petch','Rajdhani','Segoe UI',sans-serif;
  --font-body: 'Roboto','Segoe UI',sans-serif;
}
html,body { height:100%; }
body {
  margin:0;
  font-family: var(--font-body);
  background: #020408;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(45,78,180,0.55) 0%, rgba(45,78,180,0) 50%),
    radial-gradient(circle at 85% 20%, rgba(100,70,200,0.45) 0%, rgba(100,70,200,0) 55%),
    radial-gradient(circle at 50% 85%, rgba(25,95,180,0.5) 0%, rgba(25,95,180,0) 60%),
    radial-gradient(circle at 20% 70%, rgba(75,45,160,0.35) 0%, rgba(75,45,160,0) 50%),
    linear-gradient(135deg, #061228 0%, #030814 25%, #020611 50%, #01040a 75%, #000205 100%);
  color:#cfe9ff;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  font-feature-settings: "kern" 1, "liga" 1;
}



/* Accessibility helper */
.visually-hidden { position:absolute!important; height:1px; width:1px; clip:rect(1px,1px,1px,1px); overflow:hidden; white-space:nowrap; }

canvas#bg-particles { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }
.overlay-gradient { 
  position:fixed; 
  inset:0; 
  pointer-events:none; 
  z-index:1; 
  background:
    radial-gradient(circle at 18% 15%, rgba(80,150,255,0.28) 0%, rgba(80,150,255,0) 50%),
    radial-gradient(circle at 82% 25%, rgba(130,90,255,0.25) 0%, rgba(130,90,255,0) 55%),
    radial-gradient(circle at 80% 75%, rgba(40,100,220,0.3) 0%, rgba(40,100,220,0) 65%),
    radial-gradient(circle at 25% 80%, rgba(90,60,200,0.2) 0%, rgba(90,60,200,0) 50%),
    linear-gradient(135deg, rgba(70,120,255,0.15), rgba(25,35,100,0.4) 50%, rgba(8,18,50,0) 78%);
  mix-blend-mode:screen;

}


.security-screen {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  opacity:0;
  pointer-events:none;
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  transition:opacity .35s ease;
}
.security-screen__glow {
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 50% 35%, rgba(128,235,255,0.35), transparent 65%),
    radial-gradient(circle at 30% 70%, rgba(54,189,255,0.25), transparent 70%);
  filter:blur(35px);
  opacity:.65;
}
.security-screen__content {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.65rem;
  padding:2.8rem 3.2rem;
  border-radius:28px;
  background:linear-gradient(160deg, rgba(2,40,80,0.88), rgba(2,28,66,0.92));
  border:1px solid rgba(150,230,255,0.35);
  box-shadow:0 28px 80px -40px rgba(0,38,94,0.9), 0 18px 40px -20px rgba(61,200,255,0.65);
  text-align:center;
}
.security-screen__icon {
  width:72px;
  height:72px;
  border-radius:22px;
  background:linear-gradient(135deg,#ffffff,#9ff2ff 55%,#2cc8ff);
  box-shadow:0 0 32px rgba(115,225,255,0.8);
  position:relative;
}
.security-screen__icon:before,
.security-screen__icon:after {
  content:"";
  position:absolute;
  background:#01558a;
  border-radius:4px;
}
.security-screen__icon:before { width:18px; height:4px; top:52%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); }
.security-screen__icon:after { width:10px; height:4px; top:60%; left:46%; transform:translate(-50%,-50%) rotate(45deg); }
.security-screen__title {
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.6vw,2.35rem);
  letter-spacing:2.2px;
  color:#dff7ff;
  text-shadow:0 4px 18px rgba(40,190,255,0.5);
}
.security-screen__subtitle {
  margin:0;
  font-size:1rem;
  letter-spacing:.6px;
  color:#a7d9ff;
  max-width:360px;
}
.security-screen--show {
  opacity:1;
  pointer-events:auto;
}
.security-screen--show .security-screen__content {
  animation:securityScreenPop .6s cubic-bezier(.19,1.12,.43,1) both;
}
@keyframes securityScreenPop {
  0% { transform:translateY(18px) scale(.94); opacity:0; }
  60% { transform:translateY(-6px) scale(1.02); opacity:1; }
  100% { transform:translateY(0) scale(1); opacity:1; }
}

/* Add dynamic background layers */
.bg-layers { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bg-layers:before { content:""; position:absolute; inset:-12%; background:
    radial-gradient(circle at 22% 60%, rgba(22,84,180,0.4) 0%, rgba(22,84,180,0) 58%),
    radial-gradient(circle at 54% 28%, rgba(48,110,210,0.32) 0%, rgba(48,110,210,0) 60%),
    radial-gradient(circle at 80% 68%, rgba(94,60,190,0.26) 0%, rgba(94,60,190,0) 64%),
    radial-gradient(circle at 32% 22%, rgba(30,72,160,0.3) 0%, rgba(30,72,160,0) 54%);
  filter:blur(32px) saturate(135%);
  opacity:.68;
}
.bg-layers:after { content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 48% 44%, rgba(86,150,255,0.24) 0%, rgba(86,150,255,0) 52%),
    radial-gradient(circle at 70% 32%, rgba(126,96,255,0.2) 0%, rgba(126,96,255,0) 56%),
    radial-gradient(circle at 22% 78%, rgba(62,122,245,0.18) 0%, rgba(62,122,245,0) 60%),
    linear-gradient(188deg, rgba(6,26,72,0.4) 0%, rgba(6,26,72,0.08) 68%);
  mix-blend-mode:screen;
  opacity:.42;
}
.bg-layers .ring,
.bg-layers .arc { position:absolute; pointer-events:none; mix-blend-mode:screen; }
.bg-layers .ring {
  border-radius:50%;
  background:radial-gradient(circle, rgba(104,184,255,0.36) 0%, rgba(104,184,255,0.14) 34%, rgba(104,184,255,0) 70%);
  filter:blur(58px);
  opacity:.78;
}
.bg-layers .ring-1 { width:clamp(860px,68vw,1380px); height:clamp(860px,68vw,1380px); top:-18%; left:-20%; }
.bg-layers .ring-2 { width:clamp(620px,52vw,940px); height:clamp(620px,52vw,940px); top:-10%; right:-18%; left:auto; }
.bg-layers .ring-3 { width:clamp(780px,60vw,1180px); height:clamp(780px,60vw,1180px); bottom:-42%; left:10%; background:radial-gradient(circle, rgba(132,92,240,0.36) 0%, rgba(132,92,240,0.16) 40%, rgba(132,92,240,0) 78%); filter:blur(72px); }
.bg-layers .arc {
  border-radius:50%;
  overflow:hidden;
  filter:blur(18px);
}
.bg-layers .arc:before {
  content:"";
  position:absolute;
  inset:0;
  background:conic-gradient(from 100deg, rgba(110,198,255,0.72) 0deg 26deg, rgba(112,188,255,0.38) 26deg 50deg, transparent 50deg 318deg, rgba(148,108,255,0.38) 318deg 360deg);
  -webkit-mask:radial-gradient(closest-side, transparent 0 60%, #000 63% 74%, transparent 76%);
  mask:radial-gradient(closest-side, transparent 0 60%, #000 63% 74%, transparent 76%);
}
.bg-layers .arc-1 { width:clamp(920px,68vw,1280px); height:clamp(920px,68vw,1280px); bottom:-48%; left:12%; transform:rotate(-12deg); }
.bg-layers .arc-2 { width:clamp(760px,56vw,1040px); height:clamp(760px,56vw,1040px); bottom:-38%; left:32%; transform:rotate(8deg); }
.bg-layers .arc-3 { width:clamp(620px,46vw,880px); height:clamp(620px,46vw,880px); bottom:-28%; left:52%; transform:rotate(18deg); }

/* Layout */
.layout { position:relative; z-index:2; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6vw; height:100vh; padding: clamp(1rem, 3vw, 3rem); }
.intro { max-width:520px; position:relative; perspective:1300px; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.22,.99,.32,1), filter .6s; }
.intro:before { content:""; position:absolute; inset:-30px -60px -40px -60px; background:radial-gradient(circle at 32% 35%,rgba(255,210,120,.1),transparent 65%), radial-gradient(circle at 82% 60%,rgba(80,210,255,.15),transparent 70%); pointer-events:none; filter:blur(3px); opacity:.9; }
.intro:after { content:""; position:absolute; inset:-12% -18% -6%; background:radial-gradient(circle at 42% 48%, rgba(123,232,255,0.25) 0%, rgba(8,42,95,0) 65%); filter:blur(32px); opacity:.65; pointer-events:none; }
.logo-text {
  position:relative;
  display:inline-block;
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(3.2rem,5.9vw,5.05rem);
  letter-spacing:2.4px;
  line-height:1.03;
  padding:0 .05em;
  background:linear-gradient(180deg,#fff9d6 0%,#ffe470 14%,#ffc845 36%,#ffab14 56%,#e28404 74%,#fddc86 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transform:perspective(1200px) rotateX(8deg);
  transform-origin:center top;
  filter:drop-shadow(0 22px 32px rgba(0,0,0,.55));
  -webkit-text-stroke:0.85px rgba(255,255,255,0.28);
  text-shadow:
    0 1px 0 #fff5c4,
    0 2px 0 #fedb78,
    0 3px 0 #f9bf45,
    0 4px 0 #eb9f1d,
    0 5px 0 #d8850f,
    0 6px 0 #bf6f0b,
    0 8px 0 #a95e08,
    0 10px 4px rgba(0,0,0,.45),
    0 18px 18px rgba(0,0,0,.55);
}
.logo-text:before {
  content:attr(data-text);
  position:absolute;
  inset:0;
  background:linear-gradient(184deg,#c06700 0%,#5a2800 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transform-origin:top;
  transform:translate3d(0,14px,-20px) scaleX(1.018) skewX(-9deg);
  opacity:.9;
  filter:brightness(.95) saturate(1.1);
  text-shadow:0 6px 8px rgba(0,0,0,.65);
  z-index:-1;
}
.logo-text:after {
  content:"";
  position:absolute;
  inset:-6% -8%;
  background:
    linear-gradient(122deg,rgba(255,255,255,0.95) 8%,rgba(255,255,255,0) 18%) no-repeat,
    linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 40%,rgba(255,255,255,0) 58%) no-repeat;
  background-size:26% 60%, 22% 100%;
  background-position:-40% 12%, -140% 0;
  mix-blend-mode:screen;
  animation:heroShine 5.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroShine {
  0%,58% { background-position:-40% 12%, -145% 0; opacity:0; }
  63% { opacity:1; }
  78% { background-position:120% 5%, 115% 0; opacity:0; }
  100% { opacity:0; }
}
.intro:hover .logo-text {
  transform:perspective(1200px) rotateX(5deg) translateY(-4px);
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.6)) brightness(1.08) saturate(1.12);
}
.logo-tagline {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:.38rem 0 .78rem;
  padding:.38rem 1.05rem .35rem;
  font-family:var(--font-display);
  font-size:clamp(.82rem,1.8vw,1.02rem);
  font-weight:600;
  letter-spacing:3.2px;
  text-transform:uppercase;
  color:#d9f4ff;
  background:linear-gradient(120deg,rgba(12,36,68,0.65),rgba(7,24,44,0.82));
  border-radius:999px;
  position:relative;
  transform:translateZ(32px);
  box-shadow:0 8px 22px -12px rgba(0,150,255,.6), 0 2px 8px rgba(0,0,0,.55) inset;
  overflow:hidden;
}
.logo-tagline:before,
.logo-tagline:after {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle,#13d6ff 0%,rgba(0,190,255,.2) 65%,transparent 70%);
  box-shadow:0 0 10px rgba(0,210,255,.65);
}
.logo-tagline span { color:transparent; background:linear-gradient(90deg,#5fe3ff,#11d4ff,#7af7ff); -webkit-background-clip:text; background-clip:text; text-shadow:0 1px 8px rgba(0,190,255,.55); }
.logo-tagline em { font-style:normal; color:transparent; background:linear-gradient(90deg,#ffd15a,#ffae1a,#ffd15a); -webkit-background-clip:text; background-clip:text; text-shadow:0 1px 8px rgba(255,198,90,.55); }
.logo-tagline .tagline-core { color:transparent; background:linear-gradient(90deg,#94e7ff,#3aceff,#94e7ff); -webkit-background-clip:text; background-clip:text; }
.logo-tagline > span,
.logo-tagline > em,
.logo-tagline > strong { pointer-events:none; }
.logo-underline { position:relative; width:100%; max-width:520px; height:5px; margin:.3rem 0 1.05rem; background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0)); overflow:hidden; border-radius:5px; transform:translateZ(35px); box-shadow:0 6px 18px -8px rgba(0,200,255,.55); }
.logo-underline:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#12d9ff,#2e7bff,#7f4dff,#ff9d32); background-size:220% 100%; animation:underlineSlide 4.8s linear infinite; filter:drop-shadow(0 0 9px rgba(0,200,255,.65)); }
@keyframes underlineSlide { 0% { transform:translateX(-38%); } 100% { transform:translateX(38%); } }
.logo-sparks { position:absolute; top:-18px; left:-16px; right:-16px; height:110%; pointer-events:none; overflow:visible; }
.logo-sparks span { position:absolute; width:8px; height:8px; background:radial-gradient(circle,#d6f4ff 0%,rgba(0,215,255,.55) 55%,transparent 72%); border-radius:50%; filter:blur(.2px); animation:sparkFloat 6.6s linear infinite; opacity:0; }
.logo-sparks span:nth-child(1){ left:8%; top:10%; animation-delay:.12s; }
.logo-sparks span:nth-child(2){ left:25%; top:58%; animation-delay:.9s; }
.logo-sparks span:nth-child(3){ left:52%; top:26%; animation-delay:.48s; }
.logo-sparks span:nth-child(4){ left:72%; top:50%; animation-delay:1.6s; }
.logo-sparks span:nth-child(5){ left:88%; top:20%; animation-delay:.72s; }
@keyframes sparkFloat { 0% { transform:translateY(6px) scale(.4); opacity:0; } 18% { opacity:1; } 60% { opacity:.95; } 100% { transform:translateY(-26px) scale(.95); opacity:0; } }
.lead {
  margin:0;
  font-size:1.12rem;
  font-weight:400;
  letter-spacing:.42px;
  color:#cbe9ff;
  text-shadow:0 0 6px rgba(0,160,255,.25);
  transform:translateZ(30px);
}

.auth-card {
  width: min(520px, 92vw);
  background: linear-gradient(160deg, rgba(7,27,54,0.88), rgba(6,22,48,0.82) 45%, rgba(4,16,36,0.78) 100%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border:1px solid rgba(117,205,255,0.18);
  border-radius: var(--radius-lg);
  padding:2.25rem 2.4rem 2.8rem;
  position:relative;
  box-shadow: 0 24px 55px -22px rgba(2,24,58,0.85), 0 18px 40px -30px rgba(6,125,245,0.65);
  overflow:hidden;
}
.auth-card:before, .auth-card:after { content:""; position:absolute; border-radius:inherit; pointer-events:none; }
.auth-card:before { inset:0; background: linear-gradient(145deg, rgba(79,209,255,0.22), rgba(34,126,255,0.15) 48%, rgba(12,52,146,0.08) 78%); mix-blend-mode:screen; }
.auth-card:after {
  inset:-1px;
  padding:1px;
  background: linear-gradient(120deg,rgba(120,226,255,0.65),rgba(46,140,255,0.45) 45%, rgba(0,0,0,0.15) 72%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
}

form { margin:0; display:flex; flex-direction:column; gap:1.35rem; }
.field-group { position:relative; display:flex; flex-direction:column; gap:.55rem; }
.field-group label { font-size:.75rem; font-weight:600; letter-spacing:1.5px; color:#6dd6ff; font-family:var(--font-display); }
.field-group input { background:rgba(6,35,73,0.68); border:1px solid rgba(138,215,255,0.32); border-radius:12px; padding:1rem .95rem .85rem; font-size:.95rem; font-family:var(--font-body); color:#e6f6ff; outline:none; transition:.3s; box-shadow:0 2px 8px -3px rgba(0,0,0,0.35) inset, 0 0 0 0 rgba(0,160,255,0); }
.field-group input::placeholder { color:#76a9d6; }
.field-group input:focus { border-color:#4ecbff; box-shadow: 0 0 0 1px rgba(108,220,255,0.65); }
.error-msg { font-size:.7rem; color:#ff5d5d; min-height:12px; letter-spacing:.5px; }

.password-group { position:relative; }
.password-group input { padding-right:3.35rem; }
/* Bọc input + nút mắt để căn giữa theo chính chiều cao của ô */
.password-group .input-with-toggle {
  position:relative;
  display:flex;
  align-items:center;
}
.password-group .input-with-toggle input {
  width:100%;
}
/* Nút mắt nằm chính giữa ô nhập bằng cách dùng flex + translateY(-50%) */
.toggle-pass {
  position:absolute;
  top:50%;
  right:.8rem;
  transform:translateY(-50%);
  border:0;
  background:rgba(255,255,255,0.08);
  width:34px;
  height:34px;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.35s;
  color:#b5e5ff;
}
.toggle-pass .eye { display:block; width:16px; height:10px; position:relative; }
.toggle-pass .eye:before, .toggle-pass .eye:after { border-width:2px; }
.toggle-pass:hover { background:rgba(255,255,255,0.12); color:#d9f2ff; }
.toggle-pass:focus-visible { outline:none; box-shadow: var(--focus-ring); }
.toggle-pass .eye { width:18px; height:12px; position:relative; display:block; }
.toggle-pass .eye:before, .toggle-pass .eye:after { content:""; position:absolute; inset:0; border-radius:20px / 14px; border:2px solid currentColor; }
.toggle-pass .eye:after { width:4px; height:4px; border:0; top:50%; left:50%; transform:translate(-50%,-50%); background:currentColor; border-radius:50%; }
.toggle-pass.active .eye:before { clip-path: polygon(0 0,100% 0,100% 45%,0 80%); opacity:.2; }
.toggle-pass.active .eye:after { width:14px; height:2px; border-radius:2px; transform:translate(-50%,-50%) rotate(45deg); }

/* Register modal */
body.modal-open { overflow:hidden; }
.modal {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:12000;
}
.modal.modal--show {
  opacity:1;
  pointer-events:auto;
}
.modal__backdrop {
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(2,12,30,0.9),rgba(2,8,24,0.92));
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
.modal__panel {
  position:relative;
  width:min(380px,88vw);
  padding:2.2rem 2rem 2rem;
  border-radius:20px;
  background:linear-gradient(155deg,rgba(6,26,58,0.92),rgba(4,16,38,0.94));
  border:1px solid rgba(60,176,255,0.22);
  box-shadow:0 32px 72px -28px rgba(0,0,0,0.85);
  overflow:hidden;
}
.modal__panel:before {
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  background:linear-gradient(160deg,rgba(0,122,255,0.12),rgba(17,89,186,0.08) 60%,rgba(0,0,0,0.28) 100%);
  pointer-events:none;
}
.modal__close {
  position:absolute;
  top:1.3rem;
  right:1.4rem;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(94,195,255,0.32);
  background:linear-gradient(135deg,rgba(12,42,78,0.75),rgba(8,24,52,0.9));
  color:#7cd6ff;
  font-size:1.6rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.3s;
  z-index:2;
}
.modal__close:hover { color:#b9ecff; border-color:rgba(120,220,255,0.65); background:linear-gradient(135deg,rgba(18,62,110,0.82),rgba(12,32,72,0.95)); }
.modal__close:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(10,30,60,0.9),0 0 0 5px rgba(40,170,255,0.55); }
.register-modal__header { text-align:center; position:relative; margin-bottom:1.6rem; }
.register-modal__header h2 {
  margin:0;
  font-family:var(--font-display);
  letter-spacing:3px;
  font-size:1.45rem;
  color:#56d8ff;
  text-shadow:0 4px 16px rgba(0,120,200,0.55);
}
.register-modal__underline {
  width:120px;
  height:6px;
  margin:1rem auto 0;
  background:linear-gradient(90deg,rgba(27,202,255,0),rgba(27,202,255,0.9),rgba(27,202,255,0));
  border-radius:999px;
  box-shadow:0 0 14px rgba(27,202,255,0.55);
}
.register-modal form { position:relative; display:flex; flex-direction:column; gap:.85rem; }
.rg-field {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.45rem;
  background:linear-gradient(145deg,rgba(2,20,45,0.94),rgba(2,18,40,0.75));
  border:1px solid rgba(25,120,198,0.38);
  border-radius:14px;
  padding:.8rem .95rem .85rem;
  box-shadow:0 10px 25px -18px rgba(0,150,255,0.6) inset,0 18px 30px -26px rgba(0,0,0,0.85);
}
.rg-field input,
.rg-input-with-toggle input {
  width:100%;
  background:rgba(4,20,44,0.65);
  border:1px solid rgba(46,160,235,0.28);
  box-shadow:0 6px 16px -12px rgba(0,170,255,0.7) inset;
  border-radius:10px;
  color:#d9f8ff;
  font-size:.88rem;
  font-family:var(--font-body);
  padding:.7rem .85rem;
  transition:border-color .25s ease;
}
.rg-input-with-toggle input { padding-right:2.8rem; }
.rg-field input::placeholder { color:rgba(123,192,222,0.68); letter-spacing:.2px; }
.rg-field input:focus { outline:none; border-color:#41caff; box-shadow:0 0 0 1px rgba(65,202,255,0.45),0 6px 16px -12px rgba(0,170,255,0.85) inset; }
.rg-label {
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:2.2px;
  color:#39d9ff;
  font-size:.72rem;
  text-transform:uppercase;
  display:inline-flex;
  gap:.2rem;
  line-height:1.1;
}
.rg-label span { display:inline; }
.rg-input-with-toggle { position:relative; width:100%; display:flex; align-items:center; }
.rg-input-with-toggle .toggle-pass {
  position:absolute;
  top:50%;
  right:.5rem;
  transform:translateY(-50%);
}
.toggle-pass.rg-toggle {
  width:30px;
  height:30px;
  border-radius:10px;
  background:rgba(18,72,110,0.45);
  border:1px solid rgba(57,180,255,0.32);
  color:#8adfff;
}
.toggle-pass.rg-toggle:hover { background:rgba(24,92,150,0.75); color:#c0f2ff; }
.toggle-pass.rg-toggle:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.rg-field .error-msg {
  position:static;
  margin-top:.25rem;
  font-size:.72rem;
  color:#ff6b6b;
  letter-spacing:.35px;
}
.rg-submit {
  margin-top:.5rem;
  width:100%;
  padding:.9rem 1rem;
  border:0;
  border-radius:16px;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:1px;
  font-size:.95rem;
  color:#fff;
  background:linear-gradient(90deg,#20dffd 0%,#259eff 55%,#4e73ff 100%);
  box-shadow:0 16px 45px -20px rgba(0,170,255,0.8),0 6px 8px -2px rgba(0,0,0,0.55);
  cursor:pointer;
  transition:.35s;
}
.rg-submit:hover { transform:translateY(-2px); box-shadow:0 20px 50px -18px rgba(0,180,255,0.88),0 10px 16px -8px rgba(0,0,0,0.6); }
.rg-submit:active { transform:translateY(1px); }
.rg-switch {
  margin:1rem 0 0;
  font-size:.86rem;
  color:#9edfff;
  text-align:center;
  letter-spacing:.5px;
}
.rg-switch a {
  color:#38d4ff;
  text-decoration:none;
  font-weight:600;
}
.rg-switch a:hover { text-decoration:underline; }

@media (max-width:520px){
  .modal__panel { padding:2.4rem 1.6rem 2rem; }
  .rg-field { padding:.9rem .95rem .95rem; }
  .rg-label { font-size:.72rem; letter-spacing:2.4px; }
}

.btn-primary { margin-top:.4rem; cursor:pointer; font-family:var(--font-display); letter-spacing:.5px; font-weight:700; font-size:1rem; background: var(--accent-gradient); color:#fff; border:0; padding:1.05rem 1.2rem; border-radius:16px; box-shadow:0 6px 25px -6px rgba(0,170,255,0.6), 0 2px 4px rgba(0,0,0,0.4); position:relative; transition:.4s; overflow:hidden; }
.btn-primary:before { content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 40%,rgba(255,255,255,0) 70%); transform:translateX(-60%); mix-blend-mode:overlay; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(0,180,255,0.55), 0 3px 10px -2px rgba(0,0,0,0.55); }
.btn-primary:hover:before { animation: sheen 1.2s forwards; }
.btn-primary:active { transform:translateY(1px); }
.btn-primary:focus-visible { outline:none; box-shadow: var(--focus-ring); }
@keyframes sheen { 60% { transform:translateX(110%);} 100% { transform:translateX(110%);} }

.new-user-box { margin-top:.3rem; background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:1.1rem 1.2rem .95rem; display:flex; flex-direction:row; align-items:center; gap:.75rem; font-size:.86rem; position:relative; }
.new-user-label { margin:0; font-size:.8rem; letter-spacing:.8px; color:#9bc6dc; font-weight:500; }
.register-link { color:#39c8ff; font-weight:600; letter-spacing:.5px; text-decoration:none; position:relative; }
.register-link:after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:linear-gradient(90deg,#39c8ff,#2e7bff); transform:scaleX(.25); transform-origin:left; transition:.4s; }
.register-link:hover:after { transform:scaleX(1); }
.register-link:focus-visible { outline:none; box-shadow:0 0 0 2px #0a1e33,0 0 0 4px #1aa9ff; border-radius:4px; }

/* Success Popup Styles */
.success-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.success-popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

.success-popup {
  background: linear-gradient(145deg, #0B3B7A 0%, #0A3366 100%);
  border: 3px solid rgba(96, 165, 250, 0.4);
  border-radius: 32px;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 
    0 10px 40px rgba(37, 99, 235, 0.4),
    0 0 60px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  transform: scale(0.8) translateY(50px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.success-popup-overlay.show .success-popup {
  transform: scale(1) translateY(0);
}

.success-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.8s ease;
}

.success-popup:hover::before {
  left: 100%;
}

.success-popup-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: white;
  font-weight: 700;
  box-shadow: 
    0 0 30px rgba(59, 130, 246, 0.6),
    0 8px 24px rgba(37, 99, 235, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  animation: successIconPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
}

@keyframes successIconPop {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.success-popup-icon::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 28px;
  border: 2px solid rgba(59, 130, 246, 0.3);
  animation: successRipple 2s ease-out infinite;
}

@keyframes successRipple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.success-popup-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(96, 165, 250, 0.5);
  font-family: var(--font-display);
  letter-spacing: 1px;
}

.success-popup-message {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.success-popup-btn {
  padding: 0.9rem 2.5rem;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.95rem;
  border: 2px solid rgba(96, 165, 250, 0.6);
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: white;
  box-shadow: 
    0 4px 15px rgba(37, 99, 235, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  min-width: 150px;
  font-family: var(--font-display);
}

.success-popup-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.success-popup-btn:hover::before {
  left: 100%;
}

.success-popup-btn:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(37, 99, 235, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.success-popup-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Responsive cho success popup */
@media (max-width: 768px) {
  .success-popup {
    padding: 2rem 1.5rem;
    margin: 1rem;
  }
  
  .success-popup-icon {
    width: 70px;
    height: 70px;
    font-size: 2.5rem;
    margin-bottom: 1.2rem;
  }
  
  .success-popup-title {
    font-size: 1.5rem;
  }
  
  .success-popup-message {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }
  
  .success-popup-btn {
    width: 100%;
    padding: 1rem;
  }
}

/* Preloader styles */
body.is-preloading main { opacity:0; pointer-events:none; }
#preloader { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,#01040a 0%,#010811 60%,#00050a 100%); z-index:9999; overflow:hidden; }
#preloader:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%,rgba(0,140,255,0.14),transparent 72%); opacity:.3; }
.pl-inner { position:relative; width:min(880px,92vw); text-align:center; padding:3.2rem 2rem 3.1rem; backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%); background:linear-gradient(160deg,rgba(10,28,48,0.78),rgba(5,14,26,0.55)); border:1px solid rgba(255,255,255,0.08); border-radius:20px; box-shadow:0 25px 70px -25px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.03); animation:plIn .6s cubic-bezier(.25,.9,.3,1.25); }
@keyframes plIn { 0% { transform:translateY(25px) scale(.94); opacity:0; } 60% { opacity:1; } 100% { transform:translateY(0) scale(1); opacity:1; } }
.pl-logo { margin:0 0 .45rem; font-family:var(--font-display); font-size: clamp(2.9rem, 6.6vw, 4.35rem); background:linear-gradient(175deg,#fff5d1 0%,#ffe27a 18%,#ffcf3e 35%,#ffb300 56%,#f19900 74%,#ffd86a 93%); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; letter-spacing:1px; text-shadow:0 2px 2px rgba(180,110,0,.45), 0 6px 14px rgba(0,0,0,.55), 0 12px 28px rgba(255,190,0,.3); position:relative; }
.pl-logo:after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 45%,rgba(255,255,255,0) 62%); mix-blend-mode:overlay; transform:translateX(-120%) skewX(-15deg); animation:logoShine 5.2s ease-in-out infinite; }
.pl-sub { margin:.15rem 0 1.4rem; font-family:var(--font-display); font-size: clamp(1.45rem, 3.6vw, 2.45rem); font-weight:700; letter-spacing:1.3px; background:linear-gradient(90deg,#12cfff,#5edcff); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.92; text-shadow:0 2px 10px rgba(0,190,255,.3); }

/* Preloader overrides */
.pl-circle { 
  position: relative;
  width: 160px; 
  height: 160px; 
  margin: 1.5rem auto;
  display: flex; 
  align-items: center; 
  justify-content: center;
  border-radius: 50%;
}
.pl-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.pl-percent { 
  position: relative; 
  font-family: var(--font-display); 
  font-size: 2.4rem; 
  font-weight: 600; 
  letter-spacing: 1px; 
  color: #ffffff; 
  text-shadow: 0 0 8px rgba(0,210,255,0.5); 
  animation: none;
  text-align: center;
  z-index: 1;
}
.pl-percent:after { content:'%'; color:#11cfff; margin-left:2px; text-shadow:0 0 10px rgba(0,200,255,.6); }
/* Optimize progress bar with transform scaling */
.pl-bar-wrap { position:relative; width:68%; margin:0 auto 1.55rem; height:10px; background:rgba(255,255,255,0.08); border-radius:8px; overflow:hidden; box-shadow:0 3px 8px -3px rgba(0,0,0,0.65) inset; }
.pl-bar { transform-origin:left center; width:100%; height:100%; background:linear-gradient(90deg,#7f4dff,#09d6ff,#2e7bff); background-size:220% 100%; animation: barMove 2s linear infinite; box-shadow:0 0 14px -2px rgba(0,200,255,.75); will-change:transform; }
/* Loader percent font refinement */
.pl-percent { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.pl-dots { display:flex; justify-content:center; gap:.75rem; margin-top:.8rem; }
.pl-dots span { width:14px; height:14px; border-radius:50%; background:#0b1c28; opacity:.35; transform:scale(.6); transition:.45s cubic-bezier(.4,0,.2,1); position:relative; }
.pl-dots span:nth-child(1){ --c1:#14f1ff; --c2:#11d4ff; }
.pl-dots span:nth-child(2){ --c1:#11d4ff; --c2:#18bfff; }
.pl-dots span:nth-child(3){ --c1:#18bfff; --c2:#1ca7ff; }
.pl-dots span:nth-child(4){ --c1:#1ca7ff; --c2:#1a85ff; }
.pl-dots span:nth-child(5){ --c1:#1a85ff; --c2:#2a63ff; }
.pl-dots span:nth-child(6){ --c1:#2a63ff; --c2:#434bff; }
.pl-dots span:nth-child(7){ --c1:#434bff; --c2:#5d34ff; }
.pl-dots span:nth-child(8){ --c1:#5d34ff; --c2:#7a20ff; }
.pl-dots span.active { opacity:1; transform:scale(1); background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 8px 2px rgba(0,200,255,.55),0 0 16px -2px rgba(100,60,255,.45); }
.pl-dots span.current { animation: dotPulse 1.15s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { transform:scale(1); box-shadow:0 0 10px 3px rgba(0,220,255,.7), 0 0 22px 2px rgba(110,70,255,.55); } 50% { transform:scale(1.3); box-shadow:0 0 16px 5px rgba(0,240,255,.9), 0 0 30px 4px rgba(110,70,255,.75); } }
#preloader.preloader-complete .pl-dots span.current { animation:none; }

#pl-status { position:relative; }
#pl-status:after { content:'_'; margin-left:4px; animation:blinkCursor 1s steps(2,end) infinite; color:#65dcff; }
@keyframes blinkCursor { 0%,50% { opacity:1; } 51%,100% { opacity:0; } }
#preloader.preloader-complete #pl-status:after { animation:none; opacity:1; }

/* ========================================
   📱 RESPONSIVE FOR MOBILE - FIXED VERSION
   ======================================== */

/* Tablet - iPad (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .layout { 
    padding: 2rem 1.5rem;
    gap: 4vw;
  }
  .intro { 
    max-width: 450px;
  }
  .auth-card {
    max-width: 400px;
  }
  .logo-text { 
    font-size: clamp(2.8rem, 7vw, 4.5rem); 
  }
}

/* Mobile - Phone (max-width: 767px) */
@media screen and (max-width: 767px) {
  html, body { 
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
  }

  body {
    background-attachment: fixed;
  }

  /* CRITICAL: Change layout to vertical stack */
  .layout {
    flex-direction: column !important;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2rem;
    height: auto;
    min-height: 100vh;
    padding: 2rem 1rem;
  }

  /* Intro section */
  .intro {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .intro:before,
  .intro:after {
    display: none;
  }

  .logo-text {
    font-size: clamp(2.2rem, 11vw, 3.5rem) !important;
    margin-bottom: 0.5rem;
    letter-spacing: 1.5px;
  }

  .logo-tagline {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    margin: 0.5rem 0 1rem;
  }

  .logo-underline {
    width: 100px;
    margin: 0.8rem auto;
  }

  .lead {
    font-size: 0.95rem;
    margin-top: 1rem;
  }

  /* Auth card */
  .auth-card {
    max-width: 100%;
    width: 100%;
    padding: 1.8rem 1.2rem;
    margin: 0;
  }

  /* Form fields */
  .field-group {
    margin-bottom: 1.2rem;
  }

  .field-group label {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }

  .field-group input,
  .input-with-toggle input {
    padding: 0.95rem 1rem;
    font-size: 16px !important; /* Prevent zoom on iOS */
    height: auto;
  }

  .toggle-pass {
    right: 0.8rem;
  }

  .btn-primary {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    margin-top: 0.8rem;
  }

  .new-user-box {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
  }

  .new-user-label {
    font-size: 0.85rem;
  }

  .register-link {
    font-size: 1rem;
  }

  /* Register Modal */
  .modal__panel {
    width: 90%;
    max-width: 400px;
    margin: 1rem;
    padding: 1.5rem 1rem;
  }

  .register-modal__header h2 {
    font-size: 1.5rem;
  }

  .rg-field {
    margin-bottom: 1rem;
  }

  .rg-label {
    font-size: 0.85rem;
  }

  .rg-field input {
    padding: 0.9rem 1rem;
    font-size: 16px !important;
  }

  .rg-submit {
    padding: 1rem;
    font-size: 1rem;
  }

  /* Security screen mobile */
  .security-screen__content {
    padding: 2rem 1.5rem;
    border-radius: 20px;
    margin: 0 1rem;
    max-width: 90%;
  }

  .security-screen__icon {
    width: 60px;
    height: 60px;
  }

  .security-screen__title {
    font-size: 1.3rem;
  }

  .security-screen__subtitle {
    font-size: 0.9rem;
  }

  /* Preloader mobile */
  .pl-logo {
    font-size: clamp(2.2rem, 11vw, 3.5rem);
  }

  .pl-sub {
    font-size: clamp(1rem, 4.5vw, 1.5rem);
  }

  .pl-circle {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pl-percent {
    font-size: 2rem;
    text-align: center;
    display: block;
    width: 100%;
  }

  .pl-bar-wrap {
    width: 85%;
  }

  .pl-dots {
    gap: 0.5rem;
  }

  .pl-dots span {
    width: 10px;
    height: 10px;
  }

  /* Background effects - reduce on mobile */
  .bg-layers .ring,
  .bg-layers .arc {
    opacity: 0.3;
  }

  canvas#bg-particles {
    opacity: 0.4;
  }

  .overlay-gradient {
    opacity: 0.7;
  }
}

/* Small Mobile - iPhone SE, iPhone 6/7/8 (max-width: 375px) */
@media screen and (max-width: 375px) {
  .layout {
    padding: 1.5rem 0.8rem;
    gap: 1.5rem;
  }

  .logo-text {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    letter-spacing: 1.2px;
  }

  .logo-tagline {
    font-size: clamp(0.8rem, 3.5vw, 1rem);
  }

  .lead {
    font-size: 0.9rem;
  }

  .auth-card {
    padding: 1.5rem 1rem;
  }

  .field-group label {
    font-size: 0.8rem;
  }

  .field-group input,
  .input-with-toggle input {
    padding: 0.9rem 0.9rem;
  }

  .btn-primary {
    padding: 0.95rem;
    font-size: 0.95rem;
  }

  .new-user-label {
    font-size: 0.8rem;
  }

  .register-link {
    font-size: 0.95rem;
  }

  .modal__panel {
    width: 95%;
    padding: 1.2rem 0.8rem;
  }

  .rg-field input {
    padding: 0.85rem 0.9rem;
  }

  .security-screen__content {
    padding: 1.5rem 1rem;
    margin: 0 0.5rem;
  }

  .pl-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pl-percent {
    font-size: 1.8rem;
    text-align: center;
    display: block;
    width: 100%;
  }
}

/* Extra Small Mobile - iPhone SE 1st gen (max-width: 320px) */
@media screen and (max-width: 320px) {
  .layout {
    padding: 1rem 0.5rem;
    gap: 1rem;
  }

  .logo-text {
    font-size: clamp(1.8rem, 9vw, 2.5rem) !important;
  }

  .logo-tagline {
    font-size: 0.75rem;
  }

  .auth-card {
    padding: 1.2rem 0.8rem;
  }

  .field-group input {
    padding: 0.8rem;
    font-size: 15px !important;
  }

  .btn-primary {
    padding: 0.85rem;
    font-size: 0.9rem;
  }
}

/* Landscape mode on mobile */
@media screen and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .layout {
    flex-direction: row !important;
    padding: 1rem;
    gap: 2rem;
    min-height: auto;
  }

  .intro {
    max-width: 45%;
    text-align: left;
  }

  .auth-card {
    max-width: 50%;
  }

  .logo-text {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
  }

  .logo-tagline {
    font-size: 0.85rem;
  }

  .lead {
    font-size: 0.85rem;
  }

  .field-group {
    margin-bottom: 0.8rem;
  }

  .field-group input {
    padding: 0.75rem 0.9rem;
  }

  .btn-primary {
    padding: 0.85rem;
    font-size: 0.9rem;
  }

  .new-user-box {
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .pl-inner {
    padding: 1rem;
  }

  .pl-logo {
    font-size: 2rem;
  }

  .pl-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pl-percent {
    font-size: 1.6rem;
    text-align: center;
    display: block;
    width: 100%;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn-primary:active {
    transform: scale(0.96);
  }

  .register-link:active,
  .rg-login-link:active {
    transform: scale(0.98);
  }

  /* Prevent zoom on iOS */
  input[type="text"],
  input[type="password"],
  input[type="tel"],
  input[type="email"] {
    font-size: 16px !important;
  }
}

/* High DPI screens (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-text,
  .pl-logo {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* iPhone notch safe area */
@supports (padding: max(0px)) {
  .layout {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}