body.light-mode { background: #e7ebff; color: #222; }
body.dark-mode  { background: #232445; color: #f0f4ff; }
body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.split-accueil {
  display: flex; min-height: 100vh;
}
.accueil-gauche {
  flex: 1; background: #6366F1; color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 7vw;
}
.accueil-header {
  display: flex; align-items: center; margin-bottom: 32px;
}
.logo-img { height: 254px; width: 254px; margin-right: 18px; }
.logo-tg  { font-size: 2.2rem; font-weight: 900; letter-spacing: 1.5px; }
.accueil-phrases {
  display: flex; align-items: center; justify-content: center; min-height: 44vh; width: 100%;
}
.trading-quote { font-size: 2.3rem; font-weight: 700; color: #fff; text-align: left; max-width: 600px; }

.accueil-droite {
  flex: 1; background: #e7ebff; display: flex; align-items: center; justify-content: center;
}
body.dark-mode .accueil-droite { background: #232445; }
.login-card {
  background: #fff; padding: 36px 28px; border-radius: 14px; min-width: 320px; text-align: center;
}
body.dark-mode .login-card { background: #2c2f4c; color: #f0f4ff; }
.login-card h2 { margin-bottom: 22px; color: #6366F1; font-weight: 800; font-size: 1.35em; }
.login-card input {
  width: 100%; padding: 12px; border-radius: 7px; border: 1px solid #ccc;
  margin-bottom: 14px; font-size: 1em; background: #f8f8fb;
}
body.dark-mode .login-card input { background: #363970; color: #fff; border: 1px solid #6366F1; }
.btn-main {
  background: #6366F1; color: #fff; border-radius: 7px; border: none; padding: 12px 0; font-size: 1em;
  font-weight: bold; margin: 7px 0; width: 100%; cursor: pointer;
}
.btn-main:hover { background: #5052c7; }
.login-actions { margin-top: 18px; }
.login-actions a { color: #6366F1; text-decoration: none; font-weight: 600; font-size: 1em; }
.login-actions a:hover { text-decoration: underline; }

#btn-theme {
  position: fixed; top: 18px; right: 32px; z-index: 2000;
  border: none; border-radius: 50%; width: 46px; height: 46px; font-size: 1.6em;
  color: #6366F1; cursor: pointer; background: #e7ebff;
}
#btn-theme:hover { color: #32388e; }
body.dark-mode #btn-theme { background: #232445; color: #7ba7ff; }

.settings-menu {
  position: fixed; top: 66px; right: 34px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px #6366f133;
  padding: 7px 5px; z-index: 2100; min-width: 140px; display: flex; flex-direction: column; gap: 7px;
}
body.dark-mode .settings-menu { background: #2c2f4c; }
.settings-menu.hidden { display: none !important; }
.settings-menu button {
  border: none; background: none; color: #32388e; font-size: 1em; padding: 10px 0; border-radius: 8px;
  cursor: pointer; font-weight: 600; width: 100%;
}
.settings-menu button:hover { background: #e7ebff; }
body.dark-mode .settings-menu button { color: #7ba7ff; }
body.dark-mode .settings-menu button:hover { background: #363970; }

@media (max-width: 950px) {
  .split-accueil { flex-direction: column; }
  .accueil-gauche, .accueil-droite { min-height: 44vh; flex: none; }
  .login-card { min-width: 0; width: 94vw; }
  #btn-theme { right: 8px; top: 10px; width: 38px; height: 38px; font-size: 1.1em; }
  .settings-menu { right: 6px; top: 48px; min-width: 104px; padding: 5px 2px; }
}

.logo-tg {
  font-family: 'Pacifico', cursive, serif;
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #fff;
}
body.dark-mode .logo-tg {
  color: #f0f4ff;
}