/* WASM-only extras (offline banner). Main UI styles live in app.css (shared with server shell). */

.app-boot-splash {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #10131a;
  color: #c2c6d6;
}

.app-boot-splash .loading-progress {
  width: 3rem;
  height: 3rem;
  position: relative;
}

.app-boot-splash .loading-progress circle {
  fill: none;
  stroke: #4d8eff;
  stroke-width: 0.2rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.app-boot-splash .loading-progress circle:last-child {
  stroke: #272a31;
  stroke-dasharray: 0.4, 3.2;
  animation: app-loading-spin 1.2s ease-in-out infinite;
}

.app-boot-splash .loading-progress-text::after {
  content: "Loading…";
  font-size: 0.9rem;
}

@keyframes app-loading-spin {
  100% {
    transform: rotate(-90deg) rotate(360deg);
  }
}

.offline-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #3d2c00;
  color: #fff8e6;
  border-bottom: 1px solid #6b4f00;
}

.offline-banner__text {
  font-size: 0.9rem;
}

.sign-in-cloud-banner {
  background: #1a2a3d;
  border-bottom-color: #2d4a6b;
  color: #e8f2ff;
}

.sign-in-cloud-banner__cta {
  margin-left: auto;
  font-size: 0.9rem;
  padding: 0.35rem 0.75rem;
}

.page-settings-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.page-settings-toolbar__button {
  font-size: 0.9rem;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(24rem, 100vw);
  height: 100vh;
  background: #151922;
  color: #e8edf8;
  border-left: 1px solid #2a3140;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.drawer-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid #2a3140;
}

.drawer-panel__title {
  margin: 0;
  font-size: 1.05rem;
}

.drawer-panel__body {
  padding: 1rem;
  overflow-y: auto;
}

.drawer-panel__close {
  flex-shrink: 0;
}

.settings-drawer__section {
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin: 0.75rem 0;
}

.settings-drawer__section--warning {
  background: #3d2c00;
  color: #fff8e6;
  border: 1px solid #6b4f00;
}