:root { color-scheme: dark; }

/* Connexion minimale de l’application installée */
.pwa-login-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 16% 10%, rgba(22, 114, 255, .22), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(65, 221, 145, .11), transparent 28%),
    #080b09;
  color: #f4f7f5;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pwa-login-page * { box-sizing: border-box; }
.pwa-login-shell { display: grid; width: min(1060px, calc(100% - 40px)); min-height: 100vh; margin: auto; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); align-items: center; gap: clamp(38px, 7vw, 100px); padding: 50px 0; }
.pwa-login-copy > img { width: 62px; height: 62px; object-fit: contain; }
.pwa-login-copy > span { display: block; margin-top: 24px; color: #70a0ff; font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.pwa-login-copy h1 { max-width: 620px; margin: 15px 0 20px; font-size: clamp(42px, 5.8vw, 76px); line-height: .98; letter-spacing: -.07em; }
.pwa-login-copy > p { max-width: 590px; margin: 0; color: #9aa69d; font-size: clamp(14px, 1.35vw, 18px); line-height: 1.7; }
.pwa-login-points { display: grid; gap: 12px; margin-top: 30px; color: #ccd4ce; font-size: 13px; }
.pwa-login-points span { display: flex; align-items: center; gap: 10px; }
.pwa-login-points i { width: 9px; height: 9px; border: 2px solid #9bffca; border-radius: 50%; background: #45dc91; box-shadow: 0 0 0 5px rgba(69, 220, 145, .09); }
.pwa-login-card { padding: clamp(25px, 4vw, 40px); border: 1px solid #2c372f; border-radius: 25px; background: rgba(16, 21, 17, .94); box-shadow: 0 28px 80px rgba(0,0,0,.38); }
.pwa-login-card-heading small { color: #6c9eff; font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.pwa-login-card-heading h2 { margin: 8px 0 8px; font-size: 30px; letter-spacing: -.04em; }
.pwa-login-card-heading p { margin: 0 0 22px; color: #869188; font-size: 12px; line-height: 1.55; }
.pwa-google-login { display: flex; min-height: 49px; align-items: center; justify-content: center; gap: 10px; border: 1px solid #354139; border-radius: 12px; background: #171d18; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.pwa-google-login span { font-size: 17px; }
.pwa-login-divider { display: flex; align-items: center; gap: 11px; margin: 19px 0; color: #6e796f; font-size: 9px; text-transform: uppercase; }
.pwa-login-divider::before,.pwa-login-divider::after { height: 1px; flex: 1; background: #2a322c; content: ""; }
.pwa-login-form { display: grid; gap: 14px; }
.pwa-login-form label { display: grid; gap: 7px; color: #b8c1ba; font-size: 11px; font-weight: 700; }
.pwa-login-form input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #303b33; border-radius: 11px; outline: 0; background: #0b0f0c; color: #fff; font: inherit; }
.pwa-login-form input:focus { border-color: #347cff; box-shadow: 0 0 0 3px rgba(52,124,255,.14); }
.pwa-login-form button { min-height: 49px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #0d5ce7, #247dff); color: #fff; font: inherit; font-weight: 850; cursor: pointer; box-shadow: 0 13px 30px rgba(13, 86, 218, .28); }
.pwa-login-form button:disabled { opacity: .55; cursor: wait; }
#pwaLoginMessage { min-height: 18px; margin: 0; color: #ff9a9a; font-size: 11px; text-align: center; }
.pwa-account-link { display: block; margin-top: 13px; color: #85acff; font-size: 11px; text-align: center; text-decoration: none; }

/* Surfaces réservées à l’application */
#appProjectsButton { display: none; }
.pwa-mode #appProjectsButton { display: inline-flex; }
.pwa-mode #exitBuilderButton { display: none; }
.pwa-mode .editor-exit-area { min-width: 52px; }
.pwa-mode .editor-exit-area::before { display: block; width: 34px; height: 34px; background: url("Logo/vibair-mark.png") center / contain no-repeat; content: ""; }

.app-projects-modal[hidden] { display: none !important; }
.app-projects-modal { position: fixed; inset: 0; z-index: 200000; display: grid; padding: clamp(18px, 4vw, 48px); place-items: center; background: rgba(3, 6, 4, .78); backdrop-filter: blur(14px); }
.app-projects-dialog { display: grid; width: min(760px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: hidden; grid-template-rows: auto minmax(0, 1fr); border: 1px solid #313b33; border-radius: 24px; background: #101511; box-shadow: 0 35px 100px rgba(0,0,0,.62); }
.app-projects-heading { display: flex; min-height: 88px; padding: 20px 22px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #283129; }
.app-projects-heading small { color: #6c9eff; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.app-projects-heading h2 { margin: 5px 0 0; color: #f6f9f7; font-size: 26px; letter-spacing: -.04em; }
.app-projects-heading-actions { display: flex; align-items: center; gap: 7px; }
.app-projects-heading button { display: inline-flex; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; gap: 7px; border: 1px solid #313a33; border-radius: 11px; background: #161c17; color: #aab5ac; cursor: pointer; }
.app-projects-heading .app-new-project { width: auto; padding: 0 13px; border-color: #245dc3; background: #123b83; color: #fff; font-size: 10px; font-weight: 800; }
.app-projects-content { min-height: 0; overflow: auto; padding: 12px; }
.app-projects-list { display: grid; gap: 7px; }
.app-project-row { display: grid; width: 100%; min-height: 68px; padding: 10px 13px; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 12px; border: 1px solid #29322b; border-radius: 13px; background: #0b100c; color: #e9efeb; text-align: left; cursor: pointer; transition: border-color .22s ease, background .22s ease, transform .22s ease; }
.app-project-row:hover { border-color: #3e67be; background: #111a28; transform: translateY(-1px); }
.app-project-row:disabled { opacity: .5; cursor: wait; }
.app-project-row > span:nth-child(2) { display: grid; min-width: 0; gap: 5px; }
.app-project-row b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.app-project-row small { color: #7f8b82; font-size: 9px; }
.app-project-row > i { color: #6983bc; }
.app-project-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: #122548; color: #6d9fff; }
.app-project-icon.cloud { background: #153123; color: #64e59f; }
.app-projects-empty { display: grid; min-height: 260px; place-items: center; color: #879289; text-align: center; }
.app-projects-empty[hidden] { display: none; }
.app-projects-empty > div { display: grid; justify-items: center; }
.app-projects-empty i { color: #4a5a4e; font-size: 34px; }
.app-projects-empty h3 { margin: 13px 0 7px; color: #e9eeea; font-size: 18px; }
.app-projects-empty p { margin: 0; font-size: 11px; }

@media (max-width: 760px) {
  .pwa-login-shell { width: min(520px, calc(100% - 28px)); grid-template-columns: 1fr; gap: 30px; padding: 30px 0; }
  .pwa-login-copy h1 { font-size: clamp(38px, 11vw, 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .app-project-row { transition: none; }
}

/* Application installée : une interface continue, sans empilement de cartes. */
.pwa-mode .app-projects-modal {
  padding: clamp(24px, 5vw, 68px);
  background:
    radial-gradient(circle at 50% -15%, rgba(38, 112, 255, .13), transparent 42%),
    rgba(7, 10, 8, .97);
  backdrop-filter: blur(18px);
}

.pwa-mode .app-projects-dialog {
  width: min(920px, 100%);
  max-height: min(820px, calc(100vh - 64px));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pwa-mode .app-projects-heading {
  min-height: 96px;
  padding: 10px 4px 20px;
  border-bottom-color: #2b342d;
}

.pwa-mode .app-projects-content { padding: 10px 0 0; }
.pwa-mode .app-projects-list { gap: 0; }

.pwa-mode .app-project-row {
  min-height: 78px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid #252d27;
  border-radius: 0;
  background: transparent;
}

.pwa-mode .app-project-row:hover {
  border-bottom-color: #355a9a;
  background: linear-gradient(90deg, rgba(36, 102, 221, .1), transparent 72%);
  transform: none;
}

.pwa-mode .app-project-icon {
  border: 1px solid #29406b;
  border-radius: 50%;
  background: rgba(34, 91, 197, .1);
}

.pwa-mode .app-project-icon.cloud {
  border-color: #28533a;
  background: rgba(47, 181, 105, .09);
}

.pwa-mode .app-projects-empty { min-height: 340px; }

/* Connexion plus éditoriale : une seule séparation, aucune carte flottante. */
.pwa-login-card {
  padding: clamp(26px, 4vw, 44px) 0 clamp(26px, 4vw, 44px) clamp(32px, 5vw, 66px);
  border: 0;
  border-left: 1px solid #2b352e;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {
  .pwa-login-card {
    padding: 28px 0 0;
    border-top: 1px solid #2b352e;
    border-left: 0;
  }

  .pwa-mode .app-projects-modal { padding: 18px; }
  .pwa-mode .app-projects-dialog { max-height: calc(100vh - 36px); }
}

/* Les listes de l’application défilent sans ajouter une petite barre parasite. */
.app-projects-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.app-projects-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}