* {
  box-sizing: border-box;
}

:root {
  --topbar-height: 70px;
  --bottom-nav-height: 72px;
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 80px;
  --border-color: #4f5c3d;
  --card-border: #4a5639;
  --bg-dark: #141a10;
  --bg-panel: rgba(20, 27, 15, 0.95);
  --bg-panel-soft: rgba(20, 27, 15, 0.88);
  --text-main: #e8ecd9;
  --text-soft: #aab59a;
  --brand: #c7d7a3;
  --green: #556b2f;
  --green-hover: #647a37;
  --danger: #7b2f2f;
  --danger-hover: #652626;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #141a10;
  background-image:
    linear-gradient(rgba(10, 14, 8, 0.78), rgba(10, 14, 8, 0.78)),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'>\
<rect width='700' height='700' fill='%231b2113'/>\
<path d='M-40 80 C30 20, 120 20, 180 70 C230 110, 290 110, 340 75 C390 40, 470 35, 530 75 C590 115, 655 115, 720 70 L720 180 C660 225, 580 230, 510 205 C440 180, 380 170, 315 195 C240 225, 150 235, 70 215 C15 200, -20 170, -40 140 Z' fill='%23394422'/>\
<path d='M90 130 C130 95, 190 90, 240 115 C295 142, 350 145, 400 118 C455 88, 520 92, 565 122 C610 150, 620 195, 590 225 C560 255, 500 262, 430 248 C370 236, 320 228, 270 240 C215 253, 160 260, 120 245 C70 227, 55 180, 90 130 Z' fill='%234a5a2e'/>\
<path d='M-50 260 C40 215, 115 220, 185 255 C250 288, 320 292, 390 260 C465 225, 560 228, 640 262 C685 280, 710 310, 720 340 L720 430 C670 458, 600 465, 530 445 C460 425, 395 410, 325 425 C250 440, 180 470, 95 455 C20 442, -25 400, -50 350 Z' fill='%23212a15'/>\
<path d='M160 320 C210 280, 285 270, 355 295 C420 318, 485 320, 550 295 C595 278, 645 282, 685 310 C720 334, 725 375, 695 405 C662 438, 598 448, 530 438 C460 428, 395 408, 330 415 C260 423, 210 452, 165 438 C118 423, 105 365, 160 320 Z' fill='%235f6d3d'/>\
</svg>");
  background-size: 700px 700px;
  background-repeat: repeat;
  color: var(--text-main);
}

body.auth-loading {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

.auth-loader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(10, 14, 8, 0.92);
  backdrop-filter: blur(4px);
}

.loader-card {
  background: var(--bg-panel);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 28px 24px;
  min-width: 260px;
  text-align: center;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
}

.loader-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border: 4px solid rgba(199, 215, 163, 0.18);
  border-top: 4px solid #c7d7a3;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.loader-text {
  color: #dfe7d0;
  font-size: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}