/* ─── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --c-bg:          #050506;
  --c-card-bg:     rgba(12, 10, 8, 0.78);
  --c-border:      rgba(255, 125, 45, 0.16);
  --c-border-h:    rgba(255, 150, 55, 0.34);
  --c-text:        #f0ece8;
  --c-text-muted:  rgba(240, 220, 200, 0.48);
  --c-accent:      #ff7600;
  --c-accent-2:    #cc2600;
  --c-input-bg:    rgba(255, 255, 255, 0.045);
  --radius:        14px;
  --radius-sm:     9px;
}

html,
body {
  width: 100%;
  height: 100%;
  background: var(--c-bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--c-text);
  overflow: hidden;
}

/* ─── Canvas particle background ───────────────────────────────── */
#bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at center, #090706 0%, #050506 46%, #020203 100%);
}

/* ─── Scene / centering ─────────────────────────────────────────── */
.scene {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Glow premium în spatele cardului */
.scene::before {
  content: '';
  position: absolute;
  width: min(640px, 84vw);
  height: min(640px, 84vw);
  border-radius: 999px;
  background:
    radial-gradient(circle at center,
      rgba(255, 135, 42, 0.18) 0%,
      rgba(255, 90, 18, 0.10) 24%,
      rgba(120, 22, 0, 0.055) 48%,
      transparent 72%);
  filter: blur(30px);
  opacity: 0.76;
  animation: portalBreathe 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes portalBreathe {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.62;
  }

  50% {
    transform: scale(1.035);
    opacity: 0.88;
  }
}

/* ─── Login Card ────────────────────────────────────────────────── */
.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  background:
    linear-gradient(180deg, rgba(18, 14, 10, 0.88), rgba(10, 8, 7, 0.80));
  border: 1px solid var(--c-border);
  border-radius: 22px;
  padding: 44px 40px 40px;
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
  box-shadow:
    0 0 0 1px rgba(255, 135, 45, 0.07) inset,
    0 0 90px rgba(255, 82, 10, 0.12),
    0 36px 100px rgba(0, 0, 0, 0.78);
  animation: cardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(255, 180, 82, 0.12) 0%,
      transparent 34%,
      transparent 68%,
      rgba(255, 70, 10, 0.09) 100%);
  opacity: 0.74;
}

.login-card > * {
  position: relative;
  z-index: 1;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── Hex icon ──────────────────────────────────────────────────── */
.hex-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 12px rgba(255, 100, 20, 0.5));
  animation: pulse 3.6s ease-in-out infinite;
}

.hex-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes pulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255, 100, 20, 0.42));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 21px rgba(255, 122, 30, 0.82));
    transform: scale(1.025);
  }
}

/* ─── Typography ────────────────────────────────────────────────── */
.title {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.4px;
  color: #f8f0e8;
  margin-bottom: 6px;
}

.subtitle {
  font-size: 13.5px;
  color: var(--c-text-muted);
  text-align: center;
  margin-bottom: 36px;
  font-weight: 300;
}

/* ─── Form fields ───────────────────────────────────────────────── */
.form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.field {
  margin-bottom: 18px;
}

.field label,
.field-row label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 8px;
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.field-row label {
  margin-bottom: 0;
}

.forgot {
  font-size: 11.5px;
  color: rgba(255, 122, 48, 0.72);
  text-decoration: none;
  transition: color 0.2s;
}

.forgot:hover {
  color: rgba(255, 166, 76, 1);
}

/* ─── Inputs ────────────────────────────────────────────────────── */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 13px;
  width: 16px;
  height: 16px;
  color: var(--c-text-muted);
  pointer-events: none;
  transition: color 0.2s;
}

.input-wrap input {
  width: 100%;
  background: var(--c-input-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px 12px 40px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--c-text);
  outline: none;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  letter-spacing: 0.1px;
}

.input-wrap input::placeholder {
  color: rgba(255, 220, 190, 0.2);
}

.input-wrap input:focus {
  border-color: rgba(255, 126, 38, 0.54);
  background: rgba(255, 100, 20, 0.065);
  box-shadow: 0 0 0 3px rgba(255, 98, 20, 0.09);
}

.input-wrap input:focus + .toggle-pass,
.input-wrap:focus-within .input-icon {
  color: rgba(255, 142, 58, 0.84);
}

/* ─── Password toggle ───────────────────────────────────────────── */
.toggle-pass {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
  transition: color 0.2s;
}

.toggle-pass:hover {
  color: rgba(255, 142, 58, 0.94);
}

.toggle-pass svg {
  width: 16px;
  height: 16px;
}

/* ─── Checkbox ──────────────────────────────────────────────────── */
.remember-row {
  margin-bottom: 24px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text-muted);
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-border-h);
  border-radius: 4px;
  background: var(--c-input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}

.checkbox-label input:checked ~ .checkmark {
  background: linear-gradient(135deg, #ff7a00, #cc2600);
  border-color: transparent;
}

.checkbox-label input:checked ~ .checkmark::after {
  content: '';
  width: 9px;
  height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translate(0px, -1px);
  display: block;
}

/* ─── Primary button ────────────────────────────────────────────── */
.btn-primary {
  position: relative;
  width: 100%;
  padding: 13.5px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #ff7c00 0%, #cc2600 100%);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
  box-shadow:
    0 4px 24px rgba(210, 65, 0, 0.38),
    0 0 0 1px rgba(255, 150, 45, 0.18) inset;
}

.btn-primary:disabled {
  cursor: not-allowed;
}

.btn-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: none;
}

.btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow:
    0 8px 32px rgba(210, 65, 0, 0.52),
    0 0 0 1px rgba(255, 150, 45, 0.25) inset;
}

.btn-primary:hover .btn-glow {
  animation: shimmer 0.5s ease forwards;
}

.btn-primary:active {
  transform: translateY(0);
}

@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* ─── Register link ─────────────────────────────────────────────── */
.register-link {
  text-align: center;
  font-size: 13px;
  color: var(--c-text-muted);
}

.register-link a {
  color: rgba(255, 130, 48, 0.86);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.register-link a:hover {
  color: rgba(255, 172, 78, 1);
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .scene {
    padding: 16px;
  }

  .login-card {
    padding: 36px 26px 32px;
    max-width: 360px;
  }

  .title {
    font-size: 23px;
  }
}