@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
  --primary: #00aeef;
  --secondary: #00d98b;
  --violet: #8b5cf6;
  --dark: #06111d;
  --text: #f7fcff;
  --muted: #abc3d2;
  --bg1: #06111d;
  --bg2: #123653;
  --glass: rgba(255, 255, 255, .10);
  --glass2: rgba(255, 255, 255, .16);
  --border: rgba(255, 255, 255, .18);
  --shadow: rgba(0, 0, 0, .34);
  --activeText: #f7fcff;
}

body.light {
  --text: #06111d;
  --muted: #5f7888;
  --bg1: #e9fbff;
  --bg2: #c9f3ff;
  --glass: rgba(255, 255, 255, .58);
  --glass2: rgba(255, 255, 255, .78);
  --border: rgba(6, 17, 29, .08);
  --shadow: rgba(6, 17, 29, .14);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
  background: var(--bg1);
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Cairo, system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -12%, rgba(0, 174, 239, .46), transparent 34%),
    radial-gradient(circle at 0% 25%, rgba(139, 92, 246, .20), transparent 27%),
    radial-gradient(circle at 100% 92%, rgba(0, 217, 139, .28), transparent 34%),
    linear-gradient(145deg, var(--bg2), var(--bg1));
  overflow-x: hidden;
}

button {
  font-family: inherit;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  background:
    radial-gradient(circle at 50% -12%, rgba(0, 174, 239, .46), transparent 34%),
    radial-gradient(circle at 100% 92%, rgba(0, 217, 139, .28), transparent 34%),
    linear-gradient(145deg, var(--bg2), var(--bg1));
  transition: opacity .45s ease, visibility .45s ease, transform .45s ease;
}

.splash.hide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
}

.splash-logo {
  width: 184px;
  height: 184px;
  display: grid;
  place-items: center;
  border-radius: 54px;
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: 0 32px 90px var(--shadow);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  animation: splashIn .75s cubic-bezier(.19, 1, .22, 1) both, floatLogo 2s ease-in-out infinite;
}

.splash-logo img {
  width: 144px;
  height: 144px;
  object-fit: contain;
}

.dots {
  display: flex;
  gap: 10px;
}

.dots span {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 18px rgba(0, 174, 239, .48);
  animation: dotWave .75s ease-in-out infinite alternate;
}

.dots span:nth-child(2) {
  animation-delay: .14s;
}

.dots span:nth-child(3) {
  animation-delay: .28s;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.ultra-screen {
  width: min(100%, 430px);
  min-height: min(820px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  animation: screenIn .55s cubic-bezier(.19, 1, .22, 1) both;
}

.top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-btn,
.lang-switch,
.role,
.bottom-dock,
.toast {
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: 0 22px 60px var(--shadow);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.theme-btn {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  color: var(--text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.theme-btn span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 21px;
  transition: .25s ease;
}

body.light .sun {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

body.light .moon {
  opacity: 0;
  transform: translateY(-28px) rotate(-90deg);
}

body:not(.light) .sun {
  opacity: 0;
  transform: translateY(28px) rotate(90deg);
}

body:not(.light) .moon {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

.lang-switch {
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 19px;
}

.lang-btn {
  min-width: 46px;
  border: 0;
  border-radius: 14px;
  padding: 8px 10px;
  color: var(--text);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.lang-btn.active {
  color: var(--dark);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.brand-center {
  text-align: center;
  padding: 8px 10px 4px;
}

.logo-ring {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  position: relative;
}

.logo-ring::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 42px;
  background:
    conic-gradient(from 120deg, rgba(0,174,239,.0), rgba(0,174,239,.55), rgba(0,217,139,.50), rgba(139,92,246,.42), rgba(0,174,239,.0));
  filter: blur(10px);
  opacity: .58;
}

.logo-ring span {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.15));
  border: 1px solid var(--border);
  box-shadow: 0 24px 54px rgba(0, 174, 239, .18);
  transform: rotate(8deg);
}

body:not(.light) .logo-ring span {
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}

.logo-ring img {
  width: 94px;
  height: 94px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.brand-center h1 {
  margin: 13px 0 5px;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.7px;
}

.brand-center p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.choose-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
}

.choose-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.choose-head strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.role-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.role {
  width: 100%;
  min-height: 78px;
  border-radius: 28px;
  padding: 10px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px 52px 1fr 32px;
  align-items: center;
  gap: 10px;
  text-align: start;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.role::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  inset-inline-start: -70px;
  top: -58px;
  background: radial-gradient(circle, rgba(0, 174, 239, .35), transparent 66%);
  opacity: 0;
  transition: opacity .2s ease;
}

.role.active {
  color: var(--activeText);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 174, 239, .42), transparent 42%),
    linear-gradient(135deg, #07111f, #0b2b45 58%, #06352c);
  box-shadow: 0 28px 74px rgba(0, 174, 239, .26);
  transform: translateY(-2px);
}

.role.active::before {
  opacity: 1;
}

.role:active {
  transform: scale(.985);
}

.role-num {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.role.active .role-num {
  color: var(--secondary);
}

.role-icon {
  width: 52px;
  height: 52px;
  border-radius: 21px;
  display: grid;
  place-items: center;
  font-size: 23px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .20);
  position: relative;
  z-index: 2;
}

.role-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  position: relative;
  z-index: 2;
}

.role-copy strong {
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.role-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.role.active .role-copy small {
  color: rgba(247, 252, 255, .78);
}

.role-check {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--dark);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  font-size: 16px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.7) rotate(-18deg);
  transition: .2s ease;
  position: relative;
  z-index: 2;
}

.role.active .role-check {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.bottom-dock {
  border-radius: 30px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 126px;
  gap: 10px;
  align-items: center;
}

.selected-pill {
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(0, 174, 239, .14), rgba(0, 217, 139, .10));
  border: 1px solid rgba(0, 174, 239, .13);
  display: flex;
  align-items: center;
  gap: 9px;
}

.selected-pill b {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(255,255,255,.22);
  font-size: 21px;
}

.selected-pill div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.selected-pill span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.selected-pill strong {
  color: var(--text);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.start-btn {
  min-height: 58px;
  border: 0;
  border-radius: 22px;
  color: var(--dark);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 18px 42px rgba(0, 174, 239, .30);
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.start-btn:active {
  transform: scale(.97);
}

.start-btn i {
  font-style: normal;
  font-size: 23px;
  line-height: 0;
}

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 120;
  width: min(398px, calc(100% - 32px));
  margin: auto;
  padding: 15px 16px;
  border-radius: 22px;
  color: var(--text);
  transform: translateY(120px) scale(.96);
  opacity: 0;
  transition: .28s cubic-bezier(.19, 1, .22, 1);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
}

.toast span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

[dir="ltr"] .start-btn i {
  transform: rotate(180deg);
}

@keyframes splashIn {
  from {
    opacity: 0;
    transform: scale(.82) translateY(18px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes floatLogo {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes dotWave {
  from {
    opacity: .45;
    transform: translateY(0) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateY(-12px) scale(1);
  }
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (min-width: 760px) {
  .ultra-screen {
    width: min(100%, 470px);
  }
}

@media (max-width: 370px) {
  .ultra-screen {
    gap: 8px;
  }

  .logo-ring {
    width: 106px;
    height: 106px;
  }

  .logo-ring img {
    width: 84px;
    height: 84px;
  }

  .brand-center h1 {
    font-size: 24px;
  }

  .brand-center p {
    font-size: 11px;
  }

  .choose-head strong {
    font-size: 20px;
  }

  .role {
    min-height: 74px;
    grid-template-columns: 29px 47px 1fr 28px;
    gap: 8px;
    border-radius: 25px;
  }

  .role-icon {
    width: 47px;
    height: 47px;
    border-radius: 18px;
    font-size: 21px;
  }

  .role-copy strong {
    font-size: 16px;
  }

  .role-copy small {
    font-size: 10px;
  }

  .bottom-dock {
    grid-template-columns: 1fr 112px;
    border-radius: 27px;
  }

  .selected-pill strong {
    font-size: 17px;
  }

  .start-btn {
    font-size: 16px;
  }
}

.brand-center h1,
.center-brand h1 {
  display: none !important;
}

.brand-center,
.center-brand {
  padding-top: 12px !important;
  padding-bottom: 8px !important;
}

.logo-ring,
.logo-orbit {
  width: 166px !important;
  height: 166px !important;
}

.logo-ring img,
.logo-orbit img {
  width: 132px !important;
  height: 132px !important;
}

.logo-ring span,
.logo-orbit span {
  border-radius: 46px !important;
  transform: rotate(6deg) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.20)) !important;
}

.logo-ring::before {
  inset: -16px !important;
  border-radius: 56px !important;
  opacity: .82 !important;
  animation: logoAura 3.4s ease-in-out infinite !important;
}

.role.active {
  color: var(--text) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.52)),
    radial-gradient(circle at 8% 10%, rgba(0,174,239,.30), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(0,217,139,.24), transparent 44%) !important;
  box-shadow:
    0 26px 70px rgba(0,174,239,.22),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
  transform: translateY(-3px) scale(1.01) !important;
  animation: premiumFloat 2.6s ease-in-out infinite !important;
}

body:not(.light) .role.active {
  color: #f7fcff !important;
  background:
    linear-gradient(135deg, rgba(12,37,61,.86), rgba(8,25,42,.72)),
    radial-gradient(circle at 8% 10%, rgba(0,174,239,.42), transparent 44%),
    radial-gradient(circle at 92% 88%, rgba(0,217,139,.32), transparent 46%) !important;
}

.role.active::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: conic-gradient(from var(--angle), #00aeef, #00d98b, #8b5cf6, #00aeef) !important;
  opacity: 1 !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  animation: spinBorder 3.2s linear infinite !important;
}

.role.active::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 42%, transparent 62%) !important;
  transform: translateX(120%) !important;
  animation: shineSweep 2.9s ease-in-out infinite !important;
  pointer-events: none !important;
}

.role.active .role-icon {
  background: linear-gradient(135deg, rgba(0,174,239,.24), rgba(0,217,139,.18)) !important;
  box-shadow: 0 14px 30px rgba(0,174,239,.20) !important;
  transform: translateY(-2px) scale(1.06) !important;
  animation: iconPop 2.2s ease-in-out infinite !important;
}

.role.active .role-copy strong {
  color: inherit !important;
}

.role.active .role-copy small {
  color: var(--muted) !important;
}

body:not(.light) .role.active .role-copy small {
  color: rgba(247,252,255,.76) !important;
}

.role.active .role-check {
  opacity: 1 !important;
  transform: scale(1) rotate(0) !important;
  box-shadow: 0 10px 24px rgba(0,217,139,.28) !important;
  animation: checkBounce .42s cubic-bezier(.19, 1, .22, 1) both !important;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spinBorder {
  to {
    --angle: 360deg;
  }
}

@keyframes shineSweep {
  0%, 45% {
    transform: translateX(120%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateX(-120%);
    opacity: 0;
  }
}

@keyframes premiumFloat {
  0%, 100% {
    transform: translateY(-3px) scale(1.01);
  }
  50% {
    transform: translateY(-6px) scale(1.012);
  }
}

@keyframes iconPop {
  0%, 100% {
    transform: translateY(-2px) scale(1.06);
  }
  50% {
    transform: translateY(-4px) scale(1.10);
  }
}

@keyframes logoAura {
  0%, 100% {
    opacity: .62;
    transform: scale(.98);
  }
  50% {
    opacity: .95;
    transform: scale(1.04);
  }
}

@keyframes checkBounce {
  from {
    transform: scale(.6) rotate(-18deg);
  }
  to {
    transform: scale(1) rotate(0);
  }
}

@media (max-width: 370px) {
  .logo-ring,
  .logo-orbit {
    width: 148px !important;
    height: 148px !important;
  }

  .logo-ring img,
  .logo-orbit img {
    width: 118px !important;
    height: 118px !important;
  }
}

.logo-ring,
.logo-orbit {
  margin-bottom: 24px !important;
}

.brand-center p,
.center-brand p {
  margin-top: 10px !important;
  padding-inline: 22px !important;
  line-height: 1.8 !important;
}

.role[data-role="customer"].active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.56)),
    radial-gradient(circle at 6% 12%, rgba(0,174,239,.38), transparent 46%),
    radial-gradient(circle at 92% 90%, rgba(0,174,239,.18), transparent 44%) !important;
  box-shadow:
    0 28px 78px rgba(0,174,239,.30),
    0 0 0 1px rgba(0,174,239,.16),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

.role[data-role="company"].active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.56)),
    radial-gradient(circle at 6% 12%, rgba(0,217,139,.38), transparent 46%),
    radial-gradient(circle at 92% 90%, rgba(0,217,139,.18), transparent 44%) !important;
  box-shadow:
    0 28px 78px rgba(0,217,139,.30),
    0 0 0 1px rgba(0,217,139,.16),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

.role[data-role="technician"].active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.56)),
    radial-gradient(circle at 6% 12%, rgba(255,159,28,.42), transparent 46%),
    radial-gradient(circle at 92% 90%, rgba(255,122,24,.20), transparent 44%) !important;
  box-shadow:
    0 28px 78px rgba(255,159,28,.32),
    0 0 0 1px rgba(255,159,28,.18),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

body:not(.light) .role[data-role="customer"].active {
  background:
    linear-gradient(135deg, rgba(8,31,52,.88), rgba(5,20,34,.74)),
    radial-gradient(circle at 6% 12%, rgba(0,174,239,.46), transparent 48%),
    radial-gradient(circle at 92% 90%, rgba(0,174,239,.22), transparent 44%) !important;
}

body:not(.light) .role[data-role="company"].active {
  background:
    linear-gradient(135deg, rgba(8,44,38,.88), rgba(5,24,26,.74)),
    radial-gradient(circle at 6% 12%, rgba(0,217,139,.46), transparent 48%),
    radial-gradient(circle at 92% 90%, rgba(0,217,139,.22), transparent 44%) !important;
}

body:not(.light) .role[data-role="technician"].active {
  background:
    linear-gradient(135deg, rgba(55,33,11,.88), rgba(31,21,10,.76)),
    radial-gradient(circle at 6% 12%, rgba(255,159,28,.52), transparent 48%),
    radial-gradient(circle at 92% 90%, rgba(255,122,24,.24), transparent 44%) !important;
}

.role[data-role="customer"].active::before {
  background: conic-gradient(from var(--angle), #00aeef, #66d9ff, #0098d8, #00aeef) !important;
}

.role[data-role="company"].active::before {
  background: conic-gradient(from var(--angle), #00d98b, #7cffc9, #00b876, #00d98b) !important;
}

.role[data-role="technician"].active::before {
  background: conic-gradient(from var(--angle), #ff9f1c, #ffd166, #ff7a18, #ff9f1c) !important;
}

.role[data-role="customer"].active::after {
  background: linear-gradient(110deg, transparent 0%, rgba(0,174,239,.20) 42%, rgba(255,255,255,.35) 52%, transparent 66%) !important;
}

.role[data-role="company"].active::after {
  background: linear-gradient(110deg, transparent 0%, rgba(0,217,139,.20) 42%, rgba(255,255,255,.35) 52%, transparent 66%) !important;
}

.role[data-role="technician"].active::after {
  background: linear-gradient(110deg, transparent 0%, rgba(255,159,28,.22) 42%, rgba(255,255,255,.38) 52%, transparent 66%) !important;
}

.role[data-role="customer"].active .role-icon,
.role[data-role="customer"].active .role-check {
  background: linear-gradient(135deg, #00aeef, #66d9ff) !important;
  box-shadow: 0 14px 34px rgba(0,174,239,.32) !important;
}

.role[data-role="company"].active .role-icon,
.role[data-role="company"].active .role-check {
  background: linear-gradient(135deg, #00d98b, #7cffc9) !important;
  box-shadow: 0 14px 34px rgba(0,217,139,.32) !important;
}

.role[data-role="technician"].active .role-icon,
.role[data-role="technician"].active .role-check {
  background: linear-gradient(135deg, #ff9f1c, #ffd166) !important;
  box-shadow: 0 14px 34px rgba(255,159,28,.34) !important;
}

@media (max-width: 370px) {
  .logo-ring,
  .logo-orbit {
    margin-bottom: 20px !important;
  }

  .brand-center p,
  .center-brand p {
    margin-top: 8px !important;
  }
}

.view {
  display: none;
}

.view.active {
  display: grid;
  gap: 10px;
  animation: authViewIn .45s cubic-bezier(.19, 1, .22, 1) both;
}

.auth-view {
  gap: 11px;
}

.auth-back {
  width: fit-content;
  border: 0;
  border-radius: 18px;
  padding: 10px 13px;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px var(--shadow);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  cursor: pointer;
}

.auth-back span {
  font-size: 19px;
  line-height: 0;
}

.auth-back b {
  font-size: 13px;
}

.auth-brand {
  text-align: center;
  padding: 2px 8px 0;
}

.auth-logo.logo-ring {
  width: 154px !important;
  height: 154px !important;
  margin-bottom: 22px !important;
}

.auth-logo.logo-ring img {
  width: 122px !important;
  height: 122px !important;
}

.auth-brand p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}

.auth-panel {
  border-radius: 34px;
  padding: 15px;
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: 0 26px 76px var(--shadow);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  position: relative;
  overflow: hidden;
}

.auth-panel::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  top: -145px;
  inset-inline-end: -100px;
  background: radial-gradient(circle, rgba(0,174,239,.24), transparent 68%);
  pointer-events: none;
}

.auth-title {
  position: relative;
  display: grid;
  gap: 6px;
  margin-bottom: 13px;
}

.auth-title span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.auth-title strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

.auth-title small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.google-btn {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 23px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.42)),
    radial-gradient(circle at 8% 10%, rgba(0,174,239,.18), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(0,217,139,.16), transparent 44%);
  border: 1px solid rgba(0,174,239,.14);
  box-shadow: 0 18px 46px rgba(0,174,239,.13);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

body:not(.light) .google-btn {
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.07)),
    radial-gradient(circle at 8% 10%, rgba(0,174,239,.22), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(0,217,139,.18), transparent 44%);
}

.google-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.28) 45%, transparent 64%);
  transform: translateX(120%);
  animation: shineSweep 3.2s ease-in-out infinite;
}

.google-btn b {
  width: 31px;
  height: 31px;
  border-radius: 12px;
  color: var(--dark);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.google-btn span {
  position: relative;
  z-index: 2;
}

.auth-divider {
  margin: 14px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(0,174,239,.16);
}

.auth-form {
  display: grid;
  gap: 11px;
}

.auth-field {
  display: grid;
  gap: 8px;
}

.auth-field > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  padding-inline: 3px;
}

.auth-field input {
  width: 100%;
  min-height: 56px;
  border: 1px solid rgba(0,174,239,.13);
  outline: none;
  border-radius: 23px;
  padding: 0 15px;
  color: var(--text);
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
  font-size: 14px;
  font-weight: 800;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body:not(.light) .auth-field input {
  background: rgba(255,255,255,.08);
}

.auth-field input::placeholder {
  color: var(--muted);
  opacity: .85;
}

.auth-field input:focus {
  border-color: rgba(0,174,239,.55);
  box-shadow:
    0 0 0 4px rgba(0,174,239,.12),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.password-box {
  position: relative;
}

.password-box input {
  padding-inline-end: 56px;
}

.password-box button {
  position: absolute;
  top: 50%;
  inset-inline-end: 8px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 17px;
  background: rgba(0,174,239,.10);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.field-message {
  min-height: 15px;
  color: #ff4d6d;
  font-size: 11px;
  font-weight: 900;
  padding-inline: 4px;
}

.auth-field.error input {
  border-color: rgba(255,77,109,.70);
  box-shadow: 0 0 0 4px rgba(255,77,109,.11);
}

.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -2px;
}

.remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.remember input {
  display: none;
}

.remember span {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(0,174,239,.18);
  display: grid;
  place-items: center;
}

body:not(.light) .remember span {
  background: rgba(255,255,255,.08);
}

.remember input:checked + span {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.remember input:checked + span::before {
  content: "✓";
  color: var(--dark);
  font-size: 14px;
  font-weight: 900;
}

.text-btn {
  border: 0;
  padding: 0;
  color: var(--primary);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.login-submit {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 25px;
  color: var(--dark);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 18px 44px rgba(0,174,239,.30);
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.login-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.32) 42%, transparent 64%);
  transform: translateX(120%);
  animation: shineSweep 3s ease-in-out infinite;
}

.login-submit span,
.login-submit i {
  position: relative;
  z-index: 2;
}

.login-submit i {
  font-style: normal;
  font-size: 23px;
  line-height: 0;
}

.create-account {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: 20px;
  color: var(--text);
  background: rgba(0,174,239,.08);
  border: 1px solid rgba(0,174,239,.12);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.secure-note {
  margin: 11px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

[dir="ltr"] .auth-back span,
[dir="ltr"] .login-submit i {
  transform: rotate(180deg);
}

@keyframes authViewIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 370px) {
  .auth-logo.logo-ring {
    width: 136px !important;
    height: 136px !important;
  }

  .auth-logo.logo-ring img {
    width: 108px !important;
    height: 108px !important;
  }

  .auth-title strong {
    font-size: 21px;
  }

  .auth-panel {
    padding: 13px;
    border-radius: 30px;
  }

  .auth-field input {
    min-height: 52px;
    border-radius: 21px;
  }

  .bottom-dock {
    grid-template-columns: 1fr 128px;
  }
}