* {
  box-sizing: border-box;
}

/* CRM operacional e monitoramento técnico — Fase 2 */
.app-shell,
.sidebar { transition: grid-template-columns .2s ease, width .2s ease, padding .2s ease; }
.sidebar-collapse { width: 100%; margin-bottom: .9rem; padding: .55rem .65rem; display: flex; justify-content: space-between; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.sidebar-collapse svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
.app-shell.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
.app-shell.sidebar-collapsed { grid-template-columns: 5.4rem minmax(0,1fr); }
.app-shell.sidebar-collapsed .sidebar { padding-inline: .65rem; }
.app-shell.sidebar-collapsed .brand { padding-inline: .2rem; }
.app-shell.sidebar-collapsed .brand-logo { width: 3.5rem; object-position: left; }
.app-shell.sidebar-collapsed .main-nav a { justify-content: center; padding-inline: .45rem; font-size: 0; }
.app-shell.sidebar-collapsed .main-nav a i { min-width: 0; font-size: .66rem; }
.app-shell.sidebar-collapsed .sidebar-foot small,
.app-shell.sidebar-collapsed .status-line,
.app-shell.sidebar-collapsed .sidebar-collapse span { display: none; }
.app-shell.sidebar-collapsed .sidebar-collapse { justify-content: center; }
.app-shell.p2-shell { grid-template-columns: 14.75rem minmax(0,1fr); }
.app-shell.p2-shell.sidebar-collapsed { grid-template-columns: 4.8rem minmax(0,1fr); }
.p2-shell .sidebar { padding-inline: 1rem; }
.p2-shell .main-nav a { padding-inline: .7rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.account-settings-link { color: var(--brand-primary); font-size: .7rem; font-weight: 800; }
.profile-photo-preview img { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--brand-border); }
.account-permission-note { padding: 1rem; display: grid; gap: .25rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }
.account-permission-note span { color: var(--brand-primary); font-weight: 800; }
.back-link { display: inline-flex; margin-bottom: 1rem; color: var(--brand-primary); font-weight: 800; }
.view-toggle { padding: .2rem; display: inline-flex; border: 1px solid var(--brand-border); border-radius: var(--radius-pill); background: #fff; }
.view-toggle a { padding: .55rem .9rem; border-radius: var(--radius-pill); color: var(--brand-text-muted); font-size: .72rem; font-weight: 800; }
.view-toggle a.active { color: #fff; background: var(--brand-primary); }
.deal-card.compact { padding: .72rem; gap: .3rem; }
.deal-card.compact h3 { margin: .15rem 0; font-size: .85rem; }
.deal-exam { margin: 0; color: var(--brand-text-muted); font-size: .68rem; }
.deal-facts.compact { margin-top: .35rem; grid-template-columns: 1fr; gap: .25rem; }
.deal-facts.compact > div { padding: .28rem 0; display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--brand-border); }
.deal-facts.compact dt { font-size: .54rem; }
.deal-facts.compact dd { max-width: 65%; overflow: hidden; font-size: .62rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.crm-list-panel { padding: 0; overflow: hidden; }
.crm-list { min-width: 82rem; }
.pagination { padding: 1rem; display: flex; justify-content: center; gap: 1rem; color: var(--brand-text-muted); font-size: .75rem; }
.pagination a { color: var(--brand-primary); font-weight: 800; }
.pop-panel { margin-top: 1rem; }
.pop-flow { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); list-style: none; }
.pop-flow li { position: relative; padding: .9rem; display: flex; gap: .65rem; border-right: 1px solid var(--brand-border); }
.pop-flow li:last-child { border-right: 0; }
.pop-flow li > b { width: 1.65rem; height: 1.65rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-primary); font-size: .65rem; }
.pop-flow strong,.pop-flow small { display: block; }
.pop-flow strong { color: var(--brand-primary); font-size: .7rem; }
.pop-flow small { margin-top: .25rem; color: var(--brand-text-muted); font-size: .58rem; line-height: 1.4; }
.pop-flow .is-pending-definition { background: var(--semantic-warning-soft); }
.integration-pill { padding: .65rem .85rem; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--brand-border); border-radius: var(--radius-pill); font-size: .7rem; font-weight: 800; }
.integration-pill i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--text-subtle); }
.integration-pill.operational i { background: var(--semantic-success); }
.integration-pill.degraded i { background: var(--semantic-warning); }
.integration-pill.offline i { background: var(--semantic-error); }
.whatsapp-layout { display: grid; grid-template-columns: minmax(15rem,.8fr) minmax(24rem,1.8fr) minmax(17rem,1fr); gap: 1rem; align-items: stretch; }
.conversation-list,.chat-panel,.conversation-context { min-height: 66vh; }
.conversation-item { padding: .75rem 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; border-bottom: 1px solid var(--brand-border); }
.conversation-item.active { margin-inline: -.7rem; padding-inline: .7rem; background: var(--surface-subtle); }
.conversation-item span:nth-child(2) strong,.conversation-item span:nth-child(2) small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item small { color: var(--brand-text-muted); font-size: .58rem; }
.conversation-item > b { min-width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-accent); font-size: .58rem; }
.chat-panel { display: flex; flex-direction: column; }
.chat-head { padding-bottom: .85rem; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--brand-border); }
.message-stream { flex: 1; padding: 1rem 0; display: flex; flex-direction: column; gap: .65rem; overflow-y: auto; max-height: 52vh; }
.chat-message { max-width: 78%; padding: .7rem .8rem; border-radius: .8rem; background: var(--surface-subtle); }
.chat-message.outbound { align-self: flex-end; background: var(--semantic-success-soft); }
.chat-message p { margin: 0; white-space: pre-wrap; }
.chat-message small { display: block; margin-top: .3rem; color: var(--brand-text-muted); font-size: .55rem; }
.chat-compose { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; }
.btn-block { width: 100%; justify-content: center; }
.conversation-context h3 { margin: 1.25rem 0 .5rem; font-size: .8rem; }
.crm-health-grid { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.health-card { position: relative; padding: 1rem; overflow: hidden; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: #fff; }
.health-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .28rem; background: var(--text-subtle); }
.health-card.operational::before { background: var(--semantic-success); }
.health-card.degraded::before { background: var(--semantic-warning); }
.health-card.offline::before { background: var(--semantic-error); }
.health-card span,.health-card strong,.health-card small { display: block; }
.health-card span { color: var(--brand-text-muted); font-size: .62rem; }
.health-card strong { margin: .35rem 0; color: var(--brand-primary); font-size: 1rem; }
.health-card small { color: var(--text-subtle); font-size: .58rem; }
.monitor-refresh { display: grid; justify-items: end; gap: .35rem; }
.architecture-flow { display: flex; align-items: stretch; gap: .45rem; overflow-x: auto; }
.architecture-flow > div { min-width: 8.5rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.architecture-flow > div.operational { border-color: var(--semantic-success); }
.architecture-flow > div.degraded { border-color: var(--semantic-warning); }
.architecture-flow > div.offline { border-color: var(--semantic-error); }
.architecture-flow > i { align-self: center; color: var(--brand-accent); font-style: normal; }
.architecture-flow strong,.architecture-flow small { display: block; }
.architecture-flow strong { color: var(--brand-primary); font-size: .68rem; }
.architecture-flow small { margin-top: .25rem; color: var(--brand-text-muted); font-size: .54rem; }
.architecture-support { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.architecture-support span { padding: .35rem .55rem; border-radius: var(--radius-pill); background: var(--brand-primary-soft); color: var(--brand-primary); font-size: .58rem; font-weight: 800; }
.panel-note { color: var(--brand-text-muted); font-size: .64rem; }

/* Home P2 — cockpit operacional, sem alterar os componentes globais do CRM. */
.p2-home-heading { margin-bottom: .9rem; }
.home-context-strip { margin-bottom: 1rem; padding: .65rem .85rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: rgba(255,255,255,.72); }
.home-context-strip p { margin: 0; }
.home-weather { flex: 0 0 auto; display: flex; align-items: center; gap: .32rem; color: var(--brand-text-muted); font-size: .66rem; white-space: nowrap; }
.home-weather::before { content: ""; width: .45rem; height: .45rem; border: 2px solid var(--brand-accent); border-radius: 50%; }
.home-weather strong { color: var(--brand-primary); }
.home-weather a { color: var(--text-subtle); font-size: .52rem; text-decoration: underline; text-underline-offset: .15rem; }
.attendance-principle { min-width: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: .55rem; color: var(--brand-text-muted); font-size: .66rem; text-align: right; }
.attendance-principle > span { flex: 0 0 auto; color: var(--brand-secondary); font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.attendance-principle q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actionable-kpi { position: relative; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.actionable-kpi:hover { transform: translateY(-2px); border-color: var(--brand-secondary); box-shadow: var(--shadow-md); }
.actionable-kpi:focus-visible { border-color: var(--brand-accent); }
.actionable-kpi > * { position: relative; z-index: 1; }
.p2-cockpit-grid { align-items: stretch; }
.attention-panel { padding-bottom: 1rem; }
.attention-panel .panel-head { margin-bottom: .75rem; }
.my-day-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.my-day-summary span { padding: .3rem .5rem; border-radius: var(--radius-pill); background: var(--surface-subtle); color: var(--brand-text-muted); font-size: .58rem; white-space: nowrap; }
.my-day-summary strong { color: var(--brand-primary); }
.attention-list { display: grid; }
.attention-item { min-width: 0; padding: .72rem .15rem; display: grid; grid-template-columns: .55rem minmax(9rem,1.15fr) minmax(8rem,.9fr) minmax(10rem,1.15fr) auto; align-items: center; gap: .7rem; border-bottom: 1px solid var(--brand-border); color: var(--brand-text-muted); }
.attention-item:last-child { border-bottom: 0; }
.attention-item:hover { margin-inline: -.45rem; padding-inline: .6rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }
.attention-item > i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--semantic-info); }
.attention-item.is-warning > i { background: var(--semantic-warning); }
.attention-item.is-critical > i { background: var(--semantic-error); }
.attention-item span { min-width: 0; }
.attention-item strong,.attention-item small { display: block; }
.attention-patient strong { overflow: hidden; color: var(--brand-primary); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.attention-patient small,.attention-reason small,.attention-next small { margin-top: .15rem; overflow: hidden; color: var(--brand-text-muted); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.attention-reason strong { color: var(--semantic-info); font-size: .64rem; }
.is-warning .attention-reason strong { color: var(--semantic-warning); }
.is-critical .attention-reason strong { color: var(--semantic-error); }
.attention-next > small { margin-top: 0; color: var(--text-subtle); font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.attention-next strong { overflow: hidden; color: var(--brand-text); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.attention-open { color: var(--brand-secondary); font-size: .6rem; font-weight: 800; white-space: nowrap; }
.attention-empty { min-height: 5rem; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: .2rem; color: var(--brand-text-muted); }
.attention-empty strong { color: var(--brand-primary); font-size: .75rem; }
.attention-empty span { font-size: .63rem; }
.compact-side-panel { min-width: 0; }
.compact-side-panel .panel-head { margin-bottom: .75rem; }
.compact-side-panel .panel-head h2 small { color: var(--brand-text-muted); font-size: .62rem; font-weight: 500; white-space: nowrap; }
.urgent-list { max-height: 17.5rem; padding-right: .45rem; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.urgent-list:focus-visible { border-radius: var(--radius-sm); }
.compact-timeline { max-height: 17.5rem; padding-right: .45rem; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.compact-timeline:focus-visible { border-radius: var(--radius-sm); }
#today-appointments { scroll-margin-top: 5.5rem; }
.audit-retention-note { margin-bottom: 1rem; padding: .75rem 1rem; display: flex; align-items: center; gap: .7rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--brand-text-muted); font-size: .65rem; }
.audit-retention-note strong { color: var(--brand-primary); white-space: nowrap; }
.audit-filter-panel { margin-bottom: 1rem; }
.audit-filter-form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; align-items: end; }
.audit-filter-form label,.audit-filter-form legend { margin-bottom: .3rem; display: block; color: var(--brand-text-muted); font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.audit-period-field { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.audit-period-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.audit-period-presets label { margin: 0; padding: .45rem .7rem; border: 1px solid var(--brand-border); border-radius: 999px; background: var(--surface); cursor: pointer; }
.audit-period-presets label:has(input:checked) { border-color: var(--brand-secondary); color: var(--brand-primary); background: var(--brand-secondary-soft); }
.audit-period-presets input { margin-right: .3rem; }
.audit-custom-dates { margin-top: .55rem; display: flex; align-items: center; gap: .45rem; }
.audit-custom-dates .form-control { max-width: 12rem; }
.audit-custom-dates span { color: var(--brand-text-muted); font-size: .62rem; }
.audit-filter-actions { display: flex; justify-content: flex-end; }
.audit-results .table-wrap { max-width: 100%; }
.audit-table { min-width: 68rem; }
.audit-table td > small { margin-top: .15rem; display: block; color: var(--brand-text-muted); }
.audit-result { display: inline-flex; padding: .25rem .5rem; border-radius: 999px; font-size: .55rem; font-weight: 800; }
.audit-result.success { color: var(--semantic-success); background: var(--semantic-success-soft); }
.audit-result.rejected { color: var(--semantic-error); background: var(--semantic-error-soft); }
.audit-detail-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1rem; }
.audit-detail-grid div { min-width: 0; }
.audit-detail-grid dt { color: var(--brand-text-muted); font-size: .55rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.audit-detail-grid dd { margin: .25rem 0 0; overflow-wrap: anywhere; color: var(--brand-text); font-size: .68rem; }
.audit-change-grid { margin: 1rem 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.audit-technical-detail { margin-top: 1rem; }
.audit-json { max-height: 24rem; margin: 0; padding: .8rem; overflow: auto; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--brand-text); font-size: .62rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 80rem) {
  .audit-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .audit-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .p2-cockpit-grid .span-2 { grid-column: auto; }
  .p2-cockpit-grid #today-appointments,.p2-cockpit-grid .activity-panel { grid-column: 1 / -1; }
  .attention-item { grid-template-columns: .55rem minmax(8rem,1fr) minmax(7rem,.8fr) minmax(8rem,1fr); }
  .attention-open { display: none; }
}
@media (max-width: 64rem) {
  .home-context-strip { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .attendance-principle { max-width: 100%; justify-content: flex-start; text-align: left; }
  .attention-item { grid-template-columns: .55rem minmax(8rem,1.1fr) minmax(7rem,.9fr); }
  .attention-next { grid-column: 2 / -1; }
}
@media (max-width: 42rem) {
  .audit-retention-note,.audit-custom-dates { align-items: flex-start; flex-direction: column; }
  .audit-filter-form,.audit-detail-grid,.audit-change-grid { grid-template-columns: 1fr; }
  .attendance-principle { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .attendance-principle q,.home-weather { white-space: normal; }
  .attention-panel .panel-head { align-items: flex-start; flex-direction: column; }
  .my-day-summary { justify-content: flex-start; }
  .attention-item { grid-template-columns: .55rem minmax(0,1fr); }
  .attention-reason,.attention-next { grid-column: 2; }
  .attention-patient strong,.attention-patient small,.attention-reason small,.attention-next strong { white-space: normal; }
}
.metric-list { display: grid; gap: .5rem; }
.metric-list > div { padding-bottom: .45rem; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--brand-border); }
.metric-list span { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand-text-muted); font-size: .65rem; }
.metric-list i { width: .5rem; height: .5rem; border-radius: 50%; }
.metric-list strong { color: var(--brand-primary); font-size: .72rem; }
.database-health-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.database-health-facts.vertical { grid-template-columns: 1fr; }
.database-health-facts > div { padding: .7rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }
.database-health-facts dt { color: var(--brand-text-muted); font-size: .56rem; }
.database-health-facts dd { margin: .2rem 0 0; color: var(--brand-primary); font-size: .68rem; font-weight: 800; overflow-wrap: anywhere; }

@media (max-width: 80rem) {
  .pop-flow { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .pop-flow li:nth-child(3) { border-right: 0; }
  .whatsapp-layout { grid-template-columns: minmax(14rem,.8fr) minmax(22rem,1.5fr); }
  .conversation-context { grid-column: 1 / -1; min-height: auto; }
  .crm-health-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 64rem) {
  .app-shell.sidebar-collapsed { grid-template-columns: minmax(0,1fr); }
  .app-shell.p2-shell,
  .app-shell.p2-shell.sidebar-collapsed { grid-template-columns: minmax(0,1fr); }
  .whatsapp-layout { grid-template-columns: 1fr; }
  .conversation-list,.chat-panel { min-height: auto; }
  .pop-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pop-flow li { border-right: 0; border-bottom: 1px solid var(--brand-border); }
}
@media (max-width: 42rem) {
  .crm-health-grid,.database-health-facts,.pop-flow { grid-template-columns: 1fr; }
  .architecture-flow { align-items: stretch; flex-direction: column; }
  .architecture-flow > i { transform: rotate(90deg); }
  .chat-head { flex-direction: column; }
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--brand-background);
  color: var(--brand-text);
  font-family: var(--font-brand);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-3);
  left: var(--space-3);
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
  color: var(--brand-primary);
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 100vh;
  padding: 1.75rem 1rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--text-on-brand);
  background:
    linear-gradient(155deg, rgba(25, 106, 115, 0.45), transparent 42%),
    var(--brand-primary-strong);
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: auto -1.5rem 1rem auto;
  width: 12rem;
  height: 12rem;
  opacity: 0.08;
  pointer-events: none;
  background: url("../brand/graphics/dot-grid-white.3bacd6f1458a.svg") center / contain no-repeat;
}

.brand {
  min-height: 4.8rem;
  padding: 0.25rem 0.75rem 1.4rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.brand-logo {
  display: block;
  width: min(12.5rem, 100%);
  height: 3.1rem;
  object-fit: contain;
  object-position: left center;
}

.main-nav {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.main-nav a {
  min-height: 2.85rem;
  padding: 0.7rem 0.8rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.84rem;
  font-weight: 500;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.main-nav a i {
  min-width: 1.3rem;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 700;
}

.main-nav a:hover,
.main-nav a.active {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-brand);
}

.main-nav a.active {
  box-shadow: inset 3px 0 0 var(--brand-accent);
}

.main-nav a.active i {
  color: var(--brand-yellow);
}

.sidebar-foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 1.2rem 0.75rem 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.status-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.73rem;
  font-weight: 500;
}

.status-line span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #55d6a4;
  box-shadow: 0 0 0 4px rgba(85, 214, 164, 0.12);
}

.sidebar-foot small {
  display: block;
  margin-top: var(--space-2);
  color: rgba(255, 255, 255, 0.53);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sidebar-backdrop {
  display: none;
}

.app-main {
  min-width: 0;
  overflow-x: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 4.75rem;
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--brand-border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.menu-toggle {
  display: none;
}

.topbar-context {
  display: grid;
  gap: 0.05rem;
}

.topbar-context span {
  color: var(--brand-primary);
  font-size: 0.84rem;
  font-weight: 700;
}

.topbar-context small,
.user-menu small {
  color: var(--brand-text-muted);
  font-size: 0.68rem;
}

.user-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.avatar {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25, 106, 115, 0.2);
  border-radius: 50%;
  background: var(--semantic-info-soft);
  color: var(--brand-secondary);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.avatar.small {
  width: 2.15rem;
  height: 2.15rem;
}

.avatar.large {
  width: 4.75rem;
  height: 4.75rem;
  margin: auto;
  font-size: 1.6rem;
}

.user-menu > span:nth-child(2) strong,
.user-menu > span:nth-child(2) small {
  display: block;
}

.user-menu strong {
  color: var(--brand-text);
  font-size: 0.78rem;
}

.user-menu form {
  margin-left: var(--space-3);
}

.user-menu button {
  min-height: 2.4rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--brand-text-muted);
  padding: 0 var(--space-3);
  font-size: 0.72rem;
  font-weight: 500;
}

.user-menu button:hover {
  background: var(--surface-subtle);
  color: var(--brand-primary);
}

.notification-center { position: relative; margin-left: auto; }
.notification-center + .user-menu { margin-left: var(--space-2); }
.notification-center summary { min-height: 2.35rem; padding: 0 .7rem; display: flex; align-items: center; gap: .4rem; border: 1px solid var(--brand-border); border-radius: var(--radius-pill); color: var(--brand-primary); font-size: .7rem; font-weight: 700; cursor: pointer; list-style: none; }
.notification-center summary::-webkit-details-marker { display: none; }
.notification-center summary b { min-width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-accent); color: #fff; font-size: .58rem; }
.notification-popover { position: absolute; top: calc(100% + .65rem); right: 0; width: min(24rem,calc(100vw - 2rem)); max-height: 29rem; overflow-y: auto; padding: .55rem; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); }
.notification-popover header { padding: .45rem .5rem .65rem; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--brand-border); }
.notification-popover header strong { color: var(--brand-primary); font-size: .76rem; }
.notification-popover header small { color: var(--brand-text-muted); font-size: .62rem; }
.notification-popover form { margin: 0; }
.notification-item { width: 100%; padding: .75rem; display: grid; gap: .18rem; border: 0; border-bottom: 1px solid var(--brand-border); background: #fff; color: var(--brand-text); text-align: left; cursor: pointer; }
.notification-item:hover { background: var(--surface-subtle); }
.notification-item.unread { border-left: 3px solid var(--brand-accent); background: #fff8f1; }
.notification-item strong { color: var(--brand-primary); font-size: .7rem; }
.notification-item span { color: var(--brand-secondary); font: 800 .65rem var(--font-mono); }
.notification-item small,.notification-item time { color: var(--brand-text-muted); font-size: .61rem; }
.notification-item time { margin-top: .2rem; }
.notification-empty { margin: 0; padding: 1rem; color: var(--brand-text-muted); font-size: .68rem; text-align: center; }

.content {
  width: 100%;
  max-width: 105rem;
  margin: auto;
  padding: 2.5rem 2.25rem 4.5rem;
}

.messages {
  position: fixed;
  z-index: 70;
  right: var(--space-6);
  top: 5.5rem;
  width: min(25rem, calc(100vw - 2rem));
  display: grid;
  gap: var(--space-2);
}

.message {
  border-left: 4px solid var(--brand-secondary);
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
  color: var(--brand-text);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-md);
  font-size: 0.8rem;
}

.message.success {
  border-color: var(--semantic-success);
}

.message.error {
  border-color: var(--semantic-error);
}

.page-heading {
  margin-bottom: 1.8rem;
}

.heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}

.page-heading h1 {
  margin: 0.55rem 0 0.7rem;
  color: var(--brand-primary);
  font-size: clamp(2.15rem, 4vw, 3.7rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.99;
}

.page-heading p {
  max-width: 46rem;
  margin: 0;
  color: var(--brand-text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.eyebrow {
  color: var(--brand-accent-text);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow.light {
  color: #ffb188;
}

.eyebrow.danger {
  color: var(--semantic-error);
}

.heading-actions,
.form-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.btn {
  min-height: 2.75rem;
  padding: 0.65rem 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.15;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

/* Shared operational controls across P1–P4. P4 keeps its domain layouts. */
.app-shell .btn { min-height: var(--control-min-height); }
:root .app-shell :is(.btn, .form-control, a, button, summary):focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}
.app-shell .sidebar :is(a, button):focus-visible { outline-color: var(--text-on-brand); }

.btn-primary,
.btn.primary {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.btn-primary:hover,
.btn.primary:hover {
  background: var(--brand-primary-strong);
  box-shadow: var(--shadow-sm);
}

.btn-secondary,
.btn.secondary {
  background: var(--brand-secondary);
  color: var(--text-on-brand);
}

.btn-secondary:hover,
.btn.secondary:hover {
  background: var(--brand-primary);
}

.btn-ghost {
  border-color: var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-primary);
}

.btn-ghost:hover {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}

.btn-block {
  width: 100%;
}

.panel,
.kpi-card,
.finance-strip {
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  box-shadow: var(--shadow-sm);
}

.panel {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.panel-head {
  margin-bottom: 1.3rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

.panel-head h2 {
  margin: 0.35rem 0 0;
  color: var(--brand-primary);
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.panel-head > a,
.text-action {
  border: 0;
  background: transparent;
  color: var(--brand-secondary);
  font-size: 0.72rem;
  font-weight: 700;
}

.panel-head > a:hover,
.text-action:hover {
  color: var(--brand-accent);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.freshness {
  color: var(--brand-text-muted);
  font-size: 0.67rem;
}

.period-tabs,
.data-tabs {
  max-width: 100%;
  padding: var(--space-1);
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  background: var(--brand-surface);
}

.period-tabs a,
.data-tabs a {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--brand-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.period-tabs a:hover,
.data-tabs a:hover {
  background: var(--surface-subtle);
  color: var(--brand-primary);
}

.period-tabs a.active,
.data-tabs a.active {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.data-tabs {
  width: max-content;
  margin-bottom: var(--space-4);
}

.kpi-grid {
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.kpi-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi-card {
  min-height: 9.75rem;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-md);
}

.kpi-card span {
  color: var(--brand-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.kpi-card strong {
  color: var(--brand-primary);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.055em;
}

.kpi-card strong b {
  font: inherit;
}

.kpi-card small {
  color: var(--text-subtle);
  font-size: 0.67rem;
}

.kpi-card.hero-kpi {
  position: relative;
  overflow: hidden;
  border-color: var(--brand-primary);
  background: linear-gradient(145deg, var(--brand-primary), var(--brand-primary-strong));
  color: var(--text-on-brand);
}

.kpi-card.hero-kpi::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -2.5rem;
  width: 8rem;
  height: 8rem;
  opacity: 0.1;
  background: url("../brand/graphics/dot-grid-white.3bacd6f1458a.svg") center / contain no-repeat;
}

.kpi-card.hero-kpi span,
.kpi-card.hero-kpi small {
  color: rgba(255, 255, 255, 0.72);
}

.kpi-card.hero-kpi strong {
  color: var(--text-on-brand);
}

.finance-strip {
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--radius-md);
}

.finance-strip > div {
  padding: 1.2rem 1.35rem;
  border-right: 1px solid var(--brand-border);
}

.finance-strip > div:last-child {
  border-right: 0;
}

.finance-strip span,
.finance-strip strong {
  display: block;
}

.finance-strip span {
  margin-bottom: var(--space-2);
  color: var(--brand-text-muted);
  font-size: 0.67rem;
}

.finance-strip strong {
  color: var(--brand-primary);
  font-size: 1.15rem;
}

.finance-strip .margin {
  background: var(--semantic-success-soft);
}

.finance-strip .margin strong {
  color: var(--semantic-success);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.chart-panel {
  min-height: 21rem;
}

.trend-chart {
  height: 15rem;
  padding-top: 1.1rem;
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  border-bottom: 1px solid var(--brand-border);
}

.trend-bar {
  position: relative;
  flex: 1;
  min-width: 0.35rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background: rgba(25, 106, 115, 0.22);
  transition: background var(--transition-fast);
}

.trend-bar:hover,
.trend-bar:focus {
  background: var(--brand-secondary);
}

.trend-bar span {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  color: var(--brand-text-muted);
  font-size: 0.6rem;
  opacity: 0;
}

.trend-bar:hover span,
.trend-bar:focus span {
  opacity: 1;
}

.rank-list,
.stage-list,
.stack-list,
.timeline,
.request-list {
  display: grid;
}

.rank-list {
  gap: var(--space-4);
}

.rank-list > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) 1.6fr 2rem;
  gap: var(--space-3);
  align-items: center;
  font-size: 0.73rem;
}

.rank-list i,
.rank-list progress,
.server-meter > i {
  display: block;
  height: 0.4rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
}

.rank-list progress {
  width: 100%;
  border: 0;
  appearance: none;
}

.rank-list progress::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
}

.rank-list progress::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--brand-secondary);
}

.rank-list progress::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--brand-secondary);
}

.rank-list i b,
.server-meter > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-secondary);
}

.rank-list strong {
  color: var(--brand-primary);
  text-align: right;
}

.stage-list {
  gap: var(--space-1);
}

.stage-list > div {
  padding: 0.65rem 0;
  display: grid;
  grid-template-columns: 0.6rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--brand-border);
  font-size: 0.76rem;
}

.stage-list i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.server-meter {
  margin: 1.2rem 0;
}

.server-meter > div {
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
}

.server-meter strong {
  color: var(--brand-primary);
}

.server-card > small {
  color: var(--brand-text-muted);
  font-size: 0.65rem;
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  border-radius: var(--radius-sm);
}

table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
}

th {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--brand-border);
  background: var(--surface-subtle);
  color: var(--brand-text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

td {
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--brand-border);
  color: var(--brand-text-muted);
  font-size: 0.73rem;
  vertical-align: middle;
}

tbody tr:hover {
  background: rgba(25, 106, 115, 0.035);
}

td strong,
td a {
  color: var(--brand-primary);
}

.empty-cell {
  padding: 2.5rem;
  color: var(--brand-text-muted);
  text-align: center;
}

.badge {
  padding: 0.3rem 0.5rem;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--brand-text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge.info {
  background: var(--semantic-info-soft);
  color: var(--semantic-info);
}

.badge.urgent {
  background: var(--semantic-error-soft);
  color: var(--semantic-error);
}

.stack-list a,
.request-list a {
  border-bottom: 1px solid var(--brand-border);
}

.stack-list a {
  padding: 0.8rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.stack-list strong,
.stack-list small,
.request-list strong,
.request-list small,
.request-list b {
  display: block;
}

.stack-list strong,
.request-list strong {
  color: var(--brand-primary);
  font-size: 0.75rem;
}

.stack-list small,
.request-list small {
  margin-top: var(--space-1);
  color: var(--brand-text-muted);
  font-size: 0.64rem;
}

.timeline > div {
  display: grid;
  grid-template-columns: 0.75rem 1fr;
  gap: var(--space-3);
}

.timeline i {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--brand-secondary);
}

.timeline i::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  bottom: -2.2rem;
  left: 0.22rem;
  width: 1px;
  background: var(--brand-border);
}

.timeline > div:last-child i::after {
  display: none;
}

.timeline p {
  margin: 0 0 1.1rem;
  font-size: 0.73rem;
  line-height: 1.5;
}

.timeline p strong {
  color: var(--brand-primary);
}

.timeline p small {
  display: block;
  margin-top: var(--space-1);
  color: var(--brand-text-muted);
  font-size: 0.62rem;
}

.empty {
  padding: 0.8rem 0;
  color: var(--brand-text-muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

.search-bar,
.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.search-bar {
  margin-bottom: var(--space-5);
}

.form-control,
.form-panel input,
.form-panel select,
.form-panel textarea,
.embedded-form input,
.embedded-form select,
.embedded-form textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--brand-surface);
  color: var(--brand-text);
  padding: 0.65rem 0.75rem;
  font-size: 0.78rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:hover,
.form-panel input:hover,
.form-panel select:hover,
.form-panel textarea:hover,
.embedded-form input:hover,
.embedded-form select:hover,
.embedded-form textarea:hover {
  border-color: var(--brand-secondary);
}

.form-control:focus,
.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus,
.embedded-form input:focus,
.embedded-form select:focus,
.embedded-form textarea:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

textarea.form-control,
.form-panel textarea,
.embedded-form textarea {
  resize: vertical;
}

.contact-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-cell strong,
.contact-cell small {
  display: block;
}

.contact-cell small {
  margin-top: var(--space-1);
  color: var(--brand-text-muted);
  font-size: 0.63rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: var(--space-4);
}

.profile-card {
  text-align: center;
}

.profile-card h2 {
  color: var(--brand-primary);
  font-size: 1.25rem;
}

dl {
  margin: 1.35rem 0 0;
  text-align: left;
}

dl > div {
  padding: 0.7rem 0;
  border-top: 1px solid var(--brand-border);
}

dt {
  color: var(--brand-text-muted);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

dd {
  margin: var(--space-1) 0 0;
  color: var(--brand-text);
  font-size: 0.77rem;
  overflow-wrap: anywhere;
}

.request-list a {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 0.55rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.request-list a > i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.request-list a > span:last-child {
  text-align: right;
}

.request-list b {
  font-size: 0.68rem;
}

.narrow-page {
  max-width: 42rem;
  margin: auto;
}

.narrow-page.wide {
  max-width: 58rem;
}

.form-panel p,
.embedded-form p {
  display: grid;
  gap: var(--space-2);
}

.form-panel p {
  margin: 0 0 1.1rem;
}

.form-panel label,
.field label,
.embedded-form label {
  color: var(--brand-text);
  font-size: 0.73rem;
  font-weight: 700;
}

.form-panel .helptext,
.field small {
  color: var(--brand-text-muted);
  font-size: 0.64rem;
  line-height: 1.5;
}

.form-panel .helptext ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.form-panel .helptext li {
  margin: 0.2rem 0;
}

.form-panel ul.errorlist {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--semantic-error);
  font-size: 0.68rem;
}

.password-change-form { display: grid; gap: 1.15rem; }
.password-change-form .form-alert { margin-bottom: .2rem; }
.password-change-field { display: grid; gap: .5rem; }
.password-change-field > label { color: var(--brand-text); font-size: .73rem; font-weight: 800; }
.password-field-control { position: relative; }
.password-field-control .form-control { padding-right: 3.5rem; }
.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: .48rem;
  width: 2.35rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: .5rem;
  background: var(--surface-subtle);
  color: var(--brand-primary);
  cursor: pointer;
}
.password-visibility-toggle:hover { background: #e2eded; }
.password-visibility-toggle:focus-visible { outline: 3px solid var(--focus-ring); }
.password-visibility-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-visibility-toggle .password-eye-closed { display: none; }
.password-visibility-toggle[aria-pressed="true"] .password-eye-open { display: none; }
.password-visibility-toggle[aria-pressed="true"] .password-eye-closed { display: block; }
.password-help { color: var(--brand-text-muted); font-size: .64rem; line-height: 1.5; }
.password-help ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.password-change-actions { padding-top: 1rem; display: grid; gap: .65rem; border-top: 1px solid var(--brand-border); }
.password-change-actions .btn { width: 100%; min-height: 3rem; }
.password-change-actions small { color: var(--brand-text-muted); font-size: .64rem; text-align: center; }
.password-change-success { padding: clamp(2rem, 6vw, 4rem); display: grid; justify-items: center; gap: 1rem; text-align: center; }
.password-success-icon { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: var(--semantic-success-soft); color: var(--semantic-success); font-size: 2rem; font-weight: 900; box-shadow: 0 0 0 .55rem rgba(21,115,81,.08); }
.password-change-success h1 { max-width: 30rem; margin: .2rem 0 0; color: var(--brand-primary); font-size: clamp(1.5rem, 4vw, 2.15rem); }
.password-change-success p { max-width: 31rem; margin: 0; color: var(--brand-text-muted); line-height: 1.7; }
.password-change-success .btn { min-height: 3rem; margin-top: .65rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field-error {
  color: var(--semantic-error);
  font-size: 0.68rem;
}

.form-actions {
  justify-content: flex-end;
  padding-top: var(--space-5);
  border-top: 1px solid var(--brand-border);
}

.form-alert {
  padding: 0.7rem;
  border: 1px solid rgba(168, 21, 21, 0.25);
  border-radius: var(--radius-sm);
  background: var(--semantic-error-soft);
  color: var(--semantic-error);
  font-size: 0.73rem;
}

.kanban {
  padding: 0.1rem 0.1rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.kanban-column {
  flex: 0 0 20rem;
  padding: 0.7rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  scroll-snap-align: start;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.kanban-column.is-drop-target {
  border-color: var(--brand-secondary);
  background: rgba(25, 106, 115, 0.08);
}

.kanban-column > header {
  padding: 0.45rem 0.4rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--brand-primary);
  font-size: 0.75rem;
  font-weight: 800;
}

.kanban-column > header span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kanban-column > header i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.kanban-column > header b {
  min-width: 1.55rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--brand-surface);
  font-size: 0.62rem;
  text-align: center;
}

.kanban-items {
  display: grid;
  gap: var(--space-2);
}

.deal-card {
  position: relative;
  display: block;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
  padding: 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.deal-card:hover,
.deal-card:focus-visible {
  border-color: var(--brand-secondary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.deal-card.is-urgent {
  border-left: 4px solid var(--semantic-error);
}

.deal-card[draggable="true"] {
  cursor: grab;
}

.deal-card.is-dragging {
  cursor: grabbing;
  opacity: 0.45;
  transform: rotate(1deg) scale(0.98);
}

.deal-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--brand-text-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.deal-top b {
  color: var(--semantic-error);
}

.deal-card h3 {
  margin: 0.75rem 0 0.2rem;
  color: var(--brand-primary);
  font-size: 0.94rem;
  line-height: 1.25;
}

.deal-patient {
  margin: 0;
  color: var(--brand-text);
  font-size: 0.79rem;
  font-weight: 700;
}

.deal-facts {
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.deal-facts div {
  min-width: 0;
}

.deal-facts dt {
  font-size: 0.54rem;
}

.deal-facts dd {
  margin-top: 0.1rem;
  overflow: hidden;
  color: var(--brand-text-muted);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-meta {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  border-top: 1px solid var(--brand-border);
  color: var(--brand-text-muted);
  font-size: 0.59rem;
}

.deal-next {
  color: var(--brand-secondary);
  font-weight: 700;
}

.concurrent-alert {
  margin-top: 0.55rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--semantic-warning-soft);
  color: var(--semantic-warning);
  font-size: 0.61rem;
  font-weight: 700;
}

.kanban-empty {
  padding: 1.6rem 0.8rem;
  color: var(--brand-text-muted);
  font-size: 0.68rem;
  text-align: center;
}

.status-pill {
  --stage-color: var(--brand-secondary);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--stage-color);
  border-radius: var(--radius-pill);
  background: var(--brand-surface);
  color: var(--stage-color);
  font-size: 0.68rem;
  font-weight: 800;
}

.stage-color-new { --stage-color: var(--stage-new); }
.stage-color-triage { --stage-color: var(--stage-triage); }
.stage-color-documents { --stage-color: var(--stage-documents); }
.stage-color-authorization { --stage-color: var(--stage-authorization); }
.stage-color-scheduling { --stage-color: var(--stage-scheduling); }
.stage-color-scheduled { --stage-color: var(--stage-scheduled); }
.stage-color-provider_sent { --stage-color: var(--brand-secondary); }
.stage-color-provider_return { --stage-color: var(--stage-authorization); }
.stage-color-scheduled_prep { --stage-color: var(--brand-accent); }
.stage-color-completed { --stage-color: var(--stage-completed); }
.stage-color-canceled { --stage-color: var(--stage-canceled); }
.status-pill:is(.stage-color-scheduled_prep, .stage-color-scheduling) { color: var(--brand-accent-text); }

.kanban-filters { margin-bottom: 1rem; }
.kanban-filters .search-bar { flex-wrap: wrap; }
.kanban-filters .form-control { min-width: 10rem; flex: 1 1 11rem; }

.crm-filter-form { display: grid; grid-template-columns: repeat(5,minmax(9rem,1fr)); gap: .8rem; align-items: end; }
.crm-filter-form label,.crm-filter-form legend { display: block; margin-bottom: .35rem; color: var(--ink-muted); font-size: .76rem; font-weight: 700; }
.crm-search-wide,.date-filter,.filter-actions { grid-column: 1/-1; }
.crm-search-wide input { width: 100%; }
.date-filter { border: 0; padding: .25rem 0 0; margin: 0; }
.date-presets,.custom-dates,.filter-actions { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.date-presets label { border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; cursor: pointer; }
.date-presets input { accent-color: var(--brand-primary); }
.custom-dates { margin-top: .65rem; }
.custom-dates[hidden] { display: none; }
.flow-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.flow-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem; align-items: end; }
.flow-control label { grid-column: 1/-1; color: var(--ink-muted); font-size: .78rem; font-weight: 700; }
.attachment-panel { display: grid; gap: 1.1rem; }
.attachment-existing,.attachment-upload { display: grid; gap: .65rem; }
.attachment-existing > h3,.attachment-upload > h3 { margin: 0; color: var(--brand-text-muted); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.attachment-list { min-width: 0; display: grid; }
.attachment-item { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.attachment-item:first-child { border-top: 1px solid var(--line); }
.attachment-file { min-width: 0; display: grid; gap: .2rem; }
.attachment-file strong { min-width: 0; overflow: hidden; color: var(--brand-primary); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.attachment-file small { color: var(--brand-text-muted); font-size: .64rem; }
.attachment-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; }
.attachment-actions .attachment-action { min-width: 6.4rem; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; padding: .5rem .75rem; border-width: 1px; white-space: nowrap; cursor: pointer; }
.attachment-actions .attachment-action:focus-visible { outline: 3px solid rgba(235,93,17,.25); outline-offset: 2px; }
.attachment-preview-unavailable { color: var(--brand-text-muted); font-size: .62rem; white-space: nowrap; }
.attachment-upload { padding-top: .15rem; }
.attachment-upload-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .65rem; }
.attachment-upload-form label { grid-column: 1/-1; color: var(--brand-text); font-size: .7rem; font-weight: 800; }
.attachment-upload-form input[type=file] { min-width: 0; width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.attachment-upload-form button { min-height: 2.55rem; }
.upload-help { display: block; color: var(--ink-muted); }
@media (max-width: 720px) {
  .attachment-item,.attachment-upload-form { grid-template-columns: minmax(0,1fr); align-items: stretch; }
  .attachment-actions { justify-content: flex-start; }
  .attachment-actions .attachment-action { flex: 1 1 7rem; }
  .attachment-upload-form button { width: 100%; }
}
.patient-picker { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f7fafb; }
.patient-picker label { font-weight: 800; }
.selected-patient { display: none; padding: .8rem; border-left: 3px solid #168163; background: #ecf8f4; border-radius: .25rem; }
.selected-patient.is-visible { display: block; }
.selected-patient h3,.selected-patient p { margin: .2rem 0 0; }
.search-results { position: relative; z-index: 5; max-height: 16rem; overflow: auto; border: 1px solid var(--line); border-radius: .5rem; background: #fff; box-shadow: var(--shadow-soft); }
.search-results[hidden] { display: none; }
.search-results button { display: grid; width: 100%; padding: .7rem .8rem; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: #fff; cursor: pointer; }
.search-results button:hover { background: #f0f6f8; }
.account-readonly { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.account-readonly > div { display: grid; gap: .2rem; padding: .8rem; background: #f5f8fa; border-radius: .5rem; }
.password-request-panel { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.row-actions { display: flex; gap: .35rem; }
.login-protection-state { display: grid; gap: .15rem; padding: .65rem .75rem; border: 1px solid rgba(17,69,101,.14); border-radius: .5rem; background: #f5f8fa; font-size: .76rem; }
.login-protection-state span { color: var(--ink-muted); }
.boot-body { margin: 0; background: #0b3d5a; }
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: .85rem; padding: 2rem; color: #fff; text-align: center; background: radial-gradient(circle at 50% 40%,#1b6387 0,#0b3d5a 48%,#072b41 100%); }
.boot-brand img { width: 4.5rem; filter: drop-shadow(0 10px 20px rgba(0,0,0,.2)); animation: boot-pulse 1.8s ease-in-out infinite; }
.boot-brand h1 { margin: .8rem 0 .15rem; font-size: clamp(2rem,5vw,3.2rem); }
.boot-brand p,.boot-message { margin: 0; opacity: .85; }
.boot-progress { width: min(22rem,75vw); height: 3px; overflow: hidden; background: rgba(255,255,255,.18); border-radius: 5px; }
.boot-progress i { display: block; width: 100%; height: 100%; background: #ef7a35; transform-origin: left; animation: boot-progress 6.2s ease-out both; }
.boot-screen footer { position: fixed; bottom: 1.4rem; font-size: .72rem; opacity: .65; }
@keyframes boot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes boot-pulse { 50% { transform: translateY(-4px); } }
@media (max-width: 900px) { .crm-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); } .flow-controls { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .crm-filter-form { grid-template-columns: 1fr; } .crm-filter-form > * { grid-column: 1!important; } .account-readonly { grid-template-columns: 1fr; } .password-request-panel { align-items: stretch; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .boot-brand img,.boot-progress i { animation: none; } }
.kanban-limit { color: var(--ink-muted); font-size: .8rem; padding: .75rem; }
.detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.detail-facts div { padding: .75rem; background: var(--surface-subtle); border-radius: var(--radius-sm); }
.detail-facts dt { color: var(--ink-muted); font-size: .78rem; }
.detail-facts dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.filter-status { margin: 0 0 1rem; padding: .65rem .8rem; display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--ink-muted); font-size: .72rem; }
.filter-status p { margin: 0; white-space: nowrap; }
.filter-status p strong { color: var(--brand-primary); }
.active-filter-list { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.active-filter-list > span { font-weight: 800; }
.active-filter-list i { padding: .25rem .45rem; border-radius: var(--radius-pill); background: var(--brand-surface); color: var(--brand-text-muted); font-style: normal; }
.active-filter-list b { color: var(--brand-primary); }
.filter-status > a { margin-left: auto; color: var(--brand-secondary); font-weight: 800; white-space: nowrap; }
.checkbox-field label { display: flex; align-items: flex-start; gap: .65rem; color: var(--brand-text); line-height: 1.45; cursor: pointer; }
.checkbox-field input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--brand-primary); }
.fit-badge { width: fit-content; display: inline-flex; padding: .25rem .5rem; border: 1px solid #df6b16; border-radius: var(--radius-pill); background: #fff1e6; color: #a34708; font-size: .62rem; font-weight: 800; }
.request-page { max-width: 68rem; }
.request-form { display: grid; gap: 0; padding-top: .35rem; }
.request-form-section { display: grid; gap: 1rem; padding: 1.45rem .25rem; border-bottom: 1px solid var(--brand-border); }
.request-form-section > header { display: flex; align-items: flex-start; gap: .75rem; }
.request-form-section > header > span { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #eaf3f7; color: var(--brand-primary); font-size: .7rem; font-weight: 900; }
.request-form-section > header h2 { margin: 0; color: var(--brand-primary); font-size: 1rem; }
.request-form-section > header p { margin: .18rem 0 0; color: var(--brand-text-muted); font-size: .68rem; line-height: 1.45; }
.request-fields { display: grid; gap: 1rem; }
.request-fields.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.request-fields.priority-fields { grid-template-columns: minmax(0,1fr) minmax(15rem,1.35fr) minmax(0,1fr); align-items: end; }
.request-form .patient-picker { padding: 1rem; }
.selected-procedure { display: none; grid-template-columns: minmax(8rem,.4fr) minmax(0,1.6fr); gap: .75rem; padding: .75rem; border: 1px solid #b8d7e3; border-radius: var(--radius-sm); background: #f2f8fa; }
.selected-procedure.is-visible { display: grid; }
.selected-procedure span { display: grid; gap: .15rem; min-width: 0; }
.selected-procedure small { color: var(--brand-text-muted); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.selected-procedure strong { color: var(--brand-primary); font-size: .72rem; overflow-wrap: anywhere; }
.fit-checkbox label { min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--brand-surface); }
.fit-checkbox label:has(input:checked) { border-color: #df6b16; background: #fff1e6; box-shadow: 0 0 0 3px rgba(223,107,22,.12); }
.fit-checkbox input { accent-color: #df6b16; }
.fit-checkbox span { display: grid; gap: .12rem; }
.fit-checkbox span strong { font-size: .72rem; }
.fit-checkbox span small { font-weight: 500; }
.provider-field [data-provider-status] { min-height: 1rem; }
.provider-field [data-provider-status].is-empty { color: #9a4b0b; font-weight: 700; }
.request-form > .form-actions { margin-top: .2rem; padding: 1.35rem .25rem .25rem; }
.request-patient-context { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; }
.request-patient-context > p { margin: 0; font-size: .78rem; }
.patient-record-link { display: inline-grid; gap: .08rem; padding: .35rem .55rem; border: 1px solid #b8d7e3; border-radius: .45rem; background: #f5fafc; text-decoration: none; cursor: pointer; transition: color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast); }
.patient-record-link span { color: var(--brand-primary); font-size: .82rem; font-weight: 850; text-decoration: underline; text-decoration-color: rgba(15,75,106,.3); text-underline-offset: .15rem; }
.patient-record-link small { color: var(--brand-secondary); font-size: .59rem; font-weight: 800; }
.patient-record-link:hover { border-color: var(--brand-secondary); background: #eef7fa; }
.patient-record-link:focus,.patient-record-link:focus-visible { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 4px rgba(235,93,17,.2); }
@media (max-width: 780px) { .request-fields.two-columns,.request-fields.priority-fields,.selected-procedure { grid-template-columns: minmax(0,1fr); } }
.configuration-checklist { display: grid; grid-template-columns: repeat(auto-fit,minmax(13rem,1fr)); gap: .7rem; }
.configuration-checklist > div { display: flex; align-items: center; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.configuration-checklist i { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 900; }
.configuration-checklist span { display: grid; gap: .1rem; }
.configuration-checklist strong { color: var(--brand-primary); font-size: .74rem; }
.configuration-checklist small { color: var(--ink-muted); font-size: .65rem; }
.configuration-checklist .configured i { color: #fff; background: #168163; }
.configuration-checklist .missing i { color: #7c4a00; background: #ffe3a9; }
.safe-config-list { padding-left: 1.1rem; color: var(--ink-muted); }
.break-all { word-break: break-all; }
.stage-overview { border-top: 4px solid var(--brand-secondary); }
.next-stage { display: grid; gap: .15rem; min-width: 12rem; padding: .65rem .8rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }
.next-stage span { color: var(--ink-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.next-stage strong { color: var(--brand-primary); font-size: .85rem; }
.request-stepper { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .22rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.request-stepper li { position: relative; min-width: 0; display: flex; gap: .4rem; align-items: center; min-height: 3.7rem; padding: .5rem; border: 1px solid var(--line); background: #fff; }
.request-stepper li:not(:last-child)::after { content: "→"; position: absolute; right: -.45rem; z-index: 2; color: var(--ink-muted); }
.request-stepper i { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #edf2f4; color: var(--ink-muted); font-size: .61rem; font-style: normal; font-weight: 800; }
.request-stepper span { display: grid; gap: .12rem; }
.request-stepper strong { color: var(--brand-primary); font-size: .66rem; line-height: 1.15; overflow-wrap: anywhere; }
.request-stepper small { color: var(--ink-muted); font-size: .58rem; }
.request-stepper .done { background: #eff8f4; border-color: #b8dfd1; }
.request-stepper .done i { background: #168163; color: #fff; }
.request-stepper .current { border: 2px solid var(--brand-accent); background: #fff7ee; box-shadow: 0 5px 16px rgba(235,93,17,.12); }
.request-stepper .current i { background: var(--brand-accent); color: #fff; }
.request-stepper .next { border-style: dashed; border-color: var(--brand-secondary); background: #f2f8f8; }
.related-request-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(15rem,1fr)); gap: .8rem; }
.related-request-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.related-request-grid article > div:first-child { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.related-request-grid h3 { margin: .55rem 0; color: var(--brand-primary); font-size: 1rem; }
.related-request-grid dl { margin: 0 0 .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.related-request-grid dt { color: var(--ink-muted); font-size: .65rem; }
.related-request-grid dd { margin: .1rem 0 0; font-size: .74rem; }
@media (max-width: 1000px) { .patient-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 68rem) { .request-stepper { grid-template-columns: repeat(6,minmax(7.25rem,1fr)); overflow-x: auto; padding-bottom: .45rem; } }
@media (max-width: 600px) { .patient-filter-form { grid-template-columns: 1fr; } .patient-filter-form > * { grid-column: 1!important; } .request-stepper { grid-template-columns: 1fr; overflow: visible; } .request-stepper li:not(:last-child)::after { content: "↓"; right: 50%; bottom: -.65rem; } }

/* P4 · produção mensal: extensão do design system existente. */
.production-filters { margin-bottom: 1rem; display: grid; grid-template-columns: 1.5fr repeat(4,minmax(7rem,1fr)) auto; gap: .75rem; align-items: end; }
.production-filters label,.demand-editor > label { display: grid; gap: .35rem; color: var(--brand-text); font-size: .7rem; font-weight: 700; }
.status-draft { background: var(--surface-subtle); color: var(--brand-text-muted); }
.status-in_approval { background: var(--semantic-info-soft); color: var(--semantic-info); }
.status-revision,.status-review { background: var(--semantic-warning-soft); color: var(--semantic-warning); }
.status-approved { background: var(--semantic-success-soft); color: var(--semantic-success); }
.has-production { background: rgba(21,115,81,.055); }
.has-production td:first-child { box-shadow: inset 3px 0 0 var(--semantic-success); }
.quantity-input { width: 7rem; min-width: 7rem; }
.demand-editor { margin-bottom: 1rem; }
.demand-editor > label { margin-top: 1rem; }
.sticky-actions { position: sticky; z-index: 5; bottom: 1rem; margin-top: 1rem; padding: .75rem; display: flex; justify-content: flex-end; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: rgba(255,255,255,.96); box-shadow: var(--shadow-md); }
.production-lower form + form,.workflow-actions form + form { margin-top: .65rem; }
.workflow-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.workflow-actions form { margin: 0!important; }
td small { display: block; margin-top: .2rem; }

@media (max-width: 72rem) { .production-filters { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 42rem) {
  .production-filters { grid-template-columns: 1fr; }
  .production-filters > * { grid-column: 1; }
  .sticky-actions { bottom: .5rem; }
  .workflow-actions { align-items: stretch; flex-direction: column; }
  .workflow-actions .btn { width: 100%; }
}

.stage-dot {
  background: var(--stage-color, var(--brand-secondary));
}

.parallel-banner {
  margin-bottom: var(--space-4);
  padding: 1rem 1.2rem;
  border: 1px solid rgba(154, 87, 8, 0.25);
  border-radius: var(--radius-md);
  background: var(--semantic-warning-soft);
}

.parallel-banner strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--semantic-warning);
  font-size: 0.73rem;
}

.parallel-banner div {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.parallel-banner a {
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
  font-size: 0.64rem;
}

.parallel-banner a span {
  color: var(--brand-secondary);
  font-weight: 700;
}

.request-detail-grid {
  grid-template-columns: minmax(0, 1fr) 14.5rem;
}

.detail-main,
.detail-aside {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.appointment-list > div {
  padding: 0.8rem 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--brand-border);
}

.calendar-day {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-size: 0.57rem;
  line-height: 0.8;
  text-transform: uppercase;
}

.calendar-day b {
  font-size: 1rem;
}

.appointment-list strong,
.appointment-list small {
  display: block;
}

.appointment-list strong {
  color: var(--brand-text);
  font-size: 0.73rem;
}

.appointment-list small {
  margin-top: var(--space-1);
  color: var(--brand-text-muted);
  font-size: 0.63rem;
}

.embedded-form {
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--brand-border);
}

.embedded-form.visible {
  margin: 0;
  padding: 0;
  border: 0;
}

.embedded-form p {
  margin: 0 0 var(--space-3);
}

.facts-card dl {
  margin-top: 0;
}
.facts-card { padding: 1rem; }
.facts-card .panel-head { margin-bottom: .65rem; }
.facts-card .panel-head h2 { font-size: 1rem; }
.facts-card dl > div { padding: .48rem 0; }
.facts-card dt { font-size: .56rem; }
.facts-card dd { margin-top: .12rem; font-size: .7rem; }
.request-timeline-form { margin-bottom: 1.5rem!important; padding-bottom: 1.3rem!important; border-bottom: 1px solid var(--brand-border)!important; }
.request-timeline { gap: .2rem; }
.request-timeline .timeline-entry { padding: .15rem 0; }
.request-timeline .timeline-entry p { width: 100%; }
.request-timeline .timeline-entry p > span { display: block; margin-top: .18rem; color: var(--brand-text-muted); }
.request-timeline .timeline-entry.is-note p { padding: .7rem .8rem; border-left: 3px solid var(--brand-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #fff8f1; }
.request-timeline .timeline-entry.is-note i { background: var(--brand-accent); }
.request-timeline .timeline-entry.is-assignment p { padding: .65rem .8rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }

.note-box {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--brand-text-muted);
  font-size: 0.68rem;
  line-height: 1.6;
}

.db-count-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.db-count-grid > div {
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.db-count-grid span,
.db-count-grid strong {
  display: block;
}

.db-count-grid span {
  color: var(--brand-text-muted);
  font-size: 0.64rem;
}

.db-count-grid strong {
  margin-top: var(--space-2);
  color: var(--brand-primary);
  font-size: 1.55rem;
}

.port-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.port-list span,
code {
  font-family: var(--font-mono);
}

.port-list span {
  padding: 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-size: 0.63rem;
}

code {
  color: var(--brand-primary);
  font-size: 0.65rem;
}

.login-body {
  background: #eef3f3;
}

.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(27rem, 0.85fr);
}

.login-story {
  position: relative;
  min-height: 42rem;
  padding: clamp(1.8rem, 3.8vw, 4.2rem) clamp(2rem, 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 46%, rgba(25, 106, 115, 0.42), transparent 34%),
    linear-gradient(145deg, rgba(25, 106, 115, 0.38), transparent 48%),
    var(--brand-primary-strong);
  color: var(--text-on-brand);
}

.login-story::before,
.login-story::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.login-story::before {
  inset: 0;
  opacity: 0.12;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(120deg, #000, transparent 72%);
}

.login-story::after {
  right: -9rem;
  bottom: -7rem;
  width: min(36rem, 72vw);
  aspect-ratio: 1;
  opacity: 0.1;
  background: url("../brand/graphics/dot-grid-white.3bacd6f1458a.svg") center / contain no-repeat;
  transform: rotate(12deg);
}

.login-story-header,
.login-story-content,
.login-copy,
.login-meta {
  position: relative;
  z-index: 1;
}

.login-story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.login-brand {
  display: block;
  line-height: 0;
}

.login-brand img {
  display: block;
  width: min(15rem, 68vw);
  height: 4rem;
  object-fit: contain;
  object-position: left center;
}

.login-site-link {
  padding: .65rem .9rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,.78);
  font-size: .67rem;
  font-weight: 700;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.login-site-link:hover {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.login-story-content {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(15rem, .88fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin: clamp(2.8rem, 7vh, 5rem) 0 2.8rem;
}

.login-copy h1 {
  max-width: 10ch;
  margin: 1rem 0 1.4rem;
  font-size: clamp(3.15rem, 5.4vw, 5.65rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.91;
}

.login-copy h1 em {
  color: #f5a044;
  font-style: normal;
}

.login-copy p {
  max-width: 32rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.7;
}

.login-orbit-system {
  position: relative;
  width: min(25rem, 30vw);
  min-width: 15rem;
  aspect-ratio: 1;
  justify-self: center;
}

.login-orbit {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  animation: login-orbit-spin 17s linear infinite;
}

.login-orbit::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-top-color: rgba(245,160,68,.62);
  border-radius: inherit;
}

.login-orbit i {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 5px rgba(235,93,17,.12), 0 0 18px rgba(235,93,17,.55);
}

.login-orbit--middle {
  inset: 20%;
  transform: rotate(62deg);
  animation-duration: 12s;
  animation-direction: reverse;
}

.login-orbit--middle i {
  background: #6bc1d0;
  box-shadow: 0 0 0 5px rgba(107,193,208,.12), 0 0 18px rgba(107,193,208,.5);
}

.login-orbit--inner {
  inset: 30%;
  transform: rotate(128deg);
  animation-duration: 8s;
}

.login-orbit--inner i {
  width: 8px;
  height: 8px;
  background: var(--brand-yellow);
  box-shadow: 0 0 0 4px rgba(241,143,22,.12), 0 0 16px rgba(241,143,22,.5);
}

.login-orbit-core {
  position: absolute;
  inset: 35%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 55px rgba(0,0,0,.24), 0 0 0 10px rgba(255,255,255,.04);
}

.login-orbit-core img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

@keyframes login-orbit-spin {
  to { transform: rotate(360deg); }
}

.login-access-scope {
  grid-column: 1 / -1;
  max-width: 44rem;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
}

.login-access-icon {
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(245,160,68,.17);
  color: #ffc47f;
  font-weight: 800;
}

.login-access-scope strong {
  display: block;
  color: #fff;
  font-size: .76rem;
}

.login-access-scope p {
  margin: .2rem 0 0;
  color: rgba(255,255,255,.65);
  font-size: .72rem;
  line-height: 1.55;
}

.login-meta {
  display: flex;
  gap: 1rem 1.7rem;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.login-meta span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.login-meta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #65becb;
  box-shadow: 0 0 0 3px rgba(101,190,203,.1);
}

.login-panel {
  position: relative;
  padding: clamp(2rem, 4vw, 4.5rem);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff 0%, #f7f9f8 100%);
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 100% 0, rgba(25,106,115,.08), transparent 32%);
}

.login-panel-inner {
  position: relative;
  z-index: 1;
  width: min(27rem, 100%);
}

.login-form {
  width: 100%;
}

.login-form-logo {
  display: block;
  width: 12.5rem;
  height: 3.7rem;
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
  object-fit: contain;
  object-position: left center;
}

.login-secure-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--brand-secondary);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.login-secure-label i {
  width: .48rem;
  height: .48rem;
  border: 2px solid var(--brand-secondary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(25,106,115,.09);
}

.login-form h2 {
  margin: .75rem 0 .65rem;
  color: var(--brand-primary);
  font-size: clamp(2.15rem, 4vw, 2.8rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.login-intro {
  margin: 0 0 2rem;
  color: var(--brand-text-muted);
  font-size: .8rem;
  line-height: 1.65;
}

.login-cybersecurity-note {
  margin: -0.45rem 0 1.5rem;
  padding: .85rem .9rem;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  border: 1px solid rgba(25,106,115,.18);
  border-radius: .7rem;
  background: rgba(25,106,115,.055);
}

.login-cybersecurity-note > span {
  flex: 0 0 1.55rem;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-secondary);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
}

.login-cybersecurity-note svg {
  display: block;
}

.login-cybersecurity-note strong {
  display: block;
  color: var(--brand-primary);
  font-size: .7rem;
}

.login-cybersecurity-note p {
  margin: .2rem 0 0;
  color: var(--brand-text-muted);
  font-size: .65rem;
  line-height: 1.5;
}

.login-field {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
}

.login-field label {
  color: var(--brand-text);
  font-size: .7rem;
  font-weight: 800;
}

.login-field .form-control {
  min-height: 3.15rem;
  border-color: #cedadd;
  border-radius: .7rem;
  padding-inline: .95rem;
  background: rgba(255,255,255,.92);
  font-size: .82rem;
}

.login-field .form-control::placeholder {
  color: #9aabb1;
}

.login-password-control {
  position: relative;
}

.login-password-control .form-control {
  padding-right: 5.3rem;
}

.login-password-toggle {
  position: absolute;
  right: .5rem;
  top: 50%;
  min-width: 4.25rem;
  min-height: 2.15rem;
  transform: translateY(-50%);
  border: 0;
  border-radius: .5rem;
  background: #eef4f4;
  color: var(--brand-primary);
  font-size: .65rem;
  font-weight: 800;
}

.login-password-toggle:hover {
  background: #e2eded;
}

.login-field-error {
  color: var(--semantic-error);
  font-size: .65rem;
}

.login-form .form-alert {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.login-submit {
  min-height: 3.2rem;
  margin-top: 1.45rem;
  border-radius: .7rem;
  background: linear-gradient(110deg, var(--brand-primary), var(--brand-secondary));
  box-shadow: 0 12px 25px rgba(17,69,101,.16);
}

.login-submit i {
  margin-left: auto;
  font-size: 1rem;
  font-style: normal;
}

.login-help {
  margin: 1.15rem 0 0;
  color: var(--brand-text-muted);
  font-size: .7rem;
  text-align: center;
}

.login-help a {
  color: var(--brand-secondary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.security-note {
  margin-top: 1.6rem;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-top: 1px solid var(--brand-border);
  color: var(--brand-text-muted);
  font-size: .62rem;
  line-height: 1.5;
  text-align: center;
}

.security-note span {
  color: var(--brand-secondary);
  font-size: .5rem;
}

.error-page {
  min-height: calc(100vh - 9rem);
  display: grid;
  place-items: center;
  text-align: center;
}

.error-page .panel {
  width: min(36rem, 100%);
  padding: clamp(2rem, 6vw, 4rem);
}

.error-logo {
  width: min(14rem, 70%);
  height: 4rem;
  object-fit: contain;
}

.error-code {
  display: block;
  margin: 1.7rem 0 0.5rem;
  color: var(--brand-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.error-page h1 {
  margin: 0;
  color: var(--brand-primary);
  font-size: clamp(2rem, 6vw, 3.3rem);
  line-height: 1;
}

.error-page p {
  margin: 1rem auto 1.5rem;
  color: var(--brand-text-muted);
}

@media (max-width: 78rem) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .span-3 {
    grid-column: span 2;
  }

  .finance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-strip > div:nth-child(2) {
    border-right: 0;
  }

  .finance-strip > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--brand-border);
  }
}

@media (max-width: 68rem) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    left: -18.5rem;
    width: 17.5rem;
    transition: left var(--transition-fast);
  }

  .sidebar.open {
    left: 0;
    box-shadow: 1.25rem 0 3.75rem var(--overlay);
  }

  .sidebar-backdrop.open {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    border: 0;
    background: var(--overlay);
  }

  .menu-toggle {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: var(--space-3);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--brand-primary);
    color: var(--text-on-brand);
    font-size: 0;
  }

  .menu-toggle::before {
    content: "☰";
    font-size: 1rem;
  }

  .login-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-story {
    min-height: auto;
  }

  .login-story-content {
    margin-block: 3.5rem;
  }

  .login-orbit-system {
    width: min(22rem, 31vw);
  }
}

@media (max-width: 48rem) {
  .topbar {
    height: 4.25rem;
    padding: 0 var(--space-4);
  }

  .user-menu > span:nth-child(2) {
    display: none;
  }

  .user-menu form {
    margin-left: 0;
  }

  .notification-center summary span {
    display: none;
  }

  .content {
    padding: 1.8rem var(--space-4) 3.5rem;
  }

  .heading-row {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-5);
  }

  .heading-actions .btn,
  .heading-row > .btn {
    flex: 1;
  }

  .page-heading h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .kpi-grid,
  .kpi-grid.compact,
  .dashboard-grid,
  .finance-strip,
  .detail-grid,
  .request-detail-grid,
  .form-grid,
  .db-count-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .span-2,
  .span-3 {
    grid-column: auto;
  }

  .finance-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--brand-border);
  }

  .finance-strip > div:last-child {
    border-bottom: 0;
  }

  .panel {
    padding: 1.15rem;
  }

  .search-bar,
  .inline-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .form-actions .btn {
    width: 100%;
  }

  .login-story {
    min-height: auto;
    padding: 2rem;
  }

  .login-story-header {
    align-items: flex-start;
  }

  .login-brand img {
    width: min(12.5rem, 55vw);
    height: 3.3rem;
  }

  .login-site-link {
    padding: .55rem .7rem;
    font-size: .6rem;
  }

  .login-story-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.45rem;
    margin: 2.2rem 0 2rem;
  }

  .login-copy h1 {
    max-width: 11ch;
    margin: .75rem 0 1rem;
    font-size: clamp(2.65rem, 12vw, 3.55rem);
  }

  .login-copy p {
    font-size: .86rem;
    line-height: 1.6;
  }

  .login-orbit-system {
    width: min(11.5rem, 52vw);
    justify-self: center;
  }

  .login-access-scope {
    padding: .9rem;
  }

  .login-meta {
    display: none;
  }

  .login-panel {
    padding: 2.5rem 1.4rem 3.5rem;
  }

  .login-form-logo {
    margin-bottom: 2.8rem;
  }

  .messages {
    right: var(--space-4);
  }
}

@media (max-width: 30rem) {
  .topbar-context small,
  .avatar {
    display: none;
  }

  .kanban-column {
    flex-basis: calc(100vw - 2.6rem);
  }

  .period-tabs {
    width: 100%;
  }

  .login-site-link {
    font-size: 0;
  }

  .login-site-link span {
    font-size: .78rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .login-orbit {
    animation: none !important;
  }
}

/* CEO Command Center */
.command-center .content {
  background:
    radial-gradient(circle at 90% 2%, rgba(25, 106, 115, 0.08), transparent 24rem),
    var(--brand-background);
}

.nav-tree {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.35rem;
}

.nav-tree summary {
  min-height: 2.3rem;
  padding: 0.62rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  list-style: none;
  text-transform: uppercase;
}

.nav-tree summary::-webkit-details-marker { display: none; }
.nav-tree summary::after { content: "+"; color: var(--brand-yellow); font-size: 0.9rem; }
.nav-tree[open] summary::after { content: "−"; }
.nav-tree > div { display: grid; gap: 0.08rem; padding-bottom: 0.3rem; }
.main-nav .nav-tree a { min-height: 2.2rem; padding: 0.42rem 0.75rem 0.42rem 1.05rem; font-size: 0.72rem; }

.command-hero,
.brain-hero,
.lios-hero {
  position: relative;
  min-height: 13rem;
  margin-bottom: var(--space-6);
  padding: clamp(1.5rem, 4vw, 2.8rem);
  display: flex;
  align-items: center;
  gap: 2.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    linear-gradient(120deg, rgba(11, 52, 78, 0.98), rgba(17, 69, 101, 0.92) 55%, rgba(25, 106, 115, 0.9)),
    var(--brand-primary);
  box-shadow: var(--shadow-md);
}

.command-hero h1,
.brain-hero h1,
.lios-hero h1 { margin: 0.25rem 0 0.65rem; max-width: 50rem; color: #fff; font-size: clamp(2rem, 4vw, 4rem); line-height: 0.98; }
.command-hero p,
.brain-hero p,
.lios-hero p { max-width: 48rem; margin: 0; color: rgba(255,255,255,.7); }
.command-hero .eyebrow,
.brain-hero .eyebrow,
.lios-hero .eyebrow { color: #f6c27d; }

.command-orbit { position: relative; width: 8.5rem; height: 8.5rem; flex: 0 0 auto; display: grid; place-items: center; }
.command-orbit img { z-index: 2; width: 4.3rem; height: 4.3rem; object-fit: cover; border-radius: 50%; }
.command-orbit i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; animation: command-orbit 14s linear infinite; }
.command-orbit i::after { content: ""; position: absolute; top: 0.65rem; left: 1rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 1rem rgba(235,93,17,.8); }
.command-orbit i:nth-child(2) { inset: 1rem -.8rem; transform: rotate(55deg); animation-duration: 19s; }
.command-orbit i:nth-child(2)::after { background: var(--brand-yellow); }
.command-orbit i:nth-child(3) { inset: -.7rem 1.2rem; transform: rotate(110deg); animation-duration: 24s; }
@keyframes command-orbit { to { rotate: 360deg; } }

.command-status,
.lios-pulse { margin-left: auto; min-width: 12rem; display: grid; gap: .25rem; }
.command-status > span,
.lios-pulse > i { width: .55rem; height: .55rem; border-radius: 50%; background: #55d6a4; box-shadow: 0 0 0 .35rem rgba(85,214,164,.12), 0 0 1rem rgba(85,214,164,.6); }
.command-status strong,
.lios-pulse span { margin-top: .55rem; font-size: .78rem; }
.command-status small,
.lios-pulse small { color: rgba(255,255,255,.58); font-size: .65rem; }

.executive-filters {
  position: relative;
  z-index: 4;
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(6, minmax(8rem, 1fr));
  gap: var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.executive-filters label,
.brain-search label,
.export-card label { display: grid; gap: .32rem; }
.executive-filters label > span,
.brain-search label > span,
.export-card label > span { color: var(--brand-text-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.executive-filters select,
.executive-filters input,
.brain-search select,
.brain-search input,
.export-card select { width: 100%; min-height: 2.65rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: #fff; color: var(--brand-text); padding: 0 .7rem; font-size: .74rem; }
.filter-actions { display: flex; align-items: end; gap: var(--space-2); }
.filter-actions .btn { min-height: 2.65rem; }

.section-heading { margin: 2.2rem 0 1rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin: .15rem 0 0; color: var(--brand-primary); font-size: 1.45rem; }
.section-heading a { color: var(--brand-secondary); font-size: .72rem; font-weight: 700; }
.executive-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.danger-kpi strong { color: var(--brand-red); }
.entity-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--space-6); }
.command-finance { grid-template-columns: repeat(5, minmax(0,1fr)); }
.command-finance > div:nth-child(4) { border-right: 1px solid var(--brand-border); }
.intelligence-launch { background: linear-gradient(145deg, #fff, rgba(25,106,115,.08)); }
.intelligence-launch h2 { margin: .2rem 0 .6rem; color: var(--brand-primary); font-size: 2rem; }
.intelligence-launch p { color: var(--brand-text-muted); }

.workspace-heading { margin-bottom: var(--space-5); }
.readonly-badge,
.source-required,
.live-dot { display: inline-flex; align-items: center; border: 1px solid rgba(25,106,115,.18); border-radius: var(--radius-pill); background: var(--semantic-info-soft); color: var(--brand-secondary); padding: .45rem .7rem; font-size: .61rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.process-chain,
.lios-pipeline { margin: 1.2rem 0 1.5rem; padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .65rem; overflow-x: auto; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); background: #fff; white-space: nowrap; }
.process-chain span,
.lios-pipeline span { border-radius: var(--radius-pill); background: var(--surface-subtle); color: var(--brand-primary); padding: .5rem .75rem; font-size: .67rem; font-weight: 700; }
.process-chain i,
.lios-pipeline i { color: var(--brand-accent); font-style: normal; }
.comparison-grid { margin-bottom: var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); }
.comparison-grid article { padding: 1rem; display: grid; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: #fff; }
.comparison-grid span,
.comparison-grid small { color: var(--brand-text-muted); font-size: .64rem; }
.comparison-grid strong { margin: .2rem 0; color: var(--brand-primary); font-size: 1.25rem; }
.region-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.region-grid article { padding: 1rem; display: grid; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.region-grid strong { color: var(--brand-primary); font-size: 1.5rem; }
.region-grid span { color: var(--brand-text-muted); font-size: .67rem; }
.data-notice,
.demo-banner { margin: 1rem 0; padding: 1rem 1.2rem; display: flex; gap: .7rem 1.2rem; align-items: center; border: 1px solid rgba(235,93,17,.22); border-radius: var(--radius-md); background: #fff7ee; color: var(--brand-text); }
.data-notice strong,
.demo-banner strong { color: var(--brand-accent); font-size: .74rem; text-transform: uppercase; }
.data-notice span,
.demo-banner span { color: var(--brand-text-muted); font-size: .72rem; }

/* Second Brain */
.brain-principle { margin-left: auto; min-width: 13rem; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: .6rem; }
.brain-principle i { color: var(--brand-yellow); font-style: normal; }
.brain-principle small { grid-column: 1 / -1; color: rgba(255,255,255,.55); }
.brain-search { margin-bottom: var(--space-6); padding: 1rem; display: grid; grid-template-columns: minmax(16rem, 1fr) 12rem auto; align-items: end; gap: .75rem; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); background: #fff; }
.retrieval-answer { margin-bottom: var(--space-6); padding: 1.25rem; border: 1px solid rgba(25,106,115,.22); border-radius: var(--radius-lg); background: linear-gradient(145deg, #fff, #edf6f7); }
.retrieval-answer article { padding: 1rem 0; border-top: 1px solid var(--brand-border); }
.retrieval-answer article p { margin: .35rem 0; color: var(--brand-text-muted); }
.retrieval-answer article span { margin-right: .4rem; color: var(--brand-secondary); font-size: .64rem; }
.brain-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(18rem, .8fr); gap: var(--space-5); }
.knowledge-graph { min-height: 42rem; }
#knowledge-graph { min-height: 34rem; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-md); background: radial-gradient(circle at center, rgba(25,106,115,.09), transparent 45%), linear-gradient(rgba(17,69,101,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(17,69,101,.04) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; }
#knowledge-graph svg { width: 100%; max-height: 34rem; }
#knowledge-graph line { stroke: rgba(25,106,115,.34); stroke-width: 1.5; }
.graph-node { cursor: pointer; }
.graph-node circle { stroke: rgba(255,255,255,.9); stroke-width: 4; filter: drop-shadow(0 5px 8px rgba(17,69,101,.2)); transition: r var(--transition-fast); }
.graph-node:hover circle,
.graph-node:focus circle { r: 26; }
.graph-node text { fill: var(--brand-primary); font: 700 11px var(--font-brand); }
.empty-graph { width: min(28rem, 80%); text-align: center; }
.empty-graph strong { color: var(--brand-primary); font-size: 1.15rem; }
.empty-graph p { color: var(--brand-text-muted); }
.graph-legend { display: flex; flex-wrap: wrap; gap: .35rem; }
.graph-legend span { border-radius: var(--radius-pill); background: var(--surface-subtle); padding: .3rem .5rem; color: var(--brand-text-muted); font-size: .57rem; }
.node-inspector { min-height: 42rem; }
.node-inspector h3 { margin: .45rem 0; color: var(--brand-primary); font-size: 1.5rem; }
.node-inspector h4 { margin: 1.4rem 0 .4rem; color: var(--brand-primary); font-size: .75rem; text-transform: uppercase; }
.node-inspector ul { margin: 0; padding: 0; display: grid; gap: .55rem; list-style: none; }
.node-inspector li { padding: .65rem; display: grid; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); }
.node-inspector li span,
.node-inspector li small { color: var(--brand-text-muted); font-size: .65rem; }
.node-type { color: var(--brand-accent); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.brain-shelves { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.brain-list-item { width: 100%; padding: .7rem 0; display: flex; justify-content: space-between; border: 0; border-bottom: 1px solid var(--brand-border); background: none; color: var(--brand-text); text-align: left; }
.brain-list-item small { color: var(--brand-text-muted); }
.knowledge-flow { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--brand-text-muted); font-size: .72rem; }
.knowledge-flow i { color: var(--brand-accent); font-style: normal; }
.knowledge-flow a,
.knowledge-flow strong { color: var(--brand-primary); }
.knowledge-flow.horizontal { margin: 1.5rem 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }

/* LIOS */
.lios-pipeline { justify-content: flex-start; background: var(--brand-primary-strong); border-color: transparent; }
.lios-pipeline span { background: rgba(255,255,255,.09); color: #fff; }
.lios-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.lios-kpis .kpi-card { min-height: 8rem; padding: 1rem; }
.lios-kpis .kpi-card strong { font-size: 1.65rem; }
.lios-grid { margin-top: var(--space-6); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(20rem, .7fr); gap: var(--space-5); }
.event-feed { display: grid; }
.event-feed article { min-height: 4.4rem; display: grid; grid-template-columns: 3.5rem 1rem minmax(0,1fr); gap: .65rem; }
.event-feed time { color: var(--brand-primary); font: 700 .72rem var(--font-mono); }
.event-feed article > i { position: relative; width: .55rem; height: .55rem; margin-top: .2rem; border-radius: 50%; background: var(--brand-secondary); box-shadow: 0 0 0 .3rem rgba(25,106,115,.11); }
.event-feed article > i::after { content: ""; position: absolute; top: .8rem; left: calc(50% - .5px); width: 1px; height: 3rem; background: var(--brand-border); }
.event-feed article:last-child > i::after { display: none; }
.event-feed p { margin: .15rem 0; color: var(--brand-text-muted); font-size: .73rem; }
.event-feed small { color: var(--brand-secondary); }
.event-feed b { width: fit-content; border-radius: var(--radius-pill); background: var(--semantic-warning-soft); color: var(--semantic-warning); padding: .2rem .4rem; font-size: .55rem; text-transform: uppercase; }
.empty-state { padding: 3rem 1rem; text-align: center; }
.empty-state strong { color: var(--brand-primary); }
.empty-state p { max-width: 34rem; margin: .5rem auto; color: var(--brand-text-muted); }
.lios-brain { background: linear-gradient(160deg, #fff, rgba(25,106,115,.1)); }
.lios-brain h2 { margin: .2rem 0; color: var(--brand-primary); font-size: 2rem; }
.lios-brain p { color: var(--brand-text-muted); }

.export-card { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(10rem, .5fr) auto; align-items: end; gap: 1rem; }
.export-card > div { display: grid; }
.export-card > div > span { color: var(--brand-text-muted); font-size: .65rem; }
.export-card > div > strong { color: var(--brand-primary); font-size: 1.6rem; }
.export-card small { color: var(--brand-text-muted); }
.export-actions { display: flex !important; flex-direction: row; gap: .6rem; }

/* OP3 · Technology Command Center */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.tech-heading-actions { display: flex; align-items: center; gap: .75rem; }
.health-state { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.55rem; padding: .65rem .85rem; border: 1px solid var(--brand-border); border-radius: var(--radius-pill); background: #fff; color: var(--brand-text-muted); font-size: .67rem; font-weight: 800; }
.health-state i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--text-subtle); box-shadow: 0 0 0 .25rem rgba(100,120,130,.1); }
.health-state.ok i { background: var(--semantic-success); box-shadow: 0 0 0 .25rem var(--semantic-success-soft); }
.health-state.warning i { background: var(--semantic-warning); box-shadow: 0 0 0 .25rem var(--semantic-warning-soft); }
.health-state.error i,
.health-state.critical i { background: var(--semantic-error); box-shadow: 0 0 0 .25rem var(--semantic-error-soft); }
.tech-jump-nav { margin: calc(var(--space-3) * -1) 0 var(--space-5); padding: .45rem; display: flex; gap: .25rem; overflow-x: auto; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: #fff; }
.tech-jump-nav a { padding: .55rem .8rem; border-radius: var(--radius-sm); color: var(--brand-text-muted); font-size: .66rem; font-weight: 700; white-space: nowrap; }
.tech-jump-nav a:hover { background: var(--surface-subtle); color: var(--brand-primary); }
.tech-reading-guide { margin: calc(var(--space-3) * -1) 0 var(--space-4); padding: 1rem 1.1rem; display: grid; grid-template-columns: minmax(14rem,.8fr) minmax(24rem,1.4fr); align-items: center; gap: 1rem; border: 1px solid rgba(25,106,115,.18); border-radius: var(--radius-md); background: linear-gradient(135deg,#fff,rgba(25,106,115,.055)); }
.tech-reading-guide h2 { margin: .2rem 0; color: var(--brand-primary); font-size: 1rem; }
.tech-reading-guide p { margin: 0; color: var(--brand-text-muted); font-size: .66rem; line-height: 1.55; }
.tech-reading-guide ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; list-style: none; }
.tech-reading-guide li { min-width: 0; padding: .65rem; display: flex; align-items: center; gap: .5rem; border-radius: var(--radius-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--brand-border); }
.tech-reading-guide li > i { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--text-subtle); }
.tech-reading-guide li.ok > i { background: var(--semantic-success); }
.tech-reading-guide li.warning > i { background: var(--semantic-warning); }
.tech-reading-guide li.critical > i { background: var(--semantic-error); }
.tech-reading-guide li strong,
.tech-reading-guide li span { display: block; }
.tech-reading-guide li strong { color: var(--brand-primary); font-size: .61rem; }
.tech-reading-guide li span { color: var(--brand-text-muted); font-size: .54rem; line-height: 1.4; }
.metric-label { display: inline-flex !important; align-items: center; gap: .3rem; overflow: visible !important; }
.context-help { position: relative; display: inline-flex !important; flex: 0 0 auto; vertical-align: middle; overflow: visible !important; }
.context-help-trigger { width: 1.15rem; height: 1.15rem; padding: 0; display: inline-grid; place-items: center; border: 1px solid rgba(25,106,115,.28); border-radius: 50%; background: #fff; color: var(--brand-secondary); cursor: help; font: 800 .63rem/1 var(--font-sans); }
.context-help-trigger:hover,
.context-help-trigger:focus-visible,
.context-help.is-open .context-help-trigger { outline: none; border-color: var(--brand-secondary); background: var(--brand-secondary); color: #fff; }
.context-help-popover { position: absolute; z-index: 90; left: 50%; top: calc(100% + .6rem); width: min(18rem,70vw); padding: .8rem; display: none !important; transform: translateX(-50%); border: 1px solid rgba(15,55,72,.18); border-radius: var(--radius-sm); background: #fff; color: var(--brand-text-muted) !important; box-shadow: 0 14px 35px rgba(8,39,52,.18); font: .66rem/1.5 var(--font-sans) !important; text-align: left; text-transform: none; white-space: normal !important; }
.context-help-popover::before { content: ""; position: absolute; left: 50%; top: -.3rem; width: .55rem; height: .55rem; transform: translateX(-50%) rotate(45deg); border-left: 1px solid rgba(15,55,72,.18); border-top: 1px solid rgba(15,55,72,.18); background: #fff; }
.context-help-popover strong,
.context-help-popover span,
.context-help-popover small { display: block !important; color: inherit !important; font: inherit !important; opacity: 1 !important; }
.context-help-popover strong { margin-bottom: .25rem; color: var(--brand-primary) !important; font-weight: 800 !important; }
.context-help-popover small { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--brand-border); color: var(--text-subtle) !important; font-size: .57rem !important; }
.context-help:hover .context-help-popover,
.context-help:focus-within .context-help-popover,
.context-help.is-open .context-help-popover { display: block !important; }
.hero-kpi .context-help-trigger { border-color: rgba(255,255,255,.45); background: transparent; color: #fff; }
.hero-kpi .context-help-trigger:hover,
.hero-kpi .context-help-trigger:focus-visible,
.hero-kpi .context-help.is-open .context-help-trigger { background: #fff; color: var(--brand-primary); }
.panel-explainer { max-width: 38rem; margin: .3rem 0 0; color: var(--brand-text-muted); font-size: .6rem; line-height: 1.5; }
.tech-kpis .kpi-card { position: relative; }
.metric-line { display: block; height: .3rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-subtle); }
.metric-line b { display: block; height: 100%; border-radius: inherit; background: var(--brand-secondary); }
.hero-kpi .metric-line { background: rgba(255,255,255,.16); }
.hero-kpi .metric-line b { background: var(--brand-yellow); }
.freshness-dot { position: absolute; right: 1.2rem; top: 1.2rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--text-subtle); }
.freshness-dot.ok { background: var(--semantic-success); box-shadow: 0 0 0 .3rem var(--semantic-success-soft); }
.freshness-dot.warning { background: var(--semantic-warning); box-shadow: 0 0 0 .3rem var(--semantic-warning-soft); }
.telemetry-empty { margin-bottom: var(--space-4); border-style: dashed; }
.telemetry-empty h2 { margin: .45rem 0; color: var(--brand-primary); }
.tech-status-strip { margin-bottom: var(--space-4); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: visible; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: #fff; }
.tech-status-strip > div { min-width: 0; padding: 1rem 1.15rem; border-right: 1px solid var(--brand-border); }
.tech-status-strip > div:last-child { border-right: 0; }
.tech-status-strip span,
.tech-status-strip strong,
.tech-status-strip small { display: block; }
.tech-status-strip span { color: var(--brand-text-muted); font-size: .61rem; }
.tech-status-strip strong { margin: .3rem 0; overflow: hidden; color: var(--brand-primary); font-size: 1.25rem; text-overflow: ellipsis; }
.tech-status-strip small { color: var(--text-subtle); font-size: .59rem; }
.tech-dashboard { scroll-margin-top: 6rem; }
.tech-dashboard .panel { scroll-margin-top: 6rem; }
.service-health-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.service-health { min-width: 0; padding: .9rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.service-health > i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--text-subtle); }
.service-health.ok > i { background: var(--semantic-success); box-shadow: 0 0 0 .25rem var(--semantic-success-soft); }
.service-health.warning > i { background: var(--semantic-warning); box-shadow: 0 0 0 .25rem var(--semantic-warning-soft); }
.service-health.error > i { background: var(--semantic-error); box-shadow: 0 0 0 .25rem var(--semantic-error-soft); }
.service-health strong,
.service-health small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-health strong { color: var(--brand-primary); font-size: .72rem; }
.service-health small { margin-top: .2rem; color: var(--brand-text-muted); font-size: .58rem; }
.service-health > span { color: var(--text-subtle); font: 800 .56rem var(--font-mono); }
.instrumentation-list { display: grid; }
.instrumentation-list > div { padding: .62rem 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--brand-border); font-size: .66rem; }
.instrumentation-list > div:last-child { border-bottom: 0; }
.instrumentation-list b { padding: .25rem .45rem; border-radius: var(--radius-pill); background: var(--semantic-warning-soft); color: var(--semantic-warning); font-size: .54rem; text-transform: uppercase; }
.instrumentation-list b.active { background: var(--semantic-success-soft); color: var(--semantic-success); }
.source-note { display: block; margin-top: .9rem; color: var(--text-subtle); font-size: .59rem; line-height: 1.55; }
.technical-trend { min-height: 18rem; }
.chart-legend { display: flex; gap: .75rem; color: var(--brand-text-muted); font-size: .6rem; }
.chart-legend span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: 2px; vertical-align: -.05rem; }
.chart-legend .cpu::before { background: var(--brand-secondary); }
.chart-legend .memory::before { background: var(--brand-accent); }
.dual-trend { height: 12rem; padding-top: .8rem; display: flex; align-items: flex-end; gap: .18rem; border-bottom: 1px solid var(--brand-border); }
.dual-trend-point { height: 100%; min-width: .2rem; flex: 1; display: flex; align-items: flex-end; gap: 1px; }
.dual-trend-point i { width: 50%; min-height: 2px; border-radius: 2px 2px 0 0; opacity: .68; }
.dual-trend-point .cpu { background: var(--brand-secondary); }
.dual-trend-point .memory { background: var(--brand-accent); }
.dual-trend-point:hover i { opacity: 1; }
.count-badge { padding: .35rem .55rem; border-radius: var(--radius-pill); background: var(--semantic-error-soft); color: var(--semantic-error); font-size: .58rem; font-weight: 800; }
.incident-list { display: grid; gap: .6rem; }
.incident-row { padding: .9rem; display: grid; grid-template-columns: 4.5rem minmax(0,1fr) auto; align-items: start; gap: .8rem; border: 1px solid var(--brand-border); border-left-width: 3px; border-radius: var(--radius-sm); }
.incident-row.warning { border-left-color: var(--semantic-warning); }
.incident-row.error,
.incident-row.critical { border-left-color: var(--semantic-error); }
.incident-severity { color: var(--semantic-error); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.incident-row.warning .incident-severity { color: var(--semantic-warning); }
.incident-row strong,
.incident-row small { display: block; }
.incident-row strong { color: var(--brand-primary); font-size: .72rem; }
.incident-row small { margin-top: .25rem; color: var(--brand-text-muted); font-size: .58rem; line-height: 1.5; }
.incident-row details { margin-top: .5rem; }
.incident-row summary { color: var(--brand-secondary); cursor: pointer; font-size: .6rem; font-weight: 700; }
.incident-row pre { max-height: 11rem; margin: .5rem 0 0; padding: .65rem; overflow: auto; border-radius: var(--radius-sm); background: #0d2839; color: #dcecf0; font: .57rem/1.55 var(--font-mono); white-space: pre-wrap; }
.btn-small { min-height: 2rem; padding: .4rem .6rem; font-size: .58rem; }
.empty-success { padding: 1.3rem; display: flex; align-items: center; gap: .8rem; border-radius: var(--radius-sm); background: var(--semantic-success-soft); }
.empty-success > i { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--semantic-success); color: #fff; font-style: normal; }
.empty-success strong,
.empty-success small { display: block; }
.empty-success strong { color: var(--semantic-success); font-size: .75rem; }
.empty-success small { margin-top: .2rem; color: var(--brand-text-muted); font-size: .6rem; }

.completion-summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--semantic-success) 35%, transparent);
  border-radius: var(--radius-sm);
  background: var(--semantic-success-soft);
  color: var(--semantic-success);
}
.completion-summary > i {
  display: grid;
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--semantic-success);
  color: #fff;
  font-style: normal;
}
.completion-summary strong,
.completion-summary small { display: block; }
.completion-summary small { margin-top: .12rem; color: var(--brand-text-muted); }
.tech-facts { margin: 0; display: grid; }
.tech-facts > div { padding: .65rem 0; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--brand-border); }
.tech-facts dt { color: var(--brand-text-muted); font-size: .63rem; }
.tech-facts dd { margin: 0; color: var(--brand-primary); font: 700 .66rem var(--font-mono); text-align: right; }
.inline-state { padding: .2rem .4rem; border-radius: var(--radius-pill); background: var(--semantic-error-soft); color: var(--semantic-error); font-size: .54rem; }
.inline-state.ok { background: var(--semantic-success-soft); color: var(--semantic-success); }
.process-list { display: grid; }
.process-list > div { padding: .6rem 0; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border-bottom: 1px solid var(--brand-border); }
.process-list > div:last-child { border-bottom: 0; }
.process-list strong,
.process-list small { display: block; }
.process-list strong { color: var(--brand-primary); font: 700 .65rem var(--font-mono); }
.process-list small { margin-top: .15rem; color: var(--text-subtle); font-size: .54rem; }
.process-list > div > b { color: var(--brand-text-muted); font: 700 .61rem var(--font-mono); }
.network-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.network-list article { padding: .8rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }
.network-list strong,
.network-list span { display: block; }
.network-list strong { margin-bottom: .45rem; color: var(--brand-primary); font: 700 .68rem var(--font-mono); }
.network-list span { color: var(--brand-text-muted); font: .6rem/1.65 var(--font-mono); }
.tech-glossary { margin-top: var(--space-4); }
.tech-glossary dl { margin: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .6rem; }
.tech-glossary dl > div { padding: .75rem; border-radius: var(--radius-sm); background: var(--surface-subtle); }
.tech-glossary dt { color: var(--brand-primary); font: 800 .65rem var(--font-mono); }
.tech-glossary dd { margin: .25rem 0 0; color: var(--brand-text-muted); font-size: .58rem; line-height: 1.45; }
.data-reading-note { margin: 0 0 var(--space-3); padding: .8rem 1rem; display: flex; gap: .5rem; border: 1px solid rgba(25,106,115,.18); border-radius: var(--radius-sm); background: rgba(25,106,115,.055); color: var(--brand-text-muted); font-size: .65rem; line-height: 1.5; }
.data-reading-note strong { color: var(--brand-primary); }

@media (max-width: 92rem) {
  .executive-filters { grid-template-columns: repeat(4, minmax(8rem, 1fr)); }
  .executive-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lios-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 78rem) {
  .command-finance,
  .entity-kpis,
  .comparison-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .command-finance > div { border-bottom: 1px solid var(--brand-border); }
  .brain-layout,
  .lios-grid { grid-template-columns: minmax(0, 1fr); }
  .node-inspector { min-height: auto; }
  .brain-shelves { grid-template-columns: minmax(0, 1fr); }
  .tech-status-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tech-status-strip > div:nth-child(2) { border-right: 0; }
  .tech-status-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--brand-border); }
  .tech-reading-guide { grid-template-columns: minmax(0,1fr); }
  .tech-glossary dl { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 58rem) {
  .command-hero,
  .brain-hero,
  .lios-hero { align-items: flex-start; flex-direction: column; }
  .command-orbit { display: none; }
  .command-status,
  .brain-principle,
  .lios-pulse { margin-left: 0; }
  .executive-filters { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brain-search { grid-template-columns: minmax(0,1fr); }
  .region-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .export-card { grid-template-columns: minmax(0,1fr); }
  .tech-heading,
  .tech-heading-actions { align-items: flex-start; flex-direction: column; }
  .service-health-grid { grid-template-columns: minmax(0,1fr); }
  .network-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .incident-row { grid-template-columns: minmax(0,1fr) auto; }
  .incident-severity { grid-column: 1 / -1; }
  .context-help-popover { position: fixed; z-index: 1000; left: 1rem; right: 1rem; top: auto; bottom: 1rem; width: auto; transform: none; }
  .context-help-popover::before { display: none; }
}

@media (max-width: 42rem) {
  .executive-filters,
  .executive-kpis,
  .entity-kpis,
  .command-finance,
  .lios-kpis { grid-template-columns: minmax(0,1fr); }
  .section-heading,
  .data-notice,
  .demo-banner { align-items: flex-start; flex-direction: column; }
  .process-chain { justify-content: flex-start; }
  .region-grid { grid-template-columns: minmax(0,1fr); }
  .comparison-grid { grid-template-columns: minmax(0,1fr); }
  .brain-principle { grid-template-columns: auto auto auto; }
  .tech-status-strip,
  .network-list { grid-template-columns: minmax(0,1fr); }
  .tech-status-strip > div { border-right: 0; border-bottom: 1px solid var(--brand-border); }
  .tech-status-strip > div:last-child { border-bottom: 0; }
  .incident-row { grid-template-columns: minmax(0,1fr); }
  .tech-reading-guide ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tech-glossary dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .data-reading-note { flex-direction: column; }
}

/* Portal central e seletor de painéis autorizados */
.portal-hero { display:flex; justify-content:space-between; gap:2rem; align-items:flex-end; padding:clamp(1.5rem,4vw,3.5rem); margin-bottom:1.5rem; border-radius:24px; color:#fff; background:linear-gradient(135deg,#0d405f 0%,#12627a 62%,#e9772e 150%); box-shadow:0 20px 50px rgba(13,64,95,.18); }
.portal-hero h1 { color:#fff; margin:.35rem 0 .65rem; font-size:clamp(2rem,4vw,3.4rem); }
.portal-hero p { max-width:720px; margin:0; color:rgba(255,255,255,.82); font-size:1.02rem; }
.portal-security { display:inline-flex; align-items:center; gap:.55rem; flex:0 0 auto; padding:.7rem 1rem; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.1); font-size:.82rem; }
.portal-security i { width:8px; height:8px; border-radius:50%; background:#75d6a2; box-shadow:0 0 0 5px rgba(117,214,162,.15); }
.panel-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.panel-launch-card { --panel-accent:#e9772e; position:relative; display:grid; grid-template-columns:auto 1fr; gap:1rem; min-height:250px; padding:1.5rem; overflow:hidden; border:1px solid #dce6eb; border-radius:20px; color:#183548; background:#fff; box-shadow:0 12px 35px rgba(19,54,74,.08); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.panel-launch-card:hover,.panel-launch-card:focus-visible { transform:translateY(-3px); border-color:#90b5c5; box-shadow:0 18px 42px rgba(19,54,74,.14); outline:3px solid rgba(233,119,46,.25); outline-offset:2px; }
.panel-launch-card::after { content:""; position:absolute; width:160px; height:160px; right:-70px; top:-70px; border-radius:50%; background:var(--panel-accent); opacity:.09; }
.panel-launch-card--p2 { --panel-accent:#1b8092; }.panel-launch-card--p3 { --panel-accent:#64748b; }.panel-launch-card--p4 { --panel-accent:#0f766e; }.panel-launch-card--p5 { --panel-accent:#7c3aed; }
.panel-launch-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#fff; background:var(--panel-accent,#e9772e); font-weight:800; letter-spacing:.06em; }
.panel-launch-copy { display:flex; flex-direction:column; min-width:0; }.panel-launch-copy small { color:var(--panel-accent,#e9772e); font-weight:800; letter-spacing:.12em; }.panel-launch-copy strong { margin:.2rem 0 .5rem; font-size:1.22rem; }.panel-launch-copy > span { color:#617684; line-height:1.55; }
.panel-launch-meta { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }.panel-launch-meta b,.panel-launch-meta em { padding:.35rem .65rem; border-radius:999px; font-size:.75rem; font-style:normal; }.panel-launch-meta b { color:#155e75; background:#e6f5f7; }.panel-launch-meta em { color:#7c2d12; background:#fff2e8; }
.panel-launch-action { grid-column:1/-1; align-self:end; display:flex; justify-content:space-between; padding-top:1rem; border-top:1px solid #e7eef1; color:#174d67; font-weight:750; }
.portal-empty { display:flex; align-items:center; gap:1rem; max-width:760px; margin:3rem auto; padding:2rem; }.portal-empty h2 { margin:0 0 .35rem; }.portal-empty p { margin:0; }
.panel-switch { position:relative; }.panel-switch > summary { cursor:pointer; list-style:none; padding:.55rem .8rem; border:1px solid #d8e3e8; border-radius:10px; color:#19475d; background:#fff; font-weight:800; }.panel-switch > summary::-webkit-details-marker { display:none; }.panel-switch-menu { position:absolute; z-index:30; top:calc(100% + .5rem); right:0; width:250px; padding:.5rem; border:1px solid #d8e3e8; border-radius:14px; background:#fff; box-shadow:0 18px 45px rgba(15,52,72,.18); }.panel-switch-menu a { display:grid; grid-template-columns:36px 1fr; align-items:center; gap:.55rem; padding:.65rem; border-radius:9px; color:#2b4d5d; }.panel-switch-menu a:first-child { display:block; margin-bottom:.25rem; border-bottom:1px solid #e8eef1; font-weight:700; }.panel-switch-menu a:hover,.panel-switch-menu a:focus-visible,.panel-switch-menu a.active { background:#edf7f8; color:#0f6070; outline:none; }.panel-switch-menu strong { color:#e66f28; }.panel-switch-menu span { font-size:.82rem; }

@media (max-width:720px) { .portal-hero { align-items:flex-start; flex-direction:column; padding:1.5rem; }.portal-security { flex:0 1 auto; }.panel-card-grid { grid-template-columns:1fr; }.panel-launch-card { min-height:225px; }.panel-switch-menu { position:fixed; top:64px; left:1rem; right:1rem; width:auto; } }

/* Stable, textual semantics shared by P2 request cards and WhatsApp context. */
.p2-tag { display:inline-flex; align-items:center; max-width:100%; box-sizing:border-box; padding:3px 7px; border-radius:5px; background:#eff1f2; color:#52616b; font-size:11px; font-weight:600; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.p2-tag-red { background:#fcebea; color:#a12e2a; }
.p2-tag-orange { background:#fff0e3; color:#8a4b1f; }
.p2-tag-yellow { background:#fff4cd; color:#76520b; }
.p2-tag-blue { background:#eaf1fb; color:#245a8c; }
.p2-tag-green { background:#e8f4ed; color:#226246; }
.p2-tag-purple { background:#f1ebfa; color:#68428a; }
.deal-top { flex-wrap:wrap; gap:6px; }
.deal-top > span:first-child { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }