:root {
  color-scheme: light;
  --card: rgba(255, 255, 255, 0.82);
  --card-border: rgba(40, 79, 58, 0.1);
  --text: #173127;
  --muted: #5f7268;
  --accent-deep: #224737;
  --shadow: 0 24px 60px rgba(41, 67, 54, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(129, 221, 91, 0.14), transparent 22%),
    radial-gradient(circle at top right, rgba(96, 205, 255, 0.18), transparent 24%),
    linear-gradient(180deg, #0d6db3 0%, #1177bf 34%, #0c5d9b 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 44%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='760' viewBox='0 0 1600 760'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.19)' stroke-width='1.55' stroke-linejoin='round' stroke-linecap='round'%3E%3Cg opacity='1'%3E%3Cpath d='M50 10 100 39 100 97 50 126 0 97 0 39Z M150 10 200 39 200 97 150 126 100 97 100 39Z M250 10 300 39 300 97 250 126 200 97 200 39Z M350 10 400 39 400 97 350 126 300 97 300 39Z M450 10 500 39 500 97 450 126 400 97 400 39Z M550 10 600 39 600 97 550 126 500 97 500 39Z M650 10 700 39 700 97 650 126 600 97 600 39Z M750 10 800 39 800 97 750 126 700 97 700 39Z M850 10 900 39 900 97 850 126 800 97 800 39Z M950 10 1000 39 1000 97 950 126 900 97 900 39Z M1050 10 1100 39 1100 97 1050 126 1000 97 1000 39Z M1150 10 1200 39 1200 97 1150 126 1100 97 1100 39Z M1250 10 1300 39 1300 97 1250 126 1200 97 1200 39Z M1350 10 1400 39 1400 97 1350 126 1300 97 1300 39Z M1450 10 1500 39 1500 97 1450 126 1400 97 1400 39Z'/%3E%3C/g%3E%3Cg opacity='.86'%3E%3Cpath d='M100 97 150 126 150 184 100 213 50 184 50 126Z M200 97 250 126 250 184 200 213 150 184 150 126Z M300 97 350 126 350 184 300 213 250 184 250 126Z M400 97 450 126 450 184 400 213 350 184 350 126Z M500 97 550 126 550 184 500 213 450 184 450 126Z M600 97 650 126 650 184 600 213 550 184 550 126Z M700 97 750 126 750 184 700 213 650 184 650 126Z M800 97 850 126 850 184 800 213 750 184 750 126Z M900 97 950 126 950 184 900 213 850 184 850 126Z M1000 97 1050 126 1050 184 1000 213 950 184 950 126Z M1100 97 1150 126 1150 184 1100 213 1050 184 1050 126Z M1200 97 1250 126 1250 184 1200 213 1150 184 1150 126Z M1300 97 1350 126 1350 184 1300 213 1250 184 1250 126Z M1400 97 1450 126 1450 184 1400 213 1350 184 1350 126Z'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Cpath d='M50 184 100 213 100 271 50 300 0 271 0 213Z M150 184 200 213 200 271 150 300 100 271 100 213Z M250 184 300 213 300 271 250 300 200 271 200 213Z M350 184 400 213 400 271 350 300 300 271 300 213Z M450 184 500 213 500 271 450 300 400 271 400 213Z M550 184 600 213 600 271 550 300 500 271 500 213Z M650 184 700 213 700 271 650 300 600 271 600 213Z M750 184 800 213 800 271 750 300 700 271 700 213Z M850 184 900 213 900 271 850 300 800 271 800 213Z M950 184 1000 213 1000 271 950 300 900 271 900 213Z M1050 184 1100 213 1100 271 1050 300 1000 271 1000 213Z M1150 184 1200 213 1200 271 1150 300 1100 271 1100 213Z M1250 184 1300 213 1300 271 1250 300 1200 271 1200 213Z M1350 184 1400 213 1400 271 1350 300 1300 271 1300 213Z M1450 184 1500 213 1500 271 1450 300 1400 271 1400 213Z'/%3E%3C/g%3E%3Cg opacity='.54'%3E%3Cpath d='M100 271 150 300 150 358 100 387 50 358 50 300Z M200 271 250 300 250 358 200 387 150 358 150 300Z M300 271 350 300 350 358 300 387 250 358 250 300Z M400 271 450 300 450 358 400 387 350 358 350 300Z M500 271 550 300 550 358 500 387 450 358 450 300Z M600 271 650 300 650 358 600 387 550 358 550 300Z M700 271 750 300 750 358 700 387 650 358 650 300Z M800 271 850 300 850 358 800 387 750 358 750 300Z M900 271 950 300 950 358 900 387 850 358 850 300Z M1000 271 1050 300 1050 358 1000 387 950 358 950 300Z M1100 271 1150 300 1150 358 1100 387 1050 358 1050 300Z M1200 271 1250 300 1250 358 1200 387 1150 358 1150 300Z M1300 271 1350 300 1350 358 1300 387 1250 358 1250 300Z M1400 271 1450 300 1450 358 1400 387 1350 358 1350 300Z'/%3E%3C/g%3E%3Cg opacity='.38'%3E%3Cpath d='M50 358 100 387 100 445 50 474 0 445 0 387Z M150 358 200 387 200 445 150 474 100 445 100 387Z M250 358 300 387 300 445 250 474 200 445 200 387Z M350 358 400 387 400 445 350 474 300 445 300 387Z M450 358 500 387 500 445 450 474 400 445 400 387Z M550 358 600 387 600 445 550 474 500 445 500 387Z M650 358 700 387 700 445 650 474 600 445 600 387Z M750 358 800 387 800 445 750 474 700 445 700 387Z M850 358 900 387 900 445 850 474 800 445 800 387Z M950 358 1000 387 1000 445 950 474 900 445 900 387Z M1050 358 1100 387 1100 445 1050 474 1000 445 1000 387Z M1150 358 1200 387 1200 445 1150 474 1100 445 1100 387Z M1250 358 1300 387 1300 445 1250 474 1200 445 1200 387Z M1350 358 1400 387 1400 445 1350 474 1300 445 1300 387Z M1450 358 1500 387 1500 445 1450 474 1400 445 1400 387Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center top;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.22) 66%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.22) 66%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.95;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.34) 0 3px, transparent 4px),
    radial-gradient(circle at 26% 8%, rgba(255, 255, 255, 0.18) 0 6px, transparent 7px),
    radial-gradient(circle at 41% 16%, rgba(255, 255, 255, 0.2) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 10%, rgba(255, 255, 255, 0.14) 0 8px, transparent 9px),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.26) 0 3px, transparent 4px),
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.16) 0 5px, transparent 6px),
    radial-gradient(circle at 16% 34%, rgba(255, 255, 255, 0.16) 0 4px, transparent 5px),
    radial-gradient(circle at 31% 29%, rgba(255, 255, 255, 0.12) 0 9px, transparent 10px),
    radial-gradient(circle at 53% 30%, rgba(255, 255, 255, 0.15) 0 5px, transparent 6px),
    radial-gradient(circle at 71% 38%, rgba(255, 255, 255, 0.14) 0 7px, transparent 8px),
    radial-gradient(circle at 84% 33%, rgba(255, 255, 255, 0.2) 0 4px, transparent 5px),
    radial-gradient(circle at 10% 52%, rgba(255, 255, 255, 0.08) 0 8px, transparent 9px),
    radial-gradient(circle at 88% 54%, rgba(255, 255, 255, 0.1) 0 6px, transparent 7px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.85;
}

a,
button,
input {
  font: inherit;
}

.auth-wrapper,
.dashboard-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 18px;
  overflow: hidden;
}

.auth-card,
.dashboard-card {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-card::before,
.dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(111, 191, 97, 0.32), rgba(255, 255, 255, 0.72), rgba(47, 167, 160, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media only screen and (max-width: 575px) {
  .auth-wrapper,
  .dashboard-shell {
    padding-left: 14px;
    padding-right: 14px;
  }
}