:root {
  --ink: #172238;
  --muted: #637188;
  --line: #dbe3ee;
  --paper: #ffffff;
  --blue: #2765e8;
  --green: #0d8f68;
  --rose: #e1566f;
  --lemon: #f4c542;
  --sky: #cbeafe;
  --mint: #bdf3d6;
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body.lead-app {
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 196, 87, .28), transparent 24rem),
    radial-gradient(circle at 92% 10%, rgba(45, 160, 232, .2), transparent 22rem),
    linear-gradient(180deg, #f7fbff 0%, #fff8f0 46%, #f4fbf7 100%);
  color: var(--ink);
  font-family: Tahoma, Geneva, sans-serif;
  letter-spacing: 0;
  margin: 0;
}

.app-width { max-width: 1360px; }
.app-nav {
  background: rgba(255,255,255,.96);
  border-bottom: 3px solid #ffbd59;
  box-shadow: 0 .8rem 1.8rem rgba(35,54,94,.08);
  margin-bottom: 1.2rem;
}
.nav-inner, .brand, .nav-user, .actions, .row-actions {
  align-items: center;
  display: flex;
  gap: .7rem;
}
.nav-inner { min-height: 4.2rem; justify-content: space-between; }
.brand { color: var(--ink); font-weight: 800; text-decoration: none; }
.logo-brand img {
  display: block;
  height: 3.05rem;
  max-width: min(22rem, 42vw);
  object-fit: contain;
}
.brand span, .brand-mark {
  align-items: center;
  background: linear-gradient(135deg, #0d8f68, #2765e8);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  height: 2.1rem;
  justify-content: center;
  width: 2.1rem;
}
.app-nav nav { display: flex; gap: .25rem; }
.app-nav nav a {
  border-radius: 8px;
  color: var(--ink);
  font-weight: 650;
  padding: .48rem .72rem;
  text-decoration: none;
}
.app-nav nav a:hover { background: #eaf1ff; color: var(--blue); }
.nav-user form, .row-actions form, .inline-form { margin: 0; }

.page-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: .4rem 0 1rem;
}
.eyebrow { color: #6b4fd8; font-size: .78rem; font-weight: 800; margin: 0 0 .18rem; text-transform: uppercase; }
h1 { font-size: 2.1rem; font-weight: 800; margin: 0; }
h2 { font-size: 1.08rem; font-weight: 750; margin: 0; }

.panel {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1rem 2rem rgba(31,50,71,.08);
  margin-bottom: 1rem;
  padding: 1rem;
}
.panel-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: .7rem;
}
.panel-head span, .app-table small { color: var(--muted); }

.metric-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 1rem;
}
.metric {
  border: 1px solid rgba(38,56,75,.1);
  border-radius: 8px;
  display: grid;
  min-height: 6.8rem;
  padding: .9rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.metric:hover { box-shadow: 0 1rem 1.8rem rgba(31,50,71,.12); transform: translateY(-2px); }
.metric span { color: #42546a; font-weight: 700; }
.metric strong { align-self: end; font-size: 1.85rem; line-height: 1; }
.mint { background: var(--mint); }
.sky { background: var(--sky); }
.green { background: #c8f0d7; }
.rose { background: #ffd5df; }
.lemon { background: #ffe991; }

.filter-row, .mis-filter {
  align-items: end;
  display: grid;
  gap: .65rem;
  margin-bottom: 1rem;
}
.filter-row { grid-template-columns: minmax(16rem, 1.5fr) repeat(3, minmax(10rem, .8fr)) auto; }
.mis-filter { grid-template-columns: repeat(7, minmax(9rem, 1fr)) auto; }
.form-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid .wide { grid-column: 1 / -1; }
.form-control, .form-select, .btn { border-radius: 8px; }
.btn { font-weight: 650; }
.stack-form { display: grid; gap: .75rem; }

.app-table { margin: 0; }
.app-table th { color: #526177; font-size: .8rem; text-transform: uppercase; white-space: nowrap; }
.app-table td strong, .app-table td small { display: block; }
.tag {
  background: #e7ddff;
  border-radius: 999px;
  color: #6245a6;
  display: inline-flex;
  font-size: .78rem;
  font-weight: 800;
  padding: .38rem .58rem;
}
.inline-form {
  display: grid;
  gap: .35rem;
  grid-template-columns: minmax(8rem, 1fr) auto;
  margin-top: .45rem;
}
.danger-panel { border-top: 4px solid #e1566f; }

.login-shell {
  align-items: center;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 1rem;
  position: relative;
  z-index: 1;
}
.login-panel {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(219,227,238,.9);
  border-top: 5px solid #ffbd59;
  border-radius: 8px;
  box-shadow: 0 1.4rem 3rem rgba(31,50,71,.14);
  display: grid;
  gap: 1rem;
  max-width: 28rem;
  overflow: hidden;
  padding: 1.15rem;
  position: relative;
  width: min(100%, 28rem);
}
.login-panel::before {
  background: linear-gradient(90deg, rgba(39,101,232,.13), rgba(13,143,104,.12), rgba(255,189,89,.22));
  content: "";
  height: 4.6rem;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.login-logo {
  display: block;
  height: 3.6rem;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.login-copy {
  color: var(--muted);
  margin: -.45rem 0 0;
}
.login-page {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}
.login-page::before {
  animation: loginGlow 7s ease-in-out infinite;
  background: conic-gradient(from 120deg, rgba(39,101,232,.18), rgba(13,143,104,.18), rgba(255,189,89,.24), rgba(225,86,111,.15), rgba(39,101,232,.18));
  border-radius: 999px;
  content: "";
  filter: blur(18px);
  height: 32rem;
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 32rem;
}
.login-shape {
  animation: floaty 4.2s ease-in-out infinite;
  border-radius: 8px;
  box-shadow: 0 1rem 2rem rgba(31,50,71,.12);
  position: absolute;
  z-index: 0;
}
.shape-one {
  background: #2765e8;
  height: 5.2rem;
  left: 10%;
  top: 16%;
  transform: rotate(-12deg);
  width: 7.2rem;
}
.shape-two {
  animation-delay: .55s;
  background: #ffbd59;
  height: 4rem;
  right: 12%;
  top: 22%;
  transform: rotate(10deg);
  width: 5.6rem;
}
.shape-three {
  animation-delay: 1s;
  background: #0d8f68;
  bottom: 14%;
  height: 4.8rem;
  right: 18%;
  transform: rotate(-7deg);
  width: 6.4rem;
}
.login-stickers {
  height: 4.6rem;
  position: absolute;
  right: 1rem;
  top: .9rem;
  width: 5.8rem;
}
.login-stickers span {
  animation: floaty 3.2s ease-in-out infinite;
  border-radius: 8px;
  display: block;
  position: absolute;
}
.login-stickers span:nth-child(1) { background: #2765e8; height: 2.3rem; left: .3rem; top: 1.1rem; transform: rotate(-9deg); width: 3.6rem; }
.login-stickers span:nth-child(2) { animation-delay: .4s; background: #ffbd59; height: 2.1rem; right: .15rem; top: .15rem; transform: rotate(12deg); width: 2.8rem; }
.login-stickers span:nth-child(3) { animation-delay: .75s; background: #0d8f68; bottom: .15rem; height: 1.8rem; left: 1.2rem; transform: rotate(4deg); width: 3.2rem; }
.hint-box {
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: .35rem;
  padding: .72rem;
}

.dashboard-hero {
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f6fbff 38%, #fff1c7 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1rem 2rem rgba(31,50,71,.08);
  display: flex;
  justify-content: space-between;
  margin: .4rem 0 1rem;
  min-height: 10rem;
  overflow: hidden;
  padding: 1.3rem;
  position: relative;
}
.dashboard-hero h1 { font-size: 2.35rem; }
.dashboard-hero p:not(.eyebrow) { color: var(--muted); margin: .35rem 0 0; }
.hero-sticker {
  align-items: center;
  display: grid;
  height: 7rem;
  justify-items: center;
  position: relative;
  width: 12rem;
}
.hero-sticker span {
  border-radius: 8px;
  box-shadow: 0 .8rem 1.4rem rgba(31,50,71,.12);
  display: block;
  position: absolute;
}
.hero-sticker span:nth-child(1) { animation: floaty 3.4s ease-in-out infinite; background: #2765e8; height: 4rem; transform: rotate(-8deg); width: 6rem; }
.hero-sticker span:nth-child(2) { animation: floaty 3.4s ease-in-out .35s infinite; background: #ffbd59; height: 3.2rem; right: 1.4rem; top: .7rem; transform: rotate(10deg); width: 4.3rem; }
.hero-sticker span:nth-child(3) { animation: floaty 3.4s ease-in-out .7s infinite; background: #0d8f68; bottom: .6rem; height: 2.6rem; right: 4.3rem; transform: rotate(5deg); width: 5rem; }
.dashboard-metrics .metric { min-height: 5.7rem; }
.notification-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}
.notify-card {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  box-shadow: 0 .8rem 1.5rem rgba(31,50,71,.08);
  color: var(--ink);
  display: grid;
  gap: .32rem;
  min-height: 6.2rem;
  padding: .9rem;
  position: relative;
  text-decoration: none;
}
.notify-card:hover { color: var(--ink); transform: translateY(-2px); }
.notify-card small { color: var(--muted); }
.notify-card.success { border-left-color: var(--green); }
.notify-card.warning { border-left-color: #f0a202; }
.notify-card.danger { border-left-color: var(--rose); }
.notify-dot {
  animation: pulse 1.6s ease-in-out infinite;
  background: currentColor;
  border-radius: 999px;
  height: .6rem;
  position: absolute;
  right: .85rem;
  top: .85rem;
  width: .6rem;
}
.reminder-list, .timeline {
  display: grid;
  gap: .65rem;
}
.reminder-item {
  align-items: center;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: .1rem .7rem;
  grid-template-columns: 4.4rem 1fr;
  padding: .7rem;
  text-decoration: none;
}
.reminder-item:hover { background: #eef7ff; color: var(--ink); }
.reminder-item strong, .reminder-item small { grid-column: 2; }
.reminder-item small, .timeline-item small, .timeline-item time { color: var(--muted); }
.calendar-chip {
  align-items: center;
  background: #e7ddff;
  border-radius: 8px;
  color: #6245a6;
  display: inline-flex;
  font-weight: 800;
  grid-row: 1 / span 2;
  height: 3rem;
  justify-content: center;
}
.reminder-item.late .calendar-chip { background: #ffd5df; color: #a62f4e; }
.reminder-item.today .calendar-chip { background: #ffe991; color: #694c00; }
.empty-state, .log-line {
  background: #fbfdff;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: .8rem;
}
.detail-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.detail-list {
  display: grid;
  gap: .55rem .8rem;
  grid-template-columns: 8rem 1fr;
  margin: 0;
}
.detail-list dt { color: var(--muted); font-weight: 700; }
.detail-list dd { margin: 0; }
.followup-form {
  display: grid;
  gap: .7rem;
  grid-template-columns: 10rem 1fr 14rem auto;
}
.auto-fill-panel {
  border-top: 4px solid #2765e8;
}
.auto-fill-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}
.auto-fill-actions {
  align-content: start;
  display: grid;
  gap: .55rem;
  min-width: 8rem;
}
.timeline-item {
  border-left: 4px solid #cbeafe;
  background: #fbfdff;
  border-radius: 0 8px 8px 0;
  padding: .75rem .85rem;
}
.timeline-item strong, .timeline-item small, .timeline-item time { display: block; }
.timeline-item p { margin: .25rem 0 0; }
.permission-grid {
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.permission-grid label {
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 700;
  padding: .65rem;
}
.permission-grid input { margin-right: .45rem; }
.pulse-card { animation: breathe 2.2s ease-in-out infinite; }

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -.55rem; }
}
@keyframes pulse {
  0%, 100% { opacity: .45; scale: .86; }
  50% { opacity: 1; scale: 1.2; }
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 .4rem 1rem rgba(31,50,71,.06); }
  50% { box-shadow: 0 1rem 2rem rgba(13,143,104,.18); }
}
@keyframes loginGlow {
  0%, 100% { rotate: 0deg; scale: 1; }
  50% { rotate: 20deg; scale: 1.08; }
}

@media (max-width: 991px) {
  .metric-grid, .filter-row, .mis-filter, .form-grid, .notification-grid, .detail-grid, .followup-form, .permission-grid, .auto-fill-grid { grid-template-columns: 1fr; }
  .page-head, .nav-inner { align-items: stretch; flex-direction: column; }
  .app-nav nav, .nav-user, .actions { flex-wrap: wrap; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; }
  .login-shape { opacity: .45; }
}