.agent-theme {
  --agent-from:    #3B6FF6;
  --agent-to:      #7C5CFC;
  --agent-light:   #A78BFA;
  --agent-lighter: #C4B5FD;
  --agent-ink:     #10132E;
  --agent-body:    #5A6079;
  --agent-canvas:  #F2F3FB;
  --agent-border:  #E6E7F2;
  --agent-on-dark: #94A6C4;
  --agent-gradient: linear-gradient(90deg, var(--agent-from) 0%, var(--agent-to) 100%);
}


.gradient-text {
  
  background-image: var(--agent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text--wide { background-image: linear-gradient(90deg, #2563EB 0%, #7C5CFC 100%); }
.gradient-text--soft { background-image: linear-gradient(90deg, #6D8DFF 0%, #A78BFA 70%); }



.btn--gradient {
  background: var(--agent-gradient) border-box;
  border-color: transparent;
  color: var(--white);
  font-weight: var(--weight-semibold);
  box-shadow: 0 8px 24px -6px rgba(109, 74, 255, 0.5);
}

.btn--gradient:hover { filter: brightness(1.1); color: var(--white); }

.btn--white {
  background: var(--white);
  border-color: var(--white);
  color: #131046;
  font-weight: var(--weight-semibold);
}

.btn--white:hover { background: #E9EAF6; color: #131046; }


.agent-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 640px at 72% 45%, rgba(109, 74, 255, 0.38), transparent 62%),
    radial-gradient(800px 500px at 92% 0%, rgba(59, 111, 246, 0.28), transparent 60%),
    linear-gradient(115deg, #070A1C 0%, #0B1030 55%, #131046 100%);
}

.agent-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 60% 100%, rgba(139, 92, 246, 0.18), transparent 70%);
  pointer-events: none;
}

.agent-hero > * { position: relative; z-index: 1; }

.agent-hero__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.agent-hero__title {
  font-size: clamp(2.25rem, 1.5rem + 3.1vw, 3.625rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  
  max-width: 460px;
}

.agent-hero__sub {
  font-size: 18px;
  line-height: 1.65;
  color: #B9C1D9;
  max-width: 460px;
  text-wrap: pretty;
}

@media (max-width: 1000px) {
  .agent-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

.section--agent-light { background: var(--agent-canvas); }

.section--agent-deep {
  background:
    radial-gradient(900px 500px at 50% -20%, rgba(59, 111, 246, 0.16), transparent 65%),
    linear-gradient(180deg, #081226 0%, #0A1830 100%);
}

.section--agent-cta {
  background:
    radial-gradient(800px 460px at 50% 30%, rgba(109, 74, 255, 0.22), transparent 65%),
    linear-gradient(180deg, #0A1830 0%, #0B0D24 100%);
}


.agent-title {
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--agent-ink);
}

.agent-title--on-dark { color: var(--white); }
.agent-title--tall { line-height: 1.22; }

.agent-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--agent-body);
}

.agent-lead--on-dark { color: var(--agent-on-dark); }


.problem-card {
  background: var(--white);
  border: 1px solid var(--agent-border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  
  text-align: left;
  box-shadow: 0 4px 16px -8px rgba(19, 16, 70, 0.08);
}

.problem-card__icon { color: var(--agent-to); }

.problem-card__title {
  font-size: 19px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--agent-ink);
  text-wrap: balance;
}

.problem-card__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--agent-body);
}


.capability-card {
  background: rgba(23, 42, 74, 0.55);
  border: 1px solid #234168;
  border-radius: 12px;
  padding: 30px 20px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.capability-card:hover { border-color: #3E64A0; }

.capability-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(59, 111, 246, 0.14);
  border: 1px solid rgba(110, 151, 220, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--link-on-dark);
  flex: none;
}

.capability-card__title {
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--white);
}

.capability-card__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--agent-on-dark);
  text-wrap: pretty;
}


.timeline {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  position: relative;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  bottom: 28px;
  width: 2px;
  transform: translateX(-50%);
}


.timeline::before { background: #E4E6F2; }
.timeline::after {
  background: linear-gradient(180deg, #3B6FF6 0%, #7C5CFC 55%, #A99BF8 100%);
  clip-path: inset(0 0 calc((1 - var(--timeline-progress, 1)) * 100%) 0);
}

.timeline__row {
  display: grid;
  grid-template-columns: 1fr 130px 1fr;
  align-items: center;
  padding: 28px 0;
  position: relative;
}

.timeline__text {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline__visual { grid-row: 1; display: flex; }

.timeline__image {
  width: 320px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-panel);
}


.timeline__row:nth-child(odd) .timeline__text {
  grid-column: 1;
  text-align: right;
  padding-right: 20px;
}
.timeline__row:nth-child(odd) .timeline__visual {
  grid-column: 3;
  justify-content: flex-start;
  padding-left: 20px;
}
.timeline__row:nth-child(even) .timeline__text {
  grid-column: 3;
  text-align: left;
  padding-left: 20px;
}
.timeline__row:nth-child(even) .timeline__visual {
  grid-column: 1;
  justify-content: flex-end;
  padding-right: 20px;
}

.timeline__marker {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.timeline__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B6FF6 0%, #7C5CFC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: var(--weight-bold);
  color: var(--white);
  box-shadow: 0 0 0 8px rgba(124, 92, 252, 0.12),
              0 6px 18px -4px rgba(59, 111, 246, 0.45);
}


.timeline[data-timeline] .timeline__badge {
  background: var(--white);
  color: #A3A9C2;
  box-shadow: inset 0 0 0 2px #E4E6F2;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

.timeline[data-timeline] .timeline__badge[data-lit] {
  background: linear-gradient(135deg, #3B6FF6 0%, #7C5CFC 100%);
  color: var(--white);
  box-shadow: 0 0 0 8px rgba(124, 92, 252, 0.12),
              0 6px 18px -4px rgba(59, 111, 246, 0.45);
}

.timeline__title {
  font-size: 21px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--agent-ink);
}

.timeline__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--agent-body);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  
  .timeline::before,
  .timeline::after { left: 28px; }

  .timeline__row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0 24px;
    padding: 24px 0;
  }

  .timeline__row:nth-child(n) .timeline__marker {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
  }

  .timeline__row:nth-child(n) .timeline__text,
  .timeline__row:nth-child(n) .timeline__visual {
    grid-column: 2;
    grid-row: auto;
    text-align: left;
    justify-content: flex-start;
    padding: 0;
  }

  .timeline__text { margin-bottom: 20px; }

  .timeline__image { width: 100%; max-width: 320px; }
}

@media (max-width: 1000px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


.agent-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}

.agent-visual::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(closest-side, rgba(124, 92, 252, 0.32), transparent 70%);
  pointer-events: none;
}


.doc-card {
  position: relative;
  z-index: 2;
  width: 210px;
  height: 272px;
  background: linear-gradient(160deg, #F4F2FF 0%, #DDD6F8 100%);
  border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(10, 8, 40, 0.7),
              0 0 40px -8px rgba(124, 92, 252, 0.35);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: rotate(-4deg);
  flex: none;
}

.doc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doc-card__label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: #4B4570;
}

.doc-card__type {
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--white);
  background: #E5484D;
  border-radius: 4px;
  padding: 2px 6px;
}

.doc-card__rule {
  height: 6px;
  width: 70%;
  border-radius: 3px;
  background: #B9B0E2;
}

.doc-card__lines { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.doc-card__line { display: flex; align-items: center; gap: 7px; }

.doc-card__box {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1.5px solid #8F84C9;
  background: var(--white);
  flex: none;
}

.doc-card__bar {
  height: 5px;
  border-radius: 3px;
  background: #CFC8EE;
}

.doc-card__foot { margin-top: auto; display: flex; gap: 8px; }
.doc-card__foot .doc-card__bar { background: #B9B0E2; }


.agent-link {
  position: relative;
  z-index: 3;
  width: 84px;
  height: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.agent-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.15), #A78BFA, rgba(167, 139, 250, 0.15));
}

.agent-link__spark {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C4B5FD, #7C5CFC 60%, #4C36C4);
  box-shadow: 0 0 28px 6px rgba(139, 92, 246, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}


.analysis-card {
  position: relative;
  z-index: 2;
  width: 300px;
  background: linear-gradient(165deg, rgba(30, 26, 72, 0.92) 0%, rgba(16, 14, 44, 0.96) 100%);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  box-shadow: 0 24px 70px -14px rgba(5, 4, 24, 0.85),
              0 0 44px -10px rgba(124, 92, 252, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex: none;
}

.analysis-card__head { display: flex; align-items: center; gap: 9px; color: var(--agent-lighter); }

.analysis-card__head-label {
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: #EDEAFF;
}

.analysis-card__dots { display: inline-flex; gap: 3px; margin-left: 1px; }

.analysis-card__dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--agent-light);
}

.analysis-card__dots span:nth-child(2) { background: rgba(167, 139, 250, 0.6); }
.analysis-card__dots span:nth-child(3) { background: rgba(167, 139, 250, 0.3); }

.analysis-card__rule { height: 1px; background: rgba(167, 139, 250, 0.2); }

.analysis-card__row { display: flex; align-items: center; gap: 11px; }

.analysis-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(124, 92, 252, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--agent-light);
  flex: none;
}

.analysis-card__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }

.analysis-card__label {
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: #EDEAFF;
}

.analysis-card__note { font-size: 11px; color: #8D87B8; }

.analysis-card__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--agent-to);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex: none;
}

.analysis-card__cta {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(90deg, rgba(59, 111, 246, 0.25), rgba(124, 92, 252, 0.25));
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: #EDEAFF;
}

.analysis-card__cta svg { color: var(--agent-lighter); }


@media (max-width: 1000px) {
  .agent-visual { flex-direction: column; min-height: 0; gap: 0; }
  .agent-link { width: 2px; height: 84px; }
  .agent-link::before { background: linear-gradient(180deg, rgba(167, 139, 250, 0.15), #A78BFA, rgba(167, 139, 250, 0.15)); }
}


.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(124, 92, 252, 0.12);
}

.agent-badge__name {
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--agent-lighter);
}


.before-after {
  width: 100%;
  max-width: 1120px;
  margin-top: 52px;
  display: grid;
  grid-template-columns: 1fr 62px 1.15fr;
  align-items: center;
  text-align: left;
}

.before-after > * { min-width: 0; }

@media (max-width: 900px) {
  .before-after {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 40px;
  }
}


.sheet {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sheet__head { display: flex; align-items: center; gap: 9px; }

.sheet__icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #1D6F42;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--white);
  flex: none;
}

.sheet__file { font-size: 12.5px; font-weight: var(--weight-semibold); color: #B9C1D9; }

.sheet__grid {
  background: #F7F8FA;
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
}

.sheet__row {
  display: grid;
  grid-template-columns: 22px 1fr 74px 74px;
  border-bottom: 1px solid #E4E7EB;
}

.sheet__row--header {
  background: #E8EBEF;
  border-bottom: 1px solid #D3D8DE;
}

.sheet__row--header span { font-size: 9px; color: #8A94A0; padding: 5px 8px; }
.sheet__row--header span:first-child { padding: 5px 4px; text-align: center; }

.sheet__n {
  font-size: 9.5px;
  color: #8A94A0;
  padding: 6px 4px;
  text-align: center;
  background: #EDF0F3;
}

.sheet__cell {
  font-size: 10.5px;
  color: #3C4552;
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet__cell--num { text-align: right; }
.sheet__cell--missing { color: #C2410C; }
.sheet__row--total .sheet__cell { font-weight: var(--weight-bold); color: #182230; }

.sheet__notes { display: flex; flex-wrap: wrap; gap: 6px; }

.sheet__note {
  font-size: 10.5px;
  color: #8D87B8;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 4px 8px;
}


.before-after__link {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.before-after__link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.12), #A78BFA, rgba(167, 139, 250, 0.12));
}

.before-after__spark {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C4B5FD, #7C5CFC 60%, #4C36C4);
  box-shadow: 0 0 26px 6px rgba(139, 92, 246, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

@media (max-width: 900px) {
  .before-after__link { height: 72px; }
  .before-after__link::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    height: auto;
    width: 2px;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.12), #A78BFA, rgba(167, 139, 250, 0.12));
  }
}


.budget-view {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -18px rgba(5, 4, 24, 0.75),
              0 0 60px -18px rgba(124, 92, 252, 0.4);
  display: flex;
  color: var(--text-strong);
}

.budget-view__spine { width: 6px; background: #0D5BD1; flex: none; }
.budget-view__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.budget-view__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid #EDF0F4;
}

.budget-view__head img { height: 17px; width: auto; }

.budget-view__title { font-size: 14.5px; font-weight: var(--weight-semibold); color: var(--text-strong); }

.budget-view__live {
  margin-left: auto;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.07em;
  color: var(--brand);
  background: #E9F1FD;
  border-radius: 6px;
  padding: 4px 9px;
}

.budget-view__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #EDF0F4;
}

.budget-stat {
  padding: 16px 20px;
  border-right: 1px solid #EDF0F4;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.budget-stat:last-child { border-right: none; }

.budget-stat__label {
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7A8794;
}

.budget-stat__value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

.budget-stat__value--alert { color: #C2410C; }
.budget-stat__note { font-size: 11.5px; color: #7A8794; }

.budget-line {
  display: grid;
  grid-template-columns: 1fr 90px 132px;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid #F3F5F8;
}

.budget-line__name { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--text-strong); }
.budget-line__meta { font-size: 11.5px; color: #7A8794; }

.budget-line__amount {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-strong);
  text-align: right;
}

.budget-line__progress { display: flex; align-items: center; gap: 9px; }

.budget-line__track {
  display: block;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #EDF0F4;
  overflow: hidden;
}

.budget-line__fill { display: block; height: 100%; background: var(--brand); }
.budget-line--over .budget-line__fill { background: #C2410C; }

.budget-line__pct {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--brand);
  white-space: nowrap;
}

.budget-line--over .budget-line__pct { color: #C2410C; }

.budget-view__insight {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  background: #F7F9FC;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4A5768;
}

.budget-view__insight svg { flex: none; color: var(--agent-to); }


.pillar {
  text-align: left;
  display: grid;
  grid-template-columns: 74px 1fr 1.05fr;
  gap: 32px;
  align-items: center;
  background: rgba(23, 42, 74, 0.5);
  border: 1px solid #234168;
  border-radius: 18px;
  padding: 30px 34px;
}

.pillar__num {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(59, 111, 246, 0.14);
  border: 1px solid rgba(110, 151, 220, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: var(--weight-bold);
  color: #7C8CF8;
}

.pillar__title {
  font-size: 23px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}

.pillar__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--agent-on-dark);
  text-wrap: pretty;
}

.pillar__points { display: flex; flex-direction: column; gap: 9px; }

.pillar__point {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(110, 151, 220, 0.2);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #D6E0EE;
}

.pillar__point svg { flex: none; margin-top: 2px; color: #7C8CF8; }

@media (max-width: 900px) {
  .pillar { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 24px; }
}


.input-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--agent-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px -10px rgba(19, 16, 70, 0.16);
}

.input-row__tag {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--agent-canvas);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--brand);
}

.input-row__label { font-size: 15px; color: var(--agent-ink); }


.mcp-diagram {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  align-items: center;
  min-height: 420px;
}

.mcp-diagram::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  background: radial-gradient(closest-side, rgba(124, 92, 252, 0.3), transparent 70%);
  pointer-events: none;
}

.mcp-diagram > * { position: relative; min-width: 0; }

.mcp-clients { display: flex; flex-direction: column; gap: 14px; }

.mcp-client {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mcp-client__mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--agent-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--weight-bold);
  flex: none;
}

.mcp-client__name {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--white);
  min-width: 0;
  overflow-wrap: anywhere;
}

.mcp-clients__note { font-size: 12.5px; color: #8D87B8; padding-left: 4px; }

.mcp-hub {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mcp-hub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.15), #A78BFA, rgba(167, 139, 250, 0.15));
}

.mcp-hub__badge {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: radial-gradient(circle at 35% 30%, #C4B5FD, #7C5CFC 60%, #4C36C4);
  box-shadow: 0 0 30px 8px rgba(139, 92, 246, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  color: var(--white);
}

.mcp-surfaces {
  background: linear-gradient(165deg, rgba(30, 26, 72, 0.92) 0%, rgba(16, 14, 44, 0.96) 100%);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 70px -14px rgba(5, 4, 24, 0.85),
              0 0 44px -10px rgba(124, 92, 252, 0.4);
}

.mcp-surfaces__head { display: flex; align-items: center; gap: 9px; }
.mcp-surfaces__head img { height: 16px; width: auto; }

.mcp-surfaces__title {
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: #EDEAFF;
}

@media (max-width: 1000px) {
  .mcp-diagram { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mcp-hub { height: 92px; }
  .mcp-hub::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    height: auto;
    width: 2px;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.15), #A78BFA, rgba(167, 139, 250, 0.15));
  }
}


.prompt {
  text-align: left;
  background: rgba(23, 42, 74, 0.5);
  border: 1px solid #234168;
  border-radius: 18px;
  overflow: hidden;
}

.prompt__ask {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 28px 22px;
  border-bottom: 1px solid #234168;
}

.prompt__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--agent-on-dark);
  flex: none;
}

.prompt__question {
  font-size: 18px;
  line-height: 1.55;
  font-weight: var(--weight-medium);
  color: var(--white);
  text-wrap: pretty;
}

.prompt__answer {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 24px 28px 28px;
  align-items: start;
}

.prompt__answer > * { min-width: 0; }

.prompt__tools { display: flex; flex-direction: column; gap: 9px; }

.prompt__tool {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--agent-lighter);
  background: rgba(124, 92, 252, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 7px;
  padding: 5px 9px;
  align-self: flex-start;
}

.prompt__note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--agent-on-dark);
  margin-top: 4px;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .prompt__answer { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .prompt__ask { padding: 20px; }
  .prompt__tools { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .prompt__note { margin-top: 0; width: 100%; }
}


.data-panel {
  background: #0C1526;
  border: 1px solid #1E3555;
  border-radius: 12px;
  overflow: hidden;
}

.data-panel__head {
  padding: 11px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid #1E3555;
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: #6E8199;
}

.ticket-row {
  display: grid;
  grid-template-columns: 1fr 120px 150px;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(30, 53, 85, 0.6);
  align-items: center;
}

.ticket-row--head { padding: 11px 18px; }

.ticket-row__title { font-size: 14px; color: #E4EAF4; }
.ticket-row__building { font-size: 11.5px; color: #6E8199; }

.ticket-row__priority {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  border-radius: 5px;
  padding: 4px 8px;
  justify-self: start;
  color: #6E8199;
  background: rgba(110, 129, 153, 0.15);
}

.ticket-row__priority--urgent { color: #FF8A8F; background: rgba(229, 72, 77, 0.16); }

.ticket-row__assignee { display: flex; align-items: center; gap: 7px; }
.ticket-row__from { font-size: 13px; color: #4E6480; text-decoration: line-through; }
.ticket-row__assignee svg { color: #7C8CF8; flex: none; }

.ticket-row__to {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: #EDEAFF;
  background: rgba(124, 92, 252, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: var(--radius-pill);
  padding: 3px 9px 3px 4px;
}

.ticket-row__avatar {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--agent-to);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--white);
}

.data-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  font-size: 12.5px;
  color: #6E8199;
}

.data-panel__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: #EDEAFF;
  background: linear-gradient(90deg, rgba(59, 111, 246, 0.3), rgba(124, 92, 252, 0.3));
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 8px;
  padding: 6px 11px;
}

.data-panel__action svg { color: var(--agent-lighter); }


.compliance-card {
  background: #0C1526;
  border: 1px solid #1E3555;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compliance-card__name { font-size: 14px; font-weight: var(--weight-semibold); color: #E4EAF4; }

.compliance-card__bar {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: #16233A;
}

.compliance-card__bar span { display: block; height: 100%; }
.compliance-card__bar .is-ok   { background: #3DBE8B; }
.compliance-card__bar .is-warn { background: #F0A83C; }
.compliance-card__bar .is-bad  { background: #E5484D; }

.compliance-card__legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--agent-on-dark); }

.compliance-card__legend span { display: inline-flex; align-items: center; gap: 5px; }

.compliance-card__legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.compliance-card__legend .is-ok   { background: #3DBE8B; }
.compliance-card__legend .is-warn { background: #F0A83C; }
.compliance-card__legend .is-bad  { background: #E5484D; }


.visits {
  background: #0C1526;
  border: 1px solid #1E3555;
  border-radius: 12px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.visits__month { display: flex; flex-direction: column; gap: 8px; }
.visits__label { font-size: 12px; font-weight: var(--weight-semibold); color: var(--agent-on-dark); }
.visits__rule { height: 2px; background: #1E3555; }

.visits__item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 111, 246, 0.12);
  border: 1px solid rgba(110, 151, 220, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #C7D5E8;
}

.visits__item i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--link-on-dark);
  flex: none;
}

@media (max-width: 640px) {
  .visits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ticket-row--head { display: none; }
}


.floorplan {
  display: grid;
  grid-template-columns: 1fr 46px 1fr;
  align-items: center;
}

.floorplan > * { min-width: 0; }

.floorplan__source {
  background: #0C1526;
  border: 1px solid #1E3555;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floorplan__filename {
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: #6E8199;
}

.floorplan__svg { width: 100%; height: auto; display: block; }

.floorplan__link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.floorplan__link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.1), #A78BFA, rgba(167, 139, 250, 0.1));
}

.floorplan__spark {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C4B5FD, #7C5CFC 60%, #4C36C4);
  box-shadow: 0 0 20px 5px rgba(139, 92, 246, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.tree {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(5, 4, 24, 0.7);
  display: flex;
  color: var(--text-strong);
}

.tree__spine { width: 6px; background: #0D5BD1; flex: none; }
.tree__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.tree__root,
.tree__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #EDF0F4;
}

.tree__row { padding: 12px 18px 12px 34px; }

.tree__pin {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #E8F6FE;
  color: #1CB0F6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.tree__row .tree__pin { width: 28px; height: 28px; }

.tree__name { font-size: 14.5px; color: var(--text-strong); }
.tree__root .tree__name { font-weight: var(--weight-semibold); }
.tree__count { margin-left: auto; font-size: 12px; color: #7A8794; white-space: nowrap; }

.tree__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: 12.5px;
  color: #7A8794;
}

.tree__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--white);
  background: var(--brand);
  border-radius: 8px;
  padding: 8px 13px;
}

@media (max-width: 760px) {
  .floorplan { grid-template-columns: minmax(0, 1fr); }
  .floorplan__link { height: 56px; }
  .floorplan__link::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    height: auto;
    width: 2px;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.1), #A78BFA, rgba(167, 139, 250, 0.1));
  }
}


.scope-table {
  border: 1px solid var(--agent-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px -14px rgba(19, 16, 70, 0.14);
}

.scope-table__head {
  background: var(--agent-canvas);
  border-bottom: 1px solid var(--agent-border);
  padding: 16px 24px;
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--agent-body);
}

.scope-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 18px 24px;
  border-bottom: 1px solid #F0F1F8;
}

.scope-row:last-child { border-bottom: none; }

.scope-row__tag {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  white-space: nowrap;
  border-radius: 5px;
  padding: 4px 8px;
  min-width: 52px;
  text-align: center;
  color: var(--agent-body);
  background: #F0F1F8;
}

.scope-row__tag--write { color: var(--agent-to); background: rgba(124, 92, 252, 0.12); }

.scope-row__label {
  font-size: 15.5px;
  color: var(--agent-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

.security-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--agent-ink);
  font-weight: var(--weight-medium);
}

.security-point svg { flex: none; margin-top: 2px; color: var(--agent-to); }


.inspection-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.inspection-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--agent-border);
  border-radius: var(--radius-lg);
  background: var(--agent-canvas);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  text-align: left;
  color: var(--agent-ink);
}

.inspection-grid__item svg { flex: none; margin-top: 2px; color: var(--agent-to); }