/* LOOPLY — design tokens */
:root {
  --teal-900: #2f4f56;
  --teal-700: #466B73;
  --teal-300: #B4CCD1;
  --warm-300: #BFBAB8;
  --bg-50: #F2F2F2;
  --bg-25: #F8F7F5;
  --ink-900: #1f2226;
  --ink-700: #565A63;
  --ink-500: #7a7e86;
  --ink-300: #c9cdd2;
  --white: #ffffff;
  --serif: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Mobile artboard reset */
.lp-app {
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--white);
  width: 390px;
  height: 844px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
.lp-app::-webkit-scrollbar { display: none; }
.lp-app * { box-sizing: border-box; }

/* Status bar */
.lp-statusbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.lp-statusbar-icons { display: flex; gap: 5px; align-items: center; }

/* Common atoms */
.lp-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-500);
}
.lp-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  width: 100%;
}
.lp-imgph {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(70,107,115,0.06) 0 8px,
      rgba(70,107,115,0.12) 8px 16px
    ),
    var(--bg-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  text-align: center;
  padding: 12px;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }