:root {
  --bg: #e2e5e9;
  --bg-warm: #f6e7a8;
  --paper: rgba(234, 237, 241, 0.92);
  --paper-strong: #ffffff;
  --panel: rgba(240, 243, 246, 0.86);
  --line: rgba(0, 0, 0, 0.14);
  --line-strong: rgba(0, 0, 0, 0.24);
  --text: #111111;
  --muted: #333333;
  --primary: #111111;
  --primary-strong: #000000;
  --primary-soft: rgba(255, 245, 194, 0.56);
  --sand: #fff5c2;
  --success: #4e7a58;
  --warning: #9d7a00;
  --danger: #b85c4b;
  --info: #5f6f7c;
  --accent: #fff5c2;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  font-family: "Aptos", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", sans-serif;
  color: var(--text);
}

/* FINAL MOBILE OVERRIDE: keep main bottom nav dark and active button highly visible */
@media (max-width: 760px) {
  .mobile-flow-nav,
  .mobile-flow-progress {
    background: #0c2340 !important;
    background-color: #0c2340 !important;
    background-image: none !important;
    border-color: #0c2340 !important;
  }

  .mobile-flow-nav .mobile-flow-step,
  .mobile-flow-progress .mobile-flow-step,
  .mobile-page .mobile-flow-nav button,
  .mobile-page .mobile-flow-progress button {
    background: #0c2340 !important;
    background-color: #0c2340 !important;
    background-image: none !important;
    color: #e7edf5 !important;
    border: 1px solid #1f3b5a !important;
    box-shadow: none !important;
  }

  .mobile-flow-nav .mobile-flow-step.active,
  .mobile-flow-progress .mobile-flow-step.active,
  .mobile-page .mobile-flow-nav button.active,
  .mobile-page .mobile-flow-progress button.active {
    background: #fff5c2 !important;
    background-color: #fff5c2 !important;
    background-image: none !important;
    color: #0b1f3a !important;
    border: 2px solid #fff2b8 !important;
    box-shadow: 0 0 0 2px rgba(255, 216, 77, 0.95), 0 0 18px rgba(255, 216, 77, 0.75) !important;
    transform: translateY(-1px) !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 760px) {
  .mobile-flow-nav,
  .mobile-flow-progress {
    background: #0c2340 !important;
    background-color: #0c2340 !important;
    background-image: none !important;
    border-color: #0c2340 !important;
  }

  .mobile-flow-nav .mobile-flow-step,
  .mobile-flow-progress .mobile-flow-step,
  .mobile-page .mobile-flow-nav button {
    background: #0c2340 !important;
    background-color: #0c2340 !important;
    background-image: none !important;
    color: #e7edf5 !important;
    border-color: #1f3b5a !important;
    box-shadow: none !important;
  }

  .mobile-flow-nav .mobile-flow-step.active,
  .mobile-flow-progress .mobile-flow-step.active,
  .mobile-page .mobile-flow-nav button.active {
    background: #fff5c2 !important;
    background-color: #fff5c2 !important;
    background-image: none !important;
    color: #0b1f3a !important;
    border: 2px solid #ffe89a !important;
    box-shadow: 0 0 0 2px rgba(255, 216, 77, 0.95), 0 0 18px rgba(255, 216, 77, 0.75) !important;
    transform: translateY(-1px) !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 760px) {
  .mobile-flow-progress {
    background: #0c2340 !important;
    border: 1px solid #0c2340 !important;
    border-radius: 8px !important;
    padding: 2px !important;
  }

  .mobile-flow-progress .mobile-flow-step {
    background: #0c2340 !important;
    background-color: #0c2340 !important;
    box-shadow: none !important;
    border-color: #1a3557 !important;
    color: #e7edf5 !important;
  }

  .mobile-flow-progress .mobile-flow-step.active {
    background: #0c2340 !important;
    background-color: #0c2340 !important;
    box-shadow: none !important;
    border-color: #2b4a70 !important;
    color: #e7edf5 !important;
  }

  .mobile-flow-nav {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 37px) !important;
    top: auto !important;
    z-index: 2140 !important;
    margin: 0 !important;
    padding: 2px !important;
  }

  .mobile-flow-progress {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .mobile-flow-actions {
    display: none !important;
  }

  .app-shell {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 170px) !important;
  }

  .mobile-page-shell .tabrow {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3px) !important;
    z-index: 2141 !important;
    margin: 0 !important;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 160px) !important;
  }

  .mobile-flow-nav {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 1200;
    margin: 0;
    padding: 8px;
    border: 1px solid #0c2340 !important;
    border-radius: 12px;
    background: #0c2340;
    box-shadow: none !important;
  }

  .mobile-flow-actions {
    display: none !important;
  }

  .mobile-flow-progress {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .mobile-page-shell .tabrow {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
    z-index: 1199;
    margin: 0;
    padding: 6px;
    border: 1px solid rgba(12, 32, 63, 0.28);
    border-radius: 10px;
    background: #0c2340;
    box-shadow: 0 6px 16px rgba(6, 18, 36, 0.2);
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"] .hero {
    overflow: hidden !important;
    border: 1px solid rgba(255, 204, 0, 0.12) !important;
    background:
      radial-gradient(circle at top right, rgba(255, 204, 0, 0.08), transparent 28%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 243, 247, 0.9)) !important;
    box-shadow: 0 14px 28px rgba(15, 42, 74, 0.1) !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .eyebrow {
    background: linear-gradient(135deg, rgba(255, 245, 194, 0.92), rgba(255, 250, 232, 0.98)) !important;
    border-color: rgba(255, 204, 0, 0.28) !important;
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.08) !important;
    color: #8a6a00 !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-copy h1 {
    color: #10233b !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-copy p {
    color: #2f4158 !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-tag {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 253, 0.96)) !important;
    border-color: rgba(255, 204, 0, 0.22) !important;
    box-shadow: 0 4px 10px rgba(15, 42, 74, 0.05) !important;
    color: #475d78 !important;
  }

  .mobile-page[data-mobile-page="0"] .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: -18% -30% !important;
    pointer-events: none !important;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%) !important;
    opacity: 0.22 !important;
    transform: translateX(-38%) !important;
    animation: heroShimmer 5.8s ease-in-out infinite !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-blueprint {
    border-color: rgba(255, 204, 0, 0.14) !important;
    background:
      radial-gradient(circle at top left, rgba(255, 204, 0, 0.06), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 246, 249, 0.93)) !important;
    box-shadow: 0 10px 22px rgba(15, 42, 74, 0.08) !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-copy > *,
  .mobile-page[data-mobile-page="0"] .hero .hero-side > *,
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card,
  .mobile-page[data-mobile-page="0"] .home-meta-card {
    opacity: 0 !important;
    transform: translateY(16px) !important;
    animation: heroReveal 0.78s ease-out forwards !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .eyebrow {
    animation-delay: 0.08s !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-copy h1 {
    animation-delay: 0.16s !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-copy p {
    animation-delay: 0.26s !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-tags {
    animation-delay: 0.36s !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-blueprint {
    animation-delay: 0.24s !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-metrics {
    animation-delay: 0.42s !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card:nth-child(1) {
    animation-delay: 0.5s !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card:nth-child(2) {
    animation-delay: 0.62s !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card:nth-child(3) {
    animation-delay: 0.74s !important;
  }

  .mobile-page[data-mobile-page="0"] .home-meta-card {
    animation-delay: 0.86s !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 14px 30px rgba(15, 42, 74, 0.12) !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card,
  .mobile-page[data-mobile-page="0"] .home-meta-card {
    border-color: rgba(255, 204, 0, 0.12) !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 246, 249, 0.93)) !important;
    box-shadow: 0 10px 20px rgba(15, 42, 74, 0.08) !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card strong {
    color: #0f2a4a !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-label,
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-note {
    color: #31465f !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card::after,
  .mobile-page[data-mobile-page="0"] .home-meta-card::after {
    content: "" !important;
    position: absolute !important;
    inset: auto -20% -55% auto !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.08), rgba(255, 204, 0, 0)) !important;
    pointer-events: none !important;
    opacity: 0.45 !important;
  }

  .mobile-page[data-mobile-page="0"] .home-meta-card {
    border-color: rgba(255, 204, 0, 0.12) !important;
    background:
      radial-gradient(circle at top right, rgba(255, 204, 0, 0.05), transparent 30%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 246, 249, 0.94)) !important;
  }

  .mobile-page[data-mobile-page="0"] .home-meta-card .meta-actions .pill,
  .mobile-page[data-mobile-page="0"] .home-meta-card .meta-actions .ghost-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 253, 0.96)) !important;
    border-color: rgba(255, 204, 0, 0.18) !important;
    color: #29415a !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar .sketch-tool-field--color {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar .sketch-tool-field--size {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar .sketch-tool-field--sensitivity {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar #sketch-save {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar #sketch-clear {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar #sketch-eraser {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar #sketch-undo {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar #sketch-mode-toggle {
    grid-column: 4 !important;
    grid-row: 2 !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 245, 194, 0.82), transparent 24%),
    radial-gradient(circle at right center, rgba(255, 255, 255, 0.68), transparent 26%),
    linear-gradient(145deg, #e4e8ec 0%, #dde2e7 46%, #fff5c2 100%);
}

.blueprint-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.08));
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.app-shell {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-attribution {
  margin-top: 8px;
  padding: 10px 12px 6px;
  text-align: left;
  color: #b00020;
  background: #0f2f57;
  font-size: 12px;
}

@media (max-width: 760px) {
  .app-attribution {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 4px 8px;
    text-align: left;
    background: #0f2f57;
    border-top: 1px solid var(--line);
    z-index: 80;
  }

  .app-shell {
    padding-bottom: 26px !important;
  }
}

.mobile-flow-nav {
  display: none;
}

.mobile-page {
  display: contents;
}

.flash {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  font-weight: 700;
}

.flash-success {
  background: var(--sand);
  color: #111111;
}

.flash-error {
  background: #cfd5dc;
  color: #111111;
}

.hero,
.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.hero::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 28%),
    linear-gradient(180deg, rgba(92, 83, 72, 0.03), transparent 30%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: -20% -35%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  opacity: 0.55;
  transform: translateX(-38%);
  animation: heroShimmer 5.8s ease-in-out infinite;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(420px, 0.95fr);
  gap: 22px;
  padding: 34px;
  border-radius: 36px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(243, 244, 246, 0.84)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent);
}

.mobile-page[data-mobile-page="0"] .hero .hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
  animation: heroReveal 0.72s ease-out forwards;
}

.mobile-page[data-mobile-page="0"] .hero .hero-side > * {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  animation: heroReveal 0.8s ease-out forwards;
}

.mobile-page[data-mobile-page="0"] .hero .eyebrow {
  animation-delay: 0.08s;
}

.mobile-page[data-mobile-page="0"] .hero .hero-copy h1 {
  animation-delay: 0.16s;
}

.mobile-page[data-mobile-page="0"] .hero .hero-copy p {
  animation-delay: 0.26s;
}

.mobile-page[data-mobile-page="0"] .hero .hero-tags {
  animation-delay: 0.36s;
}

.mobile-page[data-mobile-page="0"] .hero .hero-blueprint {
  animation-delay: 0.24s;
}

.mobile-page[data-mobile-page="0"] .hero .hero-metrics {
  animation-delay: 0.4s;
}

.mobile-page[data-mobile-page="0"] .home-meta-card {
  opacity: 0;
  transform: translateY(18px);
  animation: heroReveal 0.82s ease-out 0.52s forwards;
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroShimmer {
  0%,
  100% {
    transform: translateX(-38%);
    opacity: 0.2;
  }
  50% {
    transform: translateX(24%);
    opacity: 0.55;
  }
}

.hero-help-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: auto;
  z-index: 2;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-search-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-top: 0;
}

.filter-search-help-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 32px;
}

@media (max-width: 760px) {
  .hero-help-btn {
    background: #0f2a4a !important;
    color: #ffcc00 !important;
    border-color: #0f2a4a !important;
  }

  .filter-search-help-row .section-help-btn.hero-help-btn {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"] .hero .hero-help-btn {
    background: #0f2a4a !important;
    background-image: none !important;
    color: #ffcc00 !important;
    -webkit-text-fill-color: #ffcc00 !important;
    border-color: #0f2a4a !important;
  }

}

.hero-copy,
.hero-side,
.section-heading,
.explorer-head,
.detail-topbar,
.detail-footer,
.photo-group-head,
.modal-head {
  position: relative;
  z-index: 1;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding-right: 10px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-copy h1,
.section-heading h2,
.detail-card h2,
.photo-group h3,
.report-panel h3,
.info-panel h3,
.explorer-head h3 {
  margin: 0;
}

.hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(2.6rem, 4vw, 4.7rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-weight: 650;
}

.hero-copy p,
.section-heading p,
.explorer-head p,
.photo-group p,
.muted,
.note,
.empty-state p,
.empty-inline p,
.report-list,
.info-panel p {
  color: var(--muted);
}

.hero-copy p {
  max-width: 60ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.76;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.hero-tag {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid rgba(255, 245, 194, 1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.hero-side {
  display: grid;
  grid-template-rows: minmax(220px, 1fr) auto;
  gap: 14px;
}

.hero-blueprint,
.metric-card,
.stat-card,
.info-panel,
.report-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 245, 247, 0.84));
}

.hero-blueprint {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bp-header strong {
  color: var(--primary);
  font-size: 13px;
}

.bp-drawing {
  position: relative;
  flex: 1;
  min-height: 180px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background:
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(246, 246, 246, 0.88));
  background-size: 28px 28px, 28px 28px, auto;
}

.bp-line,
.bp-room,
.bp-circle {
  position: absolute;
  border-color: rgba(0, 0, 0, 0.35);
}

.bp-line {
  display: block;
  height: 1px;
  background: rgba(0, 0, 0, 0.35);
}

.bp-line-a {
  top: 36px;
  left: 42px;
  width: 210px;
}

.bp-line-b {
  top: 104px;
  left: 90px;
  width: 170px;
}

.bp-line-c {
  top: 36px;
  left: 214px;
  width: 1px;
  height: 114px;
}

.bp-room {
  border: 1px solid rgba(0, 0, 0, 0.38);
}

.bp-room-a {
  inset: 28px 154px 88px 34px;
}

.bp-room-b {
  inset: 28px 34px 126px 248px;
}

.bp-room-c {
  inset: 112px 34px 28px 92px;
}

.bp-circle {
  right: 66px;
  bottom: 40px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 245, 194, 1);
  border-radius: 999px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.metric-card {
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 42, 74, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.metric-card::after,
.home-meta-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -55% auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.18), rgba(255, 204, 0, 0));
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0.75;
}

.metric-card:hover,
.home-meta-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(15, 42, 74, 0.12);
}

.metric-card:hover::after,
.home-meta-card:hover::after {
  transform: scale(1.12);
  opacity: 1;
}

.metric-card strong {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 650;
}

.metric-label,
.metric-note,
.stat-card span,
.stat-card small {
  display: block;
}

.metric-label,
.stat-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.metric-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.card {
  border-radius: var(--radius-xl);
  padding: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(243, 244, 246, 0.8));
}

.meta-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 244, 246, 0.86)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent);
}

.project-manager-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 244, 246, 0.88)),
    linear-gradient(90deg, rgba(255, 245, 194, 0.35), transparent 30%);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}


.heading-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.meta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.project-manager-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.filter-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.meta-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.report-head-actions {
  display: block;
}

.active-address-inline {
  margin: 2px 0 0;
  width: 100%;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.catalog-results-card.catalog-results-card-hidden {
  display: none !important;
}

.home-meta-card .meta-actions .pill,
.home-meta-card .meta-actions .ghost-btn,
.home-meta-card .meta-note {
  font-size: 10px;
}

.home-meta-card .meta-actions .pill,
.home-meta-card .meta-actions .ghost-btn {
  padding: 5px 9px;
}

.home-meta-card {
  position: relative;
  box-shadow: 0 12px 28px rgba(15, 42, 74, 0.08);
}

.home-meta-card .meta-actions .pill,
.home-meta-card .meta-actions .ghost-btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.home-meta-card .meta-actions .pill:hover,
.home-meta-card .meta-actions .ghost-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(15, 42, 74, 0.12);
}

.mobile-page[data-mobile-page="0"] .hero-metrics .metric-card:nth-child(1) {
  animation: heroReveal 0.82s ease-out 0.48s forwards;
}

.mobile-page[data-mobile-page="0"] .hero-metrics .metric-card:nth-child(2) {
  animation: heroReveal 0.82s ease-out 0.58s forwards;
}

.mobile-page[data-mobile-page="0"] .hero-metrics .metric-card:nth-child(3) {
  animation: heroReveal 0.82s ease-out 0.68s forwards;
}

.mobile-page[data-mobile-page="0"] .hero-metrics .metric-card {
  opacity: 0;
  transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .mobile-page[data-mobile-page="0"] .hero .hero-copy > *,
  .mobile-page[data-mobile-page="0"] .hero .hero-side > *,
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card,
  .mobile-page[data-mobile-page="0"] .home-meta-card,
  #reset-filters.reset-filter-prompt {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.section-heading p,
.explorer-head p,
.report-list,
.note {
  margin: 6px 0 0;
}

.heading-inline p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

button.pill {
  cursor: pointer;
  font: inherit;
}

.pill,
.badge.neutral {
  background: #cfd5dc;
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.14);
}

.badge.success {
  background: var(--sand);
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.badge.warning {
  background: #cfd5dc;
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.14);
}

.badge.danger {
  background: var(--sand);
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.badge.info {
  background: #c7ced6;
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.14);
}

.badge.accent {
  background: var(--sand);
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.form-grid,
.filter-grid,
.dashboard-grid,
.info-grid {
  display: grid;
  gap: 14px;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, rgba(244, 246, 248, 0.96), rgba(219, 224, 230, 0.95));
}

.project-card.active {
  border-color: rgba(255, 245, 194, 1);
  background: var(--primary-soft);
}

.project-card-head,
.project-card-meta,
.project-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}

.project-card-head {
  justify-content: space-between;
}

.project-card-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.project-card-address {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

.project-card strong,
.project-card p,
.project-card small {
  margin: 0;
}

.project-card p,
.project-card small {
  color: var(--muted);
  line-height: 1.2;
}

.project-status {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #cfd5dc;
  color: #111111;
  font-size: 0.76rem;
  font-weight: 800;
}

.project-card .project-status {
  font-size: 12px !important;
  line-height: 1.2 !important;
  padding: 4px 10px !important;
}

.project-status.u_pripremi {
  background: #cfd5dc;
}

.project-status.dogovoreno {
  background: #fff5c2;
}

.project-status.u_tijeku {
  background: #efe3a6;
}

.project-status.zavrseno {
  background: #d8dde3;
}

.project-card-actions .open-project-active {
  background: #fff5c2 !important;
  border-color: #9d7a00 !important;
  color: #3b2f00 !important;
  font-weight: 800;
  animation: project-status-blink 1.6s ease-in-out infinite;
}

.project-card-actions .delete-confirm-pending {
  background: #fff5c2 !important;
  border-color: #9d7a00 !important;
  color: #3b2f00 !important;
  font-weight: 800 !important;
  animation: delete-confirm-button-blink 1.1s ease-in-out infinite;
}

.mobile-delete-notice {
  margin: 0;
  animation: mobile-delete-notice-blink 1.1s ease-in-out infinite;
}

@keyframes mobile-delete-notice-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes delete-confirm-button-blink {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(157, 122, 0, 0);
  }
  50% {
    opacity: 0.35;
    filter: brightness(0.72);
    box-shadow: 0 0 0 3px rgba(157, 122, 0, 0.48);
  }
}

@keyframes project-status-blink {
  0%,
  100% {
    color: #3b2f00;
    box-shadow: 0 0 0 0 rgba(157, 122, 0, 0);
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    color: rgba(59, 47, 0, 0.3);
    box-shadow: 0 0 0 2px rgba(157, 122, 0, 0.28);
    filter: brightness(0.92);
    transform: scale(1);
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="1"] .project-card-actions .open-project-active,
  .mobile-page[data-mobile-page="2"] .project-card-actions .open-project-active {
    color: #3b2f00 !important;
    animation: project-status-blink 1.6s ease-in-out infinite !important;
    transform-origin: center;
  }

  .mobile-page .project-card .project-status {
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 3px 9px !important;
  }

  .mobile-page[data-mobile-page="1"] .project-list {
    gap: 6px !important;
  }

  .mobile-page[data-mobile-page="1"] .project-card {
    gap: 4px !important;
    padding: 8px !important;
  }

  .mobile-page[data-mobile-page="1"] .project-card-head,
  .mobile-page[data-mobile-page="1"] .project-card-meta,
  .mobile-page[data-mobile-page="1"] .project-card-actions {
    gap: 3px 5px !important;
  }

  .mobile-page[data-mobile-page="1"] .project-card p,
  .mobile-page[data-mobile-page="1"] .project-card small {
    margin-top: 0 !important;
    line-height: 1.15 !important;
  }

  .mobile-delete-notice {
    margin: 0 0 6px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}

.form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.filter-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 14px;
}

.filter-search-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.filter-search-toolbar {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
}

.filter-search-title {
  display: block;
  grid-column: 2;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
}

#tab-pregled > section.mobile-page.mobile-page-nested.mobile-page-active > section > div.section-heading > div > h2,
#tab-pregled > section.mobile-page.mobile-page-nested.mobile-page-active > section > div.section-heading > div > p:nth-child(2) {
  display: none !important;
}

#tab-pregled > section.mobile-page.mobile-page-nested.mobile-page-active > section > div.section-heading {
  margin: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

#tab-pregled > section.mobile-page.mobile-page-nested.mobile-page-active > section > div.section-heading > div.heading-inline {
  gap: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

#tab-pregled > section.mobile-page.mobile-page-nested.mobile-page-active > section > div.section-heading > div.heading-inline > p.active-address-inline {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.filter-search-actions {
  display: grid;
  grid-column: 3;
  grid-template-columns: 46px;
  gap: 0;
  align-items: stretch;
  justify-content: end;
}

.filter-search-action {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 12px;
}

.filter-search-secondary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}

#reset-filters.filter-search-icon-action {
  grid-column: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  justify-self: start !important;
  align-self: stretch !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-align: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

#reset-filters.reset-filter-prompt {
  animation: reset-filter-prompt-blink 1s ease-in-out infinite !important;
}

@keyframes reset-filter-prompt-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.96);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.4);
  }
}

#filter-query {
  min-height: 80px;
  font-size: 0.92rem;
  line-height: 1.2;
}

.filter-optional-fields {
  display: contents;
}

.mobile-filter-toggle {
  display: none;
}

.mobile-filter-select {
  display: none;
}

.mobile-date-picker-trigger,
.mobile-date-picker-root {
  display: none;
}

.mobile-section-toggle {
  display: none;
}

.mobile-collapsible-content {
  display: block;
}

.stats-shell {
  padding-bottom: 20px;
}

.mobile-entry-toggle {
  display: none;
}

.dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0;
}

label,
.stacked {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.search-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-voice-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 8px;
  align-items: center;
}

.field-voice-status {
  grid-column: 1 / -1;
  margin-top: -4px;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 700;
  color: #d90429;
}

.field-voice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 46px;
  padding: 0;
  font-size: 0 !important;
  line-height: 1;
  position: relative;
}

.field-voice-btn::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5f6f7c;
  box-shadow: 0 0 0 2px rgba(95, 111, 124, 0.22);
  position: relative;
  z-index: 2;
}

.field-voice-btn.is-listening {
  background: rgba(255, 31, 68, 0.2) !important;
  border-color: #ff1f44 !important;
  animation: voice-record-button-pulse 0.75s ease-in-out infinite !important;
}

.field-voice-btn.is-listening::after {
  content: "Snimam...";
  position: absolute;
  top: -12px;
  right: -6px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #ff1f44;
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  z-index: 3;
}

.field-voice-btn.is-listening::before {
  background: #ff1f44 !important;
  box-shadow:
    0 0 0 2px rgba(255, 31, 68, 0.32),
    0 0 0 0 rgba(255, 31, 68, 0.48) !important;
  animation: voice-record-blink 0.75s ease-in-out infinite !important;
}

.field-voice-btn:disabled {
  opacity: 1;
}

@keyframes voice-record-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(255, 31, 68, 0.32),
      0 0 0 0 rgba(255, 31, 68, 0.42);
  }
  50% {
    opacity: 0.15;
    transform: scale(0.72);
    box-shadow:
      0 0 0 2px rgba(255, 31, 68, 0.32),
      0 0 0 8px rgba(255, 31, 68, 0);
  }
}

@keyframes voice-record-button-pulse {
  0%,
  100% {
    background: rgba(255, 31, 68, 0.2);
  }
  50% {
    background: rgba(255, 31, 68, 0.05);
  }
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.9);
  padding: 13px 14px;
  color: var(--text);
  font-weight: 400;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

select,
option {
  font-weight: 400;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(255, 245, 194, 1);
  box-shadow: 0 0 0 4px rgba(255, 245, 194, 0.7);
  background: rgba(255, 255, 255, 0.98);
}

textarea {
  min-height: 160px;
  resize: vertical;
}

.project-summary-view {
  width: 100%;
  margin-top: 10px;
  font-size: 10px !important;
  line-height: 1.35;
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  padding: 10px;
  max-height: 72vh;
  overflow-y: auto;
}

.project-summary-block + .project-summary-block {
  margin-top: 10px;
}

.project-summary-block h3 {
  margin: 0 0 6px;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
}

.project-summary-block p {
  margin: 0 0 3px;
}

.project-summary-label {
  font-weight: 700;
}

.project-summary-group + .project-summary-group {
  margin-top: 7px;
}

.project-summary-group-title {
  margin: 0 0 4px;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
}

.project-summary-entry {
  margin: 0 0 6px;
}

.project-summary-entry-title {
  font-weight: 700;
}

.project-summary-note {
  opacity: 0.85;
}

.project-summary-textarea {
  width: 100%;
  min-height: 360px;
  margin-top: 10px;
  font-size: 10px !important;
  line-height: 1.35;
  white-space: pre-wrap;
}

.primary-btn,
.ghost-btn,
.upload-btn,
.item-row,
.group-card,
.tabrow button {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.primary-btn {
  background: var(--sand);
  color: #111111;
  border-color: rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
}

.ghost-btn,
.upload-btn {
  background: rgba(221, 226, 232, 0.92);
  color: var(--primary);
  border-color: rgba(0, 0, 0, 0.08);
  padding: 12px 16px;
}

.primary-btn:hover,
.ghost-btn:hover,
.upload-btn:hover,
.item-row:hover,
.group-card:hover,
.tabrow button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(120, 103, 79, 0.08);
}

.stat-card {
  padding: 18px;
}

.stat-card-head,
.stat-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stat-card-head {
  align-items: flex-start;
}

.stat-card strong {
  display: block;
  margin: 8px 0 10px;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 650;
}

.stat-card-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: right;
}

.stat-card > small:not(.stat-card-note) {
  display: none;
}

.stat-list-toggle {
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 0;
}

.stat-list {
  display: none;
  margin-top: 10px;
  gap: 8px;
}

.stat-list.open {
  display: grid;
}

.stat-list-item {
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(244, 246, 248, 0.96);
}

.stat-list-item strong,
.stat-list-item span {
  display: block;
}

.item-row.is-main-item strong,
.stat-list-item.is-main-item strong {
  font-weight: 700;
}

.stat-list-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.item-row p,
.stat-list-item span {
  line-height: 1.25;
}

.progress {
  height: 10px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.bar {
  height: 100%;
  width: 0;
  background: #111111;
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tabrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tabrow button {
  padding: 14px 16px;
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(219, 224, 230, 0.94);
  color: var(--primary);
  font-weight: 800;
}

.tabrow button.active {
  background: var(--sand);
  color: #111111;
  border-color: rgba(255, 245, 194, 1);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.filter-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 244, 246, 0.86)),
    linear-gradient(90deg, rgba(255, 245, 194, 0.95), transparent 25%);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.explorer-card,
.detail-card {
  min-height: 780px;
}

.explorer-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 244, 246, 0.84));
}

.explorer-head,
.detail-topbar,
.detail-footer,
.photo-group-head,
.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.group-summary,
.item-list,
.active-photo-strip,
.photo-list {
  display: grid;
  gap: 12px;
}

.group-summary {
  grid-template-columns: 1fr;
}

.group-card {
  text-align: left;
  padding: 15px;
  border-color: rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, rgba(244, 246, 248, 0.92), rgba(220, 225, 231, 0.94));
}

.group-card.active {
  background: var(--sand);
  border-color: rgba(255, 245, 194, 1);
}

.group-card strong,
.group-card span,
.group-card small,
.item-row strong,
.item-row p,
.item-row-id,
.thumb-meta strong,
.thumb-meta span {
  display: block;
}

.group-card strong {
  font-size: 1.55rem;
  letter-spacing: -0.04em;
  font-weight: 650;
}

.group-card span {
  margin-top: 8px;
  font-weight: 700;
}

.group-card small,
.item-row p,
.item-row-id,
.thumb-meta span {
  margin-top: 4px;
  color: var(--muted);
}

.item-row-subtext {
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.86;
}

.item-list {
  max-height: 100%;
  overflow: auto;
  padding-right: 4px;
}

.item-list.item-list-empty {
  gap: 0;
  overflow: visible;
  padding-right: 0;
}

.item-list.item-list-empty .empty-state {
  margin-top: 0;
}

.item-list::-webkit-scrollbar {
  width: 10px;
}

.item-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}

.item-row {
  position: relative;
  text-align: left;
  padding: 15px;
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(248, 249, 251, 0.96);
}

.item-row.is-main-item {
  background: linear-gradient(180deg, rgba(244, 246, 248, 0.96), rgba(219, 224, 230, 0.95));
}

.item-row.active {
  border-color: rgba(0, 0, 0, 0.12);
}

.item-row.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 245, 194, 1);
}

.item-row.active .item-row-top strong {
  color: #111111;
}

.search-hit {
  padding: 0 0.18em;
  border-radius: 0.35em;
  background: #fff5c2;
  color: #111111;
  font-weight: 700;
}

.search-best-match {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.72rem;
  border: 1px solid rgba(255, 245, 194, 1);
  border-radius: 999px;
  background: #fff5c2;
  color: #111111;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.item-row-top,
.item-row-badges,
.badge-row,
.report-actions,
.thumb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.report-actions #export-pdf {
  display: inline-flex !important;
}

.detail-card {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 244, 246, 0.88)),
    linear-gradient(135deg, rgba(255, 245, 194, 0.7), transparent 28%);
}

.detail-kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.badge-row {
  margin: 12px 0 0;
}

.detail-form {
  margin-top: 0;
}

.subitems-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 244, 246, 0.86));
}

.subitems-head h3 {
  margin: 0;
}

.subitems-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.subitems-add-row {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 0;
}

.subitem-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.subitem-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
}

.subitem-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.subitem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.subitem-wide {
  grid-column: 1 / -1;
}

.subitem-delete-btn {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.8rem;
}

.subitem-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.subitem-note-title {
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
}

.subitem-note-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.subitem-note-actions .primary-btn,
.subitem-note-actions .ghost-btn {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.74rem;
  line-height: 1.15;
  justify-content: center;
  white-space: nowrap;
}


.subitem-detail-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.subitem-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.subitem-detail-footer .upload-btn,
.subitem-detail-footer .primary-btn,
.subitem-detail-footer .ghost-btn {
  width: auto;
}

@media (max-width: 760px) {
  .subitems-add-row,
  .subitem-grid {
    grid-template-columns: 1fr;
  }
}

.detail-footer {
  margin-top: 14px;
}

.voice-wrap,
.upload-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.field-note-title {
  font-size: 1.85rem;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
}

.field-note-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.field-note-actions .primary-btn,
.field-note-actions .ghost-btn {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 0.78rem;
  line-height: 1.15;
  justify-content: center;
  white-space: nowrap;
}


.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-link-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.photo-link-select {
  min-height: 42px;
}

.photo-link-preview {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
}

.photo-link-preview.empty {
  opacity: 0.8;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.camera-icon-btn {
  font-size: 0 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.camera-minimal-icon {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.camera-minimal-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 2px;
  height: 2px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(174, 183, 196, 0.45);
}

.camera-minimal-icon::after {
  content: "";
  position: absolute;
  left: 1px;
  top: -3px;
  width: 4px;
  height: 2px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

.note-voice-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  min-height: 34px;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.note-voice-btn::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5f6f7c;
  box-shadow: 0 0 0 2px rgba(95, 111, 124, 0.22);
  position: relative;
  z-index: 2;
}

.note-voice-btn.is-listening {
  background: rgba(255, 31, 68, 0.2) !important;
  border-color: #ff1f44 !important;
  animation: voice-record-button-pulse 0.75s ease-in-out infinite !important;
}

.note-voice-btn.is-listening::before {
  background: #ff1f44 !important;
  box-shadow:
    0 0 0 2px rgba(255, 31, 68, 0.32),
    0 0 0 0 rgba(255, 31, 68, 0.48) !important;
  animation: voice-record-blink 0.75s ease-in-out infinite !important;
}

.note-voice-btn.is-listening::after {
  content: "Snimam...";
  position: absolute;
  top: -12px;
  right: -6px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #ff1f44;
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  z-index: 3;
}

.active-photo-strip {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 14px;
}

.thumb-card,
.gallery-card,
.photo-group {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 244, 246, 0.86));
}

.thumb-card img,
.gallery-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.thumb-meta,
.thumb-actions,
.photo-group-head,
.gallery-grid,
.report-summary,
.empty-state,
.empty-inline {
  padding: 14px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.thumb-meta span:last-child,
.photo-link-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  padding: 0.4rem 0.72rem;
  border-radius: 999px;
  color: #111111;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
}

.photo-link-status,
.thumb-meta span:last-child {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #d3d9e0;
}

.photo-link-status.linked {
  border-color: rgba(255, 245, 194, 1);
  background: #fff5c2;
}

.photo-link-status.pending {
  border-color: rgba(0, 0, 0, 0.16);
  background: #cfd5dc;
}

.photo-list {
  margin-top: 14px;
}

.photo-group-head {
  border-bottom: 1px solid var(--line);
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-left: 0;
  padding-right: 0;
}

.report-list {
  padding-left: 18px;
}

.warning {
  color: var(--danger);
}

.empty-state,
.empty-inline {
  border: 1px dashed rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 245, 194, 0.28);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(8px);
}

.overlay.overlay-confirm {
  background: transparent;
  backdrop-filter: none;
}

.modal {
  width: min(920px, 100%);
  border-radius: 28px;
  padding: 22px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.14);
}

.modal.modal-confirm {
  width: min(360px, 100%);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
}

.modal.modal-confirm .modal-head {
  justify-content: center;
}

.modal.modal-confirm .modal-head h3 {
  margin: 0;
  font-size: 16px;
}

.modal.modal-confirm p {
  margin: 8px 0 10px;
  font-size: 14px;
}

.modal.modal-confirm .project-card-actions {
  justify-content: center;
  gap: 6px;
}

.modal.modal-confirm .project-card-actions .ghost-btn,
.modal.modal-confirm .project-card-actions .primary-btn {
  min-width: 116px;
  font-size: 13px;
  text-align: center;
}

.preview {
  width: 100%;
  max-height: 70vh;
  margin-top: 12px;
  border-radius: 18px;
  object-fit: contain;
  background: #f2f3f5;
}

.guide-modal {
  width: min(980px, 100%);
  padding: 14px;
}

.guide-modal .modal-head h3 {
  margin: 0;
  font-size: 1.1rem;
}

.guide-modal-frame {
  width: 100%;
  height: min(76vh, 760px);
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}

.overlay .guide-modal .guide-text {
  margin-top: 10px;
  max-height: min(76vh, 760px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  white-space: pre-wrap;
  line-height: 1.3 !important;
  font-size: 12px !important;
}

@media (max-width: 1240px) {
  .hero,
  .workspace,
  .form-grid,
  .filter-grid,
  .dashboard-grid,
  .info-grid,
  .report-summary {
    grid-template-columns: 1fr;
  }

  .hero-side,
  .hero-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 10px;
    gap: 10px;
  }

  .mobile-flow-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-flow-progress,
  .mobile-flow-actions {
    display: grid;
    gap: 8px;
  }

  .mobile-flow-progress {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mobile-flow-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-flow-step {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(219, 224, 230, 0.94);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
  }

  .mobile-flow-step.active {
    background: var(--sand);
    border-color: rgba(255, 245, 194, 1);
  }

  .mobile-page {
    display: none;
  }

  .mobile-page.mobile-page-active {
    display: block;
  }

  .mobile-page[data-mobile-page="1"].mobile-page-active {
    display: flex;
    flex-direction: column;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-card {
    order: 1;
  }

  .mobile-page[data-mobile-page="1"] .mobile-page-section-stats {
    order: 2;
  }

  .mobile-page[data-mobile-page="1"] .mobile-page-section-meta {
    order: 3;
  }

  .mobile-page[data-mobile-page="0"],
  .mobile-page[data-mobile-page="1"] {
    gap: 8px;
  }

  .mobile-page[data-mobile-page="0"] .hero,
  .mobile-page[data-mobile-page="1"] .card {
    padding: 10px 11px;
    border-radius: 16px;
  }

  .mobile-page[data-mobile-page="0"] .hero {
    gap: 10px;
  }

  .mobile-page[data-mobile-page="0"] .hero-copy {
    padding-left: 12px;
  }

  .mobile-page[data-mobile-page="0"] .hero-copy h1 {
    font-size: 1.8rem;
    line-height: 1.02;
  }

  .mobile-page[data-mobile-page="0"] .hero-copy p {
    font-size: 0.74rem;
    line-height: 1.18;
  }

  .mobile-page[data-mobile-page="0"] .hero-tags {
    gap: 6px;
  }

  .mobile-page[data-mobile-page="0"] .hero-tag,
  .mobile-page[data-mobile-page="0"] .metric-label,
  .mobile-page[data-mobile-page="0"] .metric-note {
    font-size: 0.66rem;
  }

  .mobile-page[data-mobile-page="0"] .metric-card {
    padding: 10px 11px;
    gap: 4px;
  }

  .mobile-page[data-mobile-page="0"] .metric-card strong {
    font-size: 1.15rem;
  }

  .mobile-page[data-mobile-page="0"] .hero-blueprint {
    display: none;
  }

  .mobile-page[data-mobile-page="1"] .section-heading {
    gap: 6px;
  }

  .mobile-page[data-mobile-page="1"] .section-heading h2 {
    font-size: 0.88rem;
    line-height: 1.1;
  }

  .mobile-page[data-mobile-page="1"] .section-heading p,
  .mobile-page[data-mobile-page="1"] .meta-note,
  .mobile-page[data-mobile-page="1"] .project-card p,
  .mobile-page[data-mobile-page="1"] .project-card small,
  .mobile-page[data-mobile-page="1"] .stat-card small {
    font-size: 0.7rem;
    line-height: 1.15;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-actions,
  .mobile-page[data-mobile-page="1"] .meta-actions,
  .mobile-page[data-mobile-page="1"] .filter-heading-actions {
    gap: 4px;
  }

  .mobile-page[data-mobile-page="1"] .primary-btn,
  .mobile-page[data-mobile-page="1"] .ghost-btn,
  .mobile-page[data-mobile-page="1"] .upload-btn,
  .mobile-page[data-mobile-page="1"] .pill {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 0.72rem;
    line-height: 1.1;
  }

  .mobile-page[data-mobile-page="1"] #create-project,
  .mobile-page[data-mobile-page="1"] .meta-actions form .ghost-btn {
    max-width: 100%;
  }

  .mobile-page[data-mobile-page="1"] .project-list,
  .mobile-page[data-mobile-page="1"] .dashboard-grid,
  .mobile-page[data-mobile-page="1"] .form-grid {
    gap: 6px;
  }

  .mobile-flow-nav {
    gap: 8px;
    padding: 8px 9px;
  }

  .mobile-flow-progress {
    gap: 6px;
  }

  .mobile-flow-step {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 0.72rem;
    line-height: 1.05;
  }

  .mobile-flow-actions {
    gap: 6px;
  }

  .mobile-flow-actions .ghost-btn,
  .mobile-flow-actions .primary-btn {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 0.74rem;
  }

  .mobile-page[data-mobile-page="1"] .form-grid {
    margin-top: 8px;
  }

  .mobile-page[data-mobile-page="1"] .project-card,
  .mobile-page[data-mobile-page="1"] .stat-card {
    padding: 7px 8px;
  }

  .mobile-page[data-mobile-page="1"] .project-card strong,
  .mobile-page[data-mobile-page="1"] .stat-card strong {
    font-size: 0.96rem;
    line-height: 1.05;
  }

  .mobile-page[data-mobile-page="1"] .stat-card-head,
  .mobile-page[data-mobile-page="1"] .stat-card-main {
    gap: 4px;
  }

  .mobile-page[data-mobile-page="1"] .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .mobile-page[data-mobile-page="1"] .stat-card {
    padding: 6px 7px;
  }

  .mobile-page[data-mobile-page="1"] .stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .mobile-page[data-mobile-page="1"] .stat-card-note {
    font-size: 0.62rem;
    line-height: 1.05;
  }

  .mobile-page[data-mobile-page="1"] .stat-card strong {
    font-size: 0.88rem;
    margin: 4px 0 5px;
  }

  .mobile-page[data-mobile-page="1"] .stat-list-toggle {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  .mobile-page[data-mobile-page="1"] .progress {
    height: 8px;
  }

  .mobile-page[data-mobile-page="1"] .inline-voice-field,
  .mobile-page[data-mobile-page="1"] .inline-select-field {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 6px;
  }

  .mobile-page[data-mobile-page="1"] .field-label-text,
  .mobile-page[data-mobile-page="1"] .inline-select-field {
    font-size: 0.72rem;
    line-height: 1.08;
  }

  .mobile-page[data-mobile-page="1"] .inline-voice-field .field-voice-wrap {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 4px;
  }

  .mobile-page[data-mobile-page="1"] .field-voice-btn {
    min-height: 34px;
    min-width: 34px;
    font-size: 0.78rem;
  }

  .mobile-page[data-mobile-page="1"] input,
  .mobile-page[data-mobile-page="1"] select,
  .mobile-page[data-mobile-page="1"] textarea,
  .mobile-page[data-mobile-page="1"] .mobile-detail-select-trigger {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 0.74rem;
    line-height: 1.1;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field {
    gap: 3px;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field .field-voice-wrap {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .mobile-page[data-mobile-page="1"] .meta-actions .pill,
  .mobile-page[data-mobile-page="1"] .project-manager-actions .pill {
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  .mobile-page[data-mobile-page="1"] .meta-note {
    margin: 0;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-card .heading-inline p,
  .mobile-page[data-mobile-page="1"] .stats-shell .heading-inline p,
  .mobile-page[data-mobile-page="1"] .meta-card .heading-inline p {
    font-size: 0.66rem;
    line-height: 1.1;
  }

  .hero,
  .card {
    padding: 14px;
    border-radius: 20px;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: 2.3rem;
  }

  .section-heading h2,
  .detail-card h2,
  .explorer-head h3,
  .photo-group h3,
  .report-panel h3,
  .info-panel h3 {
    font-size: 1rem;
  }

  .section-heading p,
  .heading-inline p,
  .explorer-head p,
  .detail-kicker,
  .item-row-subtext,
  .project-card p,
  .project-card small,
  .metric-note,
  .meta-note,
  .photo-link-preview,
  .thumb-meta span,
  .report-list,
  .info-panel p {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .tabrow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .section-heading,
  .detail-topbar,
  .detail-footer,
  .photo-group-head,
  .modal-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .heading-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
  }

  .meta-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .filter-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .filter-card .section-heading {
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }

  .filter-card .filter-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    justify-items: start;
  }

  .project-manager-actions .mobile-section-toggle,
  .meta-actions .mobile-section-toggle,
  .filter-heading-actions .mobile-section-toggle {
    order: -1;
    margin-right: 0;
  }

  #reset-filters {
    order: -1;
    margin-right: 0;
  }

  .project-manager-actions,
  .meta-actions,
  .filter-heading-actions,
  .detail-actions,
  .badge-row,
  .item-row-badges,
  .item-row-top {
    gap: 6px;
  }

  .project-list,
  .group-summary,
  .item-list,
  .photo-list,
  .gallery-grid,
  .active-photo-strip,
  .dashboard-grid,
  .info-grid,
  .report-summary,
  .form-grid,
  .filter-grid {
    gap: 8px;
  }

  .item-row,
  .project-card,
  .group-card,
  .stat-card,
  .thumb-meta,
  .thumb-actions,
  .photo-group-head,
  .gallery-grid,
  .report-summary,
  .empty-state,
  .empty-inline {
    padding: 8px 9px;
  }

  input,
  select,
  textarea {
    padding: 10px 12px;
    font-size: 0.92rem;
  }

  label,
  .stacked {
    gap: 6px;
    font-size: 0.78rem;
  }

  textarea {
    min-height: 120px;
  }

  .mobile-filter-toggle {
    display: inline-flex;
  }

  .mobile-section-toggle {
    display: inline-flex;
  }

  .filter-grid {
    grid-template-columns: 1fr;
  }

  .filter-card label,
  .filter-card .search-input-wrap,
  .filter-card .filter-search-field,
  .filter-card .filter-optional-fields {
    width: 100%;
  }

  .inline-select-field {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .inline-select-field > span,
  .inline-select-field > strong,
  .inline-select-field > label,
  .inline-select-field {
    align-items: center;
  }

  .inline-select-field > select,
  .inline-select-field > .mobile-filter-select,
  .inline-select-field > .mobile-detail-select {
    width: 100%;
  }

  .inline-select-field > .mobile-filter-select,
  .inline-select-field > .mobile-detail-select,
  .inline-select-field > select {
    margin: 0;
  }

  .inline-select-field > .mobile-filter-select .mobile-filter-select-trigger,
  .inline-select-field > .mobile-detail-select .mobile-detail-select-trigger,
  .inline-select-field > select {
    min-height: 38px;
    background: #ffffff;
  }

  .filter-search-field {
    order: 1;
  }

  .filter-card label > select {
    display: none;
  }

  .filter-card .mobile-filter-select {
    position: relative;
    display: block;
    z-index: 20;
  }

  .filter-card .mobile-filter-select-trigger {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding-right: 34px;
    position: relative;
    font-weight: 400 !important;
  }

  .filter-card .mobile-filter-select-trigger::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(0, 0, 0, 0.55);
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.55);
    transform: translateY(-65%) rotate(45deg);
  }

  .filter-card .mobile-filter-select.open .mobile-filter-select-trigger::after {
    transform: translateY(-35%) rotate(-135deg);
  }

  .filter-card .mobile-filter-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 140;
    display: none;
    max-height: min(220px, 45vh);
    overflow: auto;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  }

  .filter-card .mobile-filter-select.open-up .mobile-filter-select-menu {
    bottom: calc(100% + 4px);
  }

  .filter-card .mobile-filter-select.open-down .mobile-filter-select-menu {
    top: calc(100% + 4px);
  }

  .filter-card .mobile-filter-select.open .mobile-filter-select-menu {
    display: grid;
    gap: 2px;
  }

  .filter-card .mobile-filter-select-option {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .filter-card .mobile-filter-select-option.active {
    background: rgba(219, 224, 230, 0.9);
    font-weight: 400;
  }

  .filter-optional-fields {
    order: 2;
    display: grid;
    gap: 10px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.24s ease, opacity 0.2s ease, transform 0.2s ease;
  }

  .filter-card.mobile-filters-open .filter-optional-fields {
    overflow: visible;
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
  }

  .filter-card .filter-grid,
  .filter-card .filter-optional-fields,
  .filter-card .filter-search-field {
    position: relative;
    z-index: 5;
  }

  .filter-card,
  .explorer-card,
  .workspace,
  .mobile-page.mobile-page-active {
    overflow: visible;
  }

  .filter-card.mobile-filters-open .mobile-filter-toggle {
    background: var(--sand);
    border-color: rgba(255, 245, 194, 1);
  }

  .filter-card .ghost-btn,
  .filter-card .primary-btn,
  .filter-card .upload-btn {
    width: auto;
    min-width: 0;
    justify-content: flex-start;
  }

  .filter-card #reset-filters,
  .filter-card #mobile-filter-toggle {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.76rem;
  }

  .mobile-collapsible-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.24s ease, opacity 0.2s ease, transform 0.2s ease;
  }

  .mobile-collapsible-card.mobile-section-open .mobile-collapsible-content {
    max-height: 1600px;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-collapsible-card.mobile-section-open .mobile-section-toggle {
    background: var(--sand);
    border-color: rgba(255, 245, 194, 1);
  }

  .mobile-entry-toggle {
    display: inline-flex;
  }

  .mobile-page[data-mobile-page="3"] .mobile-entry-panel {
    display: none;
  }

  .detail-card.mobile-definition-open .mobile-entry-panel {
    display: block;
  }

  .mobile-page[data-mobile-page="3"] .detail-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-page[data-mobile-page="3"] .detail-inline-field {
    min-width: 0;
  }

  .mobile-page[data-mobile-page="3"] .inline-select-field {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .mobile-page[data-mobile-page="1"] .meta-card .inline-select-field > select,
  .mobile-page[data-mobile-page="3"] .detail-form label > select {
    display: none;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid label > select {
    display: none;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select {
    position: relative;
    display: block;
    width: 100%;
    z-index: 20;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-trigger {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding-right: 34px;
    position: relative;
    font-weight: 400 !important;
    background: #ffffff;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select-trigger::after,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-trigger::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(0, 0, 0, 0.55);
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.55);
    transform: translateY(-65%) rotate(45deg);
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select.open .mobile-detail-select-trigger::after,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select.open .mobile-detail-select-trigger::after {
    transform: translateY(-35%) rotate(-135deg);
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 80;
    display: none;
    max-height: min(220px, 45vh);
    overflow: auto;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select.open-up .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select.open-up .mobile-detail-select-menu {
    bottom: calc(100% + 4px);
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select.open-down .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select.open-down .mobile-detail-select-menu {
    top: calc(100% + 4px);
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select.open .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select.open .mobile-detail-select-menu {
    display: grid;
    gap: 2px;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select-option,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-option {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select-option.active,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-option.active {
    background: rgba(219, 224, 230, 0.9);
    font-weight: 400;
  }

  .thumb-actions,
  .report-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-btn,
  .ghost-btn,
  .upload-btn {
    width: auto;
    min-height: 38px;
    padding: 9px 12px;
    font-size: 0.88rem;
  }

  .mobile-page:not([data-mobile-page="0"]) .section-heading h2,
  .mobile-page-shell .section-heading h2,
  .mobile-page:not([data-mobile-page="0"]) .detail-card h2,
  .mobile-page-shell .detail-card h2,
  .mobile-page-shell .explorer-head h3,
  .mobile-page-shell .photo-group h3,
  .mobile-page-shell .report-panel h3,
  .mobile-page-shell .info-panel h3 {
    font-size: 0.94rem;
  }

  .mobile-page:not([data-mobile-page="0"]) .project-card strong,
  .mobile-page:not([data-mobile-page="0"]) .group-card strong,
  .mobile-page:not([data-mobile-page="0"]) .item-row strong,
  .mobile-page:not([data-mobile-page="0"]) .stat-list-item strong,
  .mobile-page:not([data-mobile-page="0"]) .thumb-meta strong,
  .mobile-page-shell .group-card strong,
  .mobile-page-shell .item-row strong,
  .mobile-page-shell .stat-list-item strong,
  .mobile-page-shell .thumb-meta strong {
    font-size: 0.88rem;
    line-height: 1.14;
    letter-spacing: -0.01em;
    font-weight: 600;
  }

  .mobile-page:not([data-mobile-page="0"]) .item-row-id,
  .mobile-page:not([data-mobile-page="0"]) .group-card span,
  .mobile-page-shell .item-row-id,
  .mobile-page-shell .group-card span {
    font-size: 0.72rem;
  }

  .mobile-page:not([data-mobile-page="0"]) .item-row p,
  .mobile-page:not([data-mobile-page="0"]) .stat-list-item span,
  .mobile-page-shell .item-row p,
  .mobile-page-shell .stat-list-item span {
    font-size: 0.68rem;
    line-height: 1.15;
    color: var(--muted);
  }

  .mobile-page:not([data-mobile-page="0"]) .section-heading p,
  .mobile-page:not([data-mobile-page="0"]) .heading-inline p,
  .mobile-page:not([data-mobile-page="0"]) .project-card p,
  .mobile-page:not([data-mobile-page="0"]) .project-card small,
  .mobile-page:not([data-mobile-page="0"]) .meta-note,
  .mobile-page:not([data-mobile-page="0"]) .stat-card small,
  .mobile-page:not([data-mobile-page="0"]) .stat-list-item span,
  .mobile-page-shell .explorer-head p,
  .mobile-page-shell .detail-kicker,
  .mobile-page-shell .item-row-subtext,
  .mobile-page-shell .photo-link-preview,
  .mobile-page-shell .stat-list-item span,
  .mobile-page-shell .thumb-meta span,
  .mobile-page-shell .report-list,
  .mobile-page-shell .info-panel p {
    font-size: 0.74rem;
    line-height: 1.2;
  }

  .mobile-page:not([data-mobile-page="0"]) .pill,
  .mobile-page:not([data-mobile-page="0"]) .badge,
  .mobile-page-shell .pill,
  .mobile-page-shell .badge {
    font-size: 0.7rem;
    line-height: 1.15;
  }

  .mobile-page:not([data-mobile-page="0"]) .stat-card strong,
  .mobile-page-shell .stat-card strong {
    font-size: 1.08rem;
    line-height: 1.05;
    font-weight: 650;
  }

  .mobile-page:not([data-mobile-page="0"]) .primary-btn,
  .mobile-page:not([data-mobile-page="0"]) .ghost-btn,
  .mobile-page:not([data-mobile-page="0"]) .upload-btn,
  .mobile-page-shell .primary-btn,
  .mobile-page-shell .ghost-btn,
  .mobile-page-shell .upload-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 700;
  }

  .mobile-page:not([data-mobile-page="0"]) input,
  .mobile-page:not([data-mobile-page="0"]) select,
  .mobile-page:not([data-mobile-page="0"]) textarea,
  .mobile-page-shell input,
  .mobile-page-shell select,
  .mobile-page-shell textarea {
    font-size: 0.8rem;
    line-height: 1.2;
    min-height: 40px;
    border-radius: 12px;
    font-weight: 400;
    background: #ffffff;
  }

  .mobile-page:not([data-mobile-page="0"]) select,
  .mobile-page-shell select {
    padding-right: 12px;
    appearance: auto;
    -webkit-appearance: menulist;
    background-image: none;
  }

  .mobile-page:not([data-mobile-page="0"]) option,
  .mobile-page-shell option {
    font-size: 0.8rem;
  }

  .mobile-page:not([data-mobile-page="0"]) input[type="date"],
  .mobile-page:not([data-mobile-page="0"]) input[type="datetime-local"],
  .mobile-page-shell input[type="date"],
  .mobile-page-shell input[type="datetime-local"] {
    min-height: 40px;
  }

  .mobile-page:not([data-mobile-page="0"]) .form-grid,
  .mobile-page:not([data-mobile-page="0"]) .filter-grid,
  .mobile-page-shell .form-grid,
  .mobile-page-shell .filter-grid {
    grid-template-columns: 1fr;
  }

  .tabrow button {
    width: 100%;
    padding: 9px 10px;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .field-voice-wrap {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 6px;
    align-items: stretch;
  }

  .inline-voice-field {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .inline-voice-field > .field-label-text,
  .inline-voice-field {
    align-items: center;
  }

  .inline-voice-field > .field-voice-wrap {
    grid-column: 2;
    margin: 0;
  }

  .mobile-page[data-mobile-page="1"] .inline-voice-field .field-voice-wrap {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 4px;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field > .field-voice-wrap {
    grid-column: 1;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field input[type="date"],
  .mobile-page[data-mobile-page="1"] .mobile-date-field input[type="datetime-local"] {
    min-width: 0;
    width: 100%;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field .native-date-input {
    display: none;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field .mobile-date-picker-trigger {
    display: inline-flex;
    width: 100%;
    justify-content: flex-start;
    background: #ffffff;
    font-weight: 400;
  }

  .field-voice-btn {
    min-height: 40px;
    min-width: 40px;
    font-size: 0.9rem;
  }

  .search-input-wrap {
    gap: 4px;
  }

  .search-input-wrap .ghost-btn {
    min-height: 38px;
    align-self: stretch;
  }

  .filter-card .ghost-btn,
  .filter-card .primary-btn,
  .filter-card .upload-btn {
    width: 100%;
    justify-content: center;
  }

  .pill,
  .badge,
  .project-status,
  .search-best-match,
  .thumb-meta span:last-child,
  .photo-link-status {
    font-size: 0.68rem;
    padding: 5px 8px;
  }

  .stat-card strong,
  .metric-card strong {
    font-size: 1.55rem;
    margin: 8px 0 10px;
  }

  .bp-drawing {
    min-height: 150px;
  }

  .bp-line-a {
    width: 150px;
  }

  .bp-line-b {
    width: 120px;
  }

  .mobile-page:not([data-mobile-page="0"]) .project-card,
  .mobile-page:not([data-mobile-page="0"]) .group-card,
  .mobile-page:not([data-mobile-page="0"]) .item-row,
  .mobile-page:not([data-mobile-page="0"]) .stat-card,
  .mobile-page:not([data-mobile-page="0"]) .stat-list-item,
  .mobile-page-shell .group-card,
  .mobile-page-shell .item-row,
  .mobile-page-shell .detail-card,
  .mobile-page-shell .stat-list-item {
    padding: 8px 9px;
  }

  .mobile-page:not([data-mobile-page="0"]) .section-heading h2,
  .mobile-page-shell .section-heading h2,
  .mobile-page:not([data-mobile-page="0"]) .detail-card h2,
  .mobile-page-shell .detail-card h2,
  .mobile-page-shell .explorer-head h3,
  .mobile-page-shell .photo-group h3,
  .mobile-page-shell .report-panel h3,
  .mobile-page-shell .info-panel h3,
  .mobile-page:not([data-mobile-page="0"]) .stat-label,
  .mobile-page-shell .stat-label {
    line-height: 1.15;
    font-weight: 700;
  }

  .mobile-page:not([data-mobile-page="0"]) .section-heading p,
  .mobile-page:not([data-mobile-page="0"]) .heading-inline p,
  .mobile-page:not([data-mobile-page="0"]) .project-card p,
  .mobile-page:not([data-mobile-page="0"]) .project-card small,
  .mobile-page:not([data-mobile-page="0"]) .meta-note,
  .mobile-page:not([data-mobile-page="0"]) .stat-card small,
  .mobile-page:not([data-mobile-page="0"]) .stat-list-item span,
  .mobile-page-shell .explorer-head p,
  .mobile-page-shell .detail-kicker,
  .mobile-page-shell .item-row-subtext,
  .mobile-page-shell .photo-link-preview,
  .mobile-page-shell .stat-list-item span,
  .mobile-page-shell .thumb-meta span,
  .mobile-page-shell .report-list,
  .mobile-page-shell .info-panel p {
    color: var(--muted);
  }

  .mobile-page-shell .item-row-top,
  .mobile-page-shell .item-row-badges,
  .mobile-page-shell .badge-row,
  .mobile-page-shell .thumb-actions,
  .mobile-page:not([data-mobile-page="0"]) .project-card-head,
  .mobile-page:not([data-mobile-page="0"]) .project-card-meta,
  .mobile-page:not([data-mobile-page="0"]) .project-card-actions,
  .mobile-page:not([data-mobile-page="0"]) .stat-card-head,
  .mobile-page:not([data-mobile-page="0"]) .stat-card-main {
    gap: 5px;
  }

  .mobile-page-shell .item-row p,
  .mobile-page-shell .item-row-subtext,
  .mobile-page:not([data-mobile-page="0"]) .project-card p,
  .mobile-page:not([data-mobile-page="0"]) .project-card small,
  .mobile-page:not([data-mobile-page="0"]) .stat-list-item span,
  .mobile-page-shell .stat-list-item span {
    margin-top: 2px;
  }

  .mobile-page-shell .item-row.active::before {
    top: 8px;
    bottom: 8px;
    width: 2px;
  }

  .mobile-page-shell .item-row:not(.is-main-item) {
    background: rgba(250, 250, 251, 0.98);
  }

  .filter-card .mobile-filter-select-trigger,
  .filter-card .mobile-filter-select-option,
  .filter-card .mobile-filter-select,
  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select,
  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select-option,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-option,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select {
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="3"] .voice-wrap .muted {
    font-size: 0.68rem;
    line-height: 1.15;
  }

  .mobile-date-picker-root.open {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    align-items: end;
    padding: 12px;
    background: rgba(0, 0, 0, 0.18);
  }

  .mobile-date-picker-sheet {
    border-radius: 18px;
    padding: 12px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  }

  .mobile-date-picker-head,
  .mobile-date-picker-toolbar,
  .mobile-date-picker-actions,
  .mobile-date-picker-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .mobile-date-picker-head,
  .mobile-date-picker-toolbar,
  .mobile-date-picker-actions {
    margin-bottom: 10px;
  }

  .mobile-date-picker-weekdays,
  .mobile-date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .mobile-date-picker-weekdays {
    margin-bottom: 6px;
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
  }

  .mobile-date-picker-day {
    min-height: 34px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #ffffff;
    font-size: 0.8rem;
  }

  .mobile-date-picker-day.active {
    background: var(--sand);
    border-color: rgba(255, 245, 194, 1);
  }

  .mobile-date-picker-day.is-empty {
    min-height: 34px;
  }

  .mobile-date-picker-time {
    margin: 10px 0;
  }

  .mobile-date-picker-time label {
    gap: 6px;
  }

.mobile-date-picker-time-row select {
    width: 100%;
  }
}

@media (max-width: 760px) {
  :root {
    --radius-xl: 2px;
    --radius-lg: 2px;
    --radius-md: 2px;
    --radius-sm: 1px;
  }

  .app-shell,
  .tabs,
  .workspace,
  .mobile-page[data-mobile-page="0"],
  .mobile-page[data-mobile-page="1"],
  .mobile-page-shell,
  .project-list,
  .dashboard-grid,
  .form-grid,
  .filter-grid,
  .info-grid,
  .detail-form {
    gap: 4px;
  }

  .hero,
  .card,
  .project-card,
  .group-card,
  .item-row,
  .stat-card,
  .detail-card,
  .photo-group,
  .thumb-card,
  .gallery-card {
    padding: 6px;
    border-radius: 2px;
    box-shadow: none;
  }

  .section-heading,
  .explorer-head,
  .detail-topbar,
  .detail-footer,
  .badge-row,
  .item-row-top,
  .item-row-badges,
  .project-card-head,
  .project-card-meta,
  .project-card-actions,
  .stat-card-head,
  .stat-card-main {
    gap: 3px;
  }

  .section-heading h2,
  .detail-card h2,
  .explorer-head h3,
  .photo-group h3,
  .report-panel h3,
  .info-panel h3,
  .hero-copy h1 {
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
  }

  .section-heading p,
  .heading-inline p,
  .project-card p,
  .project-card small,
  .meta-note,
  .stat-card small,
  .stat-list-item span,
  .item-row p,
  .item-row-subtext,
  .detail-kicker,
  .photo-link-preview,
  .report-list,
  .info-panel p,
  .pill,
  .badge {
    font-weight: 400;
    line-height: 1.05;
    margin: 0;
  }

  .primary-btn,
  .ghost-btn,
  .upload-btn,
  .pill,
  .mobile-flow-step,
  .tabrow button,
  .stat-list-toggle {
    min-height: 28px;
    padding: 4px 6px;
    border-radius: 2px;
    font-size: 0.72rem;
    line-height: 1.02;
    font-weight: 500;
  }

  .project-manager-actions,
  .meta-actions,
  .filter-heading-actions,
  .detail-actions,
  .report-actions,
  .thumb-actions,
  .mobile-flow-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    align-items: stretch;
  }

  .project-manager-actions > *,
  .meta-actions > *,
  .filter-heading-actions > *,
  .detail-actions > *,
  .report-actions > *,
  .thumb-actions > *,
  .mobile-flow-actions > * {
    width: 100%;
    min-width: 0;
  }

  .inline-voice-field,
  .inline-select-field {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 3px;
  }

  .field-voice-wrap,
  .mobile-page[data-mobile-page="1"] .inline-voice-field .field-voice-wrap {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 3px;
  }

  .field-voice-btn {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
  }

  input,
  select,
  textarea,
  .mobile-detail-select-trigger,
  .mobile-filter-select-trigger {
    min-height: 28px;
    padding: 4px 6px;
    border-radius: 2px;
    font-size: 0.74rem;
    line-height: 1.02;
    font-weight: 400;
  }

  .tabrow {
    gap: 3px;
  }

  .tabrow button {
    padding: 4px 6px;
  }

  .section-heading,
  .heading-inline,
  .filter-search-field,
  .inline-voice-field,
  .inline-select-field,
  .form-grid label,
  .detail-form label,
  .filter-grid label {
    margin: 0;
    padding: 0;
  }

  .form-grid,
  .filter-grid,
  .detail-form,
  .dashboard-grid,
  .project-list,
  .item-list,
  .stat-list {
    row-gap: 3px;
  }

  .mobile-page[data-mobile-page="1"] .form-grid,
  .mobile-page[data-mobile-page="1"] .project-list,
  .mobile-page[data-mobile-page="1"] .dashboard-grid {
    gap: 3px;
  }

  .mobile-page[data-mobile-page="1"] .project-card,
  .mobile-page[data-mobile-page="1"] .stat-card,
  .mobile-page-shell .detail-card,
  .mobile-page-shell .explorer-card {
    padding: 5px;
  }

  .mobile-page[data-mobile-page="1"] .section-heading p,
  .mobile-page-shell .explorer-head p,
  .mobile-page-shell .item-row p,
  .mobile-page-shell .item-row-subtext,
  .mobile-page-shell .detail-kicker,
  .mobile-page-shell .photo-link-preview,
  .mobile-page-shell .report-list,
  .mobile-page-shell .info-panel p,
  .mobile-page[data-mobile-page="1"] .meta-note,
  .mobile-page[data-mobile-page="1"] .project-card p,
  .mobile-page[data-mobile-page="1"] .project-card small,
  .mobile-page[data-mobile-page="1"] .stat-card small,
  .mobile-page-shell .stat-list-item span {
    font-size: 0.68rem;
    line-height: 1.02;
    margin: 0;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 4px !important;
    gap: 3px !important;
  }

  .mobile-flow-nav {
    gap: 3px !important;
    padding: 4px !important;
  }

  .mobile-flow-progress,
  .mobile-flow-actions {
    gap: 2px !important;
  }

  .mobile-flow-step,
  .mobile-flow-actions .ghost-btn,
  .mobile-flow-actions .primary-btn {
    min-height: 24px !important;
    padding: 2px 4px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    border-radius: 1px !important;
  }

  .mobile-page[data-mobile-page="0"] .hero,
  .mobile-page[data-mobile-page="1"] .card,
  .mobile-page-shell .card,
  .mobile-page-shell .detail-card,
  .mobile-page-shell .explorer-card,
  .mobile-page[data-mobile-page="1"] .project-card,
  .mobile-page[data-mobile-page="1"] .stat-card {
    padding: 4px !important;
    border-radius: 1px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .mobile-page[data-mobile-page="1"],
  .mobile-page-shell,
  .mobile-page[data-mobile-page="1"] .form-grid,
  .mobile-page[data-mobile-page="1"] .project-list,
  .mobile-page[data-mobile-page="1"] .dashboard-grid,
  .mobile-page[data-mobile-page="1"] .section-heading,
  .mobile-page[data-mobile-page="1"] .project-manager-actions,
  .mobile-page[data-mobile-page="1"] .meta-actions,
  .mobile-page[data-mobile-page="1"] .filter-heading-actions,
  .mobile-page[data-mobile-page="1"] .stat-card-head,
  .mobile-page[data-mobile-page="1"] .stat-card-main,
  .mobile-page[data-mobile-page="1"] .stat-list,
  .mobile-page[data-mobile-page="1"] .badge-row {
    gap: 2px !important;
  }

  .mobile-page[data-mobile-page="1"] .section-heading h2,
  .mobile-page[data-mobile-page="1"] .explorer-head h3,
  .mobile-page[data-mobile-page="1"] .stat-label {
    font-size: 0.62rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="1"] .section-heading p,
  .mobile-page[data-mobile-page="1"] .meta-note,
  .mobile-page[data-mobile-page="1"] .project-card p,
  .mobile-page[data-mobile-page="1"] .project-card small,
  .mobile-page[data-mobile-page="1"] .stat-card small,
  .mobile-page[data-mobile-page="1"] .item-row p,
  .mobile-page[data-mobile-page="1"] .stat-list-item span {
    font-size: 0.58rem !important;
    line-height: 0.98 !important;
    margin: 0 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="1"] .project-card strong,
  .mobile-page[data-mobile-page="1"] .stat-card strong,
  .mobile-page[data-mobile-page="1"] .item-row strong,
  .mobile-page[data-mobile-page="1"] .stat-list-item strong {
    font-size: 0.78rem !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="1"] .primary-btn,
  .mobile-page[data-mobile-page="1"] .ghost-btn,
  .mobile-page[data-mobile-page="1"] .upload-btn,
  .mobile-page[data-mobile-page="1"] .pill,
  .mobile-page[data-mobile-page="1"] .stat-list-toggle {
    min-height: 24px !important;
    height: 24px !important;
    padding: 1px 5px !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
    border-radius: 1px !important;
    font-weight: 500 !important;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-actions,
  .mobile-page[data-mobile-page="1"] .meta-actions,
  .mobile-page[data-mobile-page="1"] .filter-heading-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mobile-page[data-mobile-page="1"] .inline-voice-field,
  .mobile-page[data-mobile-page="1"] .inline-select-field {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 2px !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .field-voice-wrap {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    gap: 2px !important;
  }

  .mobile-page[data-mobile-page="1"] .field-voice-btn {
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 0.64rem !important;
  }

  .mobile-page[data-mobile-page="1"] .field-voice-status {
    font-size: 9px !important;
    margin-top: -2px;
  }

  .mobile-page[data-mobile-page="1"] input,
  .mobile-page[data-mobile-page="1"] select,
  .mobile-page[data-mobile-page="1"] textarea,
  .mobile-page[data-mobile-page="1"] .mobile-detail-select-trigger {
    min-height: 24px !important;
    padding: 1px 5px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    border-radius: 1px !important;
  }

  .mobile-page[data-mobile-page="1"] textarea {
    min-height: 56px !important;
  }

  .mobile-page[data-mobile-page="1"] .progress {
    height: 5px !important;
    margin: 1px 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .mobile-collapsible-content {
    transition: none !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="1"] .stats-shell,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading,
  .mobile-page[data-mobile-page="1"] .stats-shell .heading-inline,
  .mobile-page[data-mobile-page="1"] .stats-shell .dashboard-grid,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-head,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-main,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list {
    gap: 1px !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell {
    padding: 3px !important;
    border-radius: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading h2 {
    font-size: 0.54rem !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading p,
  .mobile-page[data-mobile-page="1"] .stats-shell .heading-inline p,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-note,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card small,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-item span {
    font-size: 0.5rem !important;
    line-height: 0.9 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-label {
    font-size: 0.48rem !important;
    line-height: 0.9 !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card strong,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-item strong {
    font-size: 0.62rem !important;
    line-height: 0.9 !important;
    margin: 0 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-toggle,
  .mobile-page[data-mobile-page="1"] .stats-shell .ghost-btn,
  .mobile-page[data-mobile-page="1"] .stats-shell .primary-btn {
    min-height: 18px !important;
    height: 18px !important;
    padding: 0 3px !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-item,
  .mobile-page[data-mobile-page="1"] .stats-shell .empty-inline {
    padding: 2px !important;
    border-radius: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .empty-inline {
    min-height: 35px !important;
    height: 35px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .empty-inline strong {
    display: none !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .empty-inline p {
    margin: 0 !important;
    font-size: 12.4px !important;
    line-height: 1.1 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-item {
    border-width: 1px !important;
    min-height: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .progress {
    height: 3px !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-head,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-main,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list.open {
    gap: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-item strong,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-item span,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-note {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="2"],
  .mobile-page[data-mobile-page="3"],
  .mobile-page-shell,
  .mobile-page[data-mobile-page="2"] .card,
  .mobile-page[data-mobile-page="3"] .card,
  .mobile-page-shell .card,
  .mobile-page-shell .detail-card,
  .mobile-page-shell .explorer-card,
  .mobile-page-shell .filter-card,
  .mobile-page-shell .report-card {
    gap: 1px !important;
    margin: 0 !important;
    padding: 3px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .mobile-page[data-mobile-page="2"] .workspace,
  .mobile-page[data-mobile-page="2"] .filter-grid,
  .mobile-page[data-mobile-page="2"] .section-heading,
  .mobile-page[data-mobile-page="2"] .heading-inline,
  .mobile-page[data-mobile-page="2"] .item-list,
  .mobile-page[data-mobile-page="2"] .group-summary,
  .mobile-page[data-mobile-page="3"] .detail-topbar,
  .mobile-page[data-mobile-page="3"] .detail-form,
  .mobile-page[data-mobile-page="3"] .badge-row,
  .mobile-page[data-mobile-page="3"] .info-grid,
  .mobile-page[data-mobile-page="3"] .detail-footer,
  .mobile-page[data-mobile-page="3"] .subitems-panel,
  .mobile-page[data-mobile-page="3"] .subitem-list,
  .mobile-page-shell .photo-list,
  .mobile-page-shell .report-summary,
  .mobile-page-shell .report-actions,
  .mobile-page-shell .thumb-actions {
    gap: 1px !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] h2,
  .mobile-page[data-mobile-page="2"] h3,
  .mobile-page[data-mobile-page="3"] h2,
  .mobile-page[data-mobile-page="3"] h3,
  .mobile-page-shell h2,
  .mobile-page-shell h3,
  .mobile-page-shell strong,
  .mobile-page[data-mobile-page="2"] .item-row strong,
  .mobile-page[data-mobile-page="2"] .group-card strong,
  .mobile-page[data-mobile-page="3"] .item-row strong,
  .mobile-page[data-mobile-page="3"] .detail-card strong {
    font-size: 0.6rem !important;
    line-height: 0.95 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] p,
  .mobile-page[data-mobile-page="2"] span,
  .mobile-page[data-mobile-page="2"] small,
  .mobile-page[data-mobile-page="3"] p,
  .mobile-page[data-mobile-page="3"] span,
  .mobile-page[data-mobile-page="3"] small,
  .mobile-page-shell p,
  .mobile-page-shell span,
  .mobile-page-shell small {
    font-size: 0.5rem !important;
    line-height: 0.9 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .primary-btn,
  .mobile-page[data-mobile-page="2"] .ghost-btn,
  .mobile-page[data-mobile-page="2"] .upload-btn,
  .mobile-page[data-mobile-page="2"] .pill,
  .mobile-page[data-mobile-page="3"] .primary-btn,
  .mobile-page[data-mobile-page="3"] .ghost-btn,
  .mobile-page[data-mobile-page="3"] .upload-btn,
  .mobile-page[data-mobile-page="3"] .pill,
  .mobile-page-shell .primary-btn,
  .mobile-page-shell .ghost-btn,
  .mobile-page-shell .upload-btn,
  .mobile-page-shell .pill,
  .mobile-page-shell .badge {
    min-height: 18px !important;
    height: 18px !important;
    padding: 0 3px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] input,
  .mobile-page[data-mobile-page="2"] select,
  .mobile-page[data-mobile-page="2"] textarea,
  .mobile-page[data-mobile-page="2"] .mobile-filter-select-trigger,
  .mobile-page[data-mobile-page="3"] input,
  .mobile-page[data-mobile-page="3"] select,
  .mobile-page[data-mobile-page="3"] textarea,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-trigger,
  .mobile-page-shell input,
  .mobile-page-shell select,
  .mobile-page-shell textarea {
    min-height: 20px !important;
    padding: 1px 4px !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] textarea,
  .mobile-page-shell textarea {
    min-height: 44px !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row,
  .mobile-page[data-mobile-page="2"] .group-card,
  .mobile-page[data-mobile-page="3"] .item-row,
  .mobile-page[data-mobile-page="3"] .subitem-card,
  .mobile-page-shell .thumb-card,
  .mobile-page-shell .gallery-card,
  .mobile-page-shell .photo-group,
  .mobile-page-shell .report-panel,
  .mobile-page-shell .stat-list-item {
    padding: 2px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .tabrow,
  .mobile-page[data-mobile-page="2"] .tabrow button,
  .mobile-page[data-mobile-page="3"] .tabrow,
  .mobile-page[data-mobile-page="3"] .tabrow button,
  .mobile-page-shell .tabrow,
  .mobile-page-shell .tabrow button {
    gap: 1px !important;
    margin: 0 !important;
    padding: 1px 3px !important;
    min-height: 18px !important;
    font-size: 0.5rem !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-actions,
  .mobile-page[data-mobile-page="3"] .photo-actions,
  .mobile-page[data-mobile-page="3"] .voice-actions,
  .mobile-page-shell .report-actions,
  .mobile-page-shell .thumb-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  .mobile-page-shell .report-actions #export-pdf {
    display: inline-flex !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="2"] .filter-card,
  .mobile-page[data-mobile-page="2"] .filter-card .section-heading,
  .mobile-page[data-mobile-page="2"] .filter-card .heading-inline,
  .mobile-page[data-mobile-page="2"] .filter-card .filter-grid,
  .mobile-page[data-mobile-page="2"] .filter-card .filter-optional-fields,
  .mobile-page[data-mobile-page="2"] .filter-card .search-input-wrap {
    gap: 1px !important;
    margin: 0 !important;
    padding: 2px !important;
    border-radius: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .section-heading h2,
  .mobile-page[data-mobile-page="2"] .filter-card .heading-inline h2 {
    font-size: 0.56rem !important;
    line-height: 0.9 !important;
    margin: 0 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .section-heading p,
  .mobile-page[data-mobile-page="2"] .filter-card .heading-inline p,
  .mobile-page[data-mobile-page="2"] .filter-card label,
  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-field,
  .mobile-page[data-mobile-page="2"] .filter-card .inline-select-field {
    font-size: 0.5rem !important;
    line-height: 0.9 !important;
    margin: 0 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card #mobile-filter-toggle,
  .mobile-page[data-mobile-page="2"] .filter-card #reset-filters,
  .mobile-page[data-mobile-page="2"] .filter-card .ghost-btn,
  .mobile-page[data-mobile-page="2"] .filter-card .primary-btn {
    min-height: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-help-row .section-help-btn.hero-help-btn {
    position: static !important;
    z-index: 3 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    background: #0f2a4a !important;
    color: #ffcc00 !important;
    border-color: #0f2a4a !important;
    transform: none !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card input,
  .mobile-page[data-mobile-page="2"] .filter-card select,
  .mobile-page[data-mobile-page="2"] .filter-card textarea,
  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-trigger,
  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-option {
    min-height: 20px !important;
    height: 20px !important;
    padding: 1px 4px !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-menu {
    padding: 1px !important;
    border-radius: 0 !important;
    max-height: 140px !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-toolbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-title {
    white-space: nowrap !important;
    margin-right: 2px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-actions {
    display: grid !important;
    grid-template-columns: 46px !important;
    align-items: stretch !important;
    gap: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    justify-content: end !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-toolbar {
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    gap: 6px !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-title {
    font-size: 0.84rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-action {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-search-secondary-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1px !important;
    margin: 0 !important;
    padding: 2px !important;
    min-width: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card #reset-filters.filter-search-icon-action {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    height: 46px !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card #filter-query {
    min-height: 80px !important;
    height: 80px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .filter-optional-fields {
    row-gap: 1px !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card.mobile-filters-open .filter-optional-fields {
    overflow: visible !important;
    max-height: 900px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .detail-form {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .inline-select-field,
  .mobile-page[data-mobile-page="3"] .inline-voice-field,
  .mobile-page[data-mobile-page="3"] .detail-form label {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 1px !important;
    margin: 0 !important;
    font-size: 0.52rem !important;
    line-height: 0.9 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="3"] .field-label-text,
  .mobile-page[data-mobile-page="3"] .inline-select-field > span,
  .mobile-page[data-mobile-page="3"] .inline-select-field > label,
  .mobile-page[data-mobile-page="3"] .inline-select-field {
    font-size: 0.52rem !important;
    line-height: 0.9 !important;
    font-weight: 400 !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .mobile-detail-select {
    position: static !important;
    z-index: auto !important;
  }

  .mobile-page[data-mobile-page="3"] .mobile-detail-select-trigger {
    min-height: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .mobile-detail-select-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    max-height: 110px !important;
    padding: 1px !important;
    margin-top: 1px !important;
    border-radius: 0 !important;
    overflow: auto !important;
    display: none !important;
  }

  .mobile-page[data-mobile-page="3"] .mobile-detail-select.open .mobile-detail-select-menu {
    display: block !important;
  }

  .mobile-page[data-mobile-page="3"] .mobile-detail-select-option {
    min-height: 16px !important;
    padding: 0 4px !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
  }
}


@media (max-width: 760px) {
  /* Readable compact recovery */
  .mobile-page[data-mobile-page="2"] .item-row,
  .mobile-page[data-mobile-page="2"] .group-card,
  .mobile-page[data-mobile-page="2"] .explorer-card,
  .mobile-page[data-mobile-page="2"] .filter-card {
    padding: 4px !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row strong,
  .mobile-page[data-mobile-page="2"] .item-row p,
  .mobile-page[data-mobile-page="2"] .item-row-id,
  .mobile-page[data-mobile-page="2"] .item-row-subtext,
  .mobile-page[data-mobile-page="2"] .group-card strong,
  .mobile-page[data-mobile-page="2"] .group-card span,
  .mobile-page[data-mobile-page="2"] .section-heading h2,
  .mobile-page[data-mobile-page="2"] .section-heading p,
  .mobile-page[data-mobile-page="2"] .heading-inline p {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    color: #111111 !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row strong,
  .mobile-page[data-mobile-page="2"] .group-card strong,
  .mobile-page[data-mobile-page="2"] .section-heading h2 {
    font-weight: 500 !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row .badge,
  .mobile-page[data-mobile-page="2"] .item-row .pill,
  .mobile-page[data-mobile-page="2"] .item-row .project-status,
  .mobile-page[data-mobile-page="2"] .item-row .search-best-match {
    min-height: 18px !important;
    height: 18px !important;
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
    color: #111111 !important;
  }

  .mobile-page[data-mobile-page="2"] .primary-btn,
  .mobile-page[data-mobile-page="2"] .ghost-btn,
  .mobile-page[data-mobile-page="2"] .upload-btn,
  .mobile-page[data-mobile-page="2"] .pill,
  .mobile-page[data-mobile-page="2"] .tabrow button {
    min-height: 22px !important;
    height: 22px !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    padding: 0 6px !important;
  }

  .mobile-page[data-mobile-page="2"] input,
  .mobile-page[data-mobile-page="2"] select,
  .mobile-page[data-mobile-page="2"] textarea,
  .mobile-page[data-mobile-page="2"] .mobile-filter-select-trigger,
  .mobile-page[data-mobile-page="2"] .mobile-filter-select-option {
    min-height: 22px !important;
    height: 22px !important;
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    padding: 0 6px !important;
    color: #111111 !important;
  }
}

@media (max-width: 760px) {
  /* Emergency readability reset for page 3 (Katalog) */
  .mobile-page[data-mobile-page="2"] * {
    color: #111111 !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="2"] h2,
  .mobile-page[data-mobile-page="2"] h3,
  .mobile-page[data-mobile-page="2"] strong,
  .mobile-page[data-mobile-page="2"] .item-row strong,
  .mobile-page[data-mobile-page="2"] .group-card strong,
  .mobile-page[data-mobile-page="2"] .section-heading h2 {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  .mobile-page[data-mobile-page="2"] p,
  .mobile-page[data-mobile-page="2"] span,
  .mobile-page[data-mobile-page="2"] small,
  .mobile-page[data-mobile-page="2"] label,
  .mobile-page[data-mobile-page="2"] .item-row p,
  .mobile-page[data-mobile-page="2"] .item-row-id,
  .mobile-page[data-mobile-page="2"] .item-row-subtext,
  .mobile-page[data-mobile-page="2"] .section-heading p,
  .mobile-page[data-mobile-page="2"] .heading-inline p {
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row,
  .mobile-page[data-mobile-page="2"] .group-card,
  .mobile-page[data-mobile-page="2"] .explorer-card,
  .mobile-page[data-mobile-page="2"] .filter-card {
    padding: 5px !important;
    min-height: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row strong,
  .mobile-page[data-mobile-page="2"] .item-row p,
  .mobile-page[data-mobile-page="2"] .item-row-id,
  .mobile-page[data-mobile-page="2"] .item-row-subtext {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .mobile-page[data-mobile-page="2"] .badge,
  .mobile-page[data-mobile-page="2"] .pill,
  .mobile-page[data-mobile-page="2"] .project-status,
  .mobile-page[data-mobile-page="2"] .search-best-match {
    min-height: 20px !important;
    height: auto !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    padding: 1px 6px !important;
  }

  .mobile-page[data-mobile-page="2"] .primary-btn,
  .mobile-page[data-mobile-page="2"] .ghost-btn,
  .mobile-page[data-mobile-page="2"] .upload-btn,
  .mobile-page[data-mobile-page="2"] .tabrow button,
  .mobile-page[data-mobile-page="2"] input,
  .mobile-page[data-mobile-page="2"] select,
  .mobile-page[data-mobile-page="2"] textarea,
  .mobile-page[data-mobile-page="2"] .mobile-filter-select-trigger,
  .mobile-page[data-mobile-page="2"] .mobile-filter-select-option {
    min-height: 24px !important;
    height: auto !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    padding: 2px 6px !important;
  }
}

@media (max-width: 760px) {
  /* Hard reset for unreadable result rows on page 3 */
  .mobile-page[data-mobile-page="2"] .item-row,
  .mobile-page[data-mobile-page="2"] button.item-row,
  .mobile-page[data-mobile-page="2"] .item-list .item-row {
    display: block !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 6px 8px !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row-top,
  .mobile-page[data-mobile-page="2"] .item-row-badges,
  .mobile-page[data-mobile-page="2"] .badge-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row strong {
    display: block !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #111111 !important;
    opacity: 1 !important;
    white-space: normal !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row p,
  .mobile-page[data-mobile-page="2"] .item-row-id,
  .mobile-page[data-mobile-page="2"] .item-row-subtext {
    display: block !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    color: #111111 !important;
    opacity: 1 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row .badge,
  .mobile-page[data-mobile-page="2"] .item-row .pill,
  .mobile-page[data-mobile-page="2"] .item-row .project-status,
  .mobile-page[data-mobile-page="2"] .item-row .search-best-match {
    min-height: 20px !important;
    height: auto !important;
    padding: 1px 6px !important;
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    color: #111111 !important;
    opacity: 1 !important;
  }
}

@media (max-width: 760px) {
  /* Override global compact button sizing for result rows */
  .app-shell button.item-row,
  .mobile-page[data-mobile-page="2"] button.item-row,
  .mobile-page[data-mobile-page="2"] .item-list button.item-row {
    min-height: 56px !important;
    height: auto !important;
    padding: 7px 8px !important;
    font-size: inherit !important;
    line-height: normal !important;
    white-space: normal !important;
  }

  .mobile-page[data-mobile-page="2"] .item-list {
    display: grid !important;
    gap: 4px !important;
  }
}

@media (max-width: 760px) {
  /* Definitive readability reset for page 3 (Katalog) */
  .mobile-page[data-mobile-page="2"],
  .mobile-page[data-mobile-page="2"] .explorer-card,
  .mobile-page[data-mobile-page="2"] .item-list,
  .mobile-page[data-mobile-page="2"] .item-row {
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #111111 !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="2"] .item-list .item-row,
  .mobile-page[data-mobile-page="2"] .item-list button.item-row {
    display: block !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 8px 10px !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row-top,
  .mobile-page[data-mobile-page="2"] .item-row-badges,
  .mobile-page[data-mobile-page="2"] .badge-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row strong {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #111111 !important;
    margin: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row p,
  .mobile-page[data-mobile-page="2"] .item-row-id,
  .mobile-page[data-mobile-page="2"] .item-row-subtext {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    color: #111111 !important;
    margin: 0 !important;
    opacity: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row .badge,
  .mobile-page[data-mobile-page="2"] .item-row .pill,
  .mobile-page[data-mobile-page="2"] .item-row .project-status,
  .mobile-page[data-mobile-page="2"] .item-row .search-best-match {
    min-height: 22px !important;
    height: auto !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #111111 !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="2"] .explorer-card .section-heading h3,
  .mobile-page[data-mobile-page="2"] .explorer-card .section-heading p,
  .mobile-page[data-mobile-page="2"] #results-count,
  .mobile-page[data-mobile-page="2"] #active-group-label {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 760px) {
  /* Stable fallback: use native selects in the page 3 filter panel */
  .mobile-page[data-mobile-page="2"] .filter-card label > select {
    display: block !important;
    width: 100% !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    min-height: 28px !important;
    height: auto !important;
    padding: 2px 6px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    border-radius: 0 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .field-note-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-title {
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-actions .primary-btn,
  .mobile-page[data-mobile-page="3"] .field-note-actions .ghost-btn {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 4px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-actions .note-voice-btn,
  .mobile-page[data-mobile-page="3"] .subitem-note-actions .note-voice-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-title {
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-actions .primary-btn,
  .mobile-page[data-mobile-page="3"] .subitem-note-actions .ghost-btn {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 4px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-name-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-card-top {
    margin-bottom: 2px !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid {
    margin-top: 0 !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .detail-form,
  .mobile-page[data-mobile-page="3"] .subitem-grid {
    row-gap: 4px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form .inline-select-field,
  .mobile-page[data-mobile-page="3"] .subitem-grid .inline-select-field {
    margin-bottom: 2px !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="1"] .meta-card .form-grid > label,
  .mobile-page[data-mobile-page="1"] .meta-card .inline-voice-field,
  .mobile-page[data-mobile-page="1"] .meta-card .inline-select-field,
  .mobile-page[data-mobile-page="1"] .meta-card .field-label-text {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="1"] .mobile-date-field {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field > .field-voice-wrap {
    grid-column: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .mobile-date-field .mobile-date-picker-trigger {
    width: 100% !important;
    justify-content: flex-start !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 1px 5px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
}

@media (max-width: 760px) {
  /* Mobile UI palette override */
  body {
    background: linear-gradient(165deg, #0a1d3a 0%, #102a4d 52%, #0d2343 100%) !important;
  }

  .blueprint-grid {
    opacity: 0.1 !important;
    background-image:
      linear-gradient(rgba(226, 234, 245, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(226, 234, 245, 0.06) 1px, transparent 1px) !important;
  }

  .mobile-page,
  .mobile-page .card,
  .mobile-page .hero,
  .mobile-page .explorer-card,
  .mobile-page .detail-card,
  .mobile-page .meta-card,
  .mobile-page .project-manager-card,
  .mobile-page .filter-card,
  .mobile-page .report-panel,
  .mobile-page .info-panel,
  .mobile-page .group-card,
  .mobile-page .item-row {
    background: linear-gradient(180deg, rgba(12, 34, 63, 0.96), rgba(10, 27, 50, 0.94)) !important;
    border-color: rgba(205, 216, 230, 0.3) !important;
  }

  .mobile-page,
  .mobile-page h1,
  .mobile-page h2,
  .mobile-page h3,
  .mobile-page strong,
  .mobile-page p,
  .mobile-page span,
  .mobile-page small,
  .mobile-page label,
  .mobile-page .muted,
  .mobile-page .note,
  .mobile-page .item-row-id,
  .mobile-page .item-row-subtext {
    color: #e7edf5 !important;
  }

  .mobile-page .primary-btn,
  .mobile-page .ghost-btn,
  .mobile-page .upload-btn,
  .mobile-page .pill,
  .mobile-page .tabrow button,
  .mobile-page .mobile-flow-nav button,
  .mobile-page .mobile-filter-select-trigger,
  .mobile-page .mobile-detail-select-trigger,
  .mobile-page .mobile-date-picker-trigger {
    background: #d7dce3 !important;
    border: 1px solid #c2c9d3 !important;
    color: #1b2430 !important;
  }

  .mobile-page input,
  .mobile-page select,
  .mobile-page textarea,
  .mobile-page option,
  .mobile-page .mobile-filter-select-menu,
  .mobile-page .mobile-detail-select-menu,
  .mobile-page .mobile-filter-select-option,
  .mobile-page .mobile-detail-select-option {
    background: #f6f8fb !important;
    border-color: #d6dde7 !important;
    color: #000000 !important;
  }

  .mobile-page input::placeholder,
  .mobile-page textarea::placeholder {
    color: #4a5563 !important;
  }

  .mobile-page input:focus,
  .mobile-page select:focus,
  .mobile-page textarea:focus {
    border-color: #b9c4d2 !important;
    box-shadow: 0 0 0 3px rgba(210, 220, 232, 0.4) !important;
  }
}

@media (max-width: 760px) {
  /* Final readability fix with stronger specificity */
  .mobile-page[data-mobile-page="1"] .card,
  .mobile-page[data-mobile-page="1"] .stat-card,
  .mobile-page[data-mobile-page="1"] .metric-card,
  .mobile-page[data-mobile-page="1"] .info-panel,
  .mobile-page[data-mobile-page="1"] .report-panel,
  .mobile-page[data-mobile-page="2"] .card,
  .mobile-page[data-mobile-page="2"] .group-card,
  .mobile-page[data-mobile-page="2"] .item-row,
  .mobile-page[data-mobile-page="2"] .explorer-card,
  .mobile-page[data-mobile-page="2"] .filter-card,
  .mobile-page[data-mobile-page="3"] .card,
  .mobile-page[data-mobile-page="3"] .detail-card,
  .mobile-page[data-mobile-page="3"] .explorer-card,
  .mobile-page[data-mobile-page="4"] .card,
  .mobile-page[data-mobile-page="4"] .detail-card,
  .mobile-page[data-mobile-page="4"] .subitem-card {
    background: linear-gradient(180deg, rgba(12, 34, 63, 0.98), rgba(10, 27, 50, 0.96)) !important;
    border-color: rgba(205, 216, 230, 0.3) !important;
  }

  .mobile-page[data-mobile-page="1"] *,
  .mobile-page[data-mobile-page="2"] *,
  .mobile-page[data-mobile-page="3"] *,
  .mobile-page[data-mobile-page="4"] * {
    color: #e7edf5 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="1"] input,
  .mobile-page[data-mobile-page="1"] select,
  .mobile-page[data-mobile-page="1"] textarea,
  .mobile-page[data-mobile-page="1"] option,
  .mobile-page[data-mobile-page="2"] input,
  .mobile-page[data-mobile-page="2"] select,
  .mobile-page[data-mobile-page="2"] textarea,
  .mobile-page[data-mobile-page="2"] option,
  .mobile-page[data-mobile-page="3"] input,
  .mobile-page[data-mobile-page="3"] select,
  .mobile-page[data-mobile-page="3"] textarea,
  .mobile-page[data-mobile-page="3"] option,
  .mobile-page[data-mobile-page="4"] input,
  .mobile-page[data-mobile-page="4"] select,
  .mobile-page[data-mobile-page="4"] textarea,
  .mobile-page[data-mobile-page="4"] option,
  .mobile-page[data-mobile-page="1"] .mobile-filter-select-option,
  .mobile-page[data-mobile-page="2"] .mobile-filter-select-option,
  .mobile-page[data-mobile-page="3"] .mobile-detail-select-option,
  .mobile-page[data-mobile-page="4"] .mobile-detail-select-option {
    background: #f6f8fb !important;
    color: #000000 !important;
    border-color: #d6dde7 !important;
  }

  .mobile-page[data-mobile-page="1"] .primary-btn,
  .mobile-page[data-mobile-page="1"] .ghost-btn,
  .mobile-page[data-mobile-page="1"] .upload-btn,
  .mobile-page[data-mobile-page="1"] .tabrow button,
  .mobile-page[data-mobile-page="2"] .primary-btn,
  .mobile-page[data-mobile-page="2"] .ghost-btn,
  .mobile-page[data-mobile-page="2"] .upload-btn,
  .mobile-page[data-mobile-page="2"] .tabrow button,
  .mobile-page[data-mobile-page="3"] .primary-btn,
  .mobile-page[data-mobile-page="3"] .ghost-btn,
  .mobile-page[data-mobile-page="3"] .upload-btn,
  .mobile-page[data-mobile-page="3"] .tabrow button,
  .mobile-page[data-mobile-page="4"] .primary-btn,
  .mobile-page[data-mobile-page="4"] .ghost-btn,
  .mobile-page[data-mobile-page="4"] .upload-btn,
  .mobile-page[data-mobile-page="4"] .tabrow button {
    background: #d7dce3 !important;
    color: #1b2430 !important;
    border-color: #c2c9d3 !important;
  }

  .mobile-page[data-mobile-page="1"] .badge,
  .mobile-page[data-mobile-page="1"] .pill,
  .mobile-page[data-mobile-page="1"] .project-status,
  .mobile-page[data-mobile-page="2"] .badge,
  .mobile-page[data-mobile-page="2"] .pill,
  .mobile-page[data-mobile-page="2"] .project-status,
  .mobile-page[data-mobile-page="3"] .badge,
  .mobile-page[data-mobile-page="3"] .pill,
  .mobile-page[data-mobile-page="3"] .project-status,
  .mobile-page[data-mobile-page="4"] .badge,
  .mobile-page[data-mobile-page="4"] .pill,
  .mobile-page[data-mobile-page="4"] .project-status {
    background: #e7ebf0 !important;
    color: #1f2a36 !important;
    border-color: #c8d0da !important;
  }
}

@media (max-width: 760px) {
  /* Page 2 hard readability reset */
  .mobile-page[data-mobile-page="2"] {
    font-size: 14px !important;
  }

  .mobile-page[data-mobile-page="2"] h2,
  .mobile-page[data-mobile-page="2"] h3,
  .mobile-page[data-mobile-page="2"] strong,
  .mobile-page[data-mobile-page="2"] .section-heading h2,
  .mobile-page[data-mobile-page="2"] .section-heading h3,
  .mobile-page[data-mobile-page="2"] .item-row strong,
  .mobile-page[data-mobile-page="2"] .group-card strong {
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #f0f5fb !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="2"] p,
  .mobile-page[data-mobile-page="2"] span,
  .mobile-page[data-mobile-page="2"] small,
  .mobile-page[data-mobile-page="2"] label,
  .mobile-page[data-mobile-page="2"] .muted,
  .mobile-page[data-mobile-page="2"] .note,
  .mobile-page[data-mobile-page="2"] .section-heading p,
  .mobile-page[data-mobile-page="2"] .heading-inline p,
  .mobile-page[data-mobile-page="2"] .item-row p,
  .mobile-page[data-mobile-page="2"] .item-row-id,
  .mobile-page[data-mobile-page="2"] .item-row-subtext {
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: #e3ebf5 !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row,
  .mobile-page[data-mobile-page="2"] .group-card,
  .mobile-page[data-mobile-page="2"] .explorer-card,
  .mobile-page[data-mobile-page="2"] .filter-card {
    padding: 8px !important;
  }

  .mobile-page[data-mobile-page="2"] .item-row .badge,
  .mobile-page[data-mobile-page="2"] .item-row .pill,
  .mobile-page[data-mobile-page="2"] .item-row .project-status,
  .mobile-page[data-mobile-page="2"] .item-row .search-best-match,
  .mobile-page[data-mobile-page="2"] .badge,
  .mobile-page[data-mobile-page="2"] .pill {
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
    background: #e8edf3 !important;
    color: #1b2430 !important;
    border-color: #c6ced8 !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="2"] .primary-btn,
  .mobile-page[data-mobile-page="2"] .ghost-btn,
  .mobile-page[data-mobile-page="2"] .upload-btn,
  .mobile-page[data-mobile-page="2"] .tabrow button {
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    min-height: 28px !important;
    padding: 4px 10px !important;
  }
}

@media (max-width: 760px) {
  /* Page 4 dropdown readability + force open downward */
  .mobile-page[data-mobile-page="4"] .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select-trigger,
  .mobile-page[data-mobile-page="4"] select {
    background: #f6f8fb !important;
    color: #1a1a1a !important;
    border-color: #cfd7e2 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="4"] .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select-menu {
    background: #f7f9fc !important;
    border: 1px solid #cfd7e2 !important;
    color: #000000 !important;
  }

  .mobile-page[data-mobile-page="4"] .mobile-detail-select-option,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select-option,
  .mobile-page[data-mobile-page="4"] option {
    background: #f7f9fc !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
  }

  .mobile-page[data-mobile-page="4"] .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="4"] .mobile-detail-select-menu *,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select-menu * {
    color: #111111 !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="4"] .mobile-detail-select-option.active,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select-option.active {
    background: #e6ebf2 !important;
    color: #111111 !important;
    font-weight: 500 !important;
  }

  .mobile-page[data-mobile-page="4"] .mobile-detail-select.open .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="4"] .mobile-detail-select.open-up .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="4"] .mobile-detail-select.open-down .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select.open .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select.open-up .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select.open-down .mobile-filter-select-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
  }

  .mobile-page[data-mobile-page="4"] .mobile-detail-select.open-up,
  .mobile-page[data-mobile-page="4"] .mobile-filter-select.open-up {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 760px) {
  /* Global hard fix: dropdown option text must stay dark */
  .mobile-page .mobile-detail-select-menu .mobile-detail-select-option,
  .mobile-page .mobile-filter-select-menu .mobile-filter-select-option,
  .mobile-page button.mobile-detail-select-option,
  .mobile-page button.mobile-filter-select-option {
    color: #111111 !important;
    background: #f6f8fb !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .mobile-page .mobile-detail-select-menu .mobile-detail-select-option *,
  .mobile-page .mobile-filter-select-menu .mobile-filter-select-option * {
    color: #111111 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .mobile-page .mobile-detail-select-option.active,
  .mobile-page .mobile-filter-select-option.active {
    color: #111111 !important;
    background: #e6ebf2 !important;
  }
}

@media (max-width: 760px) {
  /* Page 2: always open dropdown downward */
  .mobile-page[data-mobile-page="2"] .mobile-detail-select {
    position: relative !important;
  }

  .mobile-page[data-mobile-page="2"] .mobile-detail-select-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 120 !important;
  }

  .mobile-page[data-mobile-page="2"] .mobile-detail-select.open .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="2"] .mobile-detail-select.open-up .mobile-detail-select-menu,
  .mobile-page[data-mobile-page="2"] .mobile-detail-select.open-down .mobile-detail-select-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
  }
}

@media (max-width: 760px) {
  /* Global safeguard: never open custom mobile dropdown upward */
  .mobile-page .mobile-detail-select.open .mobile-detail-select-menu,
  .mobile-page .mobile-detail-select.open-up .mobile-detail-select-menu,
  .mobile-page .mobile-detail-select.open-down .mobile-detail-select-menu,
  .mobile-page .mobile-filter-select.open .mobile-filter-select-menu,
  .mobile-page .mobile-filter-select.open-up .mobile-filter-select-menu,
  .mobile-page .mobile-filter-select.open-down .mobile-filter-select-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
  }
}

@media (max-width: 760px) {
  /* Katalog readability: use the same dark-blue surface */
  .mobile-page[data-mobile-page="2"] .group-card,
  .mobile-page[data-mobile-page="2"] .item-row,
  .mobile-page[data-mobile-page="2"] .explorer-card,
  .mobile-page[data-mobile-page="2"] .filter-card,
  .mobile-page[data-mobile-page="3"] .group-card,
  .mobile-page[data-mobile-page="3"] .item-row,
  .mobile-page[data-mobile-page="3"] .explorer-card,
  .mobile-page[data-mobile-page="3"] .filter-card {
    background: linear-gradient(180deg, rgba(12, 34, 63, 0.98), rgba(10, 27, 50, 0.96)) !important;
    border-color: rgba(205, 216, 230, 0.32) !important;
  }

  .mobile-page[data-mobile-page="2"] .group-card *,
  .mobile-page[data-mobile-page="2"] .item-row *,
  .mobile-page[data-mobile-page="3"] .group-card *,
  .mobile-page[data-mobile-page="3"] .item-row * {
    color: #eef3fa !important;
    opacity: 1 !important;
  }
}

@media (max-width: 760px) {
  /* Absolute fallback for catalog cards regardless of page mapping */
  .app-shell button.group-card,
  .mobile-page button.group-card,
  .mobile-page-shell button.group-card {
    background: linear-gradient(180deg, rgba(12, 34, 63, 0.98), rgba(10, 27, 50, 0.96)) !important;
    border-color: rgba(205, 216, 230, 0.32) !important;
    color: #eef3fa !important;
  }

  .app-shell button.group-card *,
  .mobile-page button.group-card *,
  .mobile-page-shell button.group-card * {
    color: #eef3fa !important;
    opacity: 1 !important;
  }

  .app-shell button.group-card.active,
  .mobile-page button.group-card.active,
  .mobile-page-shell button.group-card.active {
    background: linear-gradient(180deg, rgba(17, 45, 81, 0.99), rgba(11, 32, 60, 0.97)) !important;
  }
}

/* Always-on fallback for Katalog cards (independent of viewport media query) */
.mobile-page[data-mobile-page="2"] .group-card,
.mobile-page[data-mobile-page="2"] button.group-card,
.mobile-page[data-mobile-page="2"] .item-row,
.mobile-page[data-mobile-page="2"] .explorer-card,
.mobile-page[data-mobile-page="2"] .filter-card,
.mobile-page[data-mobile-page="3"] .group-card,
.mobile-page[data-mobile-page="3"] button.group-card {
  background: linear-gradient(180deg, rgba(12, 34, 63, 0.98), rgba(10, 27, 50, 0.96)) !important;
  border-color: rgba(205, 216, 230, 0.32) !important;
}

.mobile-page[data-mobile-page="2"] .group-card *,
.mobile-page[data-mobile-page="2"] .item-row *,
.mobile-page[data-mobile-page="3"] .group-card * {
  color: #eef3fa !important;
  opacity: 1 !important;
}

/* Katalog text contrast fix: light text on dark-blue surfaces */
.mobile-page[data-mobile-page="2"] .filter-card,
.mobile-page[data-mobile-page="2"] .explorer-card,
.mobile-page[data-mobile-page="2"] .group-card,
.mobile-page[data-mobile-page="2"] .item-row {
  color: #eef3fa !important;
}

.mobile-page[data-mobile-page="2"] .filter-card span,
.mobile-page[data-mobile-page="2"] .filter-card p,
.mobile-page[data-mobile-page="2"] .filter-card strong,
.mobile-page[data-mobile-page="2"] .explorer-card span,
.mobile-page[data-mobile-page="2"] .explorer-card p,
.mobile-page[data-mobile-page="2"] .explorer-card strong,
.mobile-page[data-mobile-page="2"] .group-card span,
.mobile-page[data-mobile-page="2"] .group-card p,
.mobile-page[data-mobile-page="2"] .group-card strong,
.mobile-page[data-mobile-page="2"] .item-row span,
.mobile-page[data-mobile-page="2"] .item-row p,
.mobile-page[data-mobile-page="2"] .item-row strong {
  color: #eef3fa !important;
}

/* Keep dark text only in light dropdown/list options */
.mobile-page[data-mobile-page="2"] .mobile-detail-select-option,
.mobile-page[data-mobile-page="2"] .mobile-filter-select-option,
.mobile-page[data-mobile-page="2"] .mobile-detail-select-option *,
.mobile-page[data-mobile-page="2"] .mobile-filter-select-option * {
  color: #111111 !important;
}

/* Katalog: active group label must stay readable */
.mobile-page[data-mobile-page="2"] #active-group-label.pill,
.mobile-page[data-mobile-page="3"] #active-group-label.pill {
  background: #dfe6ef !important;
  color: #1a2430 !important;
  border-color: #bcc8d6 !important;
}

@media (max-width: 760px) {
  /* Katalog combobox should match page 2 custom dropdown design */
  .mobile-page[data-mobile-page="2"] .filter-card label > select {
    display: none !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select {
    display: block !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-trigger,
  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-option {
    min-height: 24px !important;
    height: auto !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    z-index: 140 !important;
    max-height: 180px !important;
    padding: 4px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 760px) {
  /* Locked parity: Katalog combobox mirrors page 2 styling */
  .mobile-page[data-mobile-page="2"] .filter-card label > select,
  .mobile-page[data-mobile-page="3"] .filter-card label > select {
    display: none !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select,
  .mobile-page[data-mobile-page="3"] .filter-card .mobile-filter-select {
    display: block !important;
    position: relative !important;
    z-index: 60 !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-trigger,
  .mobile-page[data-mobile-page="3"] .filter-card .mobile-filter-select-trigger {
    width: 100% !important;
    min-height: 24px !important;
    height: auto !important;
    padding: 3px 8px !important;
    border-radius: 0 !important;
    background: #f6f8fb !important;
    color: #111111 !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="3"] .filter-card .mobile-filter-select-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    z-index: 180 !important;
    max-height: 150px !important;
    overflow: auto !important;
    padding: 4px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    background: #f6f8fb !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select.open .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select.open-up .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select.open-down .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="3"] .filter-card .mobile-filter-select.open .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="3"] .filter-card .mobile-filter-select.open-up .mobile-filter-select-menu,
  .mobile-page[data-mobile-page="3"] .filter-card .mobile-filter-select.open-down .mobile-filter-select-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    display: grid !important;
    gap: 2px !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-option,
  .mobile-page[data-mobile-page="3"] .filter-card .mobile-filter-select-option {
    min-height: 24px !important;
    width: 100% !important;
    padding: 3px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  .mobile-page[data-mobile-page="2"] .filter-card .mobile-filter-select-option.active,
  .mobile-page[data-mobile-page="3"] .filter-card .mobile-filter-select-option.active {
    background: #b9dced !important;
    color: #111111 !important;
  }
}

@media (max-width: 760px) {
  /* Enforce custom filter combobox (hide native select by id) */
  #filter-cjelina,
  #filter-status,
  #filter-radovi,
  #filter-razina {
    display: none !important;
  }

  .mobile-page .mobile-filter-select[data-select-id="filter-cjelina"],
  .mobile-page .mobile-filter-select[data-select-id="filter-status"],
  .mobile-page .mobile-filter-select[data-select-id="filter-radovi"],
  .mobile-page .mobile-filter-select[data-select-id="filter-razina"] {
    display: block !important;
    position: relative !important;
    z-index: 70 !important;
  }

  .mobile-page .mobile-filter-select[data-select-id="filter-cjelina"] .mobile-filter-select-trigger,
  .mobile-page .mobile-filter-select[data-select-id="filter-status"] .mobile-filter-select-trigger,
  .mobile-page .mobile-filter-select[data-select-id="filter-radovi"] .mobile-filter-select-trigger,
  .mobile-page .mobile-filter-select[data-select-id="filter-razina"] .mobile-filter-select-trigger {
    min-height: 24px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 0 !important;
    background: #f6f8fb !important;
    color: #111111 !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
  }

  .mobile-page .mobile-filter-select[data-select-id="filter-cjelina"] .mobile-filter-select-menu,
  .mobile-page .mobile-filter-select[data-select-id="filter-status"] .mobile-filter-select-menu,
  .mobile-page .mobile-filter-select[data-select-id="filter-radovi"] .mobile-filter-select-menu,
  .mobile-page .mobile-filter-select[data-select-id="filter-razina"] .mobile-filter-select-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    max-height: 150px !important;
    padding: 4px !important;
    border-radius: 0 !important;
    background: #f6f8fb !important;
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    z-index: 200 !important;
  }

  .mobile-page .mobile-filter-select[data-select-id="filter-cjelina"] .mobile-filter-select-option,
  .mobile-page .mobile-filter-select[data-select-id="filter-status"] .mobile-filter-select-option,
  .mobile-page .mobile-filter-select[data-select-id="filter-radovi"] .mobile-filter-select-option,
  .mobile-page .mobile-filter-select[data-select-id="filter-razina"] .mobile-filter-select-option {
    min-height: 24px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 0 !important;
    color: #111111 !important;
  }
}

@media (max-width: 760px) {
  /* Exact parity with page 2 compact filter combobox */
  .mobile-page[data-mobile-page="2"] .filter-card,
  .mobile-page[data-mobile-page="3"] .filter-card,
  .mobile-page[data-mobile-page="2"] .tabs,
  .mobile-page[data-mobile-page="3"] .tabs,
  .mobile-page[data-mobile-page="2"] .tab-pane,
  .mobile-page[data-mobile-page="3"] .tab-pane {
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .mobile-page .mobile-filter-select[data-select-id="filter-cjelina"] .mobile-filter-select-trigger,
  .mobile-page .mobile-filter-select[data-select-id="filter-status"] .mobile-filter-select-trigger,
  .mobile-page .mobile-filter-select[data-select-id="filter-radovi"] .mobile-filter-select-trigger,
  .mobile-page .mobile-filter-select[data-select-id="filter-razina"] .mobile-filter-select-trigger,
  .mobile-page .mobile-filter-select[data-select-id="filter-cjelina"] .mobile-filter-select-option,
  .mobile-page .mobile-filter-select[data-select-id="filter-status"] .mobile-filter-select-option,
  .mobile-page .mobile-filter-select[data-select-id="filter-radovi"] .mobile-filter-select-option,
  .mobile-page .mobile-filter-select[data-select-id="filter-razina"] .mobile-filter-select-option {
    min-height: 20px !important;
    height: 20px !important;
    padding: 1px 4px !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .mobile-page .mobile-filter-select[data-select-id="filter-cjelina"] .mobile-filter-select-menu,
  .mobile-page .mobile-filter-select[data-select-id="filter-status"] .mobile-filter-select-menu,
  .mobile-page .mobile-filter-select[data-select-id="filter-radovi"] .mobile-filter-select-menu,
  .mobile-page .mobile-filter-select[data-select-id="filter-razina"] .mobile-filter-select-menu {
    top: calc(100% + 1px) !important;
    bottom: auto !important;
    max-height: 140px !important;
    padding: 1px !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    position: absolute !important;
  }

  .mobile-page .mobile-filter-select[data-select-id="filter-cjelina"],
  .mobile-page .mobile-filter-select[data-select-id="filter-status"],
  .mobile-page .mobile-filter-select[data-select-id="filter-radovi"],
  .mobile-page .mobile-filter-select[data-select-id="filter-razina"] {
    position: relative !important;
    z-index: 500 !important;
  }
}

@media (max-width: 760px) {
  /* Katalog (3. stranica): vizualno sakrij Status pregleda i Vrsta radova */
  .mobile-page[data-mobile-page="2"] #mobile-filter-panel > label:nth-of-type(2),
  .mobile-page[data-mobile-page="2"] #mobile-filter-panel > label:nth-of-type(3),
  .mobile-page[data-mobile-page="3"] #mobile-filter-panel > label:nth-of-type(2),
  .mobile-page[data-mobile-page="3"] #mobile-filter-panel > label:nth-of-type(3) {
    display: none !important;
  }

  .mobile-page[data-mobile-page="2"] .mobile-filter-select[data-select-id="filter-status"],
  .mobile-page[data-mobile-page="2"] .mobile-filter-select[data-select-id="filter-radovi"],
  .mobile-page[data-mobile-page="3"] .mobile-filter-select[data-select-id="filter-status"],
  .mobile-page[data-mobile-page="3"] .mobile-filter-select[data-select-id="filter-radovi"] {
    display: none !important;
  }
}

@media (max-width: 760px) {
  /* Katalog hit highlight readability + subtle blink */
  .mobile-page[data-mobile-page="2"] mark.search-hit,
  .mobile-page[data-mobile-page="3"] mark.search-hit {
    background: #fff2a8 !important;
    color: #111111 !important;
    padding: 0 3px !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    animation: search-hit-blink 1.1s ease-in-out infinite !important;
  }
}

@keyframes search-hit-blink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 rgba(255, 242, 168, 0);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 3px rgba(255, 242, 168, 0.35);
  }
}

#filter-query-voice {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  justify-self: end !important;
  align-self: stretch !important;
}

#filter-query-voice::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5f6f7c;
  box-shadow: 0 0 0 2px rgba(95, 111, 124, 0.22);
  position: relative;
  z-index: 2;
}

#filter-query-voice.is-listening {
  background: rgba(255, 31, 68, 0.2) !important;
  border-color: #ff1f44 !important;
  box-shadow: 0 0 0 2px rgba(255, 245, 194, 0.65) !important;
  animation: voice-record-button-pulse 0.75s ease-in-out infinite !important;
}

#filter-query-voice.is-listening::before {
  background: #ff1f44 !important;
  box-shadow:
    0 0 0 2px rgba(255, 31, 68, 0.32),
    0 0 0 0 rgba(255, 31, 68, 0.48) !important;
  animation: voice-record-blink 0.75s ease-in-out infinite !important;
}

#filter-query-voice.is-listening::after {
  content: "Snimam...";
  position: absolute;
  top: -12px;
  right: -6px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #ff1f44;
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  z-index: 3;
}

@media (max-width: 760px) {
  /* Page 2 mobile: force dark-blue surfaces for readable contrast */
  .mobile-page[data-mobile-page="1"] .project-card,
  .mobile-page[data-mobile-page="1"] .project-list,
  .mobile-page[data-mobile-page="1"] .stats-shell,
  .mobile-page[data-mobile-page="1"] .stat-card,
  .mobile-page[data-mobile-page="1"] .report-panel,
  .mobile-page[data-mobile-page="1"] .info-panel,
  .mobile-page[data-mobile-page="2"] .project-card,
  .mobile-page[data-mobile-page="2"] .project-list,
  .mobile-page[data-mobile-page="2"] .stats-shell,
  .mobile-page[data-mobile-page="2"] .stat-card,
  .mobile-page[data-mobile-page="2"] .report-panel,
  .mobile-page[data-mobile-page="2"] .info-panel {
    background: linear-gradient(180deg, rgba(12, 34, 63, 0.98), rgba(10, 27, 50, 0.96)) !important;
    border-color: rgba(205, 216, 230, 0.32) !important;
  }

  .mobile-page[data-mobile-page="1"] .project-card *,
  .mobile-page[data-mobile-page="1"] .stat-card *,
  .mobile-page[data-mobile-page="1"] .report-panel *,
  .mobile-page[data-mobile-page="1"] .info-panel *,
  .mobile-page[data-mobile-page="2"] .project-card *,
  .mobile-page[data-mobile-page="2"] .stat-card *,
  .mobile-page[data-mobile-page="2"] .report-panel *,
  .mobile-page[data-mobile-page="2"] .info-panel * {
    color: #eef3fa !important;
    opacity: 1 !important;
  }
}

@media (max-width: 760px) {
  /* Dark text on light UI elements for better readability */
  .mobile-page .primary-btn,
  .mobile-page .ghost-btn,
  .mobile-page .upload-btn,
  .mobile-page .tabrow button,
  .mobile-page .pill,
  .mobile-page .badge,
  .mobile-page .project-status,
  .mobile-page .search-best-match,
  .mobile-page .mobile-flow-nav button,
  .mobile-page input,
  .mobile-page select,
  .mobile-page textarea,
  .mobile-page .mobile-filter-select-trigger,
  .mobile-page .mobile-detail-select-trigger,
  .mobile-page .mobile-filter-select-option,
  .mobile-page .mobile-detail-select-option {
    color: #111111 !important;
  }

  .mobile-page .primary-btn *,
  .mobile-page .ghost-btn *,
  .mobile-page .upload-btn *,
  .mobile-page .tabrow button *,
  .mobile-page .pill *,
  .mobile-page .badge *,
  .mobile-page .project-status * {
    color: #111111 !important;
  }
}

@media (max-width: 760px) {
  /* Katalog top filter action buttons: 12px + centered text */
  .mobile-page[data-mobile-page="2"] #reset-filters,
  .mobile-page[data-mobile-page="2"] #mobile-filter-toggle,
  .mobile-page[data-mobile-page="3"] #reset-filters,
  .mobile-page[data-mobile-page="3"] #mobile-filter-toggle {
    font-size: 12px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 6px !important;
  }
}

@media (max-width: 760px) {
  /* High-specificity fix: dark text on light controls inside brightened cards */
  .mobile-page[data-mobile-page="1"] .project-card .primary-btn,
  .mobile-page[data-mobile-page="1"] .project-card .ghost-btn,
  .mobile-page[data-mobile-page="1"] .project-card .upload-btn,
  .mobile-page[data-mobile-page="1"] .project-card .project-status,
  .mobile-page[data-mobile-page="1"] .project-card .pill,
  .mobile-page[data-mobile-page="1"] .project-card .badge,
  .mobile-page[data-mobile-page="1"] .stat-card .ghost-btn,
  .mobile-page[data-mobile-page="1"] .stat-card .primary-btn,
  .mobile-page[data-mobile-page="1"] .stat-card .pill,
  .mobile-page[data-mobile-page="1"] .stat-card .badge,
  .mobile-page[data-mobile-page="2"] .project-card .primary-btn,
  .mobile-page[data-mobile-page="2"] .project-card .ghost-btn,
  .mobile-page[data-mobile-page="2"] .project-card .upload-btn,
  .mobile-page[data-mobile-page="2"] .project-card .project-status,
  .mobile-page[data-mobile-page="2"] .project-card .pill,
  .mobile-page[data-mobile-page="2"] .project-card .badge,
  .mobile-page[data-mobile-page="2"] .stat-card .ghost-btn,
  .mobile-page[data-mobile-page="2"] .stat-card .primary-btn,
  .mobile-page[data-mobile-page="2"] .stat-card .pill,
  .mobile-page[data-mobile-page="2"] .stat-card .badge {
    color: #111111 !important;
    font-weight: 600 !important;
  }

  .mobile-page[data-mobile-page="1"] .project-card .primary-btn *,
  .mobile-page[data-mobile-page="1"] .project-card .ghost-btn *,
  .mobile-page[data-mobile-page="1"] .project-card .upload-btn *,
  .mobile-page[data-mobile-page="1"] .project-card .project-status *,
  .mobile-page[data-mobile-page="1"] .project-card .pill *,
  .mobile-page[data-mobile-page="1"] .project-card .badge *,
  .mobile-page[data-mobile-page="1"] .stat-card .ghost-btn *,
  .mobile-page[data-mobile-page="1"] .stat-card .primary-btn *,
  .mobile-page[data-mobile-page="1"] .stat-card .pill *,
  .mobile-page[data-mobile-page="1"] .stat-card .badge *,
  .mobile-page[data-mobile-page="2"] .project-card .primary-btn *,
  .mobile-page[data-mobile-page="2"] .project-card .ghost-btn *,
  .mobile-page[data-mobile-page="2"] .project-card .upload-btn *,
  .mobile-page[data-mobile-page="2"] .project-card .project-status *,
  .mobile-page[data-mobile-page="2"] .project-card .pill *,
  .mobile-page[data-mobile-page="2"] .project-card .badge *,
  .mobile-page[data-mobile-page="2"] .stat-card .ghost-btn *,
  .mobile-page[data-mobile-page="2"] .stat-card .primary-btn *,
  .mobile-page[data-mobile-page="2"] .stat-card .pill *,
  .mobile-page[data-mobile-page="2"] .stat-card .badge * {
    color: #111111 !important;
  }
}

@media (max-width: 760px) {
  /* Page 2 stats list readability */
  .mobile-page[data-mobile-page="1"] .stat-list-item,
  .mobile-page[data-mobile-page="1"] button.stat-list-item,
  .mobile-page[data-mobile-page="1"] .stat-list-item.is-main-item,
  .mobile-page[data-mobile-page="2"] .stat-list-item,
  .mobile-page[data-mobile-page="2"] button.stat-list-item,
  .mobile-page[data-mobile-page="2"] .stat-list-item.is-main-item {
    color: #111111 !important;
    background: #f4f6f8 !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
  }

  .mobile-page[data-mobile-page="1"] .stat-list-item *,
  .mobile-page[data-mobile-page="1"] button.stat-list-item *,
  .mobile-page[data-mobile-page="2"] .stat-list-item *,
  .mobile-page[data-mobile-page="2"] button.stat-list-item * {
    color: #111111 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}

@media (max-width: 760px) {
  /* Page 4 readability fix for empty/help inline blocks */
  .mobile-page[data-mobile-page="4"] .empty-inline,
  .mobile-page[data-mobile-page="3"] .empty-inline {
    background: #f5f8fc !important;
    border: 1px solid #c8d3e0 !important;
    color: #111111 !important;
  }

  .mobile-page[data-mobile-page="4"] .empty-inline *,
  .mobile-page[data-mobile-page="3"] .empty-inline * {
    color: #111111 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}

@media (max-width: 760px) {
  /* Page 4 subitem panel: force readable dark text */
  .mobile-page[data-mobile-page="4"] .subitem-card,
  .mobile-page[data-mobile-page="3"] .subitem-card {
    color: #111111 !important;
    background: #eef2f7 !important;
    border-color: #c3cedb !important;
  }

  .mobile-page[data-mobile-page="4"] .subitem-card *,
  .mobile-page[data-mobile-page="3"] .subitem-card * {
    color: #111111 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="4"] .subitem-card input,
  .mobile-page[data-mobile-page="4"] .subitem-card select,
  .mobile-page[data-mobile-page="4"] .subitem-card textarea,
  .mobile-page[data-mobile-page="3"] .subitem-card input,
  .mobile-page[data-mobile-page="3"] .subitem-card select,
  .mobile-page[data-mobile-page="3"] .subitem-card textarea {
    background: #f7f9fc !important;
    color: #111111 !important;
    border-color: #c6d0dd !important;
  }

  .mobile-page[data-mobile-page="4"] .subitem-card .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="4"] .subitem-card .mobile-detail-select-option,
  .mobile-page[data-mobile-page="3"] .subitem-card .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .subitem-card .mobile-detail-select-option {
    color: #111111 !important;
    background: #f7f9fc !important;
  }
}

@media (max-width: 760px) {
  /* Page 1 hero badges: dark-blue fill */
  .mobile-page[data-mobile-page="0"] .eyebrow,
  .mobile-page[data-mobile-page="0"] .hero-tag {
    background: #0c2340 !important;
    border-color: rgba(205, 216, 230, 0.55) !important;
    color: #eef3fa !important;
  }
}

@media (max-width: 760px) {
  /* Page 1 metric cards (KATALOG/CJELINE/NACIN RADA): black text */
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card,
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card *,
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-label,
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-note,
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card strong {
    color: #111111 !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 760px) {
  /* Mobile: hide tab switcher only while first page is active */
  .mobile-page[data-mobile-page="0"].mobile-page-active ~ .mobile-page-shell .tabrow {
    display: none !important;
  }
}

@media (max-width: 760px) {
  /* Mobile: swipe navigation is enabled, hide Prev/Next buttons */
  .mobile-flow-actions {
    display: none !important;
  }
}

@media (max-width: 760px) {
  /* Mobile: section toggles with clear, uniform triangle icon */
  .mobile-page[data-mobile-page="1"] .project-manager-actions,
  .mobile-page[data-mobile-page="1"] .meta-actions,
  .mobile-page[data-mobile-page="1"] .filter-heading-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-actions > * {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  .mobile-page .mobile-section-toggle,
  .mobile-page-shell .mobile-section-toggle {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #aeb7c4 !important;
    background: #0c2340 !important;
    border: 1px solid #7d8796 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-actions .mobile-section-toggle,
  .mobile-page[data-mobile-page="1"] .meta-actions .mobile-section-toggle,
  .mobile-page[data-mobile-page="1"] .filter-heading-actions .mobile-section-toggle {
    order: 99 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
  }

  .mobile-page .mobile-section-toggle::before,
  .mobile-page-shell .mobile-section-toggle::before {
    content: none !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border: 0;
    pointer-events: none;
  }

  .mobile-collapsible-card.mobile-section-open .mobile-section-toggle::before {
    content: none !important;
  }
}

@media (max-width: 760px) {
  /* Hard override: keep all section-toggle squares identical on page 2 */
  .mobile-page[data-mobile-page="1"] .ghost-btn.mobile-section-toggle,
  .mobile-page[data-mobile-page="1"] .mobile-section-toggle {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    flex: 0 0 20px !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #aeb7c4 !important;
    background: #0c2340 !important;
    border: 1px solid #7d8796 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .mobile-page[data-mobile-page="1"] .mobile-section-toggle::before {
    content: none !important;
  }

  .mobile-page[data-mobile-page="1"] .mobile-collapsible-card.mobile-section-open .mobile-section-toggle::before {
    content: none !important;
  }

  .mobile-page .mobile-section-toggle:hover,
  .mobile-page .mobile-section-toggle:focus-visible,
  .mobile-page-shell .mobile-section-toggle:hover,
  .mobile-page-shell .mobile-section-toggle:focus-visible {
    color: #b8c1cd !important;
    background: #0c2340 !important;
    border-color: #8a94a3 !important;
  }
}

@media (max-width: 760px) {
  /* Page 2: wider label column so field labels stay on one line */
  .mobile-page[data-mobile-page="1"] .inline-voice-field,
  .mobile-page[data-mobile-page="1"] .inline-select-field {
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }

  .mobile-page[data-mobile-page="1"] .inline-voice-field,
  .mobile-page[data-mobile-page="1"] .inline-voice-field > .field-label-text {
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) {
  /* Page 3 detail: small breathing space between definition toggle and first form row */
  .mobile-page[data-mobile-page="3"] .mobile-entry-toggle {
    margin-bottom: 4px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form {
    row-gap: 4px !important;
  }
}

@media (max-width: 760px) {
  /* Page 2: all 3 section headers use identical typography */
  .mobile-page[data-mobile-page="1"] .project-manager-card .section-heading .heading-inline,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading .heading-inline,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading .heading-inline {
    display: block !important;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-card .section-heading h2,
  .mobile-page[data-mobile-page="1"] .project-manager-card .section-heading .heading-inline h2,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading h2,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading .heading-inline h2,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading h2,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading .heading-inline h2 {
    display: block !important;
    font-size: 12.4px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-card .section-heading p,
  .mobile-page[data-mobile-page="1"] .project-manager-card .section-heading .heading-inline p,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading p,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading .heading-inline p,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading p,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading .heading-inline p {
    display: block !important;
    font-size: 11.6px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    margin: 2px 0 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  /* Page 2 summary list buttons: equal width + aligned + more top spacing */
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-main {
    align-items: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-main .stat-list-toggle {
    width: 114px !important;
    min-width: 114px !important;
    max-width: 114px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 760px) {
  /* Page 3 detail form: swap Location with select block + 100x18 select triggers */
  .mobile-page[data-mobile-page="3"] .detail-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(1) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    height: 100% !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(-n + 3) {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(-n + 3) .mobile-detail-select,
  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(-n + 3) select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(-n + 3) .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(-n + 3) select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 4px !important;
    line-height: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) input {
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 6px !important;
    line-height: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .detail-footer {
    margin: auto 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: 100% !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .upload-wrap {
    width: 100% !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions {
    display: grid !important;
    grid-template-columns: 6ch 30px 6px 30px minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    justify-content: stretch !important;
    align-content: start !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions .photo-actions-title {
    grid-column: 1 / -1 !important;
    font-size: 10.4px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    color: inherit !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative !important;
    top: -3px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions > .upload-btn:nth-of-type(1) {
    grid-column: 2 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions > .upload-btn:nth-of-type(2) {
    grid-column: 4 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions .upload-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    font-size: 0.44rem !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    justify-self: start !important;
    margin-left: -30px !important;
    align-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions .upload-btn.camera-icon-btn {
    justify-content: center !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions .camera-minimal-icon {
    position: relative;
    display: inline-block;
    width: 11px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 2px;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions .camera-minimal-icon::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 2px;
    width: 2px;
    height: 2px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(174, 183, 196, 0.45);
  }

  .mobile-page[data-mobile-page="3"] .detail-form > :nth-child(4) .photo-actions .camera-minimal-icon::after {
    content: "";
    position: absolute;
    left: 1px;
    top: -3px;
    width: 4px;
    height: 2px;
    border: 1px solid currentColor;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
  }

  /* Page 3 subitems: match main item select width behavior (to the right edge) */
  .mobile-page[data-mobile-page="3"] .subitem-grid .inline-select-field {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid {
    row-gap: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid .inline-select-field .mobile-detail-select,
  .mobile-page[data-mobile-page="3"] .subitem-grid .inline-select-field select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid .inline-select-field .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .subitem-grid .inline-select-field select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 4px !important;
    line-height: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-detail-footer {
    margin-top: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-detail-footer .upload-wrap {
    width: 100% !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-detail-footer .photo-actions {
    display: grid !important;
    grid-template-columns: 6ch 30px 6px 30px minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    justify-content: stretch !important;
    align-content: start !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-detail-footer .photo-actions .photo-actions-title {
    grid-column: 1 / -1 !important;
    font-size: 10.4px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    color: inherit !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative !important;
    top: -3px !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-detail-footer .photo-actions > .upload-btn:nth-of-type(1) {
    grid-column: 2 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-detail-footer .photo-actions > .upload-btn:nth-of-type(2) {
    grid-column: 4 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-detail-footer .photo-actions .upload-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    font-size: 0.44rem !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    justify-self: start !important;
    margin-left: -30px !important;
    align-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 760px) {
  /* Page 5 summary textarea must stay tall/readable */
  .mobile-page[data-mobile-page="4"] .project-summary-view,
  .mobile-page[data-mobile-page="4"] .project-summary-textarea {
    height: 68vh !important;
    min-height: 68vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .mobile-page[data-mobile-page="4"] .project-summary-view,
  .mobile-page[data-mobile-page="4"] .project-summary-view * {
    color: #111111 !important;
    text-shadow: none !important;
  }
}

@media (max-width: 760px) {
  /* Mobile top steps: keep all 5 buttons in one row with single-line labels */
  .mobile-flow-progress {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  .mobile-flow-step {
    min-height: 21px !important;
    padding: 0 1px !important;
    font-size: 0.65rem !important;
    line-height: 0.95 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 760px) {
  /* Page 4 detail panel: gray surface + black text for better readability */
  .mobile-page[data-mobile-page="3"] .detail-card {
    background: #c8ced6 !important;
    border-color: #98a3b2 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card,
  .mobile-page[data-mobile-page="3"] .detail-card * {
    color: #111111 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .info-panel,
  .mobile-page[data-mobile-page="3"] .detail-card .badge,
  .mobile-page[data-mobile-page="3"] .detail-card .project-status,
  .mobile-page[data-mobile-page="3"] .detail-card .pill,
  .mobile-page[data-mobile-page="3"] .detail-card .ghost-btn,
  .mobile-page[data-mobile-page="3"] .detail-card .primary-btn,
  .mobile-page[data-mobile-page="3"] .detail-card .upload-btn,
  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-option,
  .mobile-page[data-mobile-page="3"] .detail-card input,
  .mobile-page[data-mobile-page="3"] .detail-card select,
  .mobile-page[data-mobile-page="3"] .detail-card textarea {
    background: #e9edf2 !important;
    color: #111111 !important;
    border-color: #98a3b2 !important;
  }
}

.sketch-card .sketch-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}

.sketch-card .sketch-toolbar .sketch-tool-field--color {
  grid-column: 1;
  grid-row: 1;
}

.sketch-card .sketch-toolbar .sketch-tool-field--size {
  grid-column: 2;
  grid-row: 1;
}

.sketch-card .sketch-toolbar .sketch-tool-field--sensitivity {
  grid-column: 3;
  grid-row: 1;
}

.sketch-card .sketch-toolbar #sketch-save {
  grid-column: 4;
  grid-row: 1;
}

.sketch-card .sketch-toolbar #sketch-download {
  grid-column: 1;
  grid-row: 3;
}

.sketch-card .sketch-toolbar #sketch-clear {
  grid-column: 1;
  grid-row: 2;
}

.sketch-card .sketch-toolbar #sketch-eraser {
  grid-column: 2;
  grid-row: 2;
}

.sketch-card .sketch-toolbar #sketch-undo {
  grid-column: 3;
  grid-row: 2;
}

.sketch-card .sketch-toolbar #sketch-mode-toggle {
  grid-column: 4;
  grid-row: 2;
}

.sketch-card .sketch-settings-panel {
  margin: 6px 0 8px;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
}

.sketch-card .sketch-settings-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
}

.sketch-card .sketch-settings-panel > summary::-webkit-details-marker {
  display: none;
}

.sketch-card .sketch-settings-panel > summary::after {
  content: "▾";
  float: right;
}

.sketch-card .sketch-settings-panel[open] > summary::after {
  content: "▴";
}

.sketch-card .sketch-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 8px 8px;
}

.sketch-card .sketch-tool-field {
  margin: 0;
  font-size: 12px !important;
  line-height: 1.2;
}

.sketch-card .sketch-toolbar .sketch-tool-field {
  position: relative;
  display: block !important;
  font-size: 10px !important;
}

.sketch-card .sketch-toolbar .sketch-inline-label {
  position: absolute;
  top: 2px;
  left: 6px;
  z-index: 2;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  width: auto;
  pointer-events: none;
}

.sketch-card .sketch-toolbar .sketch-tool-field select {
  min-height: 30px;
  padding: 13px 22px 2px 6px;
  font-size: 10px;
  line-height: 1.1;
}

.sketch-card .sketch-toolbar #sketch-color,
.sketch-card .sketch-toolbar #sketch-size,
.sketch-card .sketch-toolbar #sketch-straighten-sensitivity {
  width: 100%;
}

.sketch-card .sketch-toolbar .ghost-btn,
.sketch-card .sketch-toolbar .primary-btn {
  min-height: 24px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.1;
}

.sketch-card .sketch-tool-field small {
  display: block;
  margin-top: 4px;
  color: #1f3b5a;
  font-weight: 600;
}

.sketch-card .sketch-measure-target {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #1f3b5a;
}

.sketch-card .sketch-page-info {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #1f3b5a;
  align-self: end;
}

.subitem-card.active {
  outline: 2px solid rgba(255, 245, 194, 0.9);
  outline-offset: 1px;
}

.sketch-card #sketch-color {
  width: 100%;
  min-height: 36px;
  padding: 4px;
}

.sketch-card #sketch-size {
  width: 100%;
}

.sketch-card #sketch-auto-straighten {
  width: auto;
  min-height: auto;
}

.sketch-card #sketch-eraser.active {
  background: #1f3b5a !important;
  color: #ffffff !important;
  border-color: #1f3b5a !important;
}

.sketch-canvas-wrap {
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  position: relative;
  aspect-ratio: 1240 / 1754;
}

#sketch-canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #ffffff;
  touch-action: none;
  cursor: crosshair;
}

#sketch-overlay-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(150, 158, 168, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 158, 168, 0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

#sketch-note {
  min-height: 74px;
}

.sketch-card label.stacked {
  font-size: 12px !important;
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="5"] .sketch-card {
    background: #c8ced6 !important;
    border-color: #98a3b2 !important;
    min-height: calc(100dvh - 82px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card,
  .mobile-page[data-mobile-page="5"] .sketch-card * {
    color: #111111 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .ghost-btn,
  .mobile-page[data-mobile-page="5"] .sketch-card .primary-btn,
  .mobile-page[data-mobile-page="5"] .sketch-card input,
  .mobile-page[data-mobile-page="5"] .sketch-card textarea {
    background: #e9edf2 !important;
    border-color: #98a3b2 !important;
    color: #111111 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 6px 0 8px;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 0 6px 6px;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-settings-panel > summary {
    padding: 5px 7px;
    font-size: 10px;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar .inline-select-field.sketch-tool-field {
    position: relative;
    display: block !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar .inline-select-field.sketch-tool-field > span,
  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-toolbar .inline-select-field.sketch-tool-field > strong {
    position: absolute;
    top: 2px;
    left: 6px;
    z-index: 2;
    display: block;
    width: auto;
    font-size: 9px;
    white-space: nowrap;
    pointer-events: none;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field {
    font-size: 10px !important;
    line-height: 1.08;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-measure-target {
    font-size: 10px;
    line-height: 1.1;
    margin-bottom: 2px;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-page-info {
    font-size: 10px;
    line-height: 1.1;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field small {
    margin-top: 2px;
    font-size: 9px;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card input,
  .mobile-page[data-mobile-page="5"] .sketch-card select,
  .mobile-page[data-mobile-page="5"] .sketch-card textarea {
    min-height: 26px !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .ghost-btn,
  .mobile-page[data-mobile-page="5"] .sketch-card .primary-btn {
    min-height: 26px !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-color {
    min-height: 26px !important;
    padding: 2px !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-canvas-wrap {
    min-height: clamp(420px, 62dvh, 820px);
    height: auto;
    flex: 1 1 auto;
    display: block;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-canvas {
    position: static;
    width: 100%;
    height: auto !important;
  }
}
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-settings-grid .sketch-tool-field--color,
  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-settings-grid .sketch-tool-field--size,
  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-settings-grid .sketch-tool-field--gap,
  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-settings-grid .sketch-tool-field--max-shapes,
  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-settings-grid .sketch-tool-field--sensitivity,
  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-settings-grid .sketch-tool-field--auto {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--color {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--size {
    grid-column: 2;
    grid-row: 1;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--gap {
    grid-column: 3;
    grid-row: 1;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--max-shapes {
    grid-column: 4;
    grid-row: 1;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--width {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--height {
    grid-column: 2;
    grid-row: 2;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--depth {
    grid-column: 3;
    grid-row: 2;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-depth {
    grid-column: 4;
    grid-row: 2;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--sensitivity {
    grid-column: 1 / span 2;
    grid-row: 3;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--auto {
    grid-column: 3;
    grid-row: 3;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--shape-select {
    grid-column: 4;
    grid-row: 3;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-undo {
    grid-column: 1;
    grid-row: 4;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-straighten {
    grid-column: 2;
    grid-row: 4;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-eraser {
    grid-column: 3;
    grid-row: 4;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-tool-field--shape-text {
    grid-column: 4;
    grid-row: 4;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-clear {
    grid-column: 1;
    grid-row: 5;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-save {
    grid-column: 2;
    grid-row: 5;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-download {
    grid-column: 3 / 5;
    grid-row: 5;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .sketch-move-controls {
    grid-column: 1;
    grid-row: 6;
    display: flex;
    align-items: center;
    gap: 3px;
    justify-self: start;
    white-space: nowrap;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-move-up,
  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-move-left,
  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-move-down,
  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-move-right {
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    justify-self: start;
    font-size: 16px !important;
    font-weight: 800;
    line-height: 1 !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card #sketch-shape-lock-toggle {
    grid-column: 4;
    grid-row: 6;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--width,
  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--height,
  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--depth {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
    flex-direction: row !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--width .sketch-tool-label,
  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--height .sketch-tool-label,
  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--depth .sketch-tool-label {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--width > #sketch-measure-width,
  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--height > #sketch-measure-height,
  .mobile-page[data-mobile-page="5"] .sketch-card .inline-select-field.sketch-tool-field.sketch-tool-field--depth > #sketch-measure-depth {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }
}

/* ABSOLUTE FINAL NAV OVERRIDE */
@media (max-width: 760px) {
  body .app-shell .mobile-flow-nav,
  body .app-shell .mobile-flow-nav .mobile-flow-progress {
    background: #0c2340 !important;
    background-color: #0c2340 !important;
    background-image: none !important;
    border-color: #0c2340 !important;
    box-shadow: none !important;
  }

  body .app-shell .mobile-flow-nav .mobile-flow-step,
  body .app-shell .mobile-flow-nav .mobile-flow-progress .mobile-flow-step,
  body .app-shell .mobile-flow-nav button {
    background: #0c2340 !important;
    background-color: #0c2340 !important;
    background-image: none !important;
    color: #e7edf5 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
  }

  body .app-shell .mobile-flow-nav .mobile-flow-step.active,
  body .app-shell .mobile-flow-nav .mobile-flow-progress .mobile-flow-step.active,
  body .app-shell .mobile-flow-nav button.active {
    background: #fff5c2 !important;
    background-color: #fff5c2 !important;
    background-image: none !important;
    color: #0b1f3a !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(255, 245, 194, 0.35) !important;
    transform: translateY(0) !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero .hero-copy > *,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero .hero-side > *,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card {
    animation: heroReveal 0.82s ease-out forwards !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero .eyebrow {
    animation-delay: 0.08s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero .hero-copy h1 {
    animation-delay: 0.16s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero .hero-copy p {
    animation-delay: 0.26s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero .hero-tags {
    animation-delay: 0.36s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero .hero-blueprint {
    animation-delay: 0.24s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero .hero-metrics {
    animation-delay: 0.42s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card:nth-child(1) {
    animation-delay: 0.5s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card:nth-child(2) {
    animation-delay: 0.62s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card:nth-child(3) {
    animation-delay: 0.74s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card {
    animation-delay: 0.86s !important;
  }
}

@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card {
    animation: home-page-enter-strong 0.42s ease-out !important;
    transform-origin: center top !important;
  }
}

@keyframes home-page-enter-strong {
  0% {
    opacity: 0.52;
    transform: translateY(10px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* FINAL: always animate Home page when it becomes active */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-page-active .hero,
  .mobile-page[data-mobile-page="0"].mobile-page-active .home-meta-card {
    animation: home-page-enter-visible 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    transform-origin: center top !important;
    will-change: transform, opacity;
  }
}

@keyframes home-page-enter-visible {
  0% {
    opacity: 0.45;
    transform: translateY(12px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* GUARANTEED HOME ANIMATION (all widths) */
.mobile-page[data-mobile-page="0"].mobile-page-active .hero,
.mobile-page[data-mobile-page="0"].mobile-page-active .home-meta-card {
  animation: home-page-enter-guaranteed 0.65s ease-out !important;
  animation-fill-mode: none !important;
}

@keyframes home-page-enter-guaranteed {
  0% {
    opacity: 0.45;
    transform: translateY(10px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* FINAL HOME ANIMATION: visible on entry, ends with unchanged base colors */
.mobile-page[data-mobile-page="0"].mobile-home-reveal .hero,
.mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card,
.mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card {
  animation: home-enter-preserve-colors 0.52s ease-out !important;
  animation-fill-mode: none !important;
  will-change: transform, opacity;
}

@keyframes home-enter-preserve-colors {
  0% {
    opacity: 0.55;
    transform: translateY(10px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* FINAL HOME REVEAL: animate only motion/opacity, preserve original colors */
.mobile-page[data-mobile-page="0"].mobile-home-reveal .hero,
.mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card,
.mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card {
  animation: home-enter-flip-in 0.72s cubic-bezier(0.18, 0.8, 0.22, 1) !important;
  animation-fill-mode: none !important;
  filter: none !important;
  transform-origin: center top !important;
  backface-visibility: hidden !important;
  perspective: 1200px;
}

@keyframes home-enter-flip-in {
  0% {
    opacity: 0.2;
    transform: translateY(26px) rotateX(-9deg) scale(0.965);
  }
  55% {
    opacity: 1;
    transform: translateY(-2px) rotateX(1.5deg) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

/* FINAL HOME COLORS (match JPG target) */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"],
  .mobile-page[data-mobile-page="0"].mobile-page-active {
    background: linear-gradient(180deg, #0b2950 0%, #072345 100%) !important;
    border-color: rgba(138, 160, 188, 0.45) !important;
  }

  .mobile-page[data-mobile-page="0"] .hero {
    background: linear-gradient(180deg, #0c2a50 0%, #082548 100%) !important;
    border-color: rgba(138, 160, 188, 0.45) !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .eyebrow,
  .mobile-page[data-mobile-page="0"] .hero-tag {
    background: #0a2a4f !important;
    border: 1px solid rgba(145, 166, 193, 0.75) !important;
    color: #e7edf5 !important;
  }

  .mobile-page[data-mobile-page="0"] .hero h1,
  .mobile-page[data-mobile-page="0"] .hero p,
  .mobile-page[data-mobile-page="0"] .hero .metric-label,
  .mobile-page[data-mobile-page="0"] .hero .metric-note,
  .mobile-page[data-mobile-page="0"] .hero strong {
    color: #e7edf5 !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card {
    background: #d9dde3 !important;
    border: 1px solid #c0c8d3 !important;
    box-shadow: none !important;
  }

  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card,
  .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card * {
    color: #0f1621 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="0"] .home-meta-card {
    background: linear-gradient(180deg, #0b2950 0%, #072345 100%) !important;
    border-color: rgba(138, 160, 188, 0.45) !important;
  }

  .mobile-page[data-mobile-page="0"] .home-meta-card .meta-note {
    color: #b7c4d5 !important;
  }

  .mobile-page[data-mobile-page="0"] .home-meta-card .meta-actions .pill,
  .mobile-page[data-mobile-page="0"] .home-meta-card .meta-actions .ghost-btn {
    background: #d9dde3 !important;
    border: 1px solid #c0c8d3 !important;
    color: #101723 !important;
  }
}

/* FINAL TYPOGRAPHY FIX: Home page title/labels must match JPG light text */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"] .hero .eyebrow,
  .mobile-page[data-mobile-page="0"] .hero .hero-copy h1,
  .mobile-page[data-mobile-page="0"] .hero .hero-copy p,
  .mobile-page[data-mobile-page="0"] .hero .hero-tag,
  .mobile-page[data-mobile-page="0"] .hero .metric-label,
  .mobile-page[data-mobile-page="0"] .hero .metric-note,
  .mobile-page[data-mobile-page="0"] .hero .metric-card strong {
    color: #e7edf5 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #e7edf5 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-copy h1 {
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="0"] .hero .hero-copy p {
    color: #cfd9e6 !important;
  }
}

/* ABSOLUTE HOME COLOR MATCH (PNG -> JPG) */
@media (max-width: 760px) {
  body .mobile-page[data-mobile-page="0"],
  body .mobile-page[data-mobile-page="0"].mobile-page-active {
    background: linear-gradient(180deg, #0b2a50 0%, #072447 100%) !important;
    border-color: rgba(126, 149, 179, 0.5) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body .mobile-page[data-mobile-page="0"] .hero {
    background: linear-gradient(180deg, #0b2a50 0%, #072447 100%) !important;
    border: 1px solid rgba(126, 149, 179, 0.48) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body .mobile-page[data-mobile-page="0"] .hero .eyebrow,
  body .mobile-page[data-mobile-page="0"] .hero .hero-tag {
    background: #0a2a4f !important;
    border: 1px solid rgba(145, 166, 193, 0.78) !important;
    color: #e7edf5 !important;
    opacity: 1 !important;
  }

  body .mobile-page[data-mobile-page="0"] .hero h1,
  body .mobile-page[data-mobile-page="0"] .hero p,
  body .mobile-page[data-mobile-page="0"] .hero span,
  body .mobile-page[data-mobile-page="0"] .hero strong {
    color: #e7edf5 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #e7edf5 !important;
  }

  body .mobile-page[data-mobile-page="0"] .hero .hero-copy p {
    color: #d2dcea !important;
  }

  body .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card,
  body .mobile-page[data-mobile-page="0"] .home-meta-card .meta-actions .pill,
  body .mobile-page[data-mobile-page="0"] .home-meta-card .meta-actions .ghost-btn {
    background: #d9dde3 !important;
    border: 1px solid #c0c8d3 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  body .mobile-page[data-mobile-page="0"] .hero-metrics .metric-card *,
  body .mobile-page[data-mobile-page="0"] .home-meta-card .meta-actions .pill *,
  body .mobile-page[data-mobile-page="0"] .home-meta-card .meta-actions .ghost-btn * {
    color: #0f1621 !important;
    -webkit-text-fill-color: #0f1621 !important;
    opacity: 1 !important;
  }

  body .mobile-page[data-mobile-page="0"] .home-meta-card {
    background: linear-gradient(180deg, #0b2a50 0%, #072447 100%) !important;
    border: 1px solid rgba(126, 149, 179, 0.48) !important;
    opacity: 1 !important;
  }

  body .mobile-page[data-mobile-page="0"] .home-meta-card .meta-note {
    color: #b7c4d5 !important;
    opacity: 1 !important;
  }

  /* keep colors stable during reveal without forcing full opacity */
  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero,
  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card,
  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card,
  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero * {
    filter: none !important;
  }
}

/* SINGLE HOME ANIMATION (once) + stronger visible flip */
@media (max-width: 760px) {
  /* disable any inherited/older reveal animations on children */
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero *,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card *,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card {
    animation: none !important;
  }

  /* run one animation only on the hero container */
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero {
    animation: home-enter-single-flip 0.62s cubic-bezier(0.2, 0.85, 0.2, 1) 1 !important;
    transform-origin: center top !important;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  /* keep other blocks static so effect doesn't look duplicated */
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@keyframes home-enter-single-flip {
  0% {
    opacity: 0.15;
    transform: translateY(24px) rotateX(-16deg) scale(0.965);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) rotateX(2deg) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

/* FINAL single home animation control */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-page-active .hero,
  .mobile-page[data-mobile-page="0"].mobile-page-active .home-meta-card,
  .mobile-page[data-mobile-page="0"].mobile-page-active .hero-metrics .metric-card {
    animation: none !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero {
    animation: home-enter-single-flip-slow 3.2s cubic-bezier(0.19, 0.82, 0.18, 1) 1 !important;
    transform-origin: center top !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity, filter !important;
    perspective: 1400px !important;
  }
}

@keyframes home-enter-single-flip-slow {
  0% {
    opacity: 0;
    transform: translateY(110px) rotateX(-32deg) scale(0.64);
    filter: blur(7px);
  }
  20% {
    opacity: 0.22;
    transform: translateY(88px) rotateX(-24deg) scale(0.69);
    filter: blur(5.8px);
  }
  35% {
    opacity: 0.48;
    transform: translateY(60px) rotateX(-16deg) scale(0.76);
    filter: blur(4.2px);
  }
  50% {
    opacity: 0.72;
    transform: translateY(34px) rotateX(-10deg) scale(0.84);
    filter: blur(2.6px);
  }
  65% {
    opacity: 0.92;
    transform: translateY(12px) rotateX(-4deg) scale(0.93);
    filter: blur(1px);
  }
  78% {
    opacity: 1;
    transform: translateY(-1px) rotateX(0.6deg) scale(1.002);
    filter: blur(0);
  }
  82% {
    opacity: 1;
    transform: translateY(-0.5px) rotateX(0.25deg) scale(1.001);
    filter: blur(0);
  }
  92% {
    opacity: 1;
    transform: translateY(-0.2px) rotateX(0.08deg) scale(1.0004);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

/* ULTRA SMOOTH HOME ANIMATION: same speed, no jitter */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero {
    animation: home-enter-cinematic-smooth 3.2s cubic-bezier(0.22, 0.74, 0.2, 1) 1 !important;
    transform-origin: center top !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
  }
}

@keyframes home-enter-cinematic-smooth {
  0% {
    opacity: 0;
    transform: translate3d(0, 110px, 0) rotateX(-28deg) scale(0.64);
  }
  55% {
    opacity: 0.82;
    transform: translate3d(0, 24px, 0) rotateX(-9deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  }
}

/* FINAL SOFT + VISIBLE FLIP (no jitter) */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero {
    animation: home-enter-soft-visible-flip 3.2s cubic-bezier(0.25, 0.72, 0.2, 1) 1 !important;
    transform-origin: center top !important;
    transform-style: preserve-3d !important;
    perspective: 1800px !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
  }
}

@keyframes home-enter-soft-visible-flip {
  0% {
    opacity: 0;
    transform: translate3d(0, 88px, 0) rotateX(-20deg) scale(0.72);
  }
  45% {
    opacity: 0.62;
    transform: translate3d(0, 38px, 0) rotateX(-12deg) scale(0.84);
  }
  78% {
    opacity: 0.92;
    transform: translate3d(0, 10px, 0) rotateX(-4deg) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  }
}

/* CINEMATIC HOME: city-from-air reveal */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-home-reveal {
    perspective: 2000px;
    transform-style: preserve-3d;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero {
    animation: home-air-camera 3.2s cubic-bezier(0.2, 0.74, 0.2, 1) 1 !important;
    transform-origin: center top !important;
    will-change: transform, opacity, filter !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card {
    animation: home-building-approach 2.4s cubic-bezier(0.24, 0.72, 0.2, 1) 1 !important;
    animation-delay: 0.55s !important;
    animation-fill-mode: both !important;
    transform-origin: center center !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card:nth-child(2) {
    animation-delay: 0.68s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card:nth-child(3) {
    animation-delay: 0.82s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card {
    animation: home-building-approach 2.2s cubic-bezier(0.24, 0.72, 0.2, 1) 1 !important;
    animation-delay: 1.02s !important;
    animation-fill-mode: both !important;
    transform-origin: center center !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
  }
}

@keyframes home-air-camera {
  0% {
    opacity: 0;
    transform: translate3d(0, 110px, -320px) rotateX(-26deg) scale(0.7);
    filter: blur(2.5px);
  }
  45% {
    opacity: 0.72;
    transform: translate3d(0, 42px, -120px) rotateX(-12deg) scale(0.86);
    filter: blur(1px);
  }
  78% {
    opacity: 0.95;
    transform: translate3d(0, 12px, -30px) rotateX(-3deg) scale(0.97);
    filter: blur(0.2px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

@keyframes home-building-approach {
  0% {
    opacity: 0;
    transform: translate3d(0, 46px, -240px) rotateY(-7deg) rotateX(-10deg) scale(0.82);
  }
  55% {
    opacity: 0.84;
    transform: translate3d(0, 16px, -70px) rotateY(-2.5deg) rotateX(-3deg) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(1);
  }
}

/* ABSOLUTE FINAL HOME ANIMATION (authoritative) */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card {
    animation: home-final-city-arrival 3.2s cubic-bezier(0.2, 0.74, 0.2, 1) 1 !important;
    animation-fill-mode: both !important;
    transform-origin: center top !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
    filter: none !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card:nth-child(2) {
    animation-delay: 0.12s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero-metrics .metric-card:nth-child(3) {
    animation-delay: 0.24s !important;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .home-meta-card {
    animation-delay: 0.34s !important;
  }
}

@keyframes home-final-city-arrival {
  0% {
    opacity: 0;
    transform: translate3d(0, 92px, -260px) rotateX(-20deg) scale(0.72);
  }
  48% {
    opacity: 0.68;
    transform: translate3d(0, 34px, -90px) rotateX(-10deg) scale(0.86);
  }
  82% {
    opacity: 0.95;
    transform: translate3d(0, 8px, -18px) rotateX(-3deg) scale(0.965);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  }
}

/* GUARANTEED CITY/BUILDINGS REVEAL OVERLAY (independent from card colors) */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"] .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero::before,
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero::after {
    content: "";
    position: absolute;
    inset: -18% -10% -12% -10%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    will-change: transform, opacity, filter;
  }

  /* city-from-air layer */
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero::before {
    background:
      radial-gradient(circle at 50% 40%, rgba(196, 214, 236, 0.2), rgba(196, 214, 236, 0) 55%),
      repeating-linear-gradient(
        90deg,
        rgba(168, 189, 214, 0.16) 0 10px,
        rgba(168, 189, 214, 0.06) 10px 18px,
        rgba(168, 189, 214, 0) 18px 32px
      ),
      repeating-linear-gradient(
        0deg,
        rgba(168, 189, 214, 0.14) 0 10px,
        rgba(168, 189, 214, 0.05) 10px 18px,
        rgba(168, 189, 214, 0) 18px 32px
      );
    transform-origin: center top;
    animation: city-air-approach 3.2s cubic-bezier(0.2, 0.74, 0.2, 1) 1 both !important;
  }

  /* building blocks layer */
  .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero::after {
    inset: 30% 6% 10% 6%;
    background:
      linear-gradient(180deg, rgba(191, 207, 227, 0.24), rgba(191, 207, 227, 0.03)),
      repeating-linear-gradient(
        90deg,
        rgba(220, 233, 247, 0.34) 0 14%,
        rgba(220, 233, 247, 0) 14% 22%
      );
    border-radius: 18px;
    transform-origin: center bottom;
    animation: city-buildings-arrive 2.8s cubic-bezier(0.22, 0.72, 0.2, 1) 0.35s 1 both !important;
  }

  /* keep text/content above overlays */
  .mobile-page[data-mobile-page="0"] .hero > * {
    position: relative;
    z-index: 1;
  }
}

@keyframes city-air-approach {
  0% {
    opacity: 0;
    transform: translate3d(0, 110px, -360px) rotateX(-28deg) scale(0.62);
    filter: blur(3px);
  }
  48% {
    opacity: 0.6;
    transform: translate3d(0, 42px, -140px) rotateX(-12deg) scale(0.82);
    filter: blur(1.2px);
  }
  82% {
    opacity: 0.38;
    transform: translate3d(0, 10px, -30px) rotateX(-3deg) scale(0.96);
    filter: blur(0.2px);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

@keyframes city-buildings-arrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 56px, -260px) rotateX(-18deg) rotateY(-8deg) scale(0.76);
    filter: blur(2px);
  }
  58% {
    opacity: 0.7;
    transform: translate3d(0, 20px, -80px) rotateX(-7deg) rotateY(-2deg) scale(0.9);
    filter: blur(0.6px);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    filter: blur(0);
  }
}

/* HARD GUARANTEE: visible city animation */
@media (max-width: 760px) {
  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero::before,
  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: 0 !important;
    display: block !important;
    animation-play-state: running !important;
  }

  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero::before {
    inset: -10% -8% -8% -8% !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(214, 229, 247, 0.55), rgba(214, 229, 247, 0) 52%),
      repeating-linear-gradient(90deg, rgba(194, 214, 237, 0.38) 0 8px, rgba(194, 214, 237, 0.08) 8px 18px, rgba(194, 214, 237, 0) 18px 30px),
      repeating-linear-gradient(0deg, rgba(194, 214, 237, 0.34) 0 8px, rgba(194, 214, 237, 0.08) 8px 18px, rgba(194, 214, 237, 0) 18px 30px) !important;
    transform-origin: center top !important;
    animation: city-overlay-air-hard 3.2s cubic-bezier(0.2, 0.74, 0.2, 1) 1 both !important;
  }

  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero::after {
    inset: 36% 5% 12% 5% !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(232, 241, 251, 0.52), rgba(232, 241, 251, 0.08)),
      repeating-linear-gradient(90deg, rgba(236, 245, 255, 0.55) 0 12%, rgba(236, 245, 255, 0) 12% 20%) !important;
    transform-origin: center bottom !important;
    animation: city-overlay-buildings-hard 2.8s cubic-bezier(0.24, 0.72, 0.2, 1) 0.35s 1 both !important;
  }

  body .mobile-page[data-mobile-page="0"].mobile-home-reveal .hero > * {
    position: relative !important;
    z-index: 1 !important;
  }
}

@keyframes city-overlay-air-hard {
  0% { opacity: 0; transform: translate3d(0, 120px, -360px) rotateX(-30deg) scale(0.58); }
  45% { opacity: 0.8; transform: translate3d(0, 46px, -130px) rotateX(-13deg) scale(0.82); }
  82% { opacity: 0.5; transform: translate3d(0, 10px, -24px) rotateX(-3deg) scale(0.96); }
  100% { opacity: 0; transform: translate3d(0, 0, 0) rotateX(0deg) scale(1); }
}

@keyframes city-overlay-buildings-hard {
  0% { opacity: 0; transform: translate3d(0, 62px, -260px) rotateX(-18deg) rotateY(-9deg) scale(0.72); }
  58% { opacity: 0.85; transform: translate3d(0, 20px, -76px) rotateX(-7deg) rotateY(-2deg) scale(0.9); }
  100% { opacity: 0; transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1); }
}

/* Home help button: match Catalog size and keep top-right */
@media (max-width: 760px) {
  body .mobile-page[data-mobile-page="0"] .hero > .hero-help-btn {
    position: absolute !important;
    top: 20px !important;
    left: calc(100% - 46px) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 3 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* Keep Home in settled end position after animation */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-home-final {
    transform: none !important;
  }
}

/* Pregledi help button: match Katalog help button style/position */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="1"] .project-manager-card .section-heading {
    position: relative !important;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-actions .section-help-btn.hero-help-btn {
    position: absolute !important;
    right: 24px !important;
    top: -6px !important;
    z-index: 12 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    background: #0f2a4a !important;
    color: #ffcc00 !important;
    border-color: #0f2a4a !important;
    transform: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    order: 0 !important;
  }
}

/* Page 2 (Pregledi): keep form/content above fixed bottom nav rows */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="1"] {
    padding-bottom: 12px !important;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-card,
  .mobile-page[data-mobile-page="1"] .mobile-page-section-stats,
  .mobile-page[data-mobile-page="1"] .mobile-page-section-meta {
    margin-bottom: 6px !important;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .form-grid {
    padding-bottom: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .project-list {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .mobile-page[data-mobile-page="1"] .project-list .project-card:last-child {
    margin-bottom: 0 !important;
  }
}

/* Show bottom tab row only where it is relevant (Katalog/Zapisnik content shell) */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="0"].mobile-page-active ~ .mobile-page-shell .tabrow,
  .mobile-page[data-mobile-page="1"].mobile-page-active ~ .mobile-page-shell .tabrow,
  .mobile-page[data-mobile-page="4"].mobile-page-active ~ .mobile-page-shell .tabrow,
  .mobile-page[data-mobile-page="5"].mobile-page-active ~ .mobile-page-shell .tabrow {
    display: none !important;
  }

  .mobile-page[data-mobile-page="2"].mobile-page-active ~ .mobile-page-shell .tabrow,
  .mobile-page[data-mobile-page="3"].mobile-page-active ~ .mobile-page-shell .tabrow {
    display: grid !important;
  }
}

/* FINAL: main nav row always at TOP on all mobile pages */
@media (max-width: 760px) {
  .mobile-flow-nav {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    bottom: auto !important;
    z-index: 2200 !important;
    margin: 0 !important;
  }

  .mobile-flow-progress {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .app-shell {
    padding-top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
  }
}

/* Zapisnik: align detail form colors with Pregledi/Katalog dark-blue design */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .detail-card {
    background:
      linear-gradient(135deg, rgba(32, 61, 94, 0.58), rgba(7, 27, 52, 0) 34%),
      linear-gradient(180deg, rgba(12, 34, 63, 0.99), rgba(9, 29, 56, 0.98)) !important;
    border-color: rgba(205, 216, 230, 0.34) !important;
    color: #eef3fa !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card h2,
  .mobile-page[data-mobile-page="3"] .detail-card .detail-kicker,
  .mobile-page[data-mobile-page="3"] .detail-card .active-address-inline,
  .mobile-page[data-mobile-page="3"] .detail-card label,
  .mobile-page[data-mobile-page="3"] .detail-card .field-note-title,
  .mobile-page[data-mobile-page="3"] .detail-card .photo-actions-title,
  .mobile-page[data-mobile-page="3"] .detail-card .subitem-note-title {
    color: #eef3fa !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .detail-kicker,
  .mobile-page[data-mobile-page="3"] .detail-card .active-address-inline {
    opacity: 0.9 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .info-panel,
  .mobile-page[data-mobile-page="3"] .detail-card .subitems-panel,
  .mobile-page[data-mobile-page="3"] .detail-card .subitem-card {
    background:
      linear-gradient(180deg, rgba(16, 43, 76, 0.96), rgba(10, 31, 59, 0.94)) !important;
    border-color: rgba(205, 216, 230, 0.3) !important;
    color: #eef3fa !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .info-panel p,
  .mobile-page[data-mobile-page="3"] .detail-card .subitems-panel p,
  .mobile-page[data-mobile-page="3"] .detail-card .subitem-card p {
    color: #d7e2ee !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .subitem-card * {
    color: #eef3fa !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .empty-inline {
    background: #eef2f7 !important;
    border-color: #b9c6d5 !important;
    color: #111111 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .empty-inline * {
    color: #111111 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card input,
  .mobile-page[data-mobile-page="3"] .detail-card select,
  .mobile-page[data-mobile-page="3"] .detail-card textarea,
  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-trigger {
    background: #eef2f7 !important;
    color: #111111 !important;
    border-color: #8ea2ba !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card input::placeholder,
  .mobile-page[data-mobile-page="3"] .detail-card textarea::placeholder {
    color: #59697c !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-menu {
    background: #eef2f7 !important;
    border-color: #8ea2ba !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-option {
    background: #eef2f7 !important;
    color: #111111 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-option:hover,
  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-option.active {
    background: #fff5c2 !important;
    color: #111111 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .badge,
  .mobile-page[data-mobile-page="3"] .detail-card .pill,
  .mobile-page[data-mobile-page="3"] .detail-card .ghost-btn,
  .mobile-page[data-mobile-page="3"] .detail-card .primary-btn,
  .mobile-page[data-mobile-page="3"] .detail-card .upload-btn {
    background: #e7edf5 !important;
    color: #0b1f3a !important;
    border-color: #9fb0c4 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .ghost-btn:disabled,
  .mobile-page[data-mobile-page="3"] .detail-card .primary-btn:disabled,
  .mobile-page[data-mobile-page="3"] .detail-card .upload-btn:disabled {
    background: #cfd7e1 !important;
    color: #6b7785 !important;
    border-color: #aab6c4 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .field-voice-btn,
  .mobile-page[data-mobile-page="3"] .detail-card .note-voice-btn,
  .mobile-page[data-mobile-page="3"] .detail-card .camera-icon-btn {
    background: #dfe7f0 !important;
    border-color: #9fb0c4 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .field-voice-btn::before,
  .mobile-page[data-mobile-page="3"] .detail-card .note-voice-btn::before,
  .mobile-page[data-mobile-page="3"] .detail-card .camera-minimal-icon,
  .mobile-page[data-mobile-page="3"] .detail-card .camera-minimal-icon::before,
  .mobile-page[data-mobile-page="3"] .detail-card .camera-minimal-icon::after {
    border-color: #51687f !important;
    color: #51687f !important;
  }
}

/* Hidden must win over older mobile layout overrides. */
[hidden],
.mobile-page[data-mobile-page="3"] .detail-card .badge-row[hidden] {
  display: none !important;
}

/* Zapisnik: slightly larger mobile typography */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .detail-card {
    font-size: 14px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .detail-kicker,
  .mobile-page[data-mobile-page="3"] .detail-card label,
  .mobile-page[data-mobile-page="3"] .detail-card input,
  .mobile-page[data-mobile-page="3"] .detail-card select,
  .mobile-page[data-mobile-page="3"] .detail-card textarea,
  .mobile-page[data-mobile-page="3"] .detail-card button,
  .mobile-page[data-mobile-page="3"] .detail-card .upload-btn,
  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .detail-card .mobile-detail-select-option,
  .mobile-page[data-mobile-page="3"] .detail-card .info-panel p,
  .mobile-page[data-mobile-page="3"] .detail-card .photo-actions-title,
  .mobile-page[data-mobile-page="3"] .detail-card .field-note-title {
    font-size: 14px !important;
  }
}

/* Zapisnik: mobile layout guardrails so larger text cannot overlap controls */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .detail-card {
    gap: 8px !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 6px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-topbar > div:first-child {
    min-width: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card h2 {
    font-size: 17px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-kicker,
  .mobile-page[data-mobile-page="3"] .active-address-inline {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 42px) !important;
    gap: 2px !important;
    width: auto !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-actions .ghost-btn {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 22px !important;
    padding: 1px 2px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  .mobile-page[data-mobile-page="3"] #delete-item {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }

  .mobile-page[data-mobile-page="3"] .info-grid {
    display: block !important;
    margin: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .info-panel {
    padding: 4px 6px !important;
  }

  .mobile-page[data-mobile-page="3"] .info-panel p {
    font-size: 14px !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin-top: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > .detail-location-shell {
    order: 1 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-location-voice-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    gap: 4px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-location-voice-wrap .field-voice-btn {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-location-voice-wrap .field-voice-btn::before {
    width: 10px !important;
    height: 10px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(1),
  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(2),
  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(3) {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form:not(.detail-status-form) > label:nth-child(1),
  .mobile-page[data-mobile-page="3"] .detail-form:not(.detail-status-form) > label:nth-child(2),
  .mobile-page[data-mobile-page="3"] .detail-form:not(.detail-status-form) > label:nth-child(3) {
    display: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(1) {
    order: 2 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(2) {
    order: 3 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form > label:nth-child(3) {
    order: 4 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form input,
  .mobile-page[data-mobile-page="3"] .detail-form select,
  .mobile-page[data-mobile-page="3"] .detail-form .mobile-detail-select,
  .mobile-page[data-mobile-page="3"] .detail-form .mobile-detail-select-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-form input,
  .mobile-page[data-mobile-page="3"] .detail-form select,
  .mobile-page[data-mobile-page="3"] .detail-form .mobile-detail-select-trigger {
    height: 24px !important;
    min-height: 24px !important;
    max-height: none !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-footer {
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .mobile-page[data-mobile-page="3"] .photo-actions {
    display: grid !important;
    grid-template-columns: max-content 42px 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .mobile-page[data-mobile-page="3"] .photo-actions-title {
    grid-column: 1 / -1 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .mobile-page[data-mobile-page="3"] .photo-actions .upload-btn {
    width: auto !important;
    min-width: 30px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-title {
    font-size: 17px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-actions .note-voice-btn {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] #ponisti-zadnji-glas {
    width: 58px !important;
    min-width: 58px !important;
    min-height: 22px !important;
    padding: 1px 3px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  .mobile-page[data-mobile-page="3"] #item-napomena {
    min-height: 84px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitems-panel {
    margin-top: 8px !important;
    padding: 10px !important;
  }

  .mobile-page[data-mobile-page="3"] #add-subitem {
    width: auto !important;
    max-width: 100% !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .mobile-page[data-mobile-page="3"] .empty-inline {
    padding: 10px !important;
  }
}

/* Zapisnik: requested recording/photo control refinements */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .detail-location-voice-wrap {
    grid-template-columns: minmax(0, 1fr) 46px !important;
    gap: 5px !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-location-voice-wrap .field-voice-btn,
  .mobile-page[data-mobile-page="3"] .field-note-actions .note-voice-btn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-location-voice-wrap .field-voice-btn::before,
  .mobile-page[data-mobile-page="3"] .field-note-actions .note-voice-btn::before {
    width: 12px !important;
    height: 12px !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-head {
    display: flex !important;
    justify-content: flex-end !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-title[hidden] {
    display: none !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .mobile-page[data-mobile-page="3"] #ponisti-zadnji-glas {
    order: 1 !important;
    width: 86px !important;
    min-width: 86px !important;
    min-height: 34px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
  }

  .mobile-page[data-mobile-page="3"] #snimi-opis {
    order: 2 !important;
  }

  .mobile-page[data-mobile-page="3"] .field-note-actions .camera-icon-btn {
    order: 1 !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-page[data-mobile-page="3"] #ponisti-zadnji-glas {
    order: 2 !important;
  }

  .mobile-page[data-mobile-page="3"] #snimi-opis {
    order: 3 !important;
  }

  .mobile-page[data-mobile-page="3"] .camera-minimal-icon {
    width: 18px !important;
    height: 13px !important;
    border-width: 2px !important;
  }

  .mobile-page[data-mobile-page="3"] .camera-minimal-icon::before {
    left: 6px !important;
    top: 3px !important;
    width: 4px !important;
    height: 4px !important;
    box-shadow: 0 0 0 1px rgba(81, 104, 127, 0.45) !important;
  }

  .mobile-page[data-mobile-page="3"] .camera-minimal-icon::after {
    left: 2px !important;
    top: -5px !important;
    width: 7px !important;
    height: 3px !important;
    border-width: 2px !important;
    border-bottom: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .photo-actions-title,
  .mobile-page[data-mobile-page="3"] .subitem-card .photo-actions-title {
    display: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-footer .photo-actions > .upload-btn:not(.camera-icon-btn),
  .mobile-page[data-mobile-page="3"] .subitem-detail-footer .photo-actions > .upload-btn:not(.camera-icon-btn) {
    display: none !important;
  }
}

/* Zapisnik: stable subitem styling aligned with the main item card */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .subitem-card {
    background:
      linear-gradient(135deg, rgba(32, 61, 94, 0.48), rgba(7, 27, 52, 0) 34%),
      linear-gradient(180deg, rgba(12, 34, 63, 0.98), rgba(9, 29, 56, 0.96)) !important;
    border-color: rgba(205, 216, 230, 0.34) !important;
    color: #eef3fa !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-card-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px 58px !important;
    gap: 5px !important;
    align-items: center !important;
    margin-bottom: 6px !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-card-top strong {
    color: #eef3fa !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-card-top .ghost-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 2px 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-name-label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-name-label input {
    width: 100% !important;
    min-height: 24px !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid .inline-select-field {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #eef3fa !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid .mobile-detail-select,
  .mobile-page[data-mobile-page="3"] .subitem-grid .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .subitem-grid select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-grid .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .subitem-grid select {
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-title {
    color: #eef3fa !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-actions {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-actions .note-voice-btn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-actions [data-subitem-undo] {
    width: 86px !important;
    min-width: 86px !important;
    min-height: 34px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-actions .nav-arrow-btn {
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-block textarea {
    width: 100% !important;
    min-height: 84px !important;
    padding: 6px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-card input,
  .mobile-page[data-mobile-page="3"] .subitem-card textarea {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: text !important;
    -webkit-user-select: text !important;
  }
}

/* Zapisnik: subitem text entry must stay visible while typing */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .subitem-card input,
  .mobile-page[data-mobile-page="3"] .subitem-card textarea,
  .mobile-page[data-mobile-page="3"] .subitem-card select,
  .mobile-page[data-mobile-page="3"] .subitem-card .mobile-detail-select-trigger,
  .mobile-page[data-mobile-page="3"] .subitem-card .mobile-detail-select-option {
    background: #eef2f7 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    caret-color: #111111 !important;
    border-color: #8ea2ba !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-card input::placeholder,
  .mobile-page[data-mobile-page="3"] .subitem-card textarea::placeholder {
    color: #59697c !important;
    -webkit-text-fill-color: #59697c !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-card input:focus,
  .mobile-page[data-mobile-page="3"] .subitem-card textarea:focus {
    outline: 2px solid rgba(255, 245, 194, 0.95) !important;
    outline-offset: 1px !important;
  }
}

/* Zapisnik: subitem note controls match main item controls */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="3"] .subitem-note-head {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-title {
    margin-right: auto !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-actions .camera-icon-btn,
  .mobile-page[data-mobile-page="3"] .subitem-note-actions .note-voice-btn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-actions [data-subitem-undo] {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    min-height: 34px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  .mobile-page[data-mobile-page="3"] #ponisti-zadnji-glas,
  .mobile-page[data-mobile-page="3"] .subitem-note-actions [data-subitem-undo] {
    background: #e7edf5 !important;
    color: #0b1f3a !important;
    border-color: #9fb0c4 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="3"] #ponisti-zadnji-glas:disabled,
  .mobile-page[data-mobile-page="3"] .subitem-note-actions [data-subitem-undo]:disabled {
    background: #cfd7e1 !important;
    color: #6b7785 !important;
    border-color: #aab6c4 !important;
    opacity: 1 !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-detail-footer .photo-actions > .camera-icon-btn {
    display: none !important;
  }

  .mobile-page[data-mobile-page="3"] .subitem-note-title {
    display: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .empty-inline {
    min-height: 64px !important;
    padding: 10px 12px !important;
    background: #eef2f7 !important;
    color: #111111 !important;
    overflow: visible !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .empty-inline strong,
  .mobile-page[data-mobile-page="3"] .detail-card .empty-inline p {
    display: block !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
  }

  .mobile-page[data-mobile-page="3"] .detail-card .empty-inline p {
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    white-space: normal !important;
  }
}

/* Pregledi: readable mobile scale for summary and inspection metadata */
@media (max-width: 760px) {
  .mobile-page[data-mobile-page="1"] .stats-shell,
  .mobile-page[data-mobile-page="1"] .meta-card {
    padding: 8px !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading h2,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading .heading-inline h2,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading h2,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading .heading-inline h2 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="1"] .project-manager-card .section-heading h2,
  .mobile-page[data-mobile-page="1"] .project-manager-card .section-heading .heading-inline h2,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading h2,
  .mobile-page[data-mobile-page="1"] .stats-shell .section-heading .heading-inline h2,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading h2,
  .mobile-page[data-mobile-page="1"] .meta-card .section-heading .heading-inline h2 {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .dashboard-grid {
    gap: 6px !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card {
    padding: 7px 8px !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-label,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card-note,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card small {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-card strong,
  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-item strong {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-item span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .stat-list-toggle,
  .mobile-page[data-mobile-page="1"] .stats-shell .ghost-btn,
  .mobile-page[data-mobile-page="1"] .stats-shell .primary-btn {
    min-height: 28px !important;
    height: auto !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .empty-inline {
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 10px !important;
  }

  .mobile-page[data-mobile-page="1"] .stats-shell .empty-inline p {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .form-grid {
    gap: 6px !important;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .inline-voice-field,
  .mobile-page[data-mobile-page="1"] .meta-card .inline-select-field {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .field-label-text,
  .mobile-page[data-mobile-page="1"] .meta-card label {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .field-voice-wrap {
    grid-template-columns: minmax(0, 1fr) 32px !important;
    gap: 4px !important;
  }

  .mobile-page[data-mobile-page="1"] .meta-card input,
  .mobile-page[data-mobile-page="1"] .meta-card select,
  .mobile-page[data-mobile-page="1"] .meta-card textarea,
  .mobile-page[data-mobile-page="1"] .meta-card .mobile-detail-select-trigger {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .mobile-page[data-mobile-page="1"] .meta-card .field-voice-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}