/* ========== RESET & LAYOUT ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-family);
  background: #e8e7e4;
  display: flex;
  justify-content: center;
}

.phone {
  width: var(--phone-width);
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* View shells */
#login-view { z-index: 50; }
#signup-view { z-index: 51; transform: translateX(100%); }
#forgot-view { z-index: 51; transform: translateX(100%); }

#lists-view {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: 1;
}

#detail-view {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: 10;
  transform: translateX(100%);
}

#settings-view {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: 20;
  transform: translateX(100%);
}

/* Animations */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}