/* ===========================================================================
   Pearl Insights - view-specific styles
   =========================================================================== */

/* ---------------- LANDING ---------------- */
.landing { --landing-dark: #06140f; --landing-lake: #0c2e26; }

/* editorial cartography hero */
.landing-hero {
  position: relative;
  overflow: hidden;
  min-height: min(94vh, 920px);
  background: var(--landing-dark);
  display: flex;
  flex-direction: column;
}
.landing-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 88% 12%, rgba(21,122,92,.46), transparent 58%),
    radial-gradient(ellipse 50% 45% at 8% 72%, rgba(201,146,10,.20), transparent 55%),
    radial-gradient(ellipse 40% 30% at 42% 100%, rgba(221,160,46,.14), transparent 60%),
    linear-gradient(168deg, #04100b 0%, var(--landing-lake) 38%, #103a30 72%, #06180f 100%);
}
.landing-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}
.landing-hero-topo {
  position: absolute;
  inset: -20% -10%;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.35' d='M0 200 Q100 180 200 200 T400 200 M0 160 Q120 140 240 165 T400 155 M0 240 Q80 260 200 235 T400 250 M0 120 Q150 100 300 130 T400 115 M0 280 Q100 300 220 270 T400 285'/%3E%3C/svg%3E");
  background-size: 420px 420px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
  animation: topoDrift 90s linear infinite;
}
@keyframes topoDrift {
  from { transform: translate(0, 0); }
  to { transform: translate(-80px, -40px); }
}
.landing-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.landing-hero-glow-a {
  width: 480px;
  height: 480px;
  right: -8%;
  top: -12%;
  background: rgba(21, 122, 92, 0.4);
}
.landing-hero-glow-b {
  width: 360px;
  height: 360px;
  left: -6%;
  bottom: 18%;
  background: rgba(201, 84, 43, 0.22);
}
.landing-hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(20px, 3vw, 28px) 24px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.landing-hero-copy { max-width: 600px; padding-top: 8px; }
.landing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 2px;
  max-width: 100%;
}
.landing-hero-eyebrow-bar {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--civic) 100%);
  flex-shrink: 0;
}
.landing-hero-eyebrow-ic {
  color: var(--gold);
  opacity: 0.92;
  flex-shrink: 0;
}
.landing-hero-eyebrow-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  line-height: 1.35;
}
.landing-hero-kicker {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.landing-hero-h1 {
  font-size: clamp(44px, 6.2vw, 78px);
  line-height: 0.98;
  margin: 14px 0 0;
  letter-spacing: -0.035em;
  color: #fff;
  font-weight: 800;
  font-style: normal;
}
.landing-hero-line { display: block; }
.landing-hero-line-accent { margin-top: 0.06em; }
.landing-grad {
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(118deg, #9bd9a8 0%, var(--gold) 48%, #e8b46a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.landing-hero-sub {
  font-size: clamp(16px, 1.55vw, 18px);
  color: rgba(232,240,248,.85);
  margin-top: 22px;
  max-width: 520px;
  line-height: 1.62;
  font-weight: 400;
}
.landing-hero-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 14px;
  max-width: 520px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.45;
}
.landing-hero-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--gold); opacity: .9; }
.landing-hero-cta { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.btn-glass { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 700;
  font-family: var(--font-head); font-size: 16px; transition: .18s; backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); transform: translateY(-1px); }
.btn-glass-light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.link-cta { background: none; border: none; font-weight: 700; font-family: var(--font-head);
  display: inline-flex; align-items: center; gap: 6px; font-size: 15px; padding: 8px; transition: .18s; }
.link-cta-light { color: rgba(255,255,255,.75); }
.link-cta-light:hover { color: var(--gold); gap: 9px; }

.landing-hero-metrics {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(20px, 3vw, 28px) clamp(28px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.landing-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
  animation: metricIn .7s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--metric-i, 0) * 0.07s + 0.25s);
}
@keyframes metricIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.landing-metric-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(201,146,10,.12);
  color: var(--gold);
  flex-shrink: 0;
  border: 1px solid rgba(201,146,10,.2);
}
.landing-metric-v {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.landing-metric-l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.58);
  margin-top: 3px;
  line-height: 1.3;
}

.landing-hero-visual { position: relative; }
.landing-map-stage {
  position: relative;
  transform: none;
}
.landing-map-stage:hover { transform: translateY(-3px); }
.atlas-frame { background: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.atlas-frame-glow {
  box-shadow:
    0 32px 80px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.1),
    0 0 100px rgba(21,122,92,.22);
}
.af-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #f6f8f3; }
.af-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.af-dot-r { background: #e8a4a0; }
.af-dot-y { background: #e8d4a0; }
.af-dot-g { background: #a8d4a0; }
.af-title { margin-left: 10px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.af-body { position: relative; background: linear-gradient(160deg, var(--navy), var(--navy-2)); padding: 8px; }
.af-body-map-only { padding: 6px; }
.af-body-map-only .hero-map { border-radius: 8px; width: 100%; height: auto; vertical-align: top; }
.af-kpi-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 11px 16px; background: #f8faf6; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700;
  color: var(--ink-2); font-family: var(--font-head); }
.af-kpi-dot { color: var(--ink-4); font-weight: 400; }
.hero-map { display: block; border-radius: 10px; background: var(--navy); }
.hero-map-meta { pointer-events: none; }
.hero-map image { image-rendering: auto; }
.hero-node { animation: nodePop .5s cubic-bezier(.2,.8,.2,1) both; }
.hero-node-top { cursor: default; }
.hero-pulse { animation: heroPulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes nodePop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes heroPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(2.4); opacity: 0; } }
.float-ai { position: absolute; right: 16px; top: 22px; width: 248px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-radius: 14px; padding: 13px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.6); animation: floaty 5s ease-in-out infinite; }
.fai-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 13px; white-space: nowrap; }
.fai-mark { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--gold)); box-shadow: 0 0 10px rgba(201,146,10,.8); }
.fai-q { font-size: 12px; font-weight: 700; color: var(--civic); margin-top: 11px; line-height: 1.4; }
.fai-a { font-size: 11.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }
.fai-src { display: flex; gap: 5px; margin-top: 9px; }
.float-finder { position: absolute; left: 18px; bottom: 20px; display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-radius: 12px; padding: 10px 13px; box-shadow: var(--shadow-lg); animation: floaty 6s ease-in-out infinite reverse; }
.ff-t { font-size: 12px; font-weight: 700; color: var(--navy); }
.ff-s { font-size: 11px; color: var(--ink-3); }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.landing-body { padding-top: 8px; }

/* start here - task-oriented entry points */
.landing-start { padding-top: 36px; }
.start-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.start-card {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 168px;
}
.start-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.start-card-featured {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  background: linear-gradient(155deg, #fff 0%, #fdf6f0 100%);
}
.start-card-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--accent);
  margin-bottom: 14px;
}
.start-card-featured .start-card-ic {
  background: linear-gradient(150deg, var(--navy), var(--civic));
  color: #fff;
}
.start-card-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.2;
}
.start-card-desc {
  font-size: 13.2px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.5;
  flex: 1;
}
.start-card-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--civic);
}
.start-card:hover .start-card-go { gap: 9px; }

.landing-what-is {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 34px;
  box-shadow: var(--shadow-sm);
}
.landing-summary { padding-top: 40px; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float-ai, .float-finder, .hero-node, .hero-pulse,
  .landing-hero-topo, .landing-metric { animation: none !important; }
  .landing-map-stage { transform: none; }
}

.lsec { padding: 46px 0 8px; }
.lsec-h { font-size: clamp(24px, 3vw, 32px); margin-top: 8px; letter-spacing: -0.03em; }
.lsec-h-light { color: #fff; }

/* featured districts */
.district-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.district-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 16px; overflow: hidden; box-shadow: var(--shadow-sm); transition: .2s; position: relative; }
.district-card::before { content: ""; display: block; height: 4px; background: var(--dc-accent, var(--civic)); margin: -18px -20px 14px; }
.district-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.district-card-rank { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-accent, var(--civic)); }
.district-card-name { display: block; font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--navy); margin-top: 6px; }
.district-card-pop { display: block; font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--navy); margin-top: 4px; letter-spacing: -0.02em; }
.district-card-meta { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.district-card-go { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--civic); }

/* bento capabilities */
.landing-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(120px, auto); gap: 14px; margin-top: 24px; }
.bento-tile { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px);
  padding: 22px; box-shadow: var(--shadow-sm); transition: .2s; display: flex; flex-direction: column; min-height: 140px; }
.bento-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.bento-ai { grid-column: span 2; grid-row: span 2; background: linear-gradient(155deg, #fff 0%, #f4f8ef 100%);
  border-color: color-mix(in srgb, var(--green) 35%, var(--line)); min-height: 100%; }
.bento-atlas { grid-column: span 2; background: linear-gradient(155deg, #fff, #eef3fa); border-color: color-mix(in srgb, var(--civic) 25%, var(--line)); }
.bento-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bg-2); color: var(--accent); margin-bottom: 12px; }
.bento-ic-ai { background: linear-gradient(150deg, var(--navy), var(--civic)); color: #fff; width: 48px; height: 48px; border-radius: 14px; }
.bento-t { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 17px; line-height: 1.25; }
.bento-d { font-size: 13.2px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; flex: 1; }
.bento-preview { margin-top: 16px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.85); border: 1px solid var(--line); }
.bento-q { font-size: 12.5px; font-weight: 700; color: var(--civic); line-height: 1.4; }
.bento-a { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.bento-src { margin-top: 8px; }
.bento-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--civic); }
.bento-atlas-mini { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px; border-radius: 12px; background: rgba(21,122,92,.06); }
.bento-map-svg { width: 80px; height: auto; flex-shrink: 0; }
.bento-atlas-label { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--navy); }
.bento-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.bento-bars span { display: block; height: 7px; border-radius: 100px; background: linear-gradient(90deg, var(--civic), var(--green)); opacity: .75; }

/* how it works */
.landing-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px; position: relative; }
.landing-steps::before { content: ""; position: absolute; top: 52px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--line), var(--civic), var(--green), var(--line)); opacity: .45; z-index: 0; }
.landing-step { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; margin: 0 7px; box-shadow: var(--shadow-sm); transition: .2s; position: relative; z-index: 1; }
.landing-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.landing-step-n { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-4); letter-spacing: .06em; }
.landing-step-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-top: 12px;
  background: linear-gradient(150deg, var(--navy), var(--civic)); color: #fff; }
.landing-step-t { display: block; font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--navy); margin-top: 14px; }
.landing-step-d { display: block; font-size: 13.2px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }

/* module showcase v2 */
.mod-grid-v2 { grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.mod-card-v2 { position: relative; padding-top: 26px; overflow: hidden; }
.mod-card-v2::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: .2s; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--mod-glow, var(--accent)); border-radius: inherit; }
.mod-card-v2:hover::after { opacity: 1; }
.mod-num { position: absolute; top: 14px; right: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-4); }
.mod-ic-v2 { background: var(--mod-bg, linear-gradient(150deg, var(--navy), var(--civic))) !important; }
.mod-accent-navy { --mod-bg: linear-gradient(150deg, var(--navy), var(--civic)); --mod-glow: var(--civic); }
.mod-accent-teal { --mod-bg: linear-gradient(150deg, var(--civic), var(--info)); --mod-glow: var(--info); }
.mod-accent-gold { --mod-bg: linear-gradient(150deg, var(--warm-d), var(--warm)); --mod-glow: var(--warm); }
.mod-accent-green { --mod-bg: linear-gradient(150deg, var(--green-d), var(--green)); --mod-glow: var(--green); }
.mod-accent-civic { --mod-bg: linear-gradient(150deg, var(--civic), var(--civic-2)); --mod-glow: var(--civic); }
.mod-accent-purple { --mod-bg: linear-gradient(150deg, #6B5A82, var(--chart-5)); --mod-glow: var(--chart-5); }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mod-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); transition: .18s; }
.mod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.mod-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff;
  background: linear-gradient(150deg, var(--navy), var(--civic)); margin-bottom: 14px; }
.mod-t { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 17px; display: flex; align-items: center; gap: 7px; }
.mod-arrow { color: var(--ink-4); transition: .18s; }
.mod-card:hover .mod-arrow { color: var(--accent); transform: translateX(4px); }
.mod-d { font-size: 13.4px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }

/* audience + trust split */
.landing-split { display: grid; grid-template-columns: 1fr 1.05fr; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.landing-split-dark { background: linear-gradient(145deg, var(--navy), var(--navy-2)); padding: 36px 34px; position: relative; overflow: hidden; }
.landing-split-dark::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,146,10,.2), transparent 70%); pointer-events: none; }
.landing-eyebrow-light { color: var(--gold) !important; }
.persona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; position: relative; z-index: 1; }
.persona-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 600; font-size: 13.5px; }
.persona-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.1); color: var(--gold); flex-shrink: 0; }
.landing-split-light { background: var(--card); padding: 36px 34px; }
.landing-trust-intro { max-width: 520px; margin-top: 8px; line-height: 1.55; }
.trust-right { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.trust-right-v2 { margin-top: 20px; }
.trust-item { display: flex; gap: 11px; align-items: flex-start; }
.trust-item b { display: block; font-family: var(--font-head); color: var(--navy); font-size: 14.5px; }
.trust-item span { display: block; font-size: 12.6px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.landing-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

/* closing CTA band */
.landing-final { padding-bottom: 24px; }

.landing-lead { font-size: 16px; line-height: 1.62; color: var(--ink-2); margin-top: 14px; max-width: 920px; }
.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.principle-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.principle-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bg-2); color: var(--accent); margin-bottom: 12px; }
.principle-t { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 15px; }
.principle-d { font-size: 13px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
.mod-users { font-size: 11.5px; font-weight: 700; color: var(--ink-4); margin-top: 10px; letter-spacing: .02em; }
.pearl-spotlight { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pearl-spotlight-copy { background: linear-gradient(145deg, var(--navy), var(--navy-2)); padding: 36px 34px; }
.pearl-spotlight-lead { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.58; margin-top: 10px; max-width: 520px; }
.pearl-cap-list { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pearl-cap-list li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.88); font-size: 13.5px; line-height: 1.45; }
.pearl-cap-list svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.pearl-spotlight-preview { background: var(--card); padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; }
.pearl-quote-q { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--civic); line-height: 1.35; }
.pearl-quote-a { font-size: 14px; color: var(--ink-2); margin-top: 14px; line-height: 1.58; padding-left: 14px; border-left: 3px solid var(--gold); }
.source-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.source-table { margin: 0; }
.source-table td, .source-table th { padding: 12px 14px; }
.source-cadence { white-space: nowrap; color: var(--ink-3); font-size: 12.5px; }
.usecase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 24px; }
.usecase-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.usecase-group { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--civic); }
.usecase-example { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.usecase-outcome { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--green-d); }
.landing-split-lead { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.55; margin-top: 10px; max-width: 420px; position: relative; z-index: 1; }
.interop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.interop-chip { padding: 8px 12px; border-radius: 100px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 12.5px; font-weight: 600; }
.vision-band { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 36px 38px; box-shadow: var(--shadow-sm); }
.vision-text { font-size: 15.5px; color: var(--ink-2); line-height: 1.62; margin-top: 12px; max-width: 920px; }
.landing-cta-band { position: relative; text-align: center; padding: 56px 32px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--civic) 55%, var(--navy-2) 100%); color: #fff; }
.landing-cta-orb { position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,146,10,.35), transparent 68%); pointer-events: none; }
.landing-cta-band h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.03em; color: #fff; position: relative; }
.landing-cta-band p { color: rgba(255,255,255,.78); margin-top: 10px; font-size: 16px; position: relative; }
.landing-cta-btns { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; position: relative; }

@media (max-width: 920px) {
  .landing-hero-inner { grid-template-columns: 1fr; padding-bottom: 16px; }
  .landing-hero-visual { order: -1; }
  .landing-hero { min-height: auto; }
  .landing-hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .start-grid { grid-template-columns: repeat(2, 1fr); }
  .principle-grid { grid-template-columns: 1fr 1fr; }
  .pearl-spotlight { grid-template-columns: 1fr; }
  .district-strip { grid-template-columns: repeat(2, 1fr); }
  .landing-bento { grid-template-columns: 1fr; }
  .bento-ai, .bento-atlas { grid-column: span 1; grid-row: span 1; }
  .landing-steps { grid-template-columns: 1fr; gap: 12px; }
  .landing-steps::before { display: none; }
  .landing-step { margin: 0; }
  .mod-grid-v2 { grid-template-columns: 1fr; }
  .landing-split { grid-template-columns: 1fr; }
  .trust-right { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .landing-hero-metrics { grid-template-columns: 1fr; }
  .landing-metric { padding: 12px 14px; }
  .start-grid { grid-template-columns: 1fr; }
  .landing-what-is { padding: 22px 20px; }
  .principle-grid { grid-template-columns: 1fr; }
  .district-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .district-card { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; }
  .persona-grid { grid-template-columns: 1fr; }
}

/* ---------------- ATLAS ---------------- */
.app-atlas .main-full {
  flex: 0 0 auto;
}
.app-dashboard {
  min-height: 100vh;
}
.app-dashboard .main-full {
  flex: 1;
  min-height: 0;
}
.atlas {
  position: relative;
  display: flex;
  min-height: calc(100vh - var(--nav-h));
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}
.atlas-side {
  width: 322px; flex: 0 0 322px; background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 500;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}
.atlas-side-foot { flex: 0 0 auto; padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--card); }
.atlas-side-lead { padding: 0; margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.as-search {
  flex-shrink: 0;
  padding: 16px 16px 10px; border-bottom: 1px solid var(--line);
  background: var(--card); position: relative;
}
.search-results { position: absolute; left: 16px; right: 16px; top: 60px; background: #fff; border: 1px solid var(--line-2);
  border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 30; overflow: hidden; }
.sr-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 13px; border: none;
  background: none; border-bottom: 1px solid var(--line); }
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--bg); }
.sr-item b { display: block; font-size: 13.5px; color: var(--navy); font-weight: 700; }
.sr-item em { display: block; font-size: 11.5px; color: var(--ink-3); font-style: normal; }
.as-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ex-chip { font-size: 11.5px; padding: 5px 10px; border-radius: 100px; background: var(--bg-2); border: none; color: var(--ink-2); font-weight: 600; }
.ex-chip:hover { background: #e1e9d8; color: var(--navy); }

.loc-btn { display: flex; align-items: center; gap: 9px; margin: 12px 16px; padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--line-2); background: #fff; color: var(--navy); font-weight: 700; font-family: var(--font-head); transition: .15s; }
.loc-btn:hover { border-color: var(--civic); color: var(--civic); }
.loc-btn.on { background: var(--civic); color: #fff; border-color: var(--civic); }

.as-scroll { flex: 0 0 auto; padding: 4px 16px 24px; }
.as-block { padding: 14px 0; border-bottom: 1px solid var(--line); }
.as-block:last-child { border-bottom: none; }
.as-h { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.lg { margin-bottom: 8px; }
.lg-head { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; padding: 5px 0; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.lg-name { font-weight: 700; color: var(--navy); font-size: 13.5px; flex: 1; text-align: left; }
.lg-all { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 2px 8px; border-radius: 100px; background: var(--bg-2); }
.lg-all.on { color: var(--civic); }
.lg-layers { padding: 4px 0 6px 19px; display: flex; flex-direction: column; gap: 1px; }
.tog { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; }
.tog input { display: none; }
.tog-box { width: 16px; height: 16px; border-radius: 5px; border: 1.6px solid var(--line-2); flex: 0 0 auto; position: relative; transition: .12s; }
.tog input:checked + .tog-box { background: var(--tc); border-color: var(--tc); }
.tog input:checked + .tog-box::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); }
.tog-label { font-size: 13px; color: var(--ink-2); flex: 1; }
.tog input:checked ~ .tog-label { color: var(--navy); font-weight: 600; }
.tog-n { font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ov-list { display: flex; flex-direction: column; gap: 3px; }
.radio { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.radio input { display: none; }
.radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid var(--line-2); flex: 0 0 auto; position: relative; transition: .12s; }
.radio input:checked + .radio-dot { border-color: var(--civic); }
.radio input:checked + .radio-dot::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--civic); }
.radio input:checked ~ span { color: var(--navy); font-weight: 600; }
.fld { display: block; }
.fld span { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; font-weight: 600; }
.fld .input { padding: 9px 12px; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-b { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.tool-b:hover { border-color: var(--accent); color: var(--accent); }

.map-style-block-sticky {
  position: sticky; top: 0; z-index: 35; flex-shrink: 0;
  padding: 10px 16px 12px; background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(8,34,74,.06);
}
.map-style-h { margin-bottom: 8px; }
.map-style-icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.map-ic-btn {
  padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; flex-shrink: 0;
}
.map-ic-circle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.08); color: var(--navy);
  box-shadow: 0 2px 6px rgba(8,34,74,.07);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.map-ic-btn:hover .map-ic-circle { transform: scale(1.07); }
.map-ic-btn.active .map-ic-circle {
  border-color: var(--civic);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--civic) 28%, transparent), 0 2px 8px rgba(8,34,74,.1);
}
.map-ic-dark .map-ic-circle,
.map-ic-topo .map-ic-circle { color: #fff; }
.map-ic-dark.active .map-ic-circle,
.map-ic-topo.active .map-ic-circle { border-color: color-mix(in srgb, var(--civic) 80%, #fff); }
.atlas-dark .map-style-block-sticky { background: var(--card); box-shadow: 0 4px 12px rgba(0,0,0,.2); }

.lg-ic {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--lc) 14%, #fff);
  color: var(--lc);
}
.tog-ic {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--lc) 10%, var(--bg-2));
  color: var(--ink-3); transition: background .12s, color .12s;
}
.tog input:checked ~ .tog-ic {
  background: color-mix(in srgb, var(--lc) 16%, #fff);
  color: var(--lc);
}

.atlas-map { flex: 1; position: relative; }
.map-canvas { position: absolute; inset: 0; }

.city-search-marker {
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 88%, #fff);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 14px rgba(0,0,0,.22);
  animation: citySearchPulse 2s ease-out infinite;
}
@keyframes citySearchPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 14px rgba(0,0,0,.22); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 12%, transparent), 0 4px 18px rgba(0,0,0,.28); }
}
.search-highlight-ring { animation: searchRingFade 2.4s ease-in-out infinite; }
.search-highlight-core { animation: searchCoreFade 2.4s ease-in-out infinite; }
@keyframes searchRingFade {
  0%, 100% { stroke-opacity: 0.95; fill-opacity: 0.14; }
  50% { stroke-opacity: 0.45; fill-opacity: 0.06; }
}
@keyframes searchCoreFade {
  0%, 100% { fill-opacity: 0.22; }
  50% { fill-opacity: 0.1; }
}

.legend { position: absolute; left: 14px; bottom: 46px; z-index: 450; background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 168px; max-width: 220px; }
.atlas-dark .legend { background: rgba(16,28,46,.92); border-color: rgba(255,255,255,.12); color: #e6edf6; }
.legend-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.atlas-dark .legend-h { color: #93a4bb; }
.legend-items { display: flex; flex-direction: column; gap: 6px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.atlas-dark .legend-item { color: #d4dded; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-empty { font-size: 11.5px; color: var(--ink-4); }
.atlas-data-note {
  margin: 0; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--civic) 8%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--civic) 18%, var(--line));
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.atlas-data-sep { color: var(--ink-4); font-weight: 400; }
.legend-ov { margin-bottom: 10px; }
.ov-grad { height: 9px; border-radius: 5px; }
.ov-scale { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--ink-3); margin-top: 4px; font-weight: 600; }
.ov-scale span:nth-child(2) { color: var(--ink-2); }

.bnd-pill { position: absolute; left: 14px; top: 14px; z-index: 450; display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 100px; padding: 7px 14px; font-size: 12px;
  font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); transition: 0.2s; }
.bnd-pill:hover { background: rgba(255, 255, 255, 0.95); transform: translateY(1px); }
.atlas-dark .bnd-pill { background: rgba(16, 28, 46, 0.82); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, 0.12); color: #d4dded; }
.bnd-dot { width: 8px; height: 8px; border-radius: 50%; }
.bnd-dot.loading { background: var(--gold); animation: blink 1s infinite; }
.bnd-dot.live { background: var(--success); }
.bnd-dot.fallback { background: var(--ink-4); }
@keyframes blink { 50% { opacity: .3; } }

.weather-card {
  position: absolute; right: 18px; top: 72px; z-index: 455; width: min(248px, calc(100vw - 36px));
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 14px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.weather-card-dark {
  background: rgba(16, 28, 46, 0.9); border-color: rgba(255, 255, 255, 0.12); color: #e6edf6;
}
.weather-card-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px 7px;
  border-bottom: 1px solid var(--line);
}
.weather-card-dark .weather-card-head { border-color: rgba(255, 255, 255, 0.1); }
.weather-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--info);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--info) 45%, transparent);
  animation: pulse 2.2s infinite; flex-shrink: 0;
}
.weather-card-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.weather-card-dark .weather-card-title { color: #93a4bb; }
.weather-card-place {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-2);
  max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.weather-card-dark .weather-card-place { color: #d4dded; }
.weather-card-body { padding: 10px 12px 11px; }
.weather-card-loading, .weather-card-error { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.weather-card-dark .weather-card-loading, .weather-card-dark .weather-card-error { color: #aebcd0; }
.weather-main { display: flex; align-items: flex-start; gap: 10px; }
.weather-main-copy { flex: 1; min-width: 0; }
.weather-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.weather-temp {
  font-family: var(--font-head); font-size: 24px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--navy); line-height: 1;
}
.weather-card-dark .weather-temp, .atlas-wx-block-dark .weather-temp { color: #fff; }
.weather-label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.weather-card-dark .weather-label, .atlas-wx-block-dark .weather-label { color: #c4d0e0; }
.weather-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
}
.weather-card-dark .weather-grid { color: #aebcd0; }
.weather-foot {
  margin-top: 6px; font-size: 10px; font-weight: 600; color: var(--ink-4);
}
.weather-card-dark .weather-foot, .atlas-wx-block-dark .weather-foot { color: #7f92aa; }

.atlas-right {
  width: 340px; flex: 0 0 340px; min-width: 0; min-height: 0;
  background: var(--card); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 480;
  box-shadow: -6px 0 24px rgba(8, 34, 74, 0.06);
}
.atlas-right-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--civic) 6%, var(--card)), var(--card));
}
.atlas-right-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.atlas-right-title {
  font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.02em; margin-top: 2px;
}
.atlas-right-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.atlas-right-divider { height: 1px; background: var(--line); margin: 0 16px; }
.atlas-wx-block { padding: 12px 16px 4px; }
.atlas-wx-block-dark { color: #e6edf6; }
.atlas-wx-section { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--line); }
.atlas-wx-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.atlas-wx-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.atlas-wx-block-dark .atlas-wx-h { color: #93a4bb; }
.atlas-wx-place, .atlas-wx-tag {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-4);
  text-transform: none; letter-spacing: 0;
}
.atlas-wx-tag {
  padding: 2px 7px; border-radius: 100px; background: var(--bg-2); color: var(--ink-3);
}
.atlas-wx-muted { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.atlas-wx-block-dark .atlas-wx-muted { color: #aebcd0; }
.atlas-wx-meta { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3); line-height: 1.45; }
.atlas-wx-block-dark .atlas-wx-meta { color: #aebcd0; }
.atlas-forecast-row {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.atlas-forecast-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border-radius: 8px; background: var(--bg); text-align: center;
}
.afd-label { font-size: 9px; font-weight: 700; color: var(--ink-3); }
.afd-emoji { font-size: 15px; line-height: 1; }
.afd-temp { font-size: 11px; font-weight: 800; color: var(--navy); }
.afd-lo { font-size: 10px; color: var(--ink-4); font-weight: 600; }
.afd-rain { font-size: 9px; font-weight: 700; color: var(--info); }
.atlas-climate-summary {
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.45; margin-bottom: 10px;
}
.atlas-wx-block-dark .atlas-climate-summary { color: #c4d0e0; }
.atlas-climate-chart {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px;
  height: 72px; align-items: end; position: relative;
}
.acc-col { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.acc-rain {
  width: 100%; max-width: 14px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--info), color-mix(in srgb, var(--info) 55%, var(--civic)));
}
.acc-temp {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent);
}
.acc-lbl { font-size: 8px; font-weight: 700; color: var(--ink-4); margin-top: 4px; }
.atlas-climate-key {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
  font-size: 10px; font-weight: 600; color: var(--ink-4);
}
.acc-key-rain, .acc-key-temp {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle;
}
.acc-key-rain { background: var(--info); }
.acc-key-temp { background: var(--gold); border-radius: 50%; }

.atlas-explore-prompt { padding: 18px 16px 24px; text-align: center; }
.aep-icon {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px;
  display: grid; place-items: center; color: var(--civic);
  background: color-mix(in srgb, var(--civic) 10%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--civic) 20%, var(--line));
}
.aep-title { font-family: var(--font-head); font-size: 18px; color: var(--navy); margin: 0 0 8px; letter-spacing: -0.02em; }
.aep-text { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0 0 14px; }
.aep-list {
  list-style: none; padding: 0; margin: 0 0 16px; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.aep-list li {
  font-size: 12.5px; color: var(--ink-2); font-weight: 600; padding-left: 18px; position: relative;
}
.aep-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--civic);
}
.aep-quick { text-align: left; padding-top: 12px; border-top: 1px dashed var(--line); }
.aep-quick-h { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.aep-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.atlas-panel-detail { padding: 16px 16px 20px; }
.atlas-panel-detail-embedded { padding-top: 8px; }
.atlas-panel-detail .ad-head { margin-bottom: 4px; }

.ad-weather {
  background: linear-gradient(135deg, rgba(42,134,150,.08), rgba(19,128,94,.08));
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; margin-bottom: 14px;
}
.ad-weather-top { display: flex; align-items: center; gap: 10px; }
.ad-weather-temp {
  font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1;
}
.ad-weather-label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.ad-weather-meta { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; line-height: 1.45; }

.fab-ai { position: absolute; right: 18px; top: 18px; z-index: 460; display: flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: 100px; border: none; background: linear-gradient(140deg, var(--navy), var(--civic));
  color: #fff; font-weight: 700; font-family: var(--font-head); font-size: 14px; box-shadow: 0 6px 20px rgba(8,34,74,.34); transition: .16s; }
.fab-ai:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(8,34,74,.42); }
.fab-mark { width: 17px; height: 17px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--gold)); box-shadow: 0 0 10px rgba(201,146,10,.9); }

.atlas-toast { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 470; background: var(--navy); color: #fff;
  padding: 10px 18px; border-radius: 100px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); max-width: 70%; text-align: center; animation: fadeUp .3s; }

.atlas-status { position: absolute; left: 0; right: 0; bottom: 0; z-index: 440; height: 34px; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.atlas-dark .atlas-status { background: rgba(13, 23, 38, 0.82); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.1); color: #c4d0e0; }
.atlas-status b { color: var(--navy); font-variant-numeric: tabular-nums; }
.atlas-dark .atlas-status b { color: #fff; }
.st-sep { width: 1px; height: 16px; background: var(--line-2); }
.st-ok { display: flex; align-items: center; gap: 6px; }
.st-live { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); animation: pulse 2s infinite; }
.st-grow { flex: 1; }
.st-coord { color: var(--ink-3); min-width: 130px; text-align: right; }

.atlas-detail, .atlas-panel-detail.atlas-detail-legacy { position: absolute; right: 0; top: 0; bottom: 34px; width: 348px; z-index: 480; background: var(--card);
  border-left: 1px solid var(--line); box-shadow: -8px 0 28px rgba(8,34,74,.1); overflow-y: auto; padding: 18px; }
.ad-head { display: flex; justify-content: space-between; gap: 10px; }
.ad-kicker { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--civic); }
.ad-title { font-size: 24px; margin-top: 3px; letter-spacing: -0.03em; }
.ad-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.ad-close { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink-3); display: grid; place-items: center; flex: 0 0 auto; }
.ad-close:hover { background: var(--bg); color: var(--navy); }
.ad-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 16px 0; }
.ad-stats > div { background: var(--bg); border-radius: 10px; padding: 10px; text-align: center; }
.ad-stats span { display: block; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 18px; letter-spacing: -0.02em; }
.ad-stats em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.ad-cov { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-radius: 11px; padding: 12px 16px; margin-bottom: 14px; }
.ad-cov-l { font-weight: 700; color: var(--navy); font-size: 13.5px; }
.ad-bars { margin-bottom: 16px; }
.ad-ai { background: linear-gradient(160deg, var(--info-bg), var(--card)); border: 1px solid color-mix(in srgb, var(--info) 18%, var(--line)); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.ad-ai-h { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--navy); font-size: 13px; margin-bottom: 9px; font-family: var(--font-head); }
.ad-ai-h::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--gold)); }
.ad-q { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 9px 12px;
  border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 12.8px; font-weight: 600; margin-top: 6px; transition: .14s; }
.ad-q:hover { border-color: var(--civic); color: var(--civic); }
.ad-actions { margin-bottom: 16px; }
.ad-src { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.ad-src span { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.ad-meta { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.ad-mrow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.ad-mrow svg { color: var(--ink-3); flex: 0 0 auto; }

/* Sidebar reset button */
.reset-btn { font-family: var(--font-head); transition: color 0.15s; }
.reset-btn:hover { color: var(--gold) !important; text-decoration: underline; }

/* Subregion Comparison Badge */
.ad-badge-sub { font-size: 10px; font-weight: 700; color: var(--success); background: var(--success-bg); padding: 2px 8px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--success) 18%, transparent); margin-left: 2px; }

/* Planning Advisory Alert Box */
.ad-advisory { padding: 12px 14px; border-radius: 10px; margin: 14px 0; font-size: 13px; line-height: 1.45; border-left: 4px solid; }
.ad-advisory-critical { background: var(--danger-bg); border-left-color: var(--warm); }
.ad-advisory-critical .ad-adv-h { color: var(--warm-d); }
.ad-advisory-warning { background: var(--warning-bg); border-left-color: var(--gold); }
.ad-advisory-warning .ad-adv-h { color: var(--gold-d); }
.ad-advisory-stable { background: var(--success-bg); border-left-color: var(--green); }
.ad-advisory-stable .ad-adv-h { color: var(--success); }
.ad-adv-h { font-weight: 800; font-family: var(--font-head); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ad-adv-h svg { flex-shrink: 0; }
.ad-adv-t { color: var(--ink-2); }

/* Live Facility Inventory Grid */
.ad-inventory-sec { margin: 18px 0; }
.ad-facility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ad-fac-card { background: var(--bg); border-radius: 8px; padding: 8px 10px; border-left: 3px solid; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-sm); }
.ad-fac-top { display: flex; justify-content: space-between; align-items: center; }
.ad-fac-label { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.ad-fac-count { font-size: 14px; font-weight: 800; color: var(--navy); }
.ad-fac-details { font-size: 9.5px; color: var(--ink-3); opacity: 0.85; border-top: 1px dashed var(--line); padding-top: 2px; margin-top: 1px; }

/* Planning Gaps List */
.ad-gaps { background: #EEF1F5; border-radius: 10px; padding: 12px; margin: 18px 0; border: 1px solid var(--line); }
.ad-gap-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ad-gap-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.ad-gap-item svg { color: var(--gold-d); flex-shrink: 0; margin-top: 2px; }

/* Score breakdowns (Scorecard) */
.ad-scores { margin: 18px 0; }
.ad-score-list { display: flex; flex-direction: column; gap: 8px; }
.score-row { font-size: 12.5px; }
.score-label { color: var(--ink-2); font-weight: 600; }
.score-val { font-weight: 800; color: var(--navy); }
.score-track { height: 6px; background: var(--bg-2); border-radius: 10px; overflow: hidden; margin-top: 3px; }
.score-fill { height: 100%; border-radius: 10px; transition: width .5s ease-out; }

/* Community Reports Feed */
.ad-feed { margin: 18px 0; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.ad-feed-empty { font-size: 11.5px; color: var(--ink-4); text-align: center; padding: 6px 0; }
.ad-feed-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ad-feed-item { background: #fff; border-radius: 7px; border: 1px solid var(--line-2); padding: 8px 10px; box-shadow: var(--shadow-sm); }
.ad-feed-type { font-size: 11px; font-weight: 700; color: var(--navy); }
.ad-feed-status { font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
.ad-feed-status.new { color: var(--civic); background: var(--success-bg); }
.ad-feed-status.reviewing { color: var(--gold-d); background: var(--warning-bg); }
.ad-feed-status.approved { color: var(--success); background: var(--success-bg); }
.ad-feed-text { font-size: 11.5px; color: var(--ink-2); margin: 4px 0; line-height: 1.4; }
.ad-feed-meta { font-size: 9.5px; color: var(--ink-4); text-align: right; }

/* Verified Amenities Checklist */
.ad-amenities-sec { margin: 16px 0; }
.ad-amenities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ad-amenity-item { display: flex; align-items: center; gap: 6px; font-size: 12.3px; }
.ad-amenity-item span.ok { color: var(--navy); font-weight: 600; }
.ad-amenity-item span.absent { color: var(--ink-3); text-decoration: line-through; opacity: 0.65; }

@media (max-width: 1100px) {
  .atlas-right { width: 312px; flex-basis: 312px; }
}

/* ---------------- MAIN / FOOTER ---------------- */
.main { flex: 1; min-height: 0; }
.main-full { padding: 0; }
/* ---------------- FOOTER ---------------- */
.foot {
  position: relative;
  margin-top: auto;
  color: #c9d6cf;
  background:
    radial-gradient(ellipse 60% 80% at 88% 0%, rgba(21,122,92,.30), transparent 60%),
    radial-gradient(ellipse 50% 70% at 6% 100%, rgba(201,146,10,.16), transparent 60%),
    linear-gradient(170deg, #0c302770 0%, var(--navy) 22%, #0a2820 100%);
}
.foot::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--gold) 36%, var(--accent) 70%, transparent 100%);
  opacity: .8;
}
.foot-top {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 54px 26px 38px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
  gap: 48px;
}
.foot-brand-col { min-width: 0; max-width: 380px; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand b { display: block; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.foot-brand span { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 1px; }
.foot .brand-logo-foot { width: 40px; height: 40px; border-radius: 11px; }
.foot-mission { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.66); }
.foot-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.foot-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.8);
  letter-spacing: .01em;
}
.foot-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(92,154,60,.25); }
.foot-social { display: flex; gap: 9px; margin-top: 22px; }
.foot-social-btn {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  transition: .15s;
}
.foot-social-btn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); transform: translateY(-2px); }

.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.foot-col { min-width: 0; }
.foot-col-h {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.foot-col button {
  background: none; border: none; padding: 5px 0;
  color: #c2cfc8; font-size: 13.5px; font-weight: 500; text-align: left;
  transition: color .14s, transform .14s; line-height: 1.4;
}
.foot-col li button:hover { color: #fff; transform: translateX(2px); }
.foot-col-cta { }
.foot-cta-text { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.foot-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 8px;
  background: var(--gold); color: #fff;
  border: 1px solid transparent; font-weight: 700; font-size: 13px;
  font-family: var(--font-head); letter-spacing: -.01em;
  transition: .15s;
}
.foot-cta-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.foot-cta-btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.foot-cta-btn-ghost:hover { background: rgba(255,255,255,.13); }

.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
}
.foot-bottom {
  max-width: var(--maxw); margin: 0 auto;
  padding: 20px 26px;
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  font-size: 12px;
}
.foot-copy-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.foot-copy { color: rgba(255,255,255,.6); font-weight: 500; }
.foot-credit { color: rgba(255,255,255,.48); font-size: 11.5px; font-weight: 500; }
.foot-legal { display: flex; gap: 4px; flex-wrap: wrap; }
.foot-legal button {
  background: none; border: none; color: rgba(255,255,255,.6);
  font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 7px; transition: .14s;
}
.foot-legal button:hover { background: rgba(255,255,255,.08); color: #fff; }
.foot-disclaimer { margin-left: auto; color: rgba(255,255,255,.42); font-size: 11.5px; }

@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; gap: 36px; padding: 40px 20px 30px; }
  .foot-brand-col { max-width: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .foot-disclaimer { margin-left: 0; width: 100%; }
}
@media (max-width: 460px) {
  .foot-cols { grid-template-columns: 1fr; }
}

/* ---------------- ABOUT ---------------- */
.about-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #06140f 0%, var(--navy) 42%, #0a2c24 100%);
  color: #fff;
  padding: clamp(56px, 9vw, 110px) 26px clamp(48px, 7vw, 88px);
}
.about-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.about-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.about-hero-glow-a { width: 460px; height: 460px; right: -6%; top: -18%; background: rgba(21,122,92,.42); }
.about-hero-glow-b { width: 380px; height: 380px; left: -8%; bottom: -22%; background: rgba(201,146,10,.26); }
.about-hero-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; }
.about-hero-h1 {
  font-family: var(--font-head); font-weight: 800; color: #fff;
  font-size: clamp(34px, 6vw, 60px); line-height: 1.04; letter-spacing: -.03em;
  margin: 16px 0 0;
}
.about-grad {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold) 0%, #e8b46a 50%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.about-hero-lead { max-width: 660px; margin: 22px auto 0; font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.6; color: rgba(255,255,255,.74); }
.about-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.about-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 720px; margin: 48px auto 0;
}
.about-hero-stat {
  padding: 18px 14px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.about-hero-stat-v { font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 3vw, 30px); color: #fff; letter-spacing: -.02em; }
.about-hero-stat-l { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 5px; line-height: 1.3; }

.about-body { padding-top: 64px; }
.about-sec { margin-bottom: clamp(48px, 7vw, 84px); scroll-margin-top: 90px; }
.about-sec .lsec-h { font-size: clamp(24px, 3.4vw, 34px); margin-top: 6px; }
.about-sec-lead { max-width: 640px; margin-top: 12px; font-size: 15px; line-height: 1.6; }

.about-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-mission-card {
  padding: 30px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.about-mission-card-accent {
  background:
    radial-gradient(circle at 88% 0%, rgba(221,160,46,.16), transparent 55%),
    linear-gradient(155deg, var(--navy), var(--navy-2));
  border-color: transparent; color: #fff;
}
.about-mission-text { margin-top: 14px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.about-mission-card-accent .about-mission-text { color: rgba(255,255,255,.82); }

.about-approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.about-approach-card {
  padding: 26px 24px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s;
}
.about-approach-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.about-approach-ic {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); margin-bottom: 16px;
}
.about-approach-t { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--navy); }
.about-approach-d { margin-top: 8px; font-size: 13.8px; line-height: 1.55; color: var(--ink-2); }

.about-method { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; counter-reset: none; }
.about-method-step {
  position: relative; padding: 24px 20px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.about-method-step::after {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px;
  border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.about-method-n { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .08em; }
.about-method-t { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--navy); margin-top: 8px; }
.about-method-d { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.about-data-note {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 18px;
  padding: 16px 18px; border-radius: 14px;
  background: #FBF4E6; border: 1px solid #F0E0BE; color: var(--ink-2);
  font-size: 13.2px; line-height: 1.55;
}
.about-inline-link { background: none; border: none; padding: 0; color: var(--accent); font-weight: 700; font-size: inherit; text-decoration: underline; }
.about-inline-link:hover { color: var(--gold-d); }

.about-gov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin-top: 24px; }
.about-gov-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.about-gov-item b { display: block; font-size: 14.5px; color: var(--navy); font-weight: 700; }
.about-gov-item span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }

.about-faq { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.about-faq-item {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.about-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy);
}
.about-faq-item summary::-webkit-details-marker { display: none; }
.about-faq-chev { color: var(--ink-3); transition: transform .2s; flex-shrink: 0; }
.about-faq-item[open] .about-faq-chev { transform: rotate(180deg); }
.about-faq-item p { padding: 0 20px 18px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.about-contact {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.about-contact-copy {
  padding: 44px; color: #fff;
  background:
    radial-gradient(circle at 10% 100%, rgba(201,146,10,.24), transparent 55%),
    linear-gradient(150deg, var(--navy), var(--navy-2) 70%, #0a2c24);
}
.about-contact-lead { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.76); }
.about-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.about-contact-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 11px;
  background: var(--gold); color: #fff; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; font-family: var(--font-head); letter-spacing: -.01em; transition: .15s;
}
.about-contact-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.about-contact-btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.about-contact-btn-ghost:hover { background: rgba(255,255,255,.15); }
.about-contact-meta { padding: 44px 40px; background: var(--card); display: flex; flex-direction: column; gap: 22px; }
.about-contact-meta-row { display: flex; gap: 13px; align-items: flex-start; color: var(--accent); scroll-margin-top: 90px; }
.about-contact-meta-row b { display: block; font-size: 14.5px; color: var(--navy); font-weight: 700; }
.about-contact-meta-row span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }

.about-terms { display: flex; flex-direction: column; gap: 0; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.about-terms-item { display: flex; gap: 18px; padding: 22px 24px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.about-terms-item:last-child { border-bottom: none; }
.about-terms-n { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--civic); letter-spacing: .04em; flex-shrink: 0; min-width: 28px; }
.about-terms-item b { display: block; font-size: 15px; color: var(--navy); font-weight: 700; margin-bottom: 6px; }
.about-terms-item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.about-terms-attrib {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 14px 18px; border-radius: var(--radius);
  background: var(--success-bg); border: 1px solid rgba(79,153,89,.22);
  font-size: 13px; color: var(--navy);
}
.about-terms-attrib strong { font-weight: 700; }

@media (max-width: 860px) {
  .about-hero-stats { grid-template-columns: 1fr 1fr; }
  .about-mission { grid-template-columns: 1fr; }
  .about-approach-grid { grid-template-columns: 1fr; }
  .about-method { grid-template-columns: 1fr 1fr; }
  .about-gov-grid { grid-template-columns: 1fr; }
  .about-contact { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .about-hero-stats { grid-template-columns: 1fr 1fr; }
  .about-method { grid-template-columns: 1fr; }
}

/* ---------------- PEARL AI ---------------- */
.app-ai {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

body.page-ai {
  overflow: hidden;
}

.main-ai {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nav-h));
  max-height: calc(100vh - var(--nav-h));
}

.main-ai .ai-page {
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.ai-page {
  display: grid;
  grid-template-columns: 244px 1fr 320px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  isolation: isolate;
}
.ai-page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 8% 12%, color-mix(in srgb, var(--civic) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 65% 50% at 92% 88%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, color-mix(in srgb, var(--green) 10%, transparent), transparent 62%),
    linear-gradient(165deg, #faf7f0 0%, var(--bg) 38%, #f0f6f2 72%, #f5f1e8 100%);
}
.ai-page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--navy) 7%, transparent) 1px, transparent 0);
  background-size: 28px 28px;
}
.ai-page > *:not(.ai-page-bg) { min-height: 0; position: relative; z-index: 1; }
.ai-rail {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}
.ai-rail-sec { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 8px; }
.ai-recent { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px; border: none; background: none; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ai-recent:hover { background: var(--bg); color: var(--navy); }
.ai-recent svg { color: var(--ink-4); }
.ai-topic { color: var(--civic); }
.ai-rail-foot { margin-top: auto; padding-top: 16px; }
.ai-rail-empty { font-size: 12px; color: var(--ink-4); padding: 4px 10px; font-style: italic; }
.ai-recent-title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex: 1; }
.ai-recent-clear { color: var(--danger) !important; margin-top: 4px; font-size: 12.2px; }
.ai-recent-clear svg { color: var(--danger); }
.ai-lang-fld { margin-bottom: 0; }
.ai-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.ai-chat-head-l { display: flex; align-items: center; gap: 10px; }
.ai-chat-head-l strong { font-family: var(--font-head); font-size: 15px; color: var(--navy); display: block; line-height: 1.2; }
.ai-avatar-sm { width: 28px; height: 28px; margin-top: 0; }
.ai-model-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 2px 8px; margin-top: 2px; }
.ai-ctx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--civic) 30%, var(--line)); background: var(--info-bg); color: var(--civic); font-size: 12.5px; font-weight: 700; transition: .15s; }
.ai-ctx-chip:hover { border-color: var(--civic); background: color-mix(in srgb, var(--civic) 12%, #fff); }
.ai-cap-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 560px; margin: 20px auto 0; }
.ai-cap-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 100px; background: var(--card); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ai-cap-item svg { color: var(--green); flex-shrink: 0; }
.ai-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  height: 100%;
  position: relative;
}
.ai-main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 50%),
    radial-gradient(ellipse 55% 45% at 100% 60%, color-mix(in srgb, var(--civic) 12%, transparent), transparent 48%);
}
.ai-main > * { position: relative; z-index: 1; }
.ai-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ai-inner { max-width: 760px; margin: 0 auto; padding: 28px 26px 30px; }
.ai-welcome { text-align: center; padding: 30px 0; }
.ai-orb { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 20px; background: radial-gradient(circle at 34% 30%, #fff, var(--gold) 55%, var(--gold-d)); box-shadow: 0 0 0 10px rgba(201,146,10,.14), 0 8px 30px rgba(201,146,10,.4); animation: floaty 5s ease-in-out infinite; }
.ai-welcome h2 { font-size: 30px; letter-spacing: -0.03em; }
.ai-welcome p { color: var(--ink-2); max-width: 540px; margin: 12px auto 0; font-size: 15px; line-height: 1.6; }
.ai-ctxbar { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 15px; border-radius: 100px; background: var(--info-bg); color: var(--civic); font-size: 13px; font-weight: 600; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 24px; }
.ai-chip { padding: 10px 15px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: 13.5px; font-weight: 600; transition: .15s; }
.ai-chip:hover { border-color: var(--civic); color: var(--civic); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ai-msg-user { display: flex; justify-content: flex-end; margin: 22px 0 6px; }
.ai-ub { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 16px 16px 4px 16px; max-width: 78%; font-size: 14.5px; line-height: 1.5; }
.ai-msg-ai { display: flex; gap: 13px; margin: 14px 0; align-items: flex-start; }
.ai-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 34% 30%, #fff, var(--gold)); box-shadow: 0 2px 8px rgba(201,146,10,.5); margin-top: 2px; }
.ai-answer {
  background: color-mix(in srgb, var(--card) 96%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
  padding: 17px 19px;
  box-shadow: 0 2px 14px rgba(12, 33, 24, .06), var(--shadow-sm);
  flex: 1;
  min-width: 0;
}
.ai-flag { display: flex; align-items: center; gap: 8px; background: var(--warning-bg); color: var(--gold-d); padding: 8px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.ai-a-text { font-size: 15px; color: var(--ink); line-height: 1.6; }
.ai-facts { margin-top: 14px; }
.ai-sub-h { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.ai-facts ul { margin: 0; padding-left: 4px; list-style: none; }
.ai-facts li { position: relative; padding: 4px 0 4px 20px; font-size: 13.6px; color: var(--ink-2); line-height: 1.5; }
.ai-facts li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ai-sources { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-sources-l { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ai-follow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ai-chip-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 100px; border: 1px solid var(--civic); background: #fff; color: var(--civic); font-weight: 700; font-size: 12.8px; transition: .15s; }
.ai-chip-link:hover { background: var(--civic); color: #fff; }
.ai-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}
.ai-feedback-q { font-weight: 700; color: var(--ink-2); margin-right: 4px; }
.ai-feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; }
.ai-fb-vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 12.5px;
  transition: border-color .15s, background .15s, color .15s, transform .12s;
}
.ai-fb-vote svg { flex-shrink: 0; }
.ai-fb-vote:hover { transform: translateY(-1px); }
.ai-fb-yes:hover, .ai-fb-yes.on { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 10%, #fff); }
.ai-fb-yes.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.ai-fb-no:hover, .ai-fb-no.on { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, #fff); }
.ai-fb-no.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
.ai-fb { padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.ai-fb:hover { border-color: var(--navy); color: var(--navy); }
.ai-fb-r { margin-left: auto; }
.ai-fb-inline { margin-left: 0; font-size: 11.5px; padding: 4px 10px; }
.ai-feedback-done { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.ai-feedback-msg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 12.5px;
}
.ai-feedback-msg-yes { background: color-mix(in srgb, var(--green) 12%, #fff); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); }
.ai-feedback-msg-no { background: color-mix(in srgb, var(--danger) 8%, #fff); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line)); }
.ai-feedback-msg-report { background: color-mix(in srgb, var(--civic) 10%, #fff); color: var(--civic); border: 1px solid color-mix(in srgb, var(--civic) 22%, var(--line)); }
.ai-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: color-mix(in srgb, var(--navy) 42%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(5px);
}
.ai-modal {
  width: 100%;
  max-width: 520px;
  max-height: min(90vh, 720px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(12, 33, 24, .18);
}
.ai-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ai-modal-head h3 { font-family: var(--font-head); font-size: 18px; color: var(--navy); margin: 0; }
.ai-modal-lead { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; line-height: 1.45; }
.ai-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-modal-snippet { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.ai-modal-snippet-l { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.ai-modal-snippet p { margin: 0; }
.ai-modal-success { text-align: center; padding: 8px 4px 4px; }
.ai-modal-success-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--green) 14%, #fff);
  color: var(--green);
  border: 2px solid color-mix(in srgb, var(--green) 35%, var(--line));
}
.ai-modal-success h3 { font-family: var(--font-head); font-size: 20px; color: var(--navy); margin: 0 0 8px; }
.ai-modal-success > p { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 16px; }
.ai-modal-ref { display: inline-flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-2); margin-bottom: 14px; }
.ai-modal-ref span { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.ai-modal-ref b { font-family: var(--font-head); font-size: 15px; color: var(--navy); letter-spacing: .04em; }
.ai-modal-success-note { font-size: 11.5px; color: var(--ink-4); margin: 0 0 18px !important; }
.ai-typing { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.ai-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.ai-retrieve { margin-bottom: 4px; }
.ai-retrieve-h { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.ai-retrieve-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-retrieve-row { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: start; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.ai-retrieve-ico { display: flex; align-items: center; justify-content: center; color: var(--ink-4); min-height: 18px; }
.ai-retrieve-done .ai-retrieve-ico { color: var(--green); }
.ai-retrieve-active .ai-retrieve-ico { color: var(--civic); }
.ai-retrieve-error .ai-retrieve-ico { color: var(--danger); }
.ai-retrieve-skip .ai-retrieve-ico { color: var(--ink-4); opacity: .7; }
.ai-retrieve-label { font-weight: 600; color: var(--ink); grid-column: 2; }
.ai-retrieve-detail { grid-column: 2; font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.ai-retrieve-spin { width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--civic); border-radius: 50%; animation: ai-spin .7s linear infinite; display: inline-block; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-retrieve-done { margin-bottom: 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); }
.ai-retrieve-done summary { cursor: pointer; padding: 10px 12px; font-size: 12px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 7px; list-style: none; }
.ai-retrieve-done summary::-webkit-details-marker { display: none; }
.ai-retrieve-done[open] summary { border-bottom: 1px solid var(--line-2); }
.ai-retrieve-done .ai-retrieve { padding: 10px 12px 12px; }
.ai-flag-plan { background: color-mix(in srgb, var(--civic) 10%, #fff); color: var(--civic); border: 1px solid color-mix(in srgb, var(--civic) 22%, var(--line)); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: bounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }
.ai-composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(10px);
  padding: 16px 26px 18px;
}
.ai-quota-warn, .ai-quota-block { max-width: 760px; margin: 0 auto 10px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.ai-quota-warn { background: color-mix(in srgb, var(--gold) 14%, #fff); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); color: var(--ink); }
.ai-quota-block { background: color-mix(in srgb, var(--danger) 10%, #fff); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); color: var(--ink); }
.ai-charts { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 4px; }
.ai-chart-card { background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; }
.ai-chart-title { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.ai-chart-card .spark { display: block; width: 100%; border-radius: 8px; }
.ai-input-wrap { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 6px 6px 6px 16px; transition: .15s; }
.ai-input-wrap:focus-within { border-color: var(--civic); box-shadow: 0 0 0 3px rgba(21,122,92,.12); }
.ai-input { flex: 1; border: none; outline: none; font-size: 15px; font-family: var(--font-body); background: none; color: var(--ink); padding: 8px 0; }
.ai-input:disabled { color: var(--ink-4); cursor: not-allowed; }
.ai-send { width: 40px; height: 40px; border-radius: 11px; border: none; background: var(--navy); color: #fff; display: grid; place-items: center; transition: .15s; }
.ai-send:disabled { background: var(--line-2); cursor: default; }
.ai-send:not(:disabled):hover { background: var(--civic); }
.ai-disc { max-width: 760px; margin: 9px auto 0; font-size: 11.5px; color: var(--ink-4); text-align: center; }
.ai-context {
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(10px);
  border-left: 1px solid var(--line);
  padding: 20px 18px;
  overflow-y: auto;
  min-height: 0;
}
.ai-ctx-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; }
.ai-ctx-card { background: var(--bg); border-radius: 12px; padding: 15px; }
.ai-ctx-name { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy); }
.ai-ctx-sub { font-size: 12.5px; color: var(--ink-3); }
.ai-ctx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.ai-ctx-stats span { display: block; font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--navy); }
.ai-ctx-stats em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.ai-ctx-empty { font-size: 13px; color: var(--ink-3); line-height: 1.5; background: var(--bg); padding: 14px; border-radius: 11px; }
.ai-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-conf { display: flex; align-items: center; gap: 10px; }
.ai-conf-bar { flex: 1; height: 8px; background: var(--bg-2); border-radius: 100px; overflow: hidden; }
.ai-conf-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #4f8a3a); border-radius: 100px; }
.ai-conf b { color: var(--success); font-size: 13px; }
.ai-conf-note { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.45; }
.ai-related { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 600; font-size: 13px; margin-top: 8px; }
.ai-related:hover { border-color: var(--civic); color: var(--civic); }
.ai-ctx-block { margin-bottom: 18px; }
.ai-ctx-block .ai-ctx-h { margin-bottom: 9px; }
.ai-ctx-panel { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; font-size: 12.5px; display: flex; flex-direction: column; gap: 8px; }
.ai-ctx-panel-flush { background: none; border: none; padding: 8px 0 0; }
.ai-ctx-panel-compact { gap: 0; padding: 6px 10px; }
.ai-ctx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.ai-ctx-row b { color: var(--navy); font-weight: 700; }
.ai-ctx-bar-row { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-3); }
.ai-bar-sm { height: 5px; }
.ai-ctx-rank { margin: 10px 0; padding: 10px; border-radius: 8px; background: color-mix(in srgb, var(--card) 70%, var(--bg)); display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.ai-ctx-card-focus { border: 1px solid color-mix(in srgb, var(--civic) 18%, var(--line)); }
.ai-ctx-card-national { background: linear-gradient(150deg, var(--info-bg), var(--card)); border: 1px solid color-mix(in srgb, var(--info) 22%, var(--line)); }
.ai-ctx-kicker { font-size: 11px; font-weight: 800; color: var(--civic); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.ai-ctx-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ai-status-pill { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line-2); flex-shrink: 0; }
.ai-status-city { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.ai-plan-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; margin: 8px 0 10px; width: 100%; }
.ai-plan-stable { background: color-mix(in srgb, var(--green) 12%, #fff); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 25%, var(--line)); }
.ai-plan-warning { background: var(--warning-bg); color: var(--gold-d); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); }
.ai-plan-critical { background: color-mix(in srgb, var(--danger) 10%, #fff); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line)); }
.ai-checklist { display: flex; flex-direction: column; gap: 7px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; font-size: 12px; }
.ai-check-item { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); line-height: 1.35; }
.ai-check-urgent { color: var(--gold-d); margin-top: 2px; flex-shrink: 0; }
.ai-check-ok { color: var(--green); margin-top: 2px; flex-shrink: 0; }
.ai-region-row { display: flex; flex-direction: column; gap: 3px; }
.ai-leader-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 7px 4px; border: none; background: none; color: var(--ink-2); font-size: 12.5px; border-bottom: 1px solid var(--line); cursor: pointer; transition: .12s; }
.ai-leader-row:last-child { border-bottom: none; }
.ai-leader-row:hover { color: var(--civic); }
.ai-leader-row b { color: var(--navy); font-weight: 700; }
.ai-leader-row:hover b { color: var(--civic); }
.ai-sector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ai-sector-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: 11px; font-weight: 700; transition: .14s; min-height: 62px; }
.ai-sector-btn svg { color: var(--civic); }
.ai-sector-btn:hover { border-color: var(--civic); color: var(--civic); background: color-mix(in srgb, var(--civic) 6%, #fff); transform: translateY(-1px); }
.ai-district-pick { position: relative; }
.ai-district-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; }
.ai-district-search svg { color: var(--ink-4); flex-shrink: 0; }
.ai-district-input { flex: 1; border: none; outline: none; font-size: 13px; font-family: var(--font-body); background: none; color: var(--ink); min-width: 0; }
.ai-district-clear { display: grid; place-items: center; width: 24px; height: 24px; border: none; background: var(--bg-2); border-radius: 6px; color: var(--ink-3); cursor: pointer; flex-shrink: 0; }
.ai-district-clear:hover { background: var(--line); color: var(--navy); }
.ai-district-active { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--info-bg); font-size: 12.5px; font-weight: 700; color: var(--civic); }
.ai-district-active svg { flex-shrink: 0; }
.ai-district-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; }
.ai-district-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; font-size: 13px; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line); }
.ai-district-opt:last-child { border-bottom: none; }
.ai-district-opt:hover { background: var(--bg); color: var(--civic); }
.ai-district-opt em { font-style: normal; font-size: 11px; color: var(--ink-4); }
.ai-district-empty { margin-top: 8px; font-size: 12px; color: var(--ink-4); font-style: italic; padding: 0 4px; }
.ai-conf-high b { color: var(--success); }
.ai-conf-limited b { color: var(--gold-d); }
.ai-conf-limited .ai-conf-bar span { background: linear-gradient(90deg, var(--gold), var(--gold-d)); }

/* ---------------- FINDER ---------------- */
.finder-head h1 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 6px; letter-spacing: -0.03em; }
.finder-head p { margin-top: 8px; max-width: 580px; }
.finder-bar { display: flex; gap: 12px; margin-top: 22px; }
.finder-bar .input { padding: 13px 14px 13px 42px; font-size: 15px; }
.finder-priv { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.finder-priv svg { color: var(--green); }
.cat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin-top: 20px; }
.cat-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 15px; transition: .16s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-card.on { border-color: var(--cc); box-shadow: 0 0 0 2px var(--cc) inset; }
.cat-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--cc); margin-bottom: 10px; }
.cat-l { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 14.5px; }
.cat-d { font-size: 11.8px; color: var(--ink-3); margin-top: 2px; }
.finder-body { display: grid; grid-template-columns: 1fr 400px; gap: 18px; margin-top: 26px; align-items: start; }
.res-list { display: flex; flex-direction: column; gap: 9px; }
.res-card { display: flex; align-items: center; gap: 13px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: .14s; }
.res-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.res-card.on { border-color: var(--civic); box-shadow: 0 0 0 2px rgba(21,122,92,.18); }
.res-main { flex: 1; min-width: 0; }
.res-name { font-weight: 700; color: var(--navy); font-size: 14px; }
.res-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.res-meta-ic { color: var(--civic); flex-shrink: 0; opacity: .85; }
.res-src { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.res-status { font-size: 11px; color: var(--success); font-weight: 600; }
.res-dist { text-align: right; flex: 0 0 auto; min-width: 52px; }
.res-dist-ic { display: block; margin-left: auto; margin-bottom: 2px; color: var(--civic); opacity: .75; }
.res-dist b { display: block; font-family: var(--font-head); font-size: 18px; color: var(--navy); line-height: 1; }
.res-dist em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.empty { background: var(--card); border: 1px dashed var(--line-2); border-radius: 12px; padding: 30px; text-align: center; color: var(--ink-3); font-size: 14px; }
.finder-side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 14px; }
.finder-map-card { overflow: hidden; padding: 0; }
.finder-map-cap {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; font-weight: 700;
  color: var(--ink-2); border-bottom: 1px solid var(--line); background: var(--bg);
}
.finder-map-cap svg { color: var(--civic); flex-shrink: 0; }
.finder-map { height: 320px; background: var(--bg); }
.finder-map-locked.leaflet-container { background: #0a1018; }
.finder-map-card .marker-cluster-small,
.finder-map-card .marker-cluster-medium,
.finder-map-card .marker-cluster-large {
  background: color-mix(in srgb, var(--civic) 18%, transparent);
}
.finder-map-card .marker-cluster div {
  background: var(--civic); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 13px;
  border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
.finder-detail-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.finder-hint { text-align: center; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.finder-hint p { font-size: 13.5px; margin-top: 6px; line-height: 1.5; max-width: 280px; }

/* ---------------- DISTRICT PROFILE (dprof) ---------------- */
.page.district.dprof { padding-bottom: 64px; }
.dprof-toolbar {
  margin-bottom: 32px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.dprof-toolbar + .dprof-section {
  margin-top: 4px;
}
.dprof-bread {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
}
.dprof-bread button { background: none; border: none; padding: 0; color: var(--civic); font-weight: 700; cursor: pointer; }
.dprof-bread button:hover { text-decoration: underline; }
.dprof-nav-pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px;
  padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.dprof-nav-btn {
  padding: 9px 14px; border-radius: 9px; border: none; background: transparent;
  font-weight: 700; font-size: 13px; color: var(--ink-2); font-family: var(--font-head); cursor: pointer;
}
.dprof-nav-btn:hover { background: var(--bg); color: var(--civic); }
.dprof-nav-btn.on { background: var(--navy); color: #fff; }
.dprof-section { margin-bottom: 40px; scroll-margin-top: calc(var(--nav-h, 68px) + 20px); }
.dprof-sec-head { margin-bottom: 20px; max-width: 720px; }
.dprof-sec-title { font-size: clamp(22px, 3vw, 28px); margin: 8px 0 0; letter-spacing: -0.03em; color: var(--navy); }
.dprof-sec-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.dprof-hero {
  display: grid; grid-template-columns: minmax(300px, 42%) 1fr; gap: var(--gap);
  margin-bottom: var(--gap);
}
.dprof-hero-map { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.dprof-map-cap {
  padding: 12px 16px; font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
}
.dprof-map { flex: 1; min-height: 300px; background: var(--navy-2); }
.dprof-map-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--ink-3);
  border-top: 1px solid var(--line); background: var(--bg);
}
.dprof-hero-copy { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dprof-hero-toolbar {
  display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.dprof-hero-toolbar-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap;
}
.dprof-hero-toolbar-label svg { color: var(--civic); flex-shrink: 0; }
.dprof-hero-toolbar .district-select {
  flex: 1 1 200px; min-width: 0; max-width: 320px; margin-left: auto;
}
.dprof-hero-toolbar .district-select-trigger {
  min-height: 40px; background: var(--bg);
}
.dprof-hero-intro { display: flex; flex-direction: column; gap: 0; }
.dprof-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dprof-pill {
  padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-2);
}
.dprof-pill-region { background: var(--success-bg); color: var(--civic); border-color: rgba(19,128,94,.2); }
.dprof-pill-city { background: var(--warning-bg); color: var(--gold-d); }
.dprof-title {
  font-size: clamp(30px, 4vw, 42px); margin: 0; letter-spacing: -0.035em;
  color: var(--navy); line-height: 1.05;
}
.dprof-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.62; color: var(--ink-2); max-width: 56ch; }
.dprof-headline-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px;
}
.dprof-head-stat {
  padding: 16px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line);
}
.dprof-head-v {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 2.5vw, 26px);
  color: var(--navy); letter-spacing: -0.03em;
}
.dprof-head-l { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.dprof-head-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-4); }
.dprof-hero-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.dprof-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dprof-src {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.dprof-src-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4); margin-right: 4px;
}

.dprof-insight {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 16px;
  background: linear-gradient(135deg, rgba(19,128,94,.08) 0%, var(--card) 60%);
}
.dprof-insight p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.dprof-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.dprof-chart-card { display: flex; flex-direction: column; }
.dprof-chart-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px;
}
.dprof-chart-badge {
  padding: 6px 12px; border-radius: 100px; background: var(--success-bg);
  color: var(--civic); font-weight: 800; font-size: 13px;
}
.dprof-chart-caption { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
.dprof-census-panel { overflow: hidden; }
.dprof-census-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 8px;
}
.dprof-census-trend {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.dprof-census-block-title {
  font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--navy);
  margin: 0 0 12px;
}
.dprof-census-block-desc { font-size: 12px; color: var(--ink-3); margin: -6px 0 12px; line-height: 1.45; }
.dprof-census-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.dprof-rank-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dprof-rank-chip {
  padding: 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); text-align: center;
}
.dprof-rank-v { display: block; font-weight: 800; font-size: 13px; color: var(--navy); }
.dprof-rank-l { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.dprof-rank-h { display: block; font-size: 10px; color: var(--civic); margin-top: 2px; }

.dprof-svc-kpis {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.dprof-svc-kpis b { display: block; font-size: 20px; color: var(--navy); font-family: var(--font-head); }
.dprof-svc-kpis em { font-style: normal; font-size: 11px; color: var(--ink-3); }

.dprof-fac-list-card { display: flex; flex-direction: column; min-height: 400px; }
.dprof-fac-list {
  flex: 1; max-height: 340px; overflow-y: auto; margin-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.dprof-fac-row {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 11px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
}
.dprof-fac-row:hover { border-color: var(--civic); background: var(--success-bg); }
.dprof-fac-dot { width: 10px; height: 10px; border-radius: 50%; }
.dprof-fac-body b { display: block; font-size: 13.5px; color: var(--navy); }
.dprof-fac-body span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.dprof-radar-wrap { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.dprof-gaps-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--navy); margin-bottom: 14px;
}
.dprof-gaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dprof-gaps li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.dprof-gap-n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px;
  background: var(--warning-bg); color: var(--gold-d); font-weight: 800; font-size: 11px;
  display: grid; place-items: center;
}
.dprof-peer-btns { display: flex; flex-direction: column; gap: 8px; }
.dprof-peer-section {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.dprof-peer-section-h {
  font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--navy); margin-bottom: 4px;
}
.dprof-peer-section-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.dprof-regional-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.dprof-peer-wide { margin-bottom: 16px; }
.dprof-peer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer;
}
.dprof-peer:hover { border-color: var(--civic); background: var(--success-bg); }
.dprof-peer b { display: block; font-size: 14px; color: var(--navy); }
.dprof-peer em { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; font-style: normal; }
.dprof-plan-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.dprof-empty { text-align: center; padding: 28px 16px; color: var(--ink-3); background: var(--bg); border-radius: 12px; }

/* legacy district aliases (unused) */
.page.district { max-width: var(--maxw); padding-bottom: 48px; }
.dist-top {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 14px 20px; margin-bottom: 18px;
}
.dist-bread {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
}
.dist-bread button {
  background: none; border: none; padding: 0; color: var(--civic);
  font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.dist-bread button:hover { text-decoration: underline; }
.dist-bread-current { color: var(--navy); font-weight: 800; }
.dist-top-actions { min-width: 200px; }
.dist-hero {
  display: grid; grid-template-columns: minmax(280px, 38%) 1fr; gap: 0;
  overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card);
}
.dist-hero-map-wrap {
  position: relative; background: linear-gradient(165deg, var(--navy-2) 0%, #0a1a14 100%);
  min-height: 320px; border-right: 1px solid var(--line);
}
.dist-hero-map-label {
  position: absolute; top: 14px; left: 14px; z-index: 500;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 100px;
  background: rgba(255,255,255,.94); font-size: 11px; font-weight: 700;
  color: var(--navy); box-shadow: var(--shadow-sm);
}
.dist-hero-map { width: 100%; height: 100%; min-height: 320px; }
.dist-hero-main {
  padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(19,128,94,.04) 0%, transparent 120px);
}
.dist-hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.dist-pill {
  display: inline-flex; padding: 5px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-2);
}
.dist-pill-region { background: var(--success-bg); border-color: rgba(19,128,94,.2); color: var(--civic); }
.dist-pill-status.is-city { background: var(--warning-bg); border-color: rgba(201,146,10,.25); color: var(--gold-d); }
.dist-pill-rank { font-family: var(--font-mono); text-transform: none; letter-spacing: 0.02em; }
.dist-hero-title {
  font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.035em;
  color: var(--navy); margin: 0;
}
.dist-hero-lead { margin: 12px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.62; color: var(--ink-2); }
.dist-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 22px; }
.dist-kpi {
  position: relative; padding: 14px 12px 12px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line); overflow: hidden;
}
.dist-kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dist-kpi-accent, var(--civic));
}
.dist-kpi-ic { display: inline-flex; color: var(--dist-kpi-accent, var(--civic)); opacity: 0.9; }
.dist-kpi-v {
  display: block; margin-top: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(17px, 2vw, 22px);
  color: var(--navy); letter-spacing: -0.03em; line-height: 1.1;
}
.dist-kpi-l {
  display: block; margin-top: 4px; font-size: 11px; font-weight: 700;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em;
}
.dist-kpi-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-4); }
.dist-hero-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.dist-cta-primary, .dist-cta-secondary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dist-hero-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dist-body { margin-top: 24px; }
.dist-card-eyebrow {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--civic); margin-bottom: 4px;
}
.dist-chart-wrap {
  padding: 8px 4px 4px;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
  border-radius: 10px;
}
.dist-foot-highlight { font-weight: 700; color: var(--civic); }
.dist-grid-charts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.dist-grid-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--gap); align-items: start; }
.dist-facilities-card { display: flex; flex-direction: column; min-height: 420px; }
.dist-facility-list {
  flex: 1; max-height: 380px; overflow-y: auto; margin-top: 12px;
  display: flex; flex-direction: column; gap: 6px; padding-right: 4px;
}
.dist-facility-row {
  display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dist-facility-row:hover { border-color: var(--civic); box-shadow: var(--shadow-sm); transform: translateX(2px); }
.dist-facility-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.dist-facility-name { display: block; font-weight: 700; font-size: 14px; color: var(--navy); }
.dist-facility-meta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.dist-facility-arrow { color: var(--ink-4); }
.dist-facilities-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dist-empty {
  text-align: center; padding: 32px 16px; color: var(--ink-3);
  background: var(--bg); border-radius: 12px; border: 1px dashed var(--line-2);
}
.dist-empty p { margin: 10px 0 0; font-size: 14px; }
.dist-score-panel { overflow: hidden; padding: 0; }
.dist-score-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid var(--line);
}
.dist-score-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.dist-score-rings-wrap {
  padding: 22px 20px;
  background: linear-gradient(160deg, rgba(19,128,94,.06) 0%, var(--bg) 55%);
  border-right: 1px solid var(--line);
}
.dist-score-rings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; justify-items: center; }
.dist-score-ring { text-align: center; }
.dist-score-ring span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.dist-score-note { font-size: 12px; line-height: 1.5; margin: 18px 0 0; }
.dist-score-side { display: flex; flex-direction: column; }
.dist-gaps { flex: 1; border-bottom: 1px solid var(--line); }
.dist-gaps-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--navy); margin-bottom: 12px;
}
.dist-gaps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dist-gaps-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.dist-gap-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 8px;
  background: var(--warning-bg); color: var(--gold-d);
  font-weight: 800; font-size: 11px; display: grid; place-items: center;
}
.dist-peer-list { display: flex; flex-direction: column; gap: 8px; }
.dist-peer-btn {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  gap: 2px 10px; width: 100%; text-align: left; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dist-peer-btn:hover { border-color: var(--civic); background: var(--success-bg); }
.dist-peer-btn svg { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--civic); }
.dist-peer-name { font-weight: 700; font-size: 14px; color: var(--navy); }
.dist-peer-meta { font-size: 12px; color: var(--ink-3); grid-column: 1; }
.score-rings { display: flex; gap: 30px; justify-content: center; margin: 8px 0 18px; flex-wrap: wrap; }
.score-ring { text-align: center; }
.score-ring span { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 8px; }
.gaps { background: var(--bg); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.gaps-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 13.5px; margin-bottom: 10px; }
.gap-row { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; font-size: 13.5px; color: var(--ink-2); }
.gap-num { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.plan-q .ad-q { margin-top: 8px; }

/* ---------------- DASHBOARD ---------------- */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dash-head h1 { font-size: clamp(23px, 2.8vw, 30px); margin-top: 6px; letter-spacing: -0.03em; max-width: 720px; }
.dash-head .page-lead { margin-top: 8px; max-width: 640px; }
.dash-head-copy { min-width: 0; }
.dash-actions { flex-shrink: 0; display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.dash-filters { display: flex; align-items: flex-end; gap: 16px; margin-top: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fld.inline { display: flex; align-items: center; gap: 9px; }
.fld.inline span { margin-bottom: 0; }
.fld.inline .input { padding: 8px 12px; width: auto; }
.dash-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; flex-wrap: wrap; }
.dtab { padding: 9px 15px; border-radius: 100px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.dtab:hover { border-color: var(--accent); color: var(--accent); }
.dtab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--gap); }
.span2 { grid-column: span 2; }
.rank-bar { display: block; width: 70px; height: 7px; background: var(--bg-2); border-radius: 100px; overflow: hidden; }
.rank-bar span { display: block; height: 100%; border-radius: 100px; }
.ai-insight, .cmp-ai { background: linear-gradient(160deg, #f4f8fc, #fbfdff); border: 1px solid #e1ecf7; }
.ai-ins-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 14px; margin-bottom: 10px; }
.ai-insight p, .cmp-ai p { font-size: 13.6px; color: var(--ink-2); line-height: 1.6; }
.ai-ins-src { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.fresh-list { display: flex; flex-direction: column; gap: 4px; }
.fresh-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.fresh-row:last-child { border-bottom: none; }
.fresh-name { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.fresh-date { font-size: 12px; color: var(--ink-3); }

/* ---------------- COMPARE ---------------- */
.compare h1 { font-size: clamp(26px, 3.2vw, 34px); margin-top: 6px; letter-spacing: -0.03em; }
.cmp-selectors { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.cmp-sel { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid; border-radius: 12px; padding: 10px 12px; }
.cmp-dot { width: 10px; height: 10px; border-radius: 50%; }
.cmp-sel .input { border: none; padding: 4px 6px; font-weight: 700; color: var(--navy); width: auto; min-width: 130px; }
.cmp-x { width: 24px; height: 24px; border-radius: 7px; border: none; background: var(--bg-2); color: var(--ink-3); display: grid; place-items: center; }
.cmp-x:hover { background: #fbe7e5; color: #9B2C2C; }
.cmp-add { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 12px; border: 1.5px dashed var(--line-2); background: none; color: var(--ink-2); font-weight: 700; font-family: var(--font-head); }
.cmp-add:hover { border-color: var(--civic); color: var(--civic); }
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 20px; }
.cmp-card { border-top: 3px solid; text-align: center; }
.cmp-name { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy); }
.cmp-region { font-size: 12.5px; color: var(--ink-3); }
.cmp-ring { display: flex; justify-content: center; margin: 14px 0; }
.cmp-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cmp-mini-ext { grid-template-columns: 1fr 1fr; gap: 6px 8px; text-align: left; }
.cmp-mini span { display: block; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--navy); }
.cmp-mini-ext span { font-size: 13.5px; }
.cmp-mini em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.cmp-highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-top: 18px;
}
.cmp-hl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s;
}
.cmp-hl:hover { border-color: var(--civic); transform: translateY(-1px); }
.cmp-hl-label { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.cmp-hl-val { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--navy); line-height: 1.15; }
.cmp-hl-name { font-size: 11.5px; font-weight: 600; color: var(--civic); }
.cmp-section-row td {
  padding: 12px 10px 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); border-bottom: none;
}
.cmp-fac-bars { margin-top: var(--gap); }
.cmp-bar-groups { display: flex; flex-direction: column; gap: 18px; }
.cmp-bar-group { display: flex; flex-direction: column; gap: 8px; }
.cmp-bar-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cmp-bar-row { display: grid; grid-template-columns: 72px 1fr 44px; gap: 10px; align-items: center; }
.cmp-bar-name { font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-bar-track { height: 8px; border-radius: 100px; background: var(--bg-2); overflow: hidden; }
.cmp-bar-fill { height: 100%; border-radius: 100px; transition: width .4s ease; min-width: 2px; }
.cmp-bar-n { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--gap); margin-top: var(--gap); align-items: start; }
.radar-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.radar-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.rl-dot { width: 9px; height: 9px; border-radius: 50%; }
.cmp-tbl th:first-child, .cmp-tbl td:first-child { text-align: left; }
.cmp-ai { margin-top: var(--gap); }

/* ---------------- ADMIN ---------------- */
.app-admin { min-height: 100vh; display: flex; flex-direction: column; }
.main-admin { padding: 0 !important; max-width: none !important; flex: 1; min-height: 0; }
body.page-admin { overflow: hidden; }
body.page-admin .app { min-height: 100vh; }
.admin { display: flex; height: 100vh; background: #F1F4F8; }
.admin-login {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(145deg, #0B1B33 0%, #0E3A30 55%, #157A5C 100%);
}
.admin-login-bg {
  position: absolute; inset: 0; opacity: 0.12;
  background-image: radial-gradient(circle at 20% 30%, #fff 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, #DDA02E 0%, transparent 40%);
}
.admin-login-card {
  position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 18px;
  padding: 32px 28px; box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.admin-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.admin-login-brand b { display: block; font-family: var(--font-head); color: var(--navy); font-size: 16px; }
.admin-login-brand span { display: block; font-size: 12px; color: var(--ink-3); }
.admin-login-card h1 { font-size: 22px; color: var(--navy); margin: 0 0 8px; }
.admin-login-lead { font-size: 13.5px; line-height: 1.55; margin-bottom: 20px; }
.admin-login-form { display: flex; flex-direction: column; gap: 14px; }
.admin-login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.admin-login-pass { position: relative; }
.admin-login-pass .input { width: 100%; padding-right: 42px; }
.admin-login-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--ink-3); padding: 6px; cursor: pointer;
}
.admin-login-error {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px;
  background: var(--danger-bg, #fdeaea); color: var(--danger); font-size: 13px; font-weight: 600;
}
.admin-login-foot { margin-top: 18px; text-align: center; }
.admin-session-meta {
  font-size: 11px; line-height: 1.45; color: #8fa3bc; padding: 0 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px;
}
.admin-session-meta div { display: flex; align-items: center; gap: 6px; }
.admin-logout {
  margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 9px; border: 1px solid rgba(201,68,68,.35); background: rgba(201,68,68,.12);
  color: #f0a8a8; font-weight: 600; font-size: 13px; width: 100%;
}
.admin-logout:hover { color: #fff; border-color: rgba(255,120,120,.5); background: rgba(201,68,68,.22); }
.admin-cards-4 { grid-template-columns: repeat(4, 1fr); }
.admin-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--gap); }
.admin-stat-list { display: flex; flex-direction: column; gap: 0; }
.admin-stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.admin-stat-row:last-child { border-bottom: none; }
.admin-stat-row span:first-child { color: var(--ink-2); }
.admin-bar-list { display: flex; flex-direction: column; gap: 10px; }
.admin-bar-row { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; }
.admin-bar-label { font-size: 12px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-bar-track { height: 8px; border-radius: 100px; background: var(--bg-2); overflow: hidden; }
.admin-bar-fill { height: 100%; border-radius: 100px; min-width: 2px; transition: width .35s ease; }
.admin-bar-n { font-size: 12px; font-weight: 700; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.admin-funnel { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.admin-funnel-row { display: flex; align-items: center; gap: 12px; }
.admin-side { width: 248px; flex: 0 0 248px; background: #0B1B33; color: #aebed4; display: flex; flex-direction: column; padding: 18px 14px; }
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-brand b { display: block; color: #fff; font-family: var(--font-head); font-size: 14.5px; }
.admin-brand span { display: block; font-size: 11px; opacity: .6; }
.admin-role { display: flex; align-items: center; gap: 8px; padding: 14px 6px; font-size: 12.5px; color: #cfdaea; }
.role-badge { background: rgba(118,168,67,.22); color: #aede7e; padding: 2px 9px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.role-badge.sm { background: #EEF1F5; color: #475569; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; border: none; background: none; color: #aebed4; font-size: 13.5px; font-weight: 600; text-align: left; position: relative; }
.admin-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-link.on { background: var(--civic); color: #fff; }
.admin-pip { position: absolute; right: 10px; background: var(--gold); color: var(--navy); font-size: 10.5px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 100px; display: grid; place-items: center; padding: 0 5px; }
.admin-exit { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: none; color: #aebed4; font-weight: 600; font-size: 13px; }
.admin-exit:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.admin-main { flex: 1; overflow-y: auto; padding: 24px 28px; }
.admin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-top h1 { font-size: 24px; }
.admin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }
.fb-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fb-row:last-child { border-bottom: none; }
.fb-type { font-size: 11px; font-weight: 700; color: var(--civic); background: #eaf2fb; padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex: 0 0 auto; }
.fb-text { flex: 1; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-mini { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.8px; color: var(--ink-2); }
.audit-mini:last-child { border-bottom: none; }
.audit-mini b { color: var(--navy); }
.audit-mini > span:nth-child(2) { flex: 1; }
.audit-time { color: var(--ink-3); font-size: 11.5px; }
.st-pip { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.st-pip.ok { background: var(--success); } .st-pip.warn { background: var(--warning); }
.row-act { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--ink-3); display: grid; place-items: center; }
.row-act:hover { border-color: var(--civic); color: var(--civic); }
.fb-filters { display: flex; gap: 8px; margin-bottom: 16px; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fb-body { font-size: 13.8px; color: var(--ink); margin: 12px 0; line-height: 1.5; }
.fb-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.fb-acts { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-stub { text-align: center; padding: 50px 30px; }
.admin-stub h3 { margin: 14px 0 8px; font-size: 20px; }
.admin-stub p { max-width: 480px; margin: 0 auto 18px; line-height: 1.6; }
.admin-top-sub { margin: 4px 0 0; font-size: 13px; }
.admin-role-name { font-size: 12.5px; color: #cfdaea; }
.admin-section-lead { margin: 0 0 14px; max-width: 640px; line-height: 1.55; }
.admin-live-strip {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 14px 16px; background: var(--success-bg); border-color: rgba(19,128,94,.2);
}
.admin-form-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px;
}
.admin-form-grid-1 { grid-template-columns: 1fr; }
.admin-form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.admin-textarea { resize: vertical; min-height: 72px; font-family: var(--font-body); }
.admin-drawer { margin-top: 16px; border: 1px solid var(--line-2); }
.admin-row-muted { opacity: 0.55; }
.admin-layer-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.admin-layer-card { min-height: 120px; }
.admin-layer-card.admin-layer-off { opacity: 0.65; background: var(--bg); }
.admin-layer-dot { width: 12px; height: 12px; border-radius: 4px; }
.admin-layer-name { display: block; margin-top: 10px; color: var(--navy); font-size: 14px; }
.admin-toggle { position: relative; display: inline-flex; cursor: pointer; }
.admin-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.admin-toggle-ui {
  width: 42px; height: 24px; border-radius: 100px; background: var(--line-2);
  position: relative; transition: background .15s;
}
.admin-toggle-ui::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .15s;
}
.admin-toggle input:checked + .admin-toggle-ui { background: var(--civic); }
.admin-toggle input:checked + .admin-toggle-ui::after { transform: translateX(18px); }
.admin-toggle-sm .admin-toggle-ui { width: 36px; height: 20px; }
.admin-toggle-sm .admin-toggle-ui::after { width: 14px; height: 14px; }
.admin-toggle-sm input:checked + .admin-toggle-ui::after { transform: translateX(16px); }
.admin-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.admin-kb-list { display: flex; flex-direction: column; gap: 12px; }
.admin-kb-card { }
.admin-kb-snippet { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.site-announcement {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 20px; background: var(--success-bg); border-bottom: 1px solid rgba(19,128,94,.2);
  font-size: 13px; font-weight: 600; color: var(--navy);
}
.site-announcement-warn { background: var(--warning-bg); border-color: rgba(201,146,10,.25); }
.maintenance-page { display: flex; align-items: center; justify-content: center; min-height: 50vh; }
.maintenance-card { max-width: 480px; text-align: center; padding: 40px 32px !important; }
.maintenance-card h1 { margin: 14px 0 8px; font-size: 24px; color: var(--navy); }

/* ---------------- API ---------------- */
.api-hero { padding: 14px 0 26px; border-bottom: 1px solid var(--line); }
.api-hero h1 { font-size: clamp(30px, 4vw, 42px); margin-top: 6px; letter-spacing: -0.03em; }
.api-meta { display: flex; gap: 34px; margin-top: 24px; flex-wrap: wrap; }
.api-meta span { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 17px; }
.api-meta em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; align-items: start; }
.api-grid > * { min-width: 0; }
.api-sec-h { font-size: 17px; margin-bottom: 14px; }
.ep-list { display: flex; flex-direction: column; gap: 8px; }
.ep-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 12px 15px; }
.ep-m { font-family: "DM Mono", monospace; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; flex: 0 0 auto; }
.ep-get { background: var(--success-bg); color: var(--civic); } .ep-post { background: var(--warning-bg); color: var(--gold-d); }
.ep-path { font-family: "DM Mono", monospace; font-size: 13px; color: var(--navy); font-weight: 500; flex: 0 0 auto; }
.ep-desc { font-size: 12.5px; color: var(--ink-3); margin-left: auto; text-align: right; }
.code-block { background: #0B1B33; color: #cfe0d4; border-radius: 11px; padding: 16px; overflow-x: auto; font-family: "DM Mono", monospace; font-size: 12.5px; line-height: 1.6; margin: 12px 0 0; }
.code-block code { font-family: inherit; }
.ic { font-family: "DM Mono", monospace; font-size: 12.5px; background: var(--bg-2); padding: 1px 6px; border-radius: 5px; color: var(--navy); }
.api-resp { overflow: hidden; }
.api-resp-bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-family: "DM Mono", monospace; font-size: 12.5px; color: var(--navy); }
.api-200 { margin-left: auto; color: var(--success); font-weight: 600; }
.api-resp .code-block { border-radius: 0; margin: 0; }
.api-note { margin-top: 14px; }
.api-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(140deg, var(--navy), var(--navy-2)); border-radius: 22px; padding: 34px; margin-top: 30px; }
.api-cta h2 { color: #fff; font-size: 26px; } .api-cta p { color: rgba(255,255,255,.7); margin-top: 6px; }
.api-interop { margin-top: 0; }
.api-interop-chip { background: var(--bg-2); border-color: var(--line-2); color: var(--ink-2); }

/* ---------------- responsive safety ---------------- */
@media (max-width: 1180px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  .span2 { grid-column: span 2; }
  .page.dashboard .dash-grid > .card,
  .page.dashboard .dash-grid > .dash-widget { grid-column: span 6; }
  .page.dashboard .dash-grid > .span2 { grid-column: span 12; }
  .admin-cards, .admin-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .admin-3col { grid-template-columns: 1fr; }
  .dprof-headline-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .ai-page { grid-template-columns: 1fr; }
  .ai-rail, .ai-context { display: none; }
  .finder-body, .cmp-grid, .api-grid, .admin-2col { grid-template-columns: 1fr; }
  .dprof-hero { grid-template-columns: 1fr; }
  .dprof-grid-2 { grid-template-columns: 1fr; }
  .dprof-headline-stats { grid-template-columns: 1fr; }
  .dprof-rank-row, .dprof-census-foot { grid-template-columns: 1fr; }
  .dprof-census-grid { grid-template-columns: 1fr; }
  .census-trend-points { grid-template-columns: 1fr; gap: 16px; }
  .census-trend-bridge { min-height: auto; order: -1; padding: 8px 0; }
  .dprof-insight { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .page { padding-left: 18px; padding-right: 18px; }
  .finder-bar { flex-direction: column; }
  .finder-bar .loc-btn { width: 100%; justify-content: center; }
  .cat-cards { grid-template-columns: 1fr 1fr; }
  .kpi-row, .dash-grid, .admin-cards, .admin-cards-4 { grid-template-columns: 1fr; }
  .page.dashboard { padding-bottom: 72px; }
  .dash-main { gap: 22px; }
  .dash-layout { gap: 0; }
  .dash-toolbar { padding: 16px !important; }
  .page.dashboard .dash-section-kpi .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .page.dashboard .dash-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page.dashboard .dash-grid > .card,
  .page.dashboard .dash-grid > .dash-widget,
  .page.dashboard .dash-grid > .span2 { grid-column: auto; }
  .page.dashboard .dash-grid .card-pad { padding: 16px 18px; }
  .dprof-headline-stats { grid-template-columns: 1fr; }
  .dprof-census-grid { grid-template-columns: 1fr; }
  .dprof-hero-toolbar .district-select { flex: 1 1 100%; max-width: none; margin-left: 0; }
  .dprof-hero-foot { flex-direction: column; align-items: stretch; }
  .dprof-src { justify-content: flex-start; }
  .span2 { grid-column: auto; }
}

/* mobile atlas layout overrides */
.mobile-close-side { display: none; }
.mobile-toggle-side { display: none; }

@media (max-width: 768px) {
  .mobile-close-side {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-2);
    background: var(--bg);
    border-radius: 9px;
    color: var(--ink-2);
    padding: 8px;
    margin-left: 8px;
    cursor: pointer;
  }
  .mobile-close-side:hover {
    background: var(--bg-2);
    color: var(--navy);
  }
  .mobile-toggle-side {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 14px;
    bottom: 96px; /* positioned above the legend */
    z-index: 450;
    padding: 10px 16px;
    border-radius: 100px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    color: var(--navy);
    font-weight: 700;
    font-family: var(--font-head);
    font-size: 13px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: 0.2s;
  }
  .mobile-toggle-side:hover {
    background: #fff;
    transform: translateY(-1px);
  }
  .atlas-side {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 34px;
    width: 290px;
    flex: 0 0 290px;
    z-index: 550;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: var(--shadow-lg);
  }
  .atlas-side.open {
    transform: translateX(0);
  }
  .atlas-right {
    width: 100%;
    flex: 0 0 auto;
    max-height: 46vh;
    border-left: none;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(8, 34, 74, 0.08);
  }
  .atlas {
    flex-direction: column;
  }
  .atlas-map {
    flex: 1;
    min-height: 42vh;
  }
  .atlas-detail {
    left: 0;
    right: 0;
    top: auto;
    bottom: 34px;
    width: 100%;
    height: 48vh;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px rgba(8, 34, 74, 0.12);
  }
}

/* ---------- shared data UI (tables, filters, pagination) ---------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.data-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.data-toolbar-search { flex: 1; min-width: 200px; position: relative; }
.data-toolbar-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ink-3); padding: 4px; cursor: pointer;
}
.data-toolbar-meta { font-size: 13px; color: var(--ink-3); margin-left: auto; }
.data-toolbar-meta b { color: var(--navy); }
.paginator {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pag-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  font-weight: 700; font-size: 13px; font-family: var(--font-head); color: var(--navy);
}
.pag-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pag-info { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.pag-pages { display: flex; gap: 4px; }
.pag-num {
  min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); font-weight: 700; font-size: 13px; color: var(--ink-2);
}
.pag-num.on { background: var(--civic); border-color: var(--civic); color: #fff; }
.tbl-scroll-wrap { overflow: auto; border-radius: 12px; border: 1px solid var(--line); }
.tbl-scroll-wrap .tbl { margin: 0; }
.tbl-scroll-wrap .tbl thead th {
  position: sticky; top: 0; z-index: 2; background: var(--card);
  box-shadow: 0 1px 0 var(--line);
}
.district-select { position: relative; min-width: 200px; }
.district-select-compact { min-width: 180px; }
.district-select-label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.district-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; text-align: left; cursor: pointer;
}
.district-select-value { font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.district-select-chev { transition: transform 0.2s; flex-shrink: 0; }
.district-select-chev.open { transform: rotate(180deg); }
.district-select-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 680;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.district-select-menu-portal {
  position: fixed;
  z-index: 680;
  display: flex;
  flex-direction: column;
}
.district-select-menu-portal .district-select-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.district-select-open .district-select-trigger {
  border-color: var(--civic);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--civic) 18%, transparent);
}
.district-select-search { margin: 10px; }
.district-select-list { list-style: none; margin: 0; padding: 0 6px 8px; max-height: 240px; overflow-y: auto; }
.district-select-list-all { max-height: min(52vh, 360px); }
.district-select-opt {
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: none;
  background: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.district-select-opt b { font-size: 14px; color: var(--navy); }
.district-select-opt span { font-size: 11.5px; color: var(--ink-3); }
.district-select-opt:hover, .district-select-opt.on { background: var(--success-bg); }
.district-select-empty { padding: 12px; font-size: 13px; color: var(--ink-3); }
.dash-filters-v2 { flex-wrap: wrap; }
.dash-adv {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 14px; padding: 14px 16px; background: var(--bg); border-radius: 12px; border: 1px solid var(--line);
}
.dash-table-card .empty { padding: 24px; text-align: center; }

/* dashboard page layout & spacing */
body.page-dashboard { overflow: hidden; }
.app-dashboard .main-full { flex: 1; min-height: 0; padding: 0; }
.dashboard-app {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h));
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
  background: var(--bg);
}
.dashboard-app .dash-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  margin-top: 0;
}
.dashboard-app .dash-sidebar {
  position: relative;
  top: auto;
  max-height: none;
  height: 100%;
  margin-right: 0;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--line);
  box-shadow: none;
}
.dashboard-app .dash-main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px 28px 36px;
}
.page.dashboard {
  padding-top: 20px;
  padding-bottom: 96px;
}
.dash-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 0;
}
.dash-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.dash-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
  color: var(--ink-2);
}
.dash-context-stat b { color: var(--navy); font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-context-dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); flex-shrink: 0;
}
.dash-context-link {
  border: none; background: none; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--civic); cursor: pointer;
}
.dash-context-link:hover { text-decoration: underline; }
.dash-toolbar { padding: 20px 22px !important; }
.dash-toolbar-label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}
.page.dashboard .dash-filters {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  gap: 12px 18px;
}
.dash-toolbar-link { font-size: 13px; margin-left: auto; }
.dash-tabs-wrap {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.dash-tabs-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.page.dashboard .dash-tabs { margin: 0; }
.dash-section { display: flex; flex-direction: column; gap: 16px; }
.dash-section-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  padding: 0 2px;
}
.dash-section-body { display: flex; flex-direction: column; gap: 0; }
.page.dashboard .dash-section-kpi .dash-widget-kpi { margin-bottom: 0; }
.page.dashboard .dash-section-kpi .kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 14px;
}
.page.dashboard .dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 0;
  align-items: start;
}
.page.dashboard .dash-grid > .card,
.page.dashboard .dash-grid > .dash-widget {
  grid-column: span 4;
  min-width: 0;
}
.page.dashboard .dash-grid > .span2 {
  grid-column: span 8;
}
.page.dashboard .dash-grid .card-pad {
  padding: 20px 22px;
}
.page.dashboard .dash-grid .card-h {
  margin-bottom: 4px;
}
.page.dashboard .dash-grid .card-foot {
  margin-top: 16px;
  padding-top: 14px;
}
.page.dashboard .ai-insight {
  background: linear-gradient(160deg, var(--pearl) 0%, #fff 55%);
  border-color: color-mix(in srgb, var(--civic) 18%, var(--line));
}

/* dashboard detail widgets */
.dash-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 8px 0 16px; }
.dash-share-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.dash-share-cap { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.dash-share-cap b { color: var(--navy); }
.dash-share-stats {
  display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 14px;
  background: var(--bg); border-radius: 10px; border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
.dash-share-stats b { color: var(--navy); font-weight: 800; }
.dash-reg-tbl th, .dash-reg-tbl td { font-size: 13px; }
.dash-quick-list { display: flex; flex-direction: column; gap: 6px; }
.dash-quick-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); transition: border-color .15s, background .15s;
}
.dash-quick-row:hover { border-color: var(--civic); background: #fff; }
.dash-quick-rank {
  font-size: 11px; font-weight: 800; color: var(--ink-3); min-width: 28px;
  font-variant-numeric: tabular-nums;
}
.dash-quick-body b { display: block; font-size: 13.5px; color: var(--navy); }
.dash-quick-body em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.dash-quick-val { font-family: var(--font-head); font-weight: 800; font-size: 13.5px; color: var(--civic); font-variant-numeric: tabular-nums; }
.dash-access-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-access-label {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.dash-access-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 10px; margin-bottom: 6px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg); text-align: left;
  font-size: 12.5px; transition: border-color .15s;
}
.dash-access-row b { color: var(--navy); font-size: 13px; }
.dash-access-row span { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-access-row.good { border-color: color-mix(in srgb, var(--green) 25%, var(--line)); }
.dash-access-row.warn { border-color: color-mix(in srgb, var(--warm) 25%, var(--line)); }
.dash-access-row:hover { border-color: var(--civic); background: #fff; }
.dash-gap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.dash-gap-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px;
  border-radius: 11px; background: var(--bg); border: 1px solid var(--line); text-align: center;
  font-size: 11.5px; color: var(--ink-3); font-weight: 600;
}
.dash-gap-n { font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1; }
.dash-gap-note { font-size: 12.5px; line-height: 1.5; margin: 0; }
.dash-method-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-method-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.dash-method-note { font-size: 12.5px; line-height: 1.55; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.dash-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 14px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--nav-h) - 28px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dash-sidebar-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--pearl) 0%, var(--card) 100%);
}
.dash-sidebar-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dash-sidebar-mark {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--civic) 12%, white);
  color: var(--civic);
  border: 1px solid color-mix(in srgb, var(--civic) 18%, var(--line));
}
.dash-sidebar-head b {
  display: block;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 15px;
  line-height: 1.2;
  margin-top: 2px;
}
.dash-sidebar-head .eyebrow { margin-bottom: 0; }
.dash-sidebar-close { display: none; flex-shrink: 0; }
.dash-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 12px 8px;
}
.dash-sidebar-group { margin-bottom: 16px; }
.dash-sidebar-group:last-child { margin-bottom: 4px; }
.dash-sidebar-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 8px;
}
.dash-sidebar-group-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.dash-sidebar-group-label {
  flex: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dash-sidebar-group-count {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.dash-board-list { display: flex; flex-direction: column; gap: 4px; }
.dash-board-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px 9px 11px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.dash-board-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.dash-board-text { flex: 1; min-width: 0; }
.dash-board-text b {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-board-text em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
  line-height: 1.3;
}
.dash-board-btn:hover {
  background: var(--bg);
  border-color: var(--line);
}
.dash-board-btn.on {
  background: color-mix(in srgb, var(--civic) 7%, white);
  border-color: color-mix(in srgb, var(--civic) 22%, var(--line));
  box-shadow: var(--shadow-sm);
}
.dash-board-btn.on .dash-board-text b { color: var(--navy); }
.dash-board-active {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--civic);
}
.dash-board-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.dash-board-row .dash-board-btn { padding-right: 56px; }
.dash-board-row.on .dash-board-btn {
  background: color-mix(in srgb, var(--chart-5) 8%, white);
  border-color: color-mix(in srgb, var(--chart-5) 22%, var(--line));
}
.dash-board-row.on .dash-board-active { background: var(--chart-5); }
.dash-board-mini-actions {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}
.dash-board-row:hover .dash-board-mini-actions,
.dash-board-row.on .dash-board-mini-actions { opacity: 1; }
.row-act-danger:hover { border-color: var(--danger) !important; color: var(--danger) !important; background: var(--danger-bg) !important; }
.dash-sidebar-empty {
  margin: 0 4px;
  padding: 14px 12px;
  border-radius: 11px;
  border: 1.5px dashed var(--line-2);
  background: var(--bg);
  text-align: center;
  color: var(--ink-3);
}
.dash-sidebar-empty svg { color: var(--ink-4); margin-bottom: 8px; }
.dash-sidebar-empty p { margin: 0; font-size: 12.5px; line-height: 1.45; }
.dash-sidebar-actions {
  flex-shrink: 0;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.dash-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 11px;
  border: none;
  background: var(--civic);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-head);
  font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(12,33,24,.08);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.dash-create-btn:hover {
  background: var(--civic-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dash-sidebar-foot { margin-top: 10px; display: flex; justify-content: center; }
.dash-sidebar-foot .tag-source {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
}
.dash-head-left { display: flex; align-items: flex-start; gap: 12px; }
.dash-sidebar-toggle {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--navy);
  place-items: center;
  margin-top: 4px;
  box-shadow: var(--shadow-sm);
}
.dash-sidebar-toggle:hover { border-color: var(--civic); color: var(--civic); }
.dash-sidebar-backdrop { display: none; }
.dash-widget-kpi { margin-bottom: var(--gap); }
.dash-widget-kpi.span-all { grid-column: 1 / -1; }
.dash-resource-list { display: flex; flex-direction: column; gap: 6px; }
.dash-resource-link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  text-align: left; transition: border-color .15s, background .15s;
}
.dash-resource-link:hover { border-color: var(--civic); background: #fff; }
.dash-resource-ic {
  width: 34px; height: 34px; border-radius: 9px; background: var(--card);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--civic);
}
.dash-resource-link b { display: block; font-size: 13.5px; color: var(--navy); }
.dash-resource-link em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.dash-resource-link > svg:last-child { color: var(--ink-3); }

/* custom dashboard builder */
.dash-builder-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: color-mix(in srgb, var(--navy) 38%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(4px);
}
.dash-builder {
  width: 100%; max-width: 720px; max-height: min(88vh, 820px); overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
}
.dash-builder .card-h { margin-bottom: 12px; }
.dash-builder-widgets { overflow-y: auto; flex: 1; margin-top: 14px; padding-right: 4px; }
.dash-builder-group { margin-bottom: 16px; }
.dash-builder-group-label {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.dash-widget-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dash-widget-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg); text-align: left;
  transition: border-color .15s, background .15s;
}
.dash-widget-opt b { display: block; font-size: 13px; color: var(--navy); }
.dash-widget-opt em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.dash-widget-opt-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2);
  display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: #fff;
}
.dash-widget-opt.on { border-color: var(--civic); background: #f4faf7; }
.dash-widget-opt.on .dash-widget-opt-check { background: var(--civic); border-color: var(--civic); }
.dash-builder-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .dashboard-app .dash-layout { grid-template-columns: 1fr; }
  .dashboard-app .dash-sidebar {
    position: fixed; left: 0; top: var(--nav-h); bottom: 0; z-index: 650;
    height: auto; width: min(304px, 90vw);
    border-radius: 0 16px 16px 0;
    transform: translateX(-105%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--shadow-lg);
  }
  .dashboard-app .dash-sidebar.open { transform: translateX(0); }
  .dashboard-app .dash-main { padding: 18px 18px 28px; }
  .dash-access-cols { grid-template-columns: 1fr; }
  .dash-gap-grid { grid-template-columns: 1fr; }
  .dash-share-grid { grid-template-columns: 1fr; }
  .dash-sidebar-close { display: grid; }
  .dash-sidebar-toggle { display: grid; }
  .dash-sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 640;
    background: color-mix(in srgb, var(--navy) 32%, transparent);
    backdrop-filter: blur(2px);
  }
  .dash-widget-picker { grid-template-columns: 1fr; }
}
.finder-adv {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  margin-bottom: 14px; padding: 14px 16px; background: var(--card-2); border-radius: 14px; border: 1px solid var(--line);
}
.finder-results-scroll {
  max-height: min(72vh, 640px); overflow-y: auto; padding-right: 4px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--card); padding: 14px 16px;
}
.cmp-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.cmp-presets-label { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.cmp-sel .district-select { flex: 1; min-width: 0; }
.about-toc {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; padding: 12px 14px;
  background: var(--card-2); border-radius: 14px; border: 1px solid var(--line);
  position: sticky; top: calc(var(--nav-h, 64px) + 8px); z-index: 5;
}
.about-toc-btn {
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line);
  background: var(--card); font-weight: 700; font-size: 13px; font-family: var(--font-head); color: var(--ink-2);
}
.about-toc-btn:hover { border-color: var(--civic); color: var(--civic); }
.about-method-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.api-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.api-toc-link {
  font-size: 13px; font-weight: 700; color: var(--civic); text-decoration: none;
  padding: 6px 12px; border-radius: 100px; background: var(--success-bg);
}
.ep-card-btn {
  width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--line);
  background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start;
}
.ep-card-btn.on { border-color: var(--civic); background: var(--success-bg); box-shadow: 0 0 0 1px var(--civic); }
.code-block-wrap { position: relative; }
.code-copy-btn {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
  font-size: 11px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.api-resp-bar .code-copy-btn { position: static; margin-left: auto; }
.atlas-match-list { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.atlas-match-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 8px; }
.atlas-match-scroll { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.atlas-match-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; border: none; background: var(--card-2);
  cursor: pointer; text-align: left; font-size: 13px;
}
.atlas-match-row b { color: var(--navy); }
.atlas-match-row span { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }