/* Shared custom styles for iPhone-like frame & minimal tweaks */
:root {
  --primary: #16a34a; /* emerald-600 */
  --primary-500: #22c55e;
  --primary-700: #15803d;
  --bg: #f6f9f6;
  --text: #0f172a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
}

a { text-decoration: none; }

/* iPhone 15-like frame for index preview */
.phone {
  position: relative;
  width: 420px;
  aspect-ratio: 1179 / 2556; /* iPhone 15 ratio */
  border: 10px solid #e2e8f0;
  border-radius: 44px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: hidden;
  background: #fff;
}

.phone .notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 34px;
  background: #0f172a;
  border-radius: 18px;
  z-index: 2;
}

.phone iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  inset: 0;
}

/* Utility: sticky bottom action-bar shadow (for pages) */
.sticky-bottom-gradient {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  background: linear-gradient(180deg, rgba(246,249,246,0) 0%, rgba(246,249,246,1) 50%);
  pointer-events: none;
  z-index: 20;
}

/* Rating stars baseline alignment */
.star { display: inline-block; transform: translateY(1px); }