:root {
  --larrly-blue: #1d6feb;
  --larrly-blue-dark: #0b3ea8;
  --larrly-navy: #102347;
  --larrly-muted: #6b7a90;
  --larrly-bg: #eef4fb;
  --larrly-card: #ffffff;
  --larrly-line: #d9e3f0;
  --larrly-danger: #e23d3d;
  --larrly-ok: #22a45a;
  --larrly-warn: #f0a202;
  --larrly-radius: 1.25rem;
  --larrly-radius-sm: 0.9rem;
  --larrly-shadow: 0 10px 30px rgba(16, 35, 71, 0.08);
}

html, body { min-height: 100%; }
body.larrly {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--larrly-navy);
  background: var(--larrly-bg);
}

.larrly-shell { max-width: 430px; margin: 0 auto; min-height: 100vh; background: #fff; position: relative; }
.larrly-shell--wide { max-width: 960px; }

.larrly-logo { font-weight: 800; color: var(--larrly-navy); letter-spacing: -0.03em; text-decoration: none; }
.larrly-logo span { color: var(--larrly-blue); }

.btn-larrly {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; border: 0; border-radius: 999px; padding: .9rem 1.1rem;
  font-weight: 700; background: var(--larrly-blue); color: #fff;
}
.btn-larrly:hover, .btn-larrly:focus { background: var(--larrly-blue-dark); color: #fff; }
.btn-larrly-outline {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; border: 1.5px solid var(--larrly-blue); border-radius: 999px;
  padding: .85rem 1.1rem; font-weight: 700; background: #fff; color: var(--larrly-blue);
}
.btn-larrly-danger {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; border: 1.5px solid var(--larrly-danger); border-radius: 999px;
  padding: .85rem 1.1rem; font-weight: 700; background: #fff; color: var(--larrly-danger);
}

.larrly-input {
  border: 1px solid var(--larrly-line); border-radius: 0.9rem; padding: .75rem .9rem .75rem 2.6rem;
  width: 100%; background: #fff;
}
.larrly-field { position: relative; }
.larrly-field .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--larrly-blue); }

.card-larrly { background: var(--larrly-card); border: 0; border-radius: var(--larrly-radius); box-shadow: var(--larrly-shadow); }
.plan-card { border: 1px solid var(--larrly-line); border-radius: var(--larrly-radius); padding: 1rem; background: #fff; cursor: pointer; }
.plan-card.is-selected { border: 2px solid var(--larrly-blue); }
.badge-pick { background: var(--larrly-blue); color: #fff; border-radius: 999px; font-size: .75rem; padding: .15rem .6rem; }

.bottom-nav {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--larrly-line);
  display: grid; grid-template-columns: repeat(4, 1fr); padding: .45rem .2rem calc(.45rem + env(safe-area-inset-bottom));
}
.bottom-nav a { text-align: center; color: var(--larrly-muted); text-decoration: none; font-size: .72rem; }
.bottom-nav a.active, .bottom-nav a:hover { color: var(--larrly-blue); }
.fab-add {
  position: fixed; right: calc(50% - 185px); bottom: 4.5rem; width: 56px; height: 56px;
  border-radius: 50%; background: var(--larrly-blue); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(29,111,235,.35); text-decoration: none; z-index: 20;
}
@media (max-width: 430px) { .fab-add { right: 1.1rem; } }

.dots { display: flex; gap: .4rem; justify-content: center; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #c9d7ea; display: block; }
.dots i.on { background: var(--larrly-blue); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--larrly-ok); display: inline-block; }
.hero-photo { width: 100%; max-height: 280px; object-fit: cover; border-radius: 0 0 1.5rem 1.5rem; }
.pill { border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; display: inline-flex; gap: .35rem; align-items: center; }
.pill-rose { background: #fde8ea; color: #c2414b; }
.info-tile { background: #eef5ff; border-radius: .9rem; padding: .7rem .5rem; text-align: center; font-size: .8rem; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: .5rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}