:root {
  --fixla-paper: #f5f1e8;
  --fixla-navy: #1b2a4a;
  --fixla-blue: #1e5799;
  --fixla-gold: #f6c744;
}

.fixla-body {
  margin: 0;
  overflow: hidden;
  background: var(--fixla-paper);
  color: var(--fixla-navy);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.fixla-app {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fixla-paper);
}

.bg-fixla-blue { background-color: var(--fixla-blue) !important; }
.bg-fixla-paper { background-color: var(--fixla-paper) !important; }
.text-fixla-blue { color: var(--fixla-blue) !important; }

.fixla-brand {
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0;
}

.fixla-campaign-link {
  color: rgba(255, 255, 255, .72);
  font-size: .66rem;
  font-weight: 700;
  text-decoration: none;
}

.fixla-search {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .66);
}

.fixla-search:hover,
.fixla-search:focus {
  background: rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .76);
}

.fixla-scrollbar-none {
  scrollbar-width: none;
}

.fixla-scrollbar-none::-webkit-scrollbar {
  display: none;
}

.fixla-chip {
  --chip-color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: .4rem .9rem;
  background: #fff;
  color: #4b5563;
  font-size: .76rem;
  font-weight: 800;
}

.fixla-chip.active {
  background: var(--fixla-blue);
  color: #fff;
}

.fixla-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--chip-color);
}

.fixla-main {
  position: relative;
  flex: 1;
  min-height: 0;
}

.fixla-view {
  display: none;
  position: absolute;
  inset: 0;
  overflow: auto;
}

.fixla-view.is-active {
  display: block;
}

.fixla-map-shell {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.fixla-google-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(.86) brightness(1.08) opacity(.72);
}

.fixla-pin {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pin-color);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  text-decoration: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 8px rgba(27, 42, 74, .28);
}

.fixla-pin-main {
  width: 36px;
  height: 36px;
  background: var(--fixla-navy);
  border: 2px solid rgba(255, 255, 255, .78);
}

.fixla-report-btn {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  min-width: max-content;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.55rem;
  background: var(--fixla-gold);
  color: var(--fixla-navy);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(27, 42, 74, .22);
}

.fixla-bottom-nav {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, .95) !important;
}

.fixla-nav-inner {
  max-width: 430px;
}

.fixla-nav-link {
  display: flex;
  min-width: 84px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #9ca3af;
  font-size: .73rem;
  font-weight: 700;
  text-decoration: none;
}

.fixla-nav-link i {
  font-size: 1.28rem;
}

.fixla-nav-link.active {
  color: var(--fixla-blue);
  font-weight: 900;
}

.fixla-powered {
  color: #9ca3af;
  font-size: .62rem;
  text-decoration: none;
}

.fixla-reports-view,
.fixla-profile-view,
.fixla-detail-view,
.fixla-wizard-view,
.fixla-success-view {
  padding-bottom: 88px;
  background: var(--fixla-paper);
}

.fixla-page-title {
  color: var(--fixla-navy);
  font-size: 1.15rem;
  font-weight: 900;
}

.fixla-stat {
  min-height: 94px;
  border: 0;
  border-radius: 12px;
}

.fixla-stat-value {
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 900;
}

.fixla-stat-label {
  color: #6b7280;
  font-size: .65rem;
  font-weight: 800;
}

.fixla-section-title {
  color: #6b7280;
  font-size: .9rem;
  font-weight: 900;
}

.fixla-report-card {
  min-height: 100px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--fixla-navy);
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(27, 42, 74, .06);
}

.fixla-report-card:hover {
  color: var(--fixla-navy);
  box-shadow: 0 10px 24px rgba(27, 42, 74, .1);
}

.fixla-cat-box {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: var(--cat-bg);
}

.fixla-card-title {
  font-size: .9rem;
  font-weight: 900;
}

.fixla-card-desc {
  display: -webkit-box;
  margin: .25rem 0 .45rem;
  overflow: hidden;
  color: #475569;
  font-size: .76rem;
  line-height: 1.35;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.fixla-meta {
  color: #94a3b8;
  font-size: .68rem;
}

.fixla-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .32rem .7rem;
  background: var(--status-bg);
  color: var(--status-color);
  font-size: .7rem;
  font-weight: 900;
}

.fixla-avatar,
.fixla-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 1.8rem;
}

.fixla-success-icon {
  background: #dcfce7;
  color: #16a34a;
}

.fixla-detail-hero {
  height: 144px;
  border-radius: 16px;
  background: var(--cat-bg);
  color: var(--cat-color);
}

.fixla-detail-hero span {
  max-width: 90%;
  opacity: .28;
  font-size: clamp(1.4rem, 7vw, 2.2rem);
  font-weight: 900;
}

.fixla-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  color: var(--fixla-navy);
}

.fixla-progress {
  height: 4px;
  background: #e5e7eb;
}

.btn-fixla-navy {
  border: 0;
  background: var(--fixla-navy);
  color: #fff;
}

.btn-fixla-navy:hover,
.btn-fixla-navy:focus {
  background: #111d35;
  color: #fff;
}

.fixla-category-option {
  min-height: 104px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  color: var(--fixla-navy);
}

.fixla-category-option.active {
  background: #fff;
  box-shadow: 0 0 0 2px var(--fixla-blue), 0 4px 14px rgba(27, 42, 74, .08);
}

.fixla-category-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--cat-bg);
  color: var(--cat-color);
}

.fixla-mini-map {
  position: relative;
  height: 256px;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.65) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg, rgba(255,255,255,.65) 1px, transparent 1px) 0 0 / 64px 64px,
    #d7dfd8;
}

.fixla-mini-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  width: 34px;
  height: 34px;
  border: 4px solid #fff;
  border-radius: 999px 999px 999px 3px;
  background: var(--fixla-blue);
  transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 8px 18px rgba(27, 42, 74, .24);
}

.fixla-photo-drop {
  min-height: 144px;
  border: 2px dashed #d1d5db;
  border-radius: 16px;
  background: transparent;
  color: #9ca3af;
}

.fixla-review-card,
.fixla-location-card {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(27, 42, 74, .06);
}

@media (max-width: 899.98px) {
  .fixla-body {
    background: #e9edf2;
  }

  .fixla-app {
    max-width: 430px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(27,42,74,.08), 0 24px 60px rgba(27,42,74,.18);
  }

  .fixla-bottom-nav {
    left: 50%;
    width: min(430px, 100%);
    transform: translateX(-50%);
  }
}