#app {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen-enter {
  animation: screen-fade-in var(--duration-normal) var(--ease-out) forwards;
}

@keyframes screen-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Cut corner clip-path utility */
.cut-small {
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0,
    100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%,
    0 calc(100% - 8px), 0 8px
  );
}

.cut-medium {
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0 calc(100% - 14px), 0 14px
  );
}

/* Glass card base */
.glass-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border: 1px solid var(--border-subtle);
}