/* Citrus Springs Dental Care — 2027 Growth Dashboard (dark) */

:root {
  --bg: #0a1226;
  --bg2: #0d1830;
  --card: #111f3a;
  --card2: #15264a;
  --line: #22355c;
  --ink: #e8eefb;
  --muted: #8ea2c7;
  --green: #2fd6b0;
  --green-deep: #1f5940;
  --blue: #3aa5ff;
  --purple: #9b7bff;
  --orange: #ffb347;
  --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Poppins", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, #14264d 0%, var(--bg) 55%);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.demo-banner {
  background: #2a1f0a; color: #ffcf7d;
  border-bottom: 1px solid #4d3a12;
  text-align: center; font-size: .76rem; font-weight: 600;
  padding: .32rem 1rem;
}

.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

/* ---------- Sidebar ---------- */
aside {
  background: linear-gradient(180deg, #0c1730, #0a1226);
  border-right: 1px solid var(--line);
  padding: 1.3rem 1rem;
  display: flex; flex-direction: column; gap: 1.3rem;
}
.logo { display: flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.05rem; line-height: 1.2; color: #fff; }
.logo img { height: 46px; width: auto; border-radius: 10px; background: #fff; padding: 3px; }
.logo span { color: #7fd4a8; font-weight: 600; }
.logo small { display: block; margin-top: .3rem; font-size: .58rem; letter-spacing: .16em; color: #5d7db0; }

aside nav { display: grid; gap: .12rem; }
aside nav a {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .55rem .8rem; border-radius: 10px;
  color: #b9c8e6; font-weight: 600; font-size: .9rem; cursor: pointer;
}
aside nav a:hover { background: rgba(255,255,255,.06); }
aside nav a.active { background: linear-gradient(90deg, #1d4ed8, #2563eb); color: #fff; box-shadow: 0 6px 18px rgba(37,99,235,.35); }
aside nav b { background: var(--orange); color: #201200; border-radius: 999px; font-size: .68rem; padding: .05rem .5rem; }

.sidebar-card {
  margin-top: auto;
  background: linear-gradient(135deg, #10305c, #143a53);
  border: 1px solid #23477a;
  border-radius: 14px; padding: .9rem;
  display: grid; gap: .25rem; font-size: .82rem; color: #cfe0f7;
}
.sidebar-card strong { color: #fff; }

/* ---------- Main ---------- */
main { padding: 1.5rem 1.7rem 2rem; display: grid; gap: 1.1rem; align-content: start; }

header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
header small { color: var(--muted); letter-spacing: .14em; font-size: .68rem; font-weight: 700; }
header h1 { font-size: 1.45rem; margin: .1rem 0; font-weight: 800; }
header p { color: var(--muted); font-size: .92rem; }
.website-btn {
  background: transparent; border: 1.5px solid var(--green);
  color: var(--green); font-weight: 700;
  padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none;
}
.website-btn:hover { background: var(--green); color: #04200f; }

.panel {
  background: linear-gradient(180deg, var(--card), var(--bg2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.panel-title {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  font-weight: 700; margin-bottom: .9rem; flex-wrap: wrap;
}
.panel-title.big { font-size: 1.25rem; margin-bottom: 0; }
.panel-title span { color: var(--muted); font-weight: 500; font-size: .78rem; }
.panel-title em { font-style: normal; }
.panel-title button {
  font: inherit; font-size: .78rem; font-weight: 700;
  background: #16305c; color: #9cc4ff;
  border: 1px solid #27529b; border-radius: 999px;
  padding: .25rem .8rem; cursor: pointer;
}
.panel-title button:hover { background: var(--blue); color: #041226; }

/* ---------- Metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; }
.metric {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: .95rem 1rem;
  display: grid; gap: .05rem;
  position: relative; overflow: hidden;
}
.metric::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.m-green::before { background: var(--green); }
.m-blue::before { background: var(--blue); }
.m-purple::before { background: var(--purple); }
.m-orange::before { background: var(--orange); }
.m-trophy { background: linear-gradient(135deg, #0b3a3f, #0e4e4a); border-color: #1d6b60; }
.m-trophy::before { background: var(--green); }
.metric span { color: var(--muted); font-size: .78rem; font-weight: 600; }
.metric strong { font-size: 1.75rem; font-weight: 800; color: #fff; }
.metric small { color: var(--green); font-weight: 600; font-size: .72rem; }
.m-blue small { color: var(--blue); }
.m-purple small { color: var(--purple); }
.m-orange small { color: var(--orange); }

/* ---------- AI Receptionist ---------- */
.ai-panel { border-color: #274a86; background: linear-gradient(135deg, #0f1f3f, #0c1730 60%); }
.ai-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; }
.pill-247 {
  background: linear-gradient(90deg, #1d4ed8, #7c3aed);
  color: #fff; font-size: .68rem; font-weight: 800;
  padding: .18rem .6rem; border-radius: 999px; letter-spacing: .05em;
  vertical-align: middle; margin-left: .4rem;
}
.systems { color: #7ee9d4; font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.systems i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.ai-sub { color: var(--muted); font-size: .88rem; margin: .35rem 0 1rem; }

.ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.ai-card {
  background: linear-gradient(180deg, #14264a, #101d3a);
  border: 1px solid var(--line);
  border-radius: 14px; padding: 1rem;
  display: grid; gap: .15rem; align-content: start;
}
.ai-card .ai-icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 11px; font-size: 1.15rem; margin-bottom: .4rem;
}
.c-green .ai-icon { background: rgba(47,214,176,.15); color: var(--green); box-shadow: 0 0 18px rgba(47,214,176,.25); }
.c-blue .ai-icon { background: rgba(58,165,255,.15); color: var(--blue); box-shadow: 0 0 18px rgba(58,165,255,.25); }
.c-purple .ai-icon { background: rgba(155,123,255,.15); color: var(--purple); box-shadow: 0 0 18px rgba(155,123,255,.25); }
.c-orange .ai-icon { background: rgba(255,179,71,.15); color: var(--orange); box-shadow: 0 0 18px rgba(255,179,71,.25); }
.ai-card > b { color: #fff; font-size: .98rem; }
.ai-card > span { color: var(--muted); font-size: .74rem; margin-bottom: .5rem; }
.ai-card ul { list-style: none; display: grid; gap: .3rem; }
.ai-card li { display: flex; gap: .5rem; align-items: baseline; color: #c9d7f2; font-size: .8rem; }
.ai-card li b { color: #fff; font-size: 1.05rem; min-width: 2.4rem; }
.ai-note { display: block; margin-top: .8rem; color: #5d7db0; font-size: .7rem; }

/* ---------- Workflow ---------- */
.flow { display: flex; align-items: stretch; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.flow > div {
  flex: 1; min-width: 96px;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: .7rem .5rem;
  display: grid; justify-items: center; gap: .3rem; text-align: center;
}
.flow b { font-size: 1.1rem; }
.flow span { font-size: .68rem; color: var(--muted); font-weight: 600; }
.flow i { align-self: center; color: #3d5a8f; font-style: normal; }

/* ---------- Chart + sources ---------- */
.grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 185px; padding: 0 .2rem; }
.bars div { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; gap: 4px; }
.bars i, .bars b { display: block; flex: 1; border-radius: 6px 6px 2px 2px; min-height: 4px; }
.bars i { height: var(--h, 10%); background: linear-gradient(180deg, #4be3c4, #17997e); box-shadow: 0 0 14px rgba(47,214,176,.3); }
.bars b { height: var(--h2, 5%); background: linear-gradient(180deg, #6cb8ff, #1f6fd0); box-shadow: 0 0 14px rgba(58,165,255,.25); }
.legend { display: flex; gap: 1.2rem; margin-top: .8rem; font-size: .78rem; font-weight: 600; }
.lg-leads { color: var(--green); }
.lg-booked { color: var(--blue); }

.donut {
  width: 150px; height: 150px; border-radius: 50%;
  margin: 0 auto .9rem;
  display: grid; place-items: center;
  background: conic-gradient(var(--line) 0deg 360deg);
}
.donut > div {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--card);
  display: grid; place-content: center; text-align: center;
}
.donut em { font-style: normal; font-weight: 800; font-size: 1.5rem; color: #fff; }
.donut small { color: var(--muted); font-size: .7rem; }

.source-panel ul { list-style: none; display: grid; gap: .4rem; }
.source-panel li { display: flex; justify-content: space-between; font-size: .85rem; }
.source-panel li span { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #d7e2f6; }
.source-panel li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.source-panel li b { color: var(--muted); font-weight: 700; }

/* ---------- Pipeline ---------- */
.pipe { display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; }
.pipe div {
  background: linear-gradient(180deg, #14264a, #101d3a);
  border: 1px solid var(--line);
  border-radius: 11px; text-align: center; padding: .7rem .2rem;
  display: grid; gap: .05rem;
}
.pipe b { font-size: 1.25rem; font-weight: 800; color: #fff; }
.pipe span { font-size: .66rem; color: var(--muted); font-weight: 600; }

/* ---------- Lower ---------- */
.lower { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1rem; }

table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th {
  text-align: left; color: var(--muted); font-size: .68rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .4rem .5rem; border-bottom: 1px solid var(--line);
}
td { padding: .58rem .5rem; border-bottom: 1px solid #182a4c; vertical-align: middle; }
td b { color: #fff; }
td small { display: block; color: var(--muted); font-size: .72rem; }
tr.fresh { animation: flash 2s ease-out; }
@keyframes flash { from { background: rgba(47,214,176,.25); } to { background: transparent; } }
.loading { color: var(--muted); text-align: center; padding: 1.2rem !important; }

select.status {
  font: inherit; font-size: .74rem; font-weight: 700;
  border-radius: 999px; padding: .28rem .65rem;
  border: 1px solid transparent; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.s-new { background: rgba(58,165,255,.18); color: #8cc5ff; border-color: rgba(58,165,255,.4); }
.s-contacted { background: rgba(255,179,71,.16); color: #ffcd8a; border-color: rgba(255,179,71,.4); }
.s-appointment_requested { background: rgba(155,123,255,.16); color: #c3aeff; border-color: rgba(155,123,255,.4); }
.s-booked { background: rgba(47,214,176,.16); color: #7ee9d4; border-color: rgba(47,214,176,.4); }
.s-showed { background: rgba(47,214,176,.22); color: #8df0b5; border-color: rgba(47,214,176,.5); }
.s-completed { background: rgba(47,214,176,.3); color: #a5ffcb; border-color: rgba(47,214,176,.6); }
.s-review_requested { background: rgba(255,208,87,.16); color: #ffe3a1; border-color: rgba(255,208,87,.4); }
.s-reviewed { background: rgba(255,208,87,.26); color: #fff0c8; border-color: rgba(255,208,87,.6); }
select.status option { background: var(--card); color: var(--ink); }

.activity .event {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .55rem 0; border-bottom: 1px solid #182a4c;
}
.activity .event:last-child { border-bottom: 0; }
.activity b {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  background: rgba(47,214,176,.14); color: var(--green);
  border-radius: 9px; font-size: .9rem;
}
.activity strong { font-size: .83rem; display: block; color: #eaf1ff; }
.activity small { color: var(--muted); font-size: .73rem; }

.dash-footer {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .6rem;
  color: var(--muted); font-size: .8rem;
  padding-top: .4rem;
}
.tagline-script { font-family: "Allura", cursive; font-size: 1.5rem; color: #7ee9d4; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .ai-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .grid, .lower { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  aside { flex-direction: row; align-items: center; overflow-x: auto; }
  aside nav { display: flex; }
  .sidebar-card { display: none; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
}


/* bars grow in */
.bars.animate i, .bars.animate b { transform-origin: bottom; animation: rise .9s cubic-bezier(.2,.8,.3,1) backwards; }
.bars.animate div:nth-child(2) i, .bars.animate div:nth-child(2) b { animation-delay: .06s; }
.bars.animate div:nth-child(3) i, .bars.animate div:nth-child(3) b { animation-delay: .12s; }
.bars.animate div:nth-child(4) i, .bars.animate div:nth-child(4) b { animation-delay: .18s; }
.bars.animate div:nth-child(5) i, .bars.animate div:nth-child(5) b { animation-delay: .24s; }
.bars.animate div:nth-child(6) i, .bars.animate div:nth-child(6) b { animation-delay: .30s; }
.bars.animate div:nth-child(7) i, .bars.animate div:nth-child(7) b { animation-delay: .36s; }
.bars.animate div:nth-child(8) i, .bars.animate div:nth-child(8) b { animation-delay: .42s; }
@keyframes rise { from { transform: scaleY(0); } }

/* metric + ai card hover lift */
.metric, .ai-card { transition: transform .2s ease, box-shadow .2s ease; }
.metric:hover, .ai-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }

@media (prefers-reduced-motion: reduce) {
  .bars.animate i, .bars.animate b { animation: none; }
  .metric, .ai-card { transition: none; }
  .systems i { animation: none; }
}

/* ================= Leads toolbar ================= */
.lead-tools { display: flex; align-items: center; gap: .6rem; }
#leadSearch {
  font: inherit; font-size: .82rem;
  background: #0d1b36; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .9rem; width: 230px;
}
#leadSearch::placeholder { color: #5d7db0; }
#leadSearch:focus { outline: 2px solid rgba(47,214,176,.5); border-color: var(--green); }
#leadRows tr[data-lead] { cursor: pointer; }
#leadRows tr[data-lead]:hover td { background: rgba(255,255,255,.03); }

/* ================= Automation Center ================= */
.auto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.auto-card {
  background: linear-gradient(180deg, #14264a, #101d3a);
  border: 1px solid var(--line);
  border-radius: 14px; padding: 1rem;
  display: grid; gap: .3rem; align-content: start;
  transition: transform .2s ease, border-color .2s ease;
}
.auto-card:hover { transform: translateY(-3px); }
.auto-card.on { border-color: rgba(47,214,176,.45); box-shadow: 0 0 22px rgba(47,214,176,.10) inset; }
.auto-card.phase2 { border-style: dashed; }
.auto-top { display: flex; align-items: center; gap: .6rem; }
.auto-icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; font-size: 1.05rem;
  background: rgba(47,214,176,.13); color: var(--green);
}
.phase-badge {
  font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .1em;
  background: rgba(155,123,255,.18); color: #c3aeff;
  border: 1px solid rgba(155,123,255,.4);
  padding: .12rem .5rem; border-radius: 999px;
}
.auto-card strong { color: #fff; font-size: .95rem; }
.auto-card span { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.auto-state { color: var(--green); font-size: .72rem; font-weight: 700; margin-top: .2rem; }
.auto-card:not(.on) .auto-state { color: #5d7db0; }

/* toggle switch */
.switch { margin-left: auto; position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i {
  position: absolute; inset: 0; border-radius: 999px;
  background: #22355c; transition: background .2s ease; cursor: pointer;
}
.switch i::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #8ea2c7; transition: transform .2s ease, background .2s ease;
}
.switch input:checked + i { background: rgba(47,214,176,.5); }
.switch input:checked + i::before { transform: translateX(18px); background: #2fd6b0; }
.switch input:focus-visible + i { outline: 2px solid var(--blue); }

/* ================= Lead drawer ================= */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(4,9,22,.6);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 80;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(430px, 94vw);
  background: linear-gradient(180deg, #0f1f3f, #0b1630);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.3,1);
  z-index: 90; overflow-y: auto; padding: 1.4rem 1.3rem 2rem;
}
.drawer.open { transform: none; }
.drawer-close {
  position: absolute; top: .9rem; right: .9rem;
  font: inherit; background: #16305c; color: #9cc4ff;
  border: 1px solid #27529b; border-radius: 9px;
  width: 32px; height: 32px; cursor: pointer;
}
.d-head { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.d-avatar {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #12829a, #1ca7e1);
  color: #fff; font-weight: 800; font-size: 1.15rem;
}
.d-head h2 { font-size: 1.15rem; color: #fff; }
.d-sub { color: var(--muted); font-size: .78rem; }
.d-status { display: grid; gap: .3rem; margin-bottom: 1rem; }
.d-status label { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.d-status select { width: max-content; font-size: .85rem; padding: .4rem .9rem; }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; margin-bottom: 1rem; }
.d-grid label, .d-notes label { display: block; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; }
.d-grid span, .d-notes span { color: #e8eefb; font-size: .88rem; }
.d-notes { margin-bottom: 1rem; }
.d-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.d-actions button {
  font: inherit; font-size: .8rem; font-weight: 700;
  background: #16305c; color: #cfe0f7;
  border: 1px solid #27529b; border-radius: 999px;
  padding: .45rem .95rem; cursor: pointer;
  transition: background .15s ease;
}
.d-actions button:hover { background: #1d4ed8; color: #fff; }
.d-actions button:disabled { opacity: .5; cursor: default; }
.d-tl-title { font-size: .85rem; color: #fff; margin-bottom: .6rem; }
.d-timeline { display: grid; }
.tl-item {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .55rem 0 .55rem .2rem;
  border-left: 2px solid #22355c; margin-left: .55rem; padding-left: .9rem;
  position: relative;
}
.tl-item b {
  position: absolute; left: -12px; top: .55rem;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: #14264a; border: 1px solid var(--line);
  border-radius: 50%; font-size: .7rem;
}
.tl-item strong { display: block; color: #eaf1ff; font-size: .82rem; }
.tl-item small { display: block; color: var(--muted); font-size: .73rem; }
.tl-time { color: #5d7db0 !important; }

@media (max-width: 1080px) { .auto-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .auto-grid { grid-template-columns: 1fr; }
  .lead-tools { width: 100%; }
  #leadSearch { flex: 1; width: auto; }
}

/* ================= Integrations ================= */
.int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1rem; }
.int-card {
  background: linear-gradient(180deg, #14264a, #101d3a);
  border: 1px solid var(--line);
  border-radius: 14px; padding: 1rem;
  display: grid; gap: .55rem; align-content: start;
  transition: transform .2s ease, border-color .2s ease;
}
.int-card:hover { transform: translateY(-3px); }
.int-card.int-ready { border-color: rgba(58,165,255,.5); box-shadow: 0 0 22px rgba(58,165,255,.10) inset; }
.int-logo {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; color: #fff;
}
.lg-metricool { background: linear-gradient(135deg, #1c8ef9, #10b3c7); }
.lg-google { background: linear-gradient(135deg, #4285f4, #34a853); }
.lg-meta { background: linear-gradient(135deg, #1877f2, #7a3ff2); }
.lg-fuse { background: linear-gradient(135deg, #64748b, #334155); }
.int-body strong { color: #fff; display: block; font-size: .93rem; }
.int-body span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.int-chip {
  font-style: normal; justify-self: start;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  padding: .16rem .6rem; border-radius: 999px;
  background: rgba(155,123,255,.15); color: #c3aeff; border: 1px solid rgba(155,123,255,.4);
}
.int-chip.ready { background: rgba(58,165,255,.18); color: #8cc5ff; border-color: rgba(58,165,255,.5); }
.int-chip.preview { background: rgba(47,214,176,.15); color: #7ee9d4; border-color: rgba(47,214,176,.4); }

.metricool-strip {
  border: 1px dashed #27529b; border-radius: 14px;
  padding: .9rem 1rem; background: rgba(28,142,249,.05);
}
.ms-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.ms-head strong { color: #fff; font-size: .95rem; }
.lg-metricool.sm { width: 28px; height: 28px; border-radius: 8px; font-size: .9rem; display: grid; place-items: center; font-style: normal; }
.ms-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
.ms-stats div { display: grid; gap: .05rem; text-align: center; }
.ms-stats b { color: #fff; font-size: 1.3rem; font-weight: 800; }
.ms-stats span { color: var(--muted); font-size: .72rem; font-weight: 600; }

@media (max-width: 1080px) { .int-grid { grid-template-columns: 1fr 1fr; } .ms-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .int-grid { grid-template-columns: 1fr; } }

/* nav toast */
.nav-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: linear-gradient(135deg, #10305c, #143a53);
  border: 1px solid #27529b; color: #cfe0f7;
  padding: .7rem 1.2rem; border-radius: 12px;
  font-size: .85rem; box-shadow: 0 14px 40px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 95; max-width: 92vw; text-align: center;
}
.nav-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nav-toast b { color: #8cc5ff; }
section[id] { scroll-margin-top: 12px; }