:root {
  --color-bg: linear-gradient(-145deg, #ffffff 30%, #f5f5f5 100%);
  --color-bg-rev: linear-gradient(-145deg, #fafafa 30%, #f5f5f5 100%);
  --color-swipe-bg: linear-gradient(-145deg, #e6e6e600, #cacaca6e);
--color-input-text: #3b3b3b;
  --color-text: #1c1c1c;
  --color-card: #ffffff;
  --color-primary: #ff6200;
  --color-border: #cccccc;
  --color-shadow: rgba(0, 0, 0, 0.238);

  --color-button-gradient: linear-gradient(145deg, #fec629, #f62464);
  --color-input-shadow-light: rgba(255, 255, 255, 0.08);
  --color-input-shadow-dark: rgba(0, 0, 0, 0.08);
  --color-focus-shadow: rgba(0, 0, 0, 0.5);

  --form-shadow-1: -0.1vw 0.1vw 0.5vw var(--color-shadow);
  --form-shadow-2: 0.3vw -0.3vw 0.6vw rgba(255, 255, 255, 0.04);
  --form-inset-1: inset -0.1vw 0.1vw 0.3vw rgba(255, 255, 255, 0.02);
  --form-inset-2: inset 0.1vw -0.1vw 0.3vw rgba(0, 0, 0, 0.04);
  --fill-col: #ffffffc0;
  --input-wrapper-shadow: inset 0 0 0.55vw #0000008f;

  --btn-shadow-out: -0.2vw 0.2vw 0.5vw rgba(0, 0, 0, 0.4);
  --btn-shadow-inset-light: inset -0.1vw 0.1vw 0.3vw rgba(255, 255, 255, 0.1);
  --btn-shadow-inset-dark: inset 0.1vw -0.1vw 0.3vw rgba(0, 0, 0, 0.15);
  
}

.dark-theme {
  --color-bg: linear-gradient(-145deg, #1a1919 30%, #0b0b0b 100%);
  --color-bg-rev: linear-gradient(-145deg, #101010 30%, #000000 100%);
  --color-input-text: #ededed;
  --color-text: #eee;
  --color-swipe-bg: linear-gradient(145deg, #2a2a2a, #1a1a1a);

  --color-text: #ffffff;
  --color-card: #2a2a2a;
  --color-primary: #ff914d;
  --color-border: #3a3a3a;
  --color-shadow: rgba(0, 0, 0, 0.55);

  --color-button-gradient: linear-gradient(145deg, #fec629, #f62464);
  --color-input-shadow-light: rgba(255, 255, 255, 0.02);
  --color-input-shadow-dark: rgba(0, 0, 0, 0.2);
  --color-focus-shadow: rgba(255, 115, 0, 0.4);

  --form-shadow-1: -0.2vw 0.2vw 0.5vw rgba(0, 0, 0, 0.55);
  --form-shadow-2: 0.3vw -0.3vw 0.6vw rgba(0, 0, 0, 0.086);
  --form-inset-1: inset -0.1vw 0.1vw 0.3vw rgba(255, 255, 255, 0.01);
  --form-inset-2: inset 0.1vw -0.1vw 0.3vw rgba(0, 0, 0, 0.25);
  --input-col: #00000013;
  --fill-col: #00000013;
  --input-wrapper-shadow: inset 0 0 0.5vw rgba(0, 0, 0, 0.5);

  --btn-shadow-out: -0.2vw 0.2vw 0.5vw rgba(0, 0, 0, 0.8);
  --btn-shadow-inset-light: inset -0.1vw 0.1vw 0.3vw rgba(255, 255, 255, 0.05);
  --btn-shadow-inset-dark: inset 0.1vw -0.1vw 0.3vw rgba(0, 0, 0, 0.3);
  
}

html {
  font-size: 0.8vw;
}
form {
      font-family: 'Montserrat', sans-serif;
}
body {
    font-family: 'Montserrat', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  transition: background 20.4s ease, color 0.4s ease;
}

/* 💡 Карта логіну з 3D */
.form-container {
  background: var(--color-bg);
  border-radius: 1.5vw;
  padding: 2vw 4vw;
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  box-shadow:
    var(--form-shadow-1),
    var(--form-shadow-2),
    var(--form-inset-1),
    var(--form-inset-2);
  transition: all 0.3s ease-in-out;
}
input:-webkit-autofill {
  background-color: #ffffff00 !important;
  -webkit-text-fill-color: #ffffff00 !important;
  appearance: none !important;
  border: 1px solid var(--color-border) !important;
  box-shadow:
    inset 0.2vw 0.2vw 0.4vw rgba(255, 255, 255, 0.08),
    inset -0.2vw -0.2vw 0.4vw rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
}


.form-container img {
  width: 26vw;
}
.login-card {

  border-radius: 1.5vw;

  width: 26vw;
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  transition: all 0.3s ease-in-out;
}

.input-wrapper {
  border-radius: 1vw;

background-color: var(--input-col);
  transition: box-shadow 0.3s ease;
  box-shadow: var(--input-wrapper-shadow);
}

.input-wrapper:focus-within {
  border: none;
  box-shadow:
    inset 0 0 0.5vw var(--color-primary),
    inset 0.1vw 0.1vw 0.2vw rgba(255, 255, 255, 0.15),
    inset -0.1vw -0.1vw 0.2vw rgba(0, 0, 0, 0.07);
}

.input-wrapper input {
  font-size: 0.9vw;
  width: 100%;
  font-weight: 600;
  padding: 1vw;
  font-family: 'Montserrat', sans-serif !important;
    caret-color: #ff914d;
  border: none !important;
  background: var(--input-col);
  color: var(--color-input-text);
  outline: none;
  border-radius: 1vw;
}

/* 🔒 Autofill fix — без синего фона */
.input-wrapper input:-webkit-autofill,
.input-wrapper input:-webkit-autofill:hover,
.input-wrapper input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--color-card) inset !important;
  box-shadow: 0 0 0px 1000px var(--fill-col) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
   font-family: 'Montserrat', sans-serif !important;
  transition: background-color 5000s ease-in-out 0s;
}



/* 🔥 Кнопка */
.login-card button {
  background: linear-gradient(145deg, #fec629, #f62464);
  color: #fff;
  border: none;
  padding: 1vw;
  font-weight: 700;
  font-size: 1.1vw;
  border-radius: 1vw;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow:
    var(--btn-shadow-out),
    var(--btn-shadow-inset-light),
    var(--btn-shadow-inset-dark);
}

.login-card button:hover {
  background: linear-gradient(145deg, #fec629, #f62464);
  transform: scale(1.02);
  box-shadow:
    0 0.2vw 0.8vw rgba(0, 0, 0, 0.5),
    inset 0.1vw 0.1vw 0.3vw rgba(255, 255, 255, 0.15),
    inset -0.1vw -0.1vw 0.3vw rgba(0, 0, 0, 0.2);
}

/* ⚠️ Повідомлення про помилку */
.login-card p {
  font-size: 0.9vw;
  color: #ff4d4d;
  margin: 0;
}

/* 🌙 Перемикач теми */
.theme-btn {
  box-shadow:
    inset 0.1vw 0.1vw 0.3vw #ffffff1a,
    inset -0.1vw -0.1vw 0.3vw #00000080,
    0.15vw 0.15vw 0.6vw #000000a2;
  position: absolute;
  top: 2vw;
  right: 2vw;
  width: 5vw;
  height: 2.1vw;
  border: 1px solid var(--color-primary);
  border-radius: 3vw;
  background: var(--color-swipe-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.2vw;
  transition: all 0.3s ease;
}

#theme-toggle {
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
  background:  linear-gradient(145deg, #fec629, #f62464);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    0.2vw 0.2vw 0.6vw rgba(0, 0, 0, 0.5),
    inset 0.1vw 0.1vw 0.3vw rgba(255, 255, 255, 0.2),
    inset -0.1vw -0.1vw 0.3vw rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.dark-theme #theme-toggle {
  transform: translateX(3vw);
}