:root {
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: #152033;
  background: #f4f7fb;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,
a {
  font: inherit;
}

.layout {
  min-height: 100vh;
}

.hidden {
  display: none !important;
}

.loginScreen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 28px;
  background:
    radial-gradient(circle at 22% 20%, rgba(34, 197, 94, 0.18), transparent 30%),
    linear-gradient(135deg, #eef4ff, #f8fafc);
}

.loginCard {
  width: min(420px, 100%);
  border: 1px solid #dbe6f3;
  border-radius: 16px;
  padding: 28px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.loginCard .brandMark {
  margin-bottom: 18px;
}

.loginCard h1 {
  margin: 0;
  font-size: 24px;
}

.loginCard p {
  margin: 8px 0 20px;
  color: #64748b;
  line-height: 1.6;
}

.loginCard label {
  display: block;
  margin-bottom: 14px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.loginCard input {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 7px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 11px;
  outline: none;
}

.loginCard input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

.loginCard button {
  width: 100%;
  min-height: 40px;
  border: 1px solid #16a34a;
  border-radius: 8px;
  background: #22c55e;
  color: #07130b;
  font-weight: 900;
  cursor: pointer;
}

.loginCard button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.loginMessage {
  min-height: 22px;
  margin-top: 12px;
  color: #dc2626;
  font-size: 13px;
}

.permissionSummary {
  margin-top: 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

.permissionLocked {
  opacity: 0.66;
}

.permissionLocked button,
.permissionLocked input,
.permissionLocked select,
.permissionLocked textarea {
  cursor: not-allowed;
}

.topNav {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 230px;
  align-items: center;
  gap: 22px;
  height: 92px;
  padding: 0 34px;
  background: #eaf0fb;
  border-bottom: 1px solid #dce5f3;
}

.brand,
.accountChip,
.profileMain,
.profileTitle,
.actionStrip,
.panelTitle,
.logItem {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
}

.brandMark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, #0f172a, #22c55e);
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.brand strong {
  display: block;
  font-size: 21px;
}

.brand span {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
}

.mainNav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-width: 0;
}

.mainNav a {
  color: #253044;
  font-weight: 700;
  text-decoration: none;
}

.accountChip {
  justify-content: flex-end;
  gap: 9px;
  color: #2563eb;
  font-weight: 700;
}

.roleBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 0 9px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.logoutBtn {
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 10px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
}

.avatar,
.largeAvatar {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #d9dee8;
  color: #ffffff;
  font-weight: 900;
}

.avatar {
  width: 40px;
  height: 40px;
}

.body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: calc(100vh - 92px);
}

.sideNav {
  padding: 30px 24px;
  background: #ffffff;
  border-right: 1px solid #e3e9f2;
}

.sideNav section {
  margin-bottom: 28px;
}

.sideNav h2 {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
}

.navItem {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-bottom: 7px;
  border: 0;
  border-radius: 9px;
  padding: 0 16px;
  background: transparent;
  color: #475569;
  text-align: left;
  cursor: pointer;
}

.navItem.active,
.navItem:hover {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #ffffff;
  font-weight: 800;
}

.content {
  padding: 26px 30px 42px;
  min-width: 0;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  border-radius: 12px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #1d4ed8, #22c55e);
  color: #ffffff;
}

.heroActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.eyebrow {
  color: #c7f9df;
  font-size: 12px;
  font-weight: 800;
}

.hero h1 {
  margin: 5px 0 4px;
  font-size: 24px;
}

.hero p {
  margin: 0;
  color: #e6f2ff;
}

.hero button,
.inviteBox button,
.actionStrip button,
#refreshBtn {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f766e;
  font-weight: 800;
  cursor: pointer;
}

.profileCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  margin-bottom: 18px;
  border-radius: 12px;
  padding: 28px 30px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.profileMain {
  gap: 24px;
  min-width: 0;
}

.largeAvatar {
  width: 122px;
  height: 122px;
  flex: 0 0 auto;
  font-size: 44px;
}

.profileTitle {
  gap: 10px;
  margin-bottom: 14px;
}

.profileTitle strong {
  font-size: 22px;
}

.profileTitle span {
  border-radius: 999px;
  padding: 3px 8px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 800;
}

dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 42px;
  margin: 0;
}

dt {
  color: #64748b;
  font-size: 13px;
}

dd {
  margin: 3px 0 0;
  color: #1e293b;
  font-weight: 700;
  word-break: break-word;
}

.inviteBox {
  border-radius: 11px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.inviteBox p {
  min-height: 76px;
  margin: 0 0 12px;
  color: #475569;
  line-height: 1.6;
}

.inviteBox button {
  border-color: #38bdf8;
}

.statsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.statsGrid article,
.panel {
  border: 1px solid #e1e8f2;
  border-radius: 12px;
  background: #ffffff;
}

.statsGrid article {
  padding: 18px;
}

.statsGrid span {
  display: block;
  color: #64748b;
  font-size: 13px;
}

.statsGrid strong {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  color: #172033;
}

.providerDashboardPanel {
  margin-bottom: 18px;
}

.providerDashboardSummary {
  display: grid;
  grid-template-columns: 1.05fr 2fr;
  gap: 14px;
}

.providerDashboardMain,
.providerDashboardMetrics > div {
  border: 1px solid #dbe6f3;
  border-radius: 10px;
  background: #f8fafc;
}

.providerDashboardMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
}

.providerDashboardMain.ok {
  border-color: #86efac;
  background: #f0fdf4;
}

.providerDashboardMain.warn {
  border-color: #fde68a;
  background: #fffbeb;
}

.providerDashboardMain.muted {
  border-color: #fecaca;
  background: #fff1f2;
}

.providerDashboardMain span,
.providerDashboardMetrics span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.providerDashboardMain strong,
.providerDashboardMetrics strong {
  display: block;
  margin-top: 7px;
  color: #172033;
  font-size: 17px;
}

.providerDashboardMain small,
.providerDashboardMetrics small {
  display: block;
  margin-top: 7px;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.providerDashboardMain button {
  flex: 0 0 auto;
}

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

.providerDashboardMetrics > div {
  min-height: 94px;
  padding: 14px;
}

.actionStrip {
  gap: 10px;
  margin-bottom: 18px;
}

.actionStrip button {
  border-color: #dbe6f3;
  background: #ffffff;
  color: #1e293b;
}

.twoColumn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.panel {
  padding: 18px;
}

.panelTitle {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panelTitle h2 {
  margin: 0;
  font-size: 18px;
}

.panelTitle span {
  color: #64748b;
  font-size: 12px;
}

.panelActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.panelActions button {
  min-height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 11px;
  background: #ffffff;
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.panelActions button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.logList {
  display: grid;
  gap: 8px;
}

.logItem {
  justify-content: space-between;
  gap: 14px;
  border-radius: 9px;
  padding: 10px 12px;
  background: #f8fafc;
}

.logItem strong {
  display: block;
}

.logItem span,
.logItem time,
.empty {
  color: #64748b;
  font-size: 12px;
}

.rowCheck {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.rowCheck input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.tableWrap {
  overflow: auto;
}

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

.planCard {
  border: 1px solid #dbe6f3;
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
}

.planCard.disabled {
  background: #f1f5f9;
  color: #64748b;
}

.planCard strong,
.planCard span,
.planCard small {
  display: block;
}

.planCard strong {
  color: #172033;
}

.planCard span {
  margin-top: 4px;
  color: #15803d;
  font-size: 12px;
  font-weight: 800;
}

.planCard p {
  margin: 10px 0 4px;
  font-size: 18px;
  font-weight: 900;
}

.planCard small {
  color: #64748b;
}

.planCard .planStatus {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  border-radius: 999px;
  padding: 3px 7px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.planCard.disabled .planStatus {
  background: #e2e8f0;
  color: #64748b;
}

.planActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.planActions button {
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 10px;
  background: #ffffff;
  color: #0f766e;
  font-weight: 900;
  cursor: pointer;
}

.planForm {
  margin-top: 14px;
}

.providerPanel {
  margin-bottom: 18px;
}

.providerOperationsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.providerHealthAlerts,
.providerKeyRotations,
.providerFailures,
.providerConfigLogs {
  margin-top: 14px;
}

.providerOperationsGrid .providerHealthAlerts,
.providerOperationsGrid .providerKeyRotations {
  min-width: 0;
  margin-top: 0;
}

.compactTitle {
  margin-bottom: 8px;
}

.compactTitle h2 {
  font-size: 16px;
}

#contactPanel {
  margin-bottom: 18px;
}

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

.providerCard {
  min-height: 166px;
  border: 1px solid #dbe6f3;
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
  cursor: pointer;
}

.providerCard.active {
  border-color: #22c55e;
  background: #f0fdf4;
}

.providerCardTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.providerCardTitle strong {
  color: #172033;
}

.providerCardTitle span {
  border-radius: 999px;
  padding: 3px 7px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.providerCard p {
  min-height: 40px;
  margin: 10px 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}

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

.providerMeta span {
  border-radius: 999px;
  padding: 3px 7px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.providerMeta .ok {
  background: #dcfce7;
  color: #15803d;
}

.providerMeta .warn {
  background: #fef3c7;
  color: #b45309;
}

.providerMeta .muted {
  background: #fee2e2;
  color: #b91c1c;
}

.providerCard small {
  display: block;
  min-height: 18px;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.formGridWide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 12px;
}

.providerForm {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.quickReplyForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 10px;
}

.autoRuleForm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.usageFilterForm {
  grid-template-columns: minmax(140px, 0.8fr) minmax(220px, 1.4fr) minmax(120px, 0.7fr) repeat(3, minmax(92px, auto));
  margin-bottom: 10px;
}

.userFilterForm {
  grid-template-columns: minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(240px, 1.5fr) minmax(120px, 0.7fr) repeat(2, minmax(92px, auto));
  margin-bottom: 10px;
}

.securityFilterForm {
  grid-template-columns: minmax(110px, 0.7fr) minmax(220px, 1.5fr) minmax(90px, 0.6fr) repeat(3, minmax(92px, auto));
  margin-bottom: 10px;
}

.releaseUpdateEventFilterForm {
  grid-template-columns: minmax(120px, 0.8fr) minmax(110px, 0.7fr) minmax(220px, 1.4fr) minmax(80px, 0.55fr) repeat(2, minmax(92px, auto));
  margin-bottom: 10px;
}

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

.securityPanel {
  margin-top: 16px;
}

.adminProfilePanel {
  margin-top: 16px;
}

.adminProfileForm {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(96px, auto);
  align-items: end;
}

.securityForm {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(96px, auto);
  align-items: end;
}

.portalConfigLogs,
.appOperationLogs,
.appCommandLogs {
  margin-top: 14px;
}

.releaseStatusPanel {
  margin-top: 18px;
}

.releaseUpdateEvents {
  margin-top: 16px;
}

.releaseWhatsappLongRunForm {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
}

.releaseWhatsappFormIntro {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 4px;
}

.releaseWhatsappFormIntro strong {
  color: #172033;
  font-size: 14px;
}

.releaseWhatsappFormIntro span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.releaseWhatsappCheckGrid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.releaseWhatsappLongRunForm .checkLabel {
  min-height: 36px;
  margin-top: 0;
  padding: 8px 10px;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #f8fafc;
}

.releaseWhatsappLongRunForm .wideField {
  grid-column: 1 / -1;
}

.releaseWhatsappLongRunForm button {
  min-width: 148px;
  justify-self: start;
}

.releaseWhatsappSession {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2fr);
  gap: 10px;
  margin-top: 10px;
}

.releaseWhatsappSessionSummary,
.releaseWhatsappSessionRow {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
}

.releaseWhatsappSessionSummary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.releaseWhatsappSessionSummary span,
.releaseWhatsappSessionRow span {
  color: #64748b;
  font-size: 12px;
}

.releaseWhatsappSessionSummary strong,
.releaseWhatsappSessionRow strong {
  color: #172033;
  font-size: 13px;
}

.releaseWhatsappSessionSummary strong.running {
  color: #1d4ed8;
}

.releaseWhatsappSessionSummary strong.completed {
  color: #15803d;
}

.releaseWhatsappSessionRows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.releaseWhatsappSessionActions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.releaseWhatsappSessionActions button {
  min-width: 132px;
}

.releaseCommercialProgress,
.releaseMonitoring {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2fr);
  gap: 10px;
  margin: 10px 0;
}

.releaseActionGuide {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2fr);
  gap: 10px;
  margin: 10px 0 12px;
}

.releasePublicServerVerification,
.releaseCandidateGate,
.releaseCustomerDelivery,
.releasePostSigning,
.releaseSigningContinuation,
.releaseServerDeployment,
.releaseWhatsappLongRun {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2fr);
  gap: 10px;
  margin: 10px 0;
}

.releaseCommercialProgressSummary,
.releaseCommercialProgressRow,
.releaseMonitoringSummary,
.releaseMonitoringRow,
.releaseActionGuideSummary,
.releasePublicServerVerificationSummary,
.releasePublicServerVerificationRow,
.releaseCandidateGateSummary,
.releaseCandidateGateRow,
.releaseCustomerDeliverySummary,
.releaseCustomerDeliveryRow,
.releasePostSigningSummary,
.releasePostSigningRow,
.releaseSigningContinuationSummary,
.releaseSigningContinuationRow,
.releaseServerDeploymentSummary,
.releaseServerDeploymentRow,
.releaseWhatsappLongRunSummary,
.releaseWhatsappLongRunRow {
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.releaseCommercialProgressSummary span,
.releaseCommercialProgressRow span,
.releaseMonitoringSummary span,
.releaseMonitoringRow span,
.releaseActionGuideSummary span,
.releasePublicServerVerificationSummary span,
.releasePublicServerVerificationRow span,
.releaseCandidateGateSummary span,
.releaseCandidateGateRow span,
.releaseCustomerDeliverySummary span,
.releaseCustomerDeliveryRow span,
.releasePostSigningSummary span,
.releasePostSigningRow span,
.releaseSigningContinuationSummary span,
.releaseSigningContinuationRow span,
.releaseServerDeploymentSummary span,
.releaseServerDeploymentRow span,
.releaseWhatsappLongRunSummary span,
.releaseWhatsappLongRunRow span {
  display: block;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.releaseCommercialProgressSummary strong,
.releaseCommercialProgressRow strong,
.releaseMonitoringSummary strong,
.releaseMonitoringRow strong,
.releaseActionGuideSummary strong,
.releasePublicServerVerificationSummary strong,
.releasePublicServerVerificationRow strong,
.releaseCandidateGateSummary strong,
.releaseCandidateGateRow strong,
.releaseCustomerDeliverySummary strong,
.releaseCustomerDeliveryRow strong,
.releasePostSigningSummary strong,
.releasePostSigningRow strong,
.releaseSigningContinuationSummary strong,
.releaseSigningContinuationRow strong,
.releaseServerDeploymentSummary strong,
.releaseServerDeploymentRow strong,
.releaseWhatsappLongRunSummary strong,
.releaseWhatsappLongRunRow strong {
  display: block;
  margin-top: 5px;
  color: #172033;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.releaseCommercialProgressSummary strong.ok,
.releaseMonitoringSummary strong.ok {
  color: #15803d;
}

.releaseCommercialProgressSummary strong.warn,
.releaseMonitoringSummary strong.warn,
.releaseActionGuideSummary strong.warn,
.releasePublicServerVerificationSummary strong.warn,
.releaseCandidateGateSummary strong.warn,
.releaseCustomerDeliverySummary strong.warn,
.releasePostSigningSummary strong.warn,
.releaseSigningContinuationSummary strong.warn,
.releaseServerDeploymentSummary strong.warn,
.releaseWhatsappLongRunSummary strong.warn {
  color: #b45309;
}

.releaseCommercialProgressSummary strong.muted,
.releaseMonitoringSummary strong.muted,
.releaseActionGuideSummary strong.muted,
.releasePublicServerVerificationSummary strong.muted,
.releaseCandidateGateSummary strong.muted,
.releaseCustomerDeliverySummary strong.muted,
.releasePostSigningSummary strong.muted,
.releaseSigningContinuationSummary strong.muted,
.releaseServerDeploymentSummary strong.muted,
.releaseWhatsappLongRunSummary strong.muted {
  color: #b91c1c;
}

.releaseCandidateGateSummary strong.ok,
.releaseActionGuideSummary strong.ok,
.releasePublicServerVerificationSummary strong.ok,
.releaseCustomerDeliverySummary strong.ok,
.releasePostSigningSummary strong.ok,
.releaseSigningContinuationSummary strong.ok,
.releaseServerDeploymentSummary strong.ok,
.releaseWhatsappLongRunSummary strong.ok {
  color: #15803d;
}

.releaseCommercialProgressRows,
.releaseMonitoringRows,
.releaseActionGuideRows,
.releasePublicServerVerificationRows,
.releaseCandidateGateRows,
.releaseCustomerDeliveryRows,
.releasePostSigningRows,
.releaseSigningContinuationRows,
.releaseServerDeploymentRows,
.releaseWhatsappLongRunRows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.releaseCommercialProgressTrack {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4eaf2;
}

.releaseCommercialProgressTrack i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #16a34a);
  transition: width 180ms ease;
}

.releaseActionGuideRows {
  grid-template-columns: 1fr;
}

.releaseActionGuideItem,
.releaseActionGuideEmpty {
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #fff;
}

.releaseActionGuideItem {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px;
}

.releaseActionGuideItem > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.releaseActionGuideItem.done > span {
  background: #dcfce7;
  color: #15803d;
}

.releaseActionGuideItem.current {
  border-color: #93c5fd;
  background: #eff6ff;
}

.releaseActionGuideItem.current > span {
  background: #dbeafe;
  color: #1d4ed8;
}

.releaseActionGuideItem strong,
.releaseActionGuideItem p,
.releaseActionGuideItem code,
.releaseActionGuideItem small,
.releaseActionGuideItem em {
  overflow-wrap: anywhere;
}

.releaseActionGuideItem strong {
  display: block;
  color: #172033;
  font-size: 13px;
  line-height: 1.35;
}

.releaseActionGuideItem p {
  margin: 4px 0 0;
  color: #475467;
  font-size: 12px;
  line-height: 1.45;
}

.releaseActionGuideItem code,
.releaseActionGuideItem small {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.releaseActionGuideItem code {
  padding: 5px 7px;
  border-radius: 6px;
  background: #eef2f7;
  color: #172033;
}

.releaseActionGuideItem em {
  align-self: start;
  min-width: 72px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475467;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.releaseActionGuideItem.done em {
  background: #dcfce7;
  color: #15803d;
}

.releaseActionGuideItem.current em {
  background: #dbeafe;
  color: #1d4ed8;
}

.releaseActionGuideEmpty {
  padding: 12px;
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

.releaseUpdateEventItem {
  align-items: flex-start;
}

.releaseUpdateEventItem.failed {
  border-left: 3px solid #ef4444;
}

.releaseUpdateEventItem span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

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

.releaseStatusRow {
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.releaseStatusRow span,
.releaseStatusRow strong {
  display: block;
}

.releaseStatusRow span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.releaseStatusRow strong {
  margin-top: 5px;
  color: #172033;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

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

.miniStats article {
  border: 1px solid #e4eaf2;
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}

.miniStats span,
.miniStats strong {
  display: block;
}

.miniStats span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.miniStats strong {
  margin-top: 4px;
  color: #172033;
  font-size: 18px;
  font-weight: 900;
}

.contactEditForm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e4eaf2;
}

.supportTicketFilterForm {
  grid-template-columns: 140px 140px 150px minmax(220px, 1fr) 110px 90px 90px 100px;
  margin-bottom: 12px;
}

.supportTicketUpdateForm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e4eaf2;
}

.supportTicketEditIntro {
  display: grid;
  gap: 5px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 12px;
  background: #f8fbff;
}

.supportTicketEditIntro strong {
  color: #172033;
  font-size: 15px;
}

.supportTicketEditIntro span,
.supportTicketEditIntro p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}

.supportTicketDiagnostics {
  display: grid;
  gap: 6px;
}

.supportTicketDiagnostics pre {
  max-height: 220px;
  margin: 0;
  overflow: auto;
  border: 1px solid #dbe6f3;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
  color: #172033;
  white-space: pre-wrap;
  word-break: break-word;
}

.wideField {
  grid-column: span 2;
}

.formGrid label {
  display: block;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.formGrid .checkField {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 18px;
}

.formGrid .checkField input {
  width: 16px;
  height: 16px;
  margin-top: 0;
}

.formGrid input,
.formGrid select,
.formGrid textarea,
.providerTest textarea,
.providerTest select,
.inlineControl input {
  width: 100%;
  height: 36px;
  margin-top: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 9px;
  outline: none;
}

.formGrid input:focus,
.formGrid select:focus,
.formGrid textarea:focus,
.providerTest textarea:focus,
.providerTest select:focus,
.inlineControl input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.checkLabel {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 22px;
}

.formGrid .checkLabel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.formGrid button,
.providerTest button,
.inlineControl button {
  min-height: 36px;
  border: 1px solid #16a34a;
  border-radius: 7px;
  padding: 0 12px;
  background: #22c55e;
  color: #07130b;
  font-weight: 900;
  cursor: pointer;
}

.formGrid .secondaryButton {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #0f766e;
}

.formGrid button {
  align-self: end;
}

.formGrid button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.providerTest {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 140px 110px minmax(220px, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 12px;
}

.providerTest textarea {
  min-height: 78px;
  height: auto;
  padding: 9px;
  resize: vertical;
  font: inherit;
}

.formGrid textarea {
  min-height: 86px;
  height: auto;
  padding: 9px;
  resize: vertical;
  font: inherit;
}

.providerTest button {
  margin-top: 6px;
}

.providerTest pre {
  min-height: 78px;
  margin: 6px 0 0;
  border: 1px solid #dbe6f3;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
  color: #172033;
  white-space: pre-wrap;
  word-break: break-word;
}

.inlineMessage {
  min-height: 24px;
  margin: 10px 0 4px;
  color: #15803d;
  font-size: 13px;
  font-weight: 700;
}

.inlineControl {
  display: grid;
  grid-template-columns: 110px 130px repeat(2, 58px);
  align-items: end;
  gap: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  border-bottom: 1px solid #e4eaf2;
  padding: 11px 8px;
  text-align: left;
  white-space: nowrap;
}

.appInstancePanel td strong,
.appInstancePanel td span,
.appDiagnosticPanel td strong,
.appDiagnosticPanel td span {
  display: block;
}

.appInstancePanel td span,
.appDiagnosticPanel td span {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.rowActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rowActionBtn {
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #0f766e;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 9px;
  white-space: nowrap;
}

.rowActionBtn.warning {
  border-color: #fed7aa;
  color: #c2410c;
}

.rowActionBtn:disabled {
  cursor: wait;
  opacity: 0.6;
}

th {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

td strong {
  display: block;
  color: #172033;
}

td span {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
}

.traceFocusRow td {
  background: #ecfdf5;
  box-shadow: inset 3px 0 0 #22c55e;
}

.noteCell {
  max-width: 340px;
  white-space: normal;
}

.noteCell strong,
.noteCell span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.noteCell strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 130px;
}

.tagList span {
  border-radius: 999px;
  padding: 3px 7px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 800;
}

.replyList {
  display: grid;
  gap: 8px;
}

.replyItem {
  border: 1px solid #dbe6f3;
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
}

.replyItem strong,
.replyItem span {
  display: block;
}

.replyItem span {
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
}

.replyItem p {
  margin: 10px 0;
  color: #253044;
  line-height: 1.55;
  white-space: pre-wrap;
}

.rowButton,
.replyActions button {
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 10px;
  background: #ffffff;
  color: #0f766e;
  font-weight: 800;
  cursor: pointer;
}

.replyActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.replyActions .dangerButton {
  border-color: #fecaca;
  color: #b91c1c;
}

.ruleList {
  display: grid;
  gap: 10px;
}

.ruleItem {
  border: 1px solid #dbe6f3;
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
}

.ruleItem.disabled {
  opacity: 0.7;
}

.ruleHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ruleHeader strong,
.ruleHeader span {
  display: block;
}

.ruleHeader strong {
  color: #172033;
}

.ruleHeader div span {
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
}

.ruleHeader > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 900;
}

.ruleHeader > span.ok {
  background: #dcfce7;
  color: #15803d;
}

.ruleHeader > span.muted {
  background: #fee2e2;
  color: #b91c1c;
}

.ruleItem p {
  margin: 10px 0;
  color: #253044;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 1100px) {
  .topNav {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .accountChip {
    display: none;
  }

  .profileCard,
  .providerDashboardSummary,
  .providerOperationsGrid,
  .releaseCommercialProgress,
  .releaseMonitoring,
  .releaseActionGuide,
  .releasePublicServerVerification,
  .releaseCandidateGate,
  .releaseCustomerDelivery,
  .releasePostSigning,
  .releaseSigningContinuation,
  .releaseServerDeployment,
  .releaseWhatsappLongRun,
  .releaseWhatsappSession,
  .twoColumn {
    grid-template-columns: 1fr;
  }

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

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

  .releaseCommercialProgressRows,
  .releaseMonitoringRows,
  .releaseActionGuideRows,
  .releasePublicServerVerificationRows,
  .releaseCandidateGateRows,
  .releaseCustomerDeliveryRows,
  .releasePostSigningRows,
  .releaseSigningContinuationRows,
  .releaseServerDeploymentRows,
  .releaseWhatsappLongRunRows,
  .releaseWhatsappSessionRows,
  .releaseWhatsappLongRunForm,
  .releaseWhatsappCheckGrid {
    grid-template-columns: 1fr;
  }

  .releaseWhatsappFormIntro {
    display: block;
  }

  .releaseWhatsappFormIntro span {
    display: block;
    margin-top: 3px;
    text-align: left;
  }

  .formGrid,
  .formGridWide,
  .providerForm,
  .contactEditForm,
  .autoRuleForm,
  .usageFilterForm,
  .userFilterForm,
  .portalConfigForm,
  .providerGrid,
  .providerTest,
  .planGrid {
    grid-template-columns: 1fr;
  }

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

  .wideField {
    grid-column: span 1;
  }
}